feat: move nwc to settings

apps/desktop/src/router.tsx

@@ -35,13 +35,6 @@ export default function Router() {
 								return { Component: HomeScreen };
 							},
 						},
-						{
-							path: "nwc",
-							async lazy() {
-								const { NWCScreen } = await import("./routes/nwc");
-								return { Component: NWCScreen };
-							},
-						},
 						{
 							path: "settings",
 							element: <SettingsLayout />,
@@ -100,6 +93,13 @@ export default function Router() {
 										return { Component: AdvancedSettingScreen };
 									},
 								},
+								{
+									path: "nwc",
+									async lazy() {
+										const { NWCScreen } = await import("./routes/settings/nwc");
+										return { Component: NWCScreen };
+									},
+								},
 								{
 									path: "about",
 									async lazy() {

apps/desktop/src/routes/nwc/index.tsx

@@ -1,125 +0,0 @@
-import { CheckCircleIcon } from "@lume/icons";
-import { useStorage } from "@lume/storage";
-import { useEffect, useState } from "react";
-import { NWCForm } from "./components/form";
-
-export function NWCScreen() {
-	const storage = useStorage();
-	const [walletConnectURL, setWalletConnectURL] = useState<null | string>(null);
-
-	const remove = async () => {
-		await storage.removePrivkey(`${ark.account.pubkey}-nwc`);
-		setWalletConnectURL(null);
-	};
-
-	useEffect(() => {
-		async function getNWC() {
-			const nwc = await storage.loadPrivkey(`${ark.account.pubkey}-nwc`);
-			if (nwc) setWalletConnectURL(nwc);
-		}
-		getNWC();
-	}, []);
-
-	return (
-		<div className="flex h-full w-full items-center justify-center">
-			<div className="flex w-full flex-col gap-5">
-				<div className="text-center">
-					<h3 className="text-2xl font-bold leading-tight">
-						Nostr Wallet Connect
-					</h3>
-					<p className="leading-tight text-neutral-600 dark:text-neutral-400">
-						Sending zap easily via Bitcoin Lightning.
-					</p>
-				</div>
-				<div className="mx-auto max-w-lg">
-					{!walletConnectURL ? (
-						<NWCForm setWalletConnectURL={setWalletConnectURL} />
-					) : (
-						<div className="flex w-full flex-col gap-3 rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
-							<div className="flex items-center justify-center gap-1.5 text-sm text-teal-500">
-								<CheckCircleIcon className="h-4 w-4" />
-								<div>You&apos;re using nostr wallet connect</div>
-							</div>
-							<div className="flex flex-col gap-3">
-								<textarea
-									readOnly
-									value={`${walletConnectURL.substring(0, 120)}****`}
-									className="h-40 w-full resize-none rounded-lg border-transparent bg-neutral-200 px-3 py-3 text-neutral-900 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:focus:ring-blue-800 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
-								/>
-								<button
-									type="button"
-									onClick={() => remove()}
-									className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-neutral-200 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:bg-neutral-800 dark:text-neutral-100"
-								>
-									Remove connection
-								</button>
-							</div>
-						</div>
-					)}
-					<div className="mt-5 flex flex-col gap-4">
-						<div className="flex flex-col gap-1.5">
-							<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
-								Introduction
-							</h5>
-							<p className="text-sm text-neutral-600 dark:text-neutral-400">
-								Nostr Wallet Connect (NWC) is a way for applications like Nostr
-								clients to access a remote Lightning wallet through a
-								standardized protocol.
-							</p>
-							<p className="text-sm text-neutral-600 dark:text-neutral-400">
-								To learn more about the details have a look at{" "}
-								<a
-									href="https://github.com/nostr-protocol/nips/blob/master/47.md"
-									target="_blank"
-									className="text-blue-500"
-									rel="noreferrer"
-								>
-									the specs (NIP47)
-								</a>
-							</p>
-						</div>
-						<div className="flex flex-col gap-1.5">
-							<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
-								About zapping
-							</h5>
-							<p className="text-sm text-neutral-600 dark:text-neutral-400">
-								Lume doesn&apos;t take any commission or platform fees when you
-								zap someone.
-							</p>
-							<p className="text-sm text-neutral-600 dark:text-neutral-400">
-								Lume doesn&apos;t hold your Bitcoin
-							</p>
-						</div>
-						<div className="flex flex-col gap-1.5">
-							<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
-								Recommend wallet that support NWC
-							</h5>
-							<p className="text-sm text-neutral-600 dark:text-neutral-400">
-								Mutiny Wallet:{" "}
-								<a
-									href="https://www.mutinywallet.com/"
-									target="_blank"
-									rel="noreferrer"
-									className="text-blue-500"
-								>
-									website
-								</a>
-							</p>
-							<p className="text-sm text-neutral-600 dark:text-neutral-400">
-								Self hosted NWC on Umbrel :{" "}
-								<a
-									href="https://apps.umbrel.com/app/alby-nostr-wallet-connect"
-									target="_blank"
-									rel="noreferrer"
-									className="text-blue-500"
-								>
-									website
-								</a>
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}

apps/desktop/src/routes/settings/components/walletConnectForm.tsx

@@ -1,9 +1,11 @@
+import { useArk } from "@lume/ark";
 import { LoaderIcon } from "@lume/icons";
 import { useStorage } from "@lume/storage";
 import { useState } from "react";
 import { toast } from "sonner";
 
 export function NWCForm({ setWalletConnectURL }) {
+	const ark = useArk();
 	const storage = useStorage();
 
 	const [uri, setUri] = useState("");

apps/desktop/src/routes/settings/nwc.tsx

@@ -0,0 +1,154 @@
+import { webln } from "@getalby/sdk";
+import { useArk } from "@lume/ark";
+import { CheckCircleIcon } from "@lume/icons";
+import { useStorage } from "@lume/storage";
+import { useEffect, useState } from "react";
+import { NWCForm } from "./components/walletConnectForm";
+
+export function NWCScreen() {
+	const ark = useArk();
+	const storage = useStorage();
+
+	const [walletConnectURL, setWalletConnectURL] = useState<null | string>(null);
+	const [balance, setBalance] = useState(0);
+
+	const remove = async () => {
+		await storage.removePrivkey(`${ark.account.pubkey}-nwc`);
+		setWalletConnectURL(null);
+	};
+
+	const loadBalance = async () => {
+		const nwc = new webln.NostrWebLNProvider({
+			nostrWalletConnectUrl: walletConnectURL,
+		});
+		await nwc.enable();
+
+		const balanceResponse = await nwc.getBalance();
+		setBalance(balanceResponse.balance);
+
+		nwc.close();
+	};
+
+	useEffect(() => {
+		if (walletConnectURL) loadBalance();
+	}, [walletConnectURL]);
+
+	useEffect(() => {
+		async function getNWC() {
+			const nwc = await storage.loadPrivkey(`${ark.account.pubkey}-nwc`);
+			if (nwc) setWalletConnectURL(nwc);
+		}
+		getNWC();
+	}, []);
+
+	return (
+		<div>
+			<div className="flex w-full flex-col gap-5">
+				<div className="text-center">
+					<h3 className="text-2xl font-semibold leading-tight">
+						Nostr Wallet Connect
+					</h3>
+					<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
+						Sending zap easily via Bitcoin Lightning.
+					</p>
+				</div>
+				<div className="mx-auto w-full max-w-lg">
+					{!walletConnectURL ? (
+						<NWCForm setWalletConnectURL={setWalletConnectURL} />
+					) : (
+						<div className="flex w-full flex-col gap-3 rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
+							<div className="flex items-center justify-center gap-1.5 text-sm text-teal-500">
+								<CheckCircleIcon className="h-4 w-4" />
+								<div>You&apos;re using nostr wallet connect</div>
+							</div>
+							<div className="flex flex-col gap-3">
+								<textarea
+									readOnly
+									value={`${walletConnectURL.substring(0, 120)}****`}
+									className="h-40 w-full resize-none rounded-lg border-transparent bg-neutral-200 px-3 py-3 text-neutral-900 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:focus:ring-blue-800 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+								/>
+								<button
+									type="button"
+									onClick={() => remove()}
+									className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-neutral-200 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:bg-neutral-800 dark:text-neutral-100"
+								>
+									Remove connection
+								</button>
+							</div>
+						</div>
+					)}
+					{walletConnectURL ? (
+						<div className="mt-5 flex flex-col">
+							<h3 className="font-medium text-neutral-600 dark:text-neutral-400">
+								Current balance
+							</h3>
+							<p className="text-2xl font-semibold">
+								{new Intl.NumberFormat().format(balance)} sats
+							</p>
+						</div>
+					) : (
+						<div className="mt-5 flex flex-col gap-4">
+							<div className="flex flex-col gap-1.5">
+								<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
+									Introduction
+								</h5>
+								<p className="text-neutral-600 dark:text-neutral-400">
+									Nostr Wallet Connect (NWC) is a way for applications like
+									Nostr clients to access a remote Lightning wallet through a
+									standardized protocol.
+								</p>
+								<p className="text-neutral-600 dark:text-neutral-400">
+									To learn more about the details have a look at{" "}
+									<a
+										href="https://github.com/nostr-protocol/nips/blob/master/47.md"
+										target="_blank"
+										className="text-blue-500"
+										rel="noreferrer"
+									>
+										the specs (NIP47)
+									</a>
+								</p>
+							</div>
+							<div className="flex flex-col gap-1.5">
+								<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
+									About zapping
+								</h5>
+								<p className="text-neutral-600 dark:text-neutral-400">
+									Lume doesn&apos;t take any commission or platform fees when
+									you zap someone. Lume doesn&apos;t hold your Bitcoin
+								</p>
+							</div>
+							<div className="flex flex-col gap-1.5">
+								<h5 className="font-semibold text-neutral-900 dark:text-neutral-100">
+									Recommend wallet that support NWC
+								</h5>
+								<p className="text-neutral-600 dark:text-neutral-400">
+									- Mutiny Wallet:{" "}
+									<a
+										href="https://www.mutinywallet.com/"
+										target="_blank"
+										rel="noreferrer"
+										className="text-blue-500"
+									>
+										website
+									</a>
+								</p>
+								<p className="text-neutral-600 dark:text-neutral-400">
+									- Self hosted NWC on Umbrel :{" "}
+									<a
+										href="https://apps.umbrel.com/app/alby-nostr-wallet-connect"
+										target="_blank"
+										rel="noreferrer"
+										className="text-blue-500"
+									>
+										website
+									</a>
+								</p>
+							</div>
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+}