feat: add zap setup screen

apps/desktop2/src/components/login.tsx

@@ -11,19 +11,15 @@ export function LoginDialog() {
 
   const [nsec, setNsec] = useState("");
   const [passphase, setPassphase] = useState("");
-  const [loading, setLoading] = useState(false);
 
   const login = async () => {
     try {
-      setLoading(true);
-
       const save = await ark.save_account(nsec, passphase);
 
       if (save) {
         navigate({ to: "/", search: { guest: false } });
       }
     } catch (e) {
-      setLoading(false);
       toast.error(String(e));
     }
   };

apps/desktop2/src/routes/nwc.lazy.tsx

@@ -0,0 +1,62 @@
+import { useArk } from "@lume/ark";
+import { ArrowRightIcon, ZapIcon } from "@lume/icons";
+import { Container } from "@lume/ui";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+
+export const Route = createLazyFileRoute("/nwc")({
+  component: Screen,
+});
+
+function Screen() {
+  const ark = useArk();
+
+  const [uri, setUri] = useState("");
+  const [isDone, setIsDone] = useState(false);
+
+  const save = async () => {
+    const nwc = await ark.set_nwc(uri);
+
+    if (nwc) {
+      setIsDone(true);
+    }
+  };
+
+  return (
+    <Container withDrag>
+      <div className="h-full w-full flex-1 px-5">
+        <div className="flex flex-col gap-2">
+          <div className="inline-flex size-14 items-center justify-center rounded-xl bg-black text-white shadow-md">
+            <ZapIcon className="size-5" />
+          </div>
+          <div>
+            <h3 className="text-2xl font-light">
+              Connect <span className="font-semibold">bitcoin wallet</span> to
+              start zapping to your favorite content and creator.
+            </h3>
+          </div>
+        </div>
+        <div className="mt-10 flex flex-col gap-2">
+          <div className="flex flex-col gap-1.5">
+            <label>Paste a Nostr Wallet Connect connection string</label>
+            <textarea
+              value={uri}
+              onChange={(e) => setUri(e.target.value)}
+              placeholder="nostrconnect://"
+              className="h-24 w-full resize-none rounded-lg border-transparent bg-white placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-100 dark:bg-black dark:focus:ring-blue-900"
+            />
+          </div>
+          <button
+            type="button"
+            onClick={save}
+            className="inline-flex h-11 w-full items-center justify-between gap-1.5 rounded-lg bg-blue-500 px-5 font-medium text-white hover:bg-blue-600"
+          >
+            <div className="size-5" />
+            <div>Save & Connect</div>
+            <ArrowRightIcon className="size-5" />
+          </button>
+        </div>
+      </div>
+    </Container>
+  );
+}