Merge pull request #141 from MutinyWallet/nwc

Add Nostr wallet connect modal

src/components/KitchenSink.tsx

@@ -1,6 +1,7 @@
 import { useMegaStore } from "~/state/megaStore";
 import { Card, Hr, SmallHeader, Button, InnerCard, VStack } from "~/components/layout";
 import PeerConnectModal from "~/components/PeerConnectModal";
+import NostrWalletConnectModal from "~/components/NostrWalletConnectModal";
 import { For, Show, Suspense, createEffect, createResource, createSignal, onCleanup } from "solid-js";
 import { MutinyChannel, MutinyPeer } from "@mutinywallet/mutiny-wasm";
 import { Collapsible, TextField } from "@kobalte/core";
@@ -363,6 +364,8 @@ export default function KitchenSink() {
         <Card title="Kitchen Sink">
             <PeerConnectModal />
             <Hr />
+            <NostrWalletConnectModal />
+            <Hr />
             <PeersList />
             <Hr />
             <ChannelsList />

src/components/NostrWalletConnectModal.tsx

@@ -0,0 +1,69 @@
+import {QRCodeSVG} from "solid-qr-code";
+import {As, Dialog} from "@kobalte/core";
+import {Button, Card} from "~/components/layout";
+import {useMegaStore} from "~/state/megaStore";
+import {createResource, Show} from "solid-js";
+
+const OVERLAY = "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+const DIALOG_POSITIONER = "fixed inset-0 z-50 flex items-center justify-center"
+const DIALOG_CONTENT = "w-[80vw] max-w-[400px] max-h-[100dvh] overflow-y-auto disable-scrollbars p-4 bg-gray/50 backdrop-blur-md shadow-xl rounded-xl border border-white/10"
+const SMALL_HEADER = "text-sm font-semibold uppercase"
+
+export default function NostrWalletConnectModal() {
+    const [state, actions] = useMegaStore()
+
+    const getConnectionURI = () => {
+        if (state.mutiny_wallet) {
+            return state.mutiny_wallet.get_nwc_uri()
+        } else {
+            return undefined
+        }
+    };
+
+    const [connectionURI] = createResource(getConnectionURI);
+
+    const toggleNwc = async () => {
+        if (state.nwc_enabled) {
+            actions.setNwc(false)
+            window.location.reload()
+        } else {
+            actions.setNwc(true)
+            const nodes = await state.mutiny_wallet?.list_nodes();
+            const firstNode = nodes[0] as string || "";
+            await state.mutiny_wallet?.start_nostr_wallet_connect(firstNode);
+        }
+    }
+
+    // TODO: a lot of this markup is probably reusable as a "Modal" component
+    return (
+        <Dialog.Root>
+            <Dialog.Trigger asChild>
+                <As component={Button}>Show Nostr Wallet Connect URI</As>
+            </Dialog.Trigger>
+            <Dialog.Portal>
+                <Dialog.Overlay class={OVERLAY} />
+                <div class={DIALOG_POSITIONER}>
+                    <Dialog.Content class={DIALOG_CONTENT}>
+                        <div class="flex justify-between mb-2">
+                            <Dialog.Title class={SMALL_HEADER}>Nostr Wallet Connect</Dialog.Title>
+                            <Dialog.CloseButton class="dialog__close-button">
+                                <code>X</code>
+                            </Dialog.CloseButton>
+                        </div>
+                        <Dialog.Description class="flex flex-col gap-4">
+                            <Show when={connectionURI()}>
+                                <div class="w-full bg-white rounded-xl">
+                                    <QRCodeSVG value={connectionURI() || ""} class="w-full h-full p-8 max-h-[400px]" />
+                                </div>
+                                <Card>
+                                    <code class="break-all">{connectionURI() || ""}</code>
+                                </Card>
+                            </Show>
+                            <Button onClick={toggleNwc}>{state.nwc_enabled ? "Disable" : "Enable"}</Button>
+                        </Dialog.Description>
+                    </Dialog.Content>
+                </div>
+            </Dialog.Portal>
+        </Dialog.Root >
+    )
+}

src/state/megaStore.tsx

@@ -26,6 +26,7 @@ export type MegaStore = [{
     has_backed_up: boolean,
     dismissed_restore_prompt: boolean,
     wallet_loading: boolean
+    nwc_enabled: boolean
 }, {
     fetchUserStatus(): Promise<UserStatus>;
     setupMutinyWallet(settings?: MutinyWalletSettingStrings): Promise<void>;
@@ -36,6 +37,7 @@ export type MegaStore = [{
     dismissRestorePrompt(): void;
     setHasBackedUp(): void;
     listTags(): Promise<MutinyTagItem[]>;
+    setNwc(enabled: boolean): void;
 }];
 
 export const Provider: ParentComponent = (props) => {
@@ -52,7 +54,8 @@ export const Provider: ParentComponent = (props) => {
         last_sync: undefined as number | undefined,
         is_syncing: false,
         dismissed_restore_prompt: localStorage.getItem("dismissed_restore_prompt") === "true",
-        wallet_loading: true
+        wallet_loading: true,
+        nwc_enabled: localStorage.getItem("nwc_enabled") === "true",
     });
 
     const actions = {
@@ -88,6 +91,12 @@ export const Provider: ParentComponent = (props) => {
                 const mutinyWallet = await setupMutinyWallet(settings)
                 // Get balance optimistically
                 const balance = await mutinyWallet.get_balance();
+                // start nwc if enabled
+                if (state.nwc_enabled) {
+                    const nodes = await mutinyWallet.list_nodes();
+                    const firstNode = nodes[0] as string || "";
+                    await mutinyWallet.start_nostr_wallet_connect(firstNode);
+                }
                 setState({ mutiny_wallet: mutinyWallet, wallet_loading: false, balance })
             } catch (e) {
                 console.error(e)
@@ -136,6 +145,10 @@ export const Provider: ParentComponent = (props) => {
         },
         async listTags(): Promise<MutinyTagItem[]> {
             return state.mutiny_wallet?.get_tag_items() as MutinyTagItem[]
+        },
+        setNwc(enabled: boolean) {
+            localStorage.setItem("nwc_enabled", enabled.toString())
+            setState({ nwc_enabled: enabled })
         }
     };