more warning cases and show explanation on success

src/components/AmountEditable.tsx

@@ -1,4 +1,4 @@
-import { For, ParentComponent, Show, createMemo, createSignal } from "solid-js";
+import { For, ParentComponent, Show, createMemo, createResource, createSignal } from "solid-js";
 import { Button } from "~/components/layout";
 import { useMegaStore } from "~/state/megaStore";
 import { satsToUsd } from "~/utils/conversions";
@@ -46,10 +46,34 @@ export const AmountEditable: ParentComponent<{
 
   const [displayAmount, setDisplayAmount] = createSignal(props.initialAmountSats || "0");
 
-  const shouldWarn = createMemo(() => {
+  const [inboundCapacity] = createResource(async () => {
-    return (store.balance?.lightning || 0n) < 10000n;
+    const channels = await store.mutiny_wallet?.list_channels();
+    let inbound = 0;
+
+    for (const channel of channels) {
+      inbound += channel.size - (channel.balance + channel.reserve);
+    }
+
+    return inbound;
   });
 
+  const warningText = () => {
+    if ((store.balance?.lightning || 0n) === 0n) {
+      return "Your first lightning receive needs to be 10,000 sats or greater.";
+    }
+
+    const parsed = Number(displayAmount());
+    if (isNaN(parsed)) {
+      return undefined;
+    }
+
+    if (parsed > (inboundCapacity() || 0)) {
+      return "A lightning setup fee will be charged if paid over lightning.";
+    }
+
+    return undefined;
+  };
+
   let inputRef!: HTMLInputElement;
 
   function handleCharacterInput(character: string) {
@@ -202,10 +226,8 @@ export const AmountEditable: ParentComponent<{
                   &#8776; {amountInUsd()} <span class="text-sm">USD</span>
                 </h2>
               </div>
-              <Show when={shouldWarn()}>
+              <Show when={warningText()}>
-                <InfoBox accent="green">
+                <InfoBox accent="green">{warningText()}</InfoBox>
-                  Your first lightning receive needs to be 10,000 sats or greater.
-                </InfoBox>
               </Show>
               <div class="flex justify-center gap-4 my-2">
                 <For each={FIXED_AMOUNTS}>

src/routes/Receive.tsx

@@ -75,8 +75,8 @@ type PaidState = "lightning_paid" | "onchain_paid";
 
 function FeeWarning(props: { fee: bigint; flavor: ReceiveFlavor }) {
   return (
-    // TODO: probably won't always be fixed a 1?
+    // TODO: probably won't always be fixed 2500?
-    <Show when={props.fee > 1n}>
+    <Show when={props.fee > 1000n}>
       <Switch>
         <Match when={props.flavor === "unified"}>
           <InfoBox accent="green">
@@ -95,6 +95,18 @@ function FeeWarning(props: { fee: bigint; flavor: ReceiveFlavor }) {
   );
 }
 
+function FeeExplanation(props: { fee: bigint }) {
+  return (
+    // TODO: probably won't always be a fixed 2500?
+    <Show when={props.fee > 1000n}>
+      <InfoBox accent="green">
+        A lightning setup fee of <AmountSmall amountSats={props.fee} /> was charged for this
+        receive.
+      </InfoBox>
+    </Show>
+  );
+}
+
 export default function Receive() {
   const [state, _actions] = useMegaStore();
   const navigate = useNavigate();
@@ -283,7 +295,19 @@ export default function Receive() {
             <Match when={unified() && receiveState() === "show"}>
               <FeeWarning fee={lspFee()} flavor={flavor()} />
               <CopyableQR value={receiveString() ?? ""} />
-              <p class="text-neutral-400 text-center">Show or share this code with the sender</p>
+              <p class="text-neutral-400 text-center">
+                <Switch>
+                  <Match when={flavor() === "lightning"}>
+                    Show or share this invoice with the sender.
+                  </Match>
+                  <Match when={flavor() === "onchain"}>
+                    Show or share this address with the sender.
+                  </Match>
+                  <Match when={flavor() === "unified"}>
+                    Show or share this code with the sender. Sender decides method of payment.
+                  </Match>
+                </Switch>
+              </p>
               <StyledRadioGroup
                 small
                 value={flavor()}
@@ -306,6 +330,7 @@ export default function Receive() {
                 }}
               >
                 <MegaCheck />
+                <FeeExplanation fee={lspFee()} />
                 <Amount amountSats={paymentInvoice()?.amount_sats} showFiat centered />
               </SuccessModal>
             </Match>