method chooser for send

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

@@ -1,71 +0,0 @@
-import { createMemo, Match, Switch } from "solid-js";
-
-import { StyledRadioGroup } from "~/components";
-import { useMegaStore } from "~/state/megaStore";
-
-type SendSource = "lightning" | "onchain";
-
-export function MethodChooser(props: {
-    source: SendSource;
-    setSource: (source: string) => void;
-    both?: boolean;
-}) {
-    const [store, _actions] = useMegaStore();
-
-    const methods = createMemo(() => {
-        const lnBalance =
-            (store.balance?.lightning || 0n) +
-            (store.balance?.federation || 0n);
-        const onchainBalance =
-            (store.balance?.confirmed || 0n) +
-            (store.balance?.unconfirmed || 0n);
-        return [
-            {
-                value: "lightning",
-                label: "Lightning Balance",
-                caption:
-                    lnBalance > 0n
-                        ? `${lnBalance.toLocaleString()} SATS`
-                        : "No balance",
-                disabled: lnBalance === 0n
-            },
-            {
-                value: "onchain",
-                label: "On-chain Balance",
-                caption:
-                    onchainBalance > 0n
-                        ? `${onchainBalance.toLocaleString()} SATS`
-                        : "No balance",
-                disabled: onchainBalance === 0n
-            }
-        ];
-    });
-    return (
-        <Switch>
-            <Match when={props.both}>
-                <StyledRadioGroup
-                    accent="white"
-                    initialValue={props.source}
-                    onValueChange={props.setSource}
-                    choices={methods()}
-                />
-            </Match>
-            <Match when={props.source === "lightning"}>
-                <StyledRadioGroup
-                    accent="white"
-                    initialValue={props.source}
-                    onValueChange={props.setSource}
-                    choices={[methods()[0]]}
-                />
-            </Match>
-            <Match when={props.source === "onchain"}>
-                <StyledRadioGroup
-                    accent="white"
-                    initialValue={props.source}
-                    onValueChange={props.setSource}
-                    choices={[methods()[1]]}
-                />
-            </Match>
-        </Switch>
-    );
-}

src/components/index.ts

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