diff --git a/src/components/KitchenSink.tsx b/src/components/KitchenSink.tsx index f461587..bfa9cef 100644 --- a/src/components/KitchenSink.tsx +++ b/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() {
+ +

diff --git a/src/components/NostrWalletConnectModal.tsx b/src/components/NostrWalletConnectModal.tsx new file mode 100644 index 0000000..866d774 --- /dev/null +++ b/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 ( + + + Show Nostr Wallet Connect URI + + + +
+ +
+ Nostr Wallet Connect + + X + +
+ + +
+ +
+ + {connectionURI() || ""} + +
+ +
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/state/megaStore.tsx b/src/state/megaStore.tsx index 9e1e3e0..c5bb1d2 100644 --- a/src/state/megaStore.tsx +++ b/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; setupMutinyWallet(settings?: MutinyWalletSettingStrings): Promise; @@ -36,6 +37,7 @@ export type MegaStore = [{ dismissRestorePrompt(): void; setHasBackedUp(): void; listTags(): Promise; + 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 { return state.mutiny_wallet?.get_tag_items() as MutinyTagItem[] + }, + setNwc(enabled: boolean) { + localStorage.setItem("nwc_enabled", enabled.toString()) + setState({ nwc_enabled: enabled }) } };