method chooser for send

Author: futurepaul

src/components/AmountEditable.tsx

@@ -7,8 +7,7 @@ import {
     Show
 } from "solid-js";
 
-import { AmountSmall, BigMoney } from "~/components";
-import { useI18n } from "~/i18n/context";
+import { AmountSats, BigMoney } from "~/components";
 import { useMegaStore } from "~/state/megaStore";
 import {
     btcFloatRounding,
@@ -19,17 +18,32 @@ import {
     toDisplayHandleNaN
 } from "~/utils";
 
+export type MethodChoice = {
+    method: "lightning" | "onchain";
+    maxAmountSats?: bigint;
+};
+
+// Make sure to update this when we get the fedi option in here!
+function methodToIcon(method: MethodChoice["method"]) {
+    if (method === "lightning") {
+        return "lightning";
+    } else if (method === "onchain") {
+        return "chain";
+    }
+}
+
 export const AmountEditable: ParentComponent<{
     initialAmountSats: string | bigint;
     setAmountSats: (s: bigint) => void;
-    maxAmountSats?: bigint;
     fee?: string;
     frozenAmount?: boolean;
     onSubmit?: () => void;
+    activeMethod?: MethodChoice;
+    methods?: MethodChoice[];
+    setChosenMethod?: (method: MethodChoice) => void;
 }> = (props) => {
     const [state, _actions] = useMegaStore();
     const [mode, setMode] = createSignal<"fiat" | "sats">("sats");
-    const i18n = useI18n();
     const [localSats, setLocalSats] = createSignal(
         props.initialAmountSats.toString() || "0"
     );
@@ -229,12 +243,47 @@ export const AmountEditable: ParentComponent<{
                     onFocus={() => focus()}
                 />
             </div>
-            <Show when={props.maxAmountSats}>
-                <p class="flex gap-2 px-4 py-2 text-sm font-light text-m-grey-400 md:text-base">
-                    {`${i18n.t("receive.amount_editable.balance")} `}
-                    <AmountSmall amountSats={props.maxAmountSats!} />
-                </p>
+            <Show when={props.methods?.length && props.activeMethod}>
+                <MethodChooser
+                    methods={props.methods!}
+                    activeMethod={props.activeMethod!}
+                    setChosenMethod={props.setChosenMethod}
+                />
             </Show>
         </div>
     );
 };
+
+function MethodChooser(props: {
+    activeMethod: MethodChoice;
+    methods: MethodChoice[];
+    setChosenMethod?: (method: MethodChoice) => void;
+}) {
+    function setNextMethod() {
+        const activeIndex = props.methods.findIndex(
+            (m) => m.method === props.activeMethod.method
+        );
+        const nextMethod =
+            props.methods[
+                activeIndex === props.methods.length - 1 ? 0 : activeIndex + 1
+            ];
+        props.setChosenMethod && props.setChosenMethod(nextMethod);
+    }
+    return (
+        <button
+            onClick={setNextMethod}
+            disabled={props.methods.length === 1}
+            class="flex gap-2 rounded px-2 py-1 text-sm font-light text-m-grey-400 md:text-base"
+            classList={{
+                "border-b border-t border-b-white/10 border-t-white/50 bg-neutral-700":
+                    props.methods?.length > 1
+            }}
+        >
+            <AmountSats
+                amountSats={props.activeMethod.maxAmountSats!}
+                denominationSize="sm"
+                icon={methodToIcon(props.activeMethod.method)}
+            />
+        </button>
+    );
+}

src/components/MethodChooser.tsx

@@ -49,5 +49,4 @@ export * from "./BigMoney";
 export * from "./FeeDisplay";
 export * from "./ReceiveWarnings";
 export * from "./SimpleInput";
-export * from "./MethodChooser";
 export * from "./LabelCircle";

src/components/index.ts

@@ -33,6 +33,7 @@ import {
     MegaCheck,
     MegaClock,
     MegaEx,
+    MethodChoice,
     MutinyWalletGuard,
     NavBar,
     showToast,
@@ -637,6 +638,59 @@ export function Send() {
         );
     });
 
+    const lightningMethod = createMemo<MethodChoice>(() => {
+        return {
+            method: "lightning",
+            maxAmountSats: maxLightning()
+        };
+    });
+
+    const onchainMethod = createMemo<MethodChoice>(() => {
+        return {
+            method: "onchain",
+            maxAmountSats: maxOnchain()
+        };
+    });
+
+    const sendMethods = createMemo<MethodChoice[]>(() => {
+        if (lnAddress() || lnurlp() || nodePubkey()) {
+            return [lightningMethod()];
+        }
+
+        if (invoice() && address()) {
+            return [lightningMethod(), onchainMethod()];
+        }
+
+        if (invoice()) {
+            return [lightningMethod()];
+        }
+
+        if (address()) {
+            return [onchainMethod()];
+        }
+
+        // We should never get here
+        console.error("No send methods found");
+
+        return [];
+    });
+
+    function setSourceFromMethod(method: MethodChoice) {
+        if (method.method === "lightning") {
+            setSource("lightning");
+        } else if (method.method === "onchain") {
+            setSource("onchain");
+        }
+    }
+
+    const activeMethod = createMemo(() => {
+        if (source() === "lightning") {
+            return lightningMethod();
+        } else if (source() === "onchain") {
+            return onchainMethod();
+        }
+    });
+
     return (
         <MutinyWalletGuard>
             <DefaultMain>
@@ -726,23 +780,27 @@ export function Send() {
                         <AmountEditable
                             initialAmountSats={amountSats()}
                             setAmountSats={setAmountInput}
-                            maxAmountSats={maxAmountSats()}
                             fee={feeEstimate()?.toString()}
                             onSubmit={() =>
                                 sendButtonDisabled() ? undefined : handleSend()
                             }
+                            activeMethod={activeMethod()}
+                            methods={sendMethods()}
+                            setChosenMethod={setSourceFromMethod}
                         />
                     </Show>
                     <Show when={!isAmtEditable()}>
                         <AmountEditable
                             initialAmountSats={amountSats()}
                             setAmountSats={setAmountInput}
-                            maxAmountSats={maxAmountSats()}
                             fee={feeEstimate()?.toString()}
                             frozenAmount={true}
                             onSubmit={() =>
                                 sendButtonDisabled() ? undefined : handleSend()
                             }
+                            activeMethod={activeMethod()}
+                            methods={sendMethods()}
+                            setChosenMethod={setSourceFromMethod}
                         />
                     </Show>
                     <Show when={feeEstimate()}>