add a "why" to fee warnings

src/components/AmountEditable.tsx

@@ -16,6 +16,7 @@ import { InlineAmount } from "./AmountCard";
 import { DIALOG_CONTENT, DIALOG_POSITIONER } from "~/styles/dialogs";
 import { InfoBox } from "./InfoBox";
 import { Network } from "~/logic/mutinyWalletSetup";
+import { FeesModal } from "./MoreInfoModal";
 
 const CHARACTERS = [
     "1",
@@ -172,9 +173,9 @@ export const AmountEditable: ParentComponent<{
         if ((state.balance?.lightning || 0n) === 0n) {
             const network = state.mutiny_wallet?.get_network() as Network;
             if (network === "bitcoin") {
-                return "Your first lightning receive needs to be 50,000 sats or greater.";
+                return "Your first lightning receive needs to be 50,000 sats or greater. A setup fee will be deducted from the requested amount.";
             } else {
-                return "Your first lightning receive needs to be 10,000 sats or greater.";
+                return "Your first lightning receive needs to be 10,000 sats or greater. A setup fee will be deducted from the requested amount.";
             }
         }
 
@@ -357,8 +358,8 @@ export const AmountEditable: ParentComponent<{
                                 />
                             </div>
                             <Show when={warningText()}>
-                                <InfoBox accent="green">
-                                    {warningText()}
+                                <InfoBox accent="blue">
+                                    {warningText()} <FeesModal />
                                 </InfoBox>
                             </Show>
                             <div class="flex justify-center gap-4 my-2">

src/components/App.tsx

@@ -51,7 +51,7 @@ export default function App() {
                         </A>
                     </Show>
                 </Card>
-                <p class="self-center text-neutral-500 mt-4">
+                <p class="self-center text-neutral-500 mt-4 font-normal">
                     Bugs? Feedback?{" "}
                     <span class="text-neutral-400">
                         <ExternalLink href="https://github.com/MutinyWallet/mutiny-web/issues">

src/components/InfoBox.tsx

@@ -9,7 +9,7 @@ export const InfoBox: ParentComponent<{
             class="grid grid-cols-[auto_minmax(0,_1fr)] rounded-xl px-4 py-2 md:p-4 gap-4 bg-neutral-950/50 border"
             classList={{
                 "border-m-red": props.accent === "red",
-                "border-m-blue": props.accent === "blue",
+                "border-m-blue bg-m-blue/10": props.accent === "blue",
                 "border-m-green": props.accent === "green",
                 "border-white": props.accent === "white"
             }}
@@ -18,7 +18,7 @@ export const InfoBox: ParentComponent<{
                 <img src={info} alt="info" class="w-8 h-8" />
             </div>
             <div class="flex items-center">
-                <p class="text-base font-light">{props.children}</p>
+                <p class="text-sm font-light">{props.children}</p>
             </div>
         </div>
     );

src/components/MoreInfoModal.tsx

@@ -0,0 +1,60 @@
+import { Dialog } from "@kobalte/core";
+import { ParentComponent, createSignal } from "solid-js";
+import { DIALOG_CONTENT, DIALOG_POSITIONER, OVERLAY } from "./DetailsModal";
+import { ModalCloseButton, SmallHeader } from "./layout";
+import { ExternalLink } from "./layout/ExternalLink";
+
+export function FeesModal() {
+    return (
+        <MoreInfoModal title="What's with the fees?" linkText="Why?">
+            <p>
+                Mutiny is a self-custodial wallet. To initiate a lightning
+                payment we must open a lightning channel, which requires a
+                minimum amount and a setup fee.
+            </p>
+            <p>
+                Future payments, both send and recieve, will only incur normal
+                network fees and a nominal service fee unless your channel runs
+                out of inbound capacity.
+            </p>
+            <p>
+                <ExternalLink href="https://github.com/MutinyWallet/mutiny-web/wiki/Understanding-liquidity">
+                    Learn more about liquidity
+                </ExternalLink>
+            </p>
+        </MoreInfoModal>
+    );
+}
+
+export const MoreInfoModal: ParentComponent<{
+    linkText: string;
+    title: string;
+}> = (props) => {
+    const [open, setOpen] = createSignal(false);
+
+    return (
+        <Dialog.Root open={open()} onOpenChange={setOpen}>
+            <Dialog.Trigger>
+                <button class="underline decoration-light-text hover:decoration-white font-semibold">
+                    {props.linkText}
+                </button>
+            </Dialog.Trigger>
+            <Dialog.Portal>
+                <Dialog.Overlay class={OVERLAY} />
+                <div class={DIALOG_POSITIONER}>
+                    <Dialog.Content class={DIALOG_CONTENT}>
+                        <Dialog.Title class="flex justify-between mb-2 items-center">
+                            <SmallHeader>{props.title}</SmallHeader>
+                            <Dialog.CloseButton>
+                                <ModalCloseButton />
+                            </Dialog.CloseButton>
+                        </Dialog.Title>
+                        <Dialog.Description class="flex flex-col gap-4">
+                            <div>{props.children}</div>
+                        </Dialog.Description>
+                    </Dialog.Content>
+                </div>
+            </Dialog.Portal>
+        </Dialog.Root>
+    );
+};

src/components/layout/index.tsx

@@ -185,7 +185,7 @@ export const SmallAmount: ParentComponent<{
 };
 
 export const NiceP: ParentComponent = (props) => {
-    return <p class="text-xl font-light">{props.children}</p>;
+    return <p class="text-xl font-light text-neutral-200">{props.children}</p>;
 };
 
 export const TinyText: ParentComponent = (props) => {

src/root.css

@@ -24,6 +24,14 @@ a {
     @apply underline decoration-light-text hover:decoration-white;
 }
 
+p {
+    @apply font-light;
+}
+
+p:not(:last-child) {
+    @apply mb-2;
+}
+
 #video-container {
     position: relative;
     width: max-content;

src/routes/Receive.tsx

@@ -42,6 +42,7 @@ import { MegaCheck } from "~/components/successfail/MegaCheck";
 import { ExternalLink } from "~/components/layout/ExternalLink";
 import { CopyableQR } from "~/components/CopyableQR";
 import { InfoBox } from "~/components/InfoBox";
+import { FeesModal } from "~/components/MoreInfoModal";
 
 type OnChainTx = {
     transaction: {
@@ -83,17 +84,17 @@ function FeeWarning(props: { fee: bigint; flavor: ReceiveFlavor }) {
         <Show when={props.fee > 1000n}>
             <Switch>
                 <Match when={props.flavor === "unified"}>
-                    <InfoBox accent="green">
+                    <InfoBox accent="blue">
                         A lightning setup fee of{" "}
                         <AmountSmall amountSats={props.fee} /> will be charged
-                        if paid over lightning.
+                        if paid over lightning. <FeesModal />
                     </InfoBox>
                 </Match>
                 <Match when={props.flavor === "lightning"}>
-                    <InfoBox accent="green">
+                    <InfoBox accent="blue">
                         A lightning setup fee of{" "}
                         <AmountSmall amountSats={props.fee} /> will be charged
-                        for this receive.
+                        for this receive. <FeesModal />
                     </InfoBox>
                 </Match>
             </Switch>
@@ -106,17 +107,17 @@ function FeeExplanation(props: { fee: bigint }) {
         // TODO: probably won't always be a fixed 2500?
         <Switch>
             <Match when={props.fee > 1000n}>
-                <InfoBox accent="green">
+                <InfoBox accent="blue">
                     A lightning setup fee of{" "}
                     <AmountSmall amountSats={props.fee} /> was charged for this
-                    receive.
+                    receive. <FeesModal />
                 </InfoBox>
             </Match>
             <Match when={props.fee > 0n}>
-                <InfoBox accent="green">
+                <InfoBox accent="blue">
                     A lightning service fee of{" "}
                     <AmountSmall amountSats={props.fee} /> was charged for this
-                    receive.
+                    receive. <FeesModal />
                 </InfoBox>
             </Match>
         </Switch>