From bb6badfed61d46b910da12545eefbd02e51d2995 Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Sun, 10 Mar 2024 16:39:23 +0700
Subject: [PATCH 1/3] feat: add zap setup screen

---
 apps/desktop2/src/components/login.tsx  |  4 --
 apps/desktop2/src/routes/nwc.lazy.tsx   | 62 +++++++++++++++++++
 packages/ark/src/ark.ts                 | 26 ++++++++
 packages/ui/package.json                |  1 -
 packages/ui/src/column/content.tsx      |  6 --
 packages/ui/src/column/header.tsx       | 80 -------------------------
 packages/ui/src/column/index.ts         | 15 -----
 packages/ui/src/column/live.tsx         | 46 --------------
 packages/ui/src/column/provider.tsx     | 23 -------
 packages/ui/src/column/root.tsx         | 37 ------------
 packages/ui/src/index.ts                |  1 -
 packages/ui/src/note/buttons/zap.tsx    | 13 ++++
 pnpm-lock.yaml                          | 31 ----------
 src-tauri/capabilities/main.json        |  2 +
 src-tauri/gen/schemas/capabilities.json |  2 +-
 src-tauri/src/main.rs                   |  1 +
 src-tauri/src/nostr/metadata.rs         | 19 +++++-
 17 files changed, 121 insertions(+), 248 deletions(-)
 create mode 100644 apps/desktop2/src/routes/nwc.lazy.tsx
 delete mode 100644 packages/ui/src/column/content.tsx
 delete mode 100644 packages/ui/src/column/header.tsx
 delete mode 100644 packages/ui/src/column/index.ts
 delete mode 100644 packages/ui/src/column/live.tsx
 delete mode 100644 packages/ui/src/column/provider.tsx
 delete mode 100644 packages/ui/src/column/root.tsx

diff --git a/apps/desktop2/src/components/login.tsx b/apps/desktop2/src/components/login.tsx
index 0d8cf6f2..9d644512 100644
--- a/apps/desktop2/src/components/login.tsx
+++ b/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));
     }
   };
diff --git a/apps/desktop2/src/routes/nwc.lazy.tsx b/apps/desktop2/src/routes/nwc.lazy.tsx
new file mode 100644
index 00000000..ade7af10
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/ark/src/ark.ts b/packages/ark/src/ark.ts
index bc79b58e..19bcf928 100644
--- a/packages/ark/src/ark.ts
+++ b/packages/ark/src/ark.ts
@@ -409,6 +409,15 @@ export class Ark {
 		}
 	}
 
+	public async nwc_status() {
+		try {
+			const cmd: boolean = await invoke("nwc_status");
+			return cmd;
+		} catch {
+			return false;
+		}
+	}
+
 	public async zap_profile(id: string, amount: number, message: string) {
 		try {
 			const cmd: boolean = await invoke("zap_profile", { id, amount, message });
@@ -526,4 +535,21 @@ export class Ark {
 			fileDropEnabled: true,
 		});
 	}
+
+	public open_nwc() {
+		return new WebviewWindow("nwc", {
+			title: "Nostr Wallet Connect",
+			url: "/nwc",
+			minWidth: 400,
+			width: 400,
+			height: 600,
+			hiddenTitle: true,
+			titleBarStyle: "overlay",
+			fileDropEnabled: true,
+		});
+	}
+
+	public open_zap() {
+		// todo
+	}
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 8cf1c4b6..8a61e059 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -33,7 +33,6 @@
 		"react-hook-form": "^7.51.0",
 		"react-hotkeys-hook": "^4.5.0",
 		"react-i18next": "^14.0.5",
-		"react-router-dom": "^6.22.2",
 		"react-string-replace": "^1.1.1",
 		"slate": "^0.101.5",
 		"slate-react": "^0.101.6",
diff --git a/packages/ui/src/column/content.tsx b/packages/ui/src/column/content.tsx
deleted file mode 100644
index 09d2060e..00000000
--- a/packages/ui/src/column/content.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ReactNode } from "react";
-import { Routes } from "react-router-dom";
-
-export function ColumnContent({ children }: { children: ReactNode }) {
-	return <Routes>{children}</Routes>;
-}
diff --git a/packages/ui/src/column/header.tsx b/packages/ui/src/column/header.tsx
deleted file mode 100644
index 9e9c8f7c..00000000
--- a/packages/ui/src/column/header.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import {
-  ChevronDownIcon,
-  MoveLeftIcon,
-  MoveRightIcon,
-  RefreshIcon,
-  TrashIcon,
-} from "@lume/icons";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { useQueryClient } from "@tanstack/react-query";
-import { useTranslation } from "react-i18next";
-
-export function ColumnHeader({ queryKey }: { queryKey?: string[] }) {
-  const { t } = useTranslation();
-  const queryClient = useQueryClient();
-
-  const refresh = async () => {
-    if (queryKey) await queryClient.refetchQueries({ queryKey });
-  };
-
-  return (
-    <DropdownMenu.Root>
-      <div className="flex h-11 w-full shrink-0 items-center justify-center gap-2 border-b border-neutral-100 px-3 dark:border-neutral-900">
-        <DropdownMenu.Trigger asChild>
-          <div className="inline-flex items-center gap-1.5">
-            <div className="text-[13px] font-medium">{column.title}</div>
-            <ChevronDownIcon className="size-5" />
-          </div>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Portal>
-          <DropdownMenu.Content
-            sideOffset={5}
-            className="flex w-[200px] flex-col overflow-hidden rounded-2xl bg-white/50 p-2 ring-1 ring-black/10 backdrop-blur-2xl focus:outline-none dark:bg-black/50 dark:ring-white/10"
-          >
-            <DropdownMenu.Item asChild>
-              <button
-                type="button"
-                onClick={refresh}
-                className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
-              >
-                <RefreshIcon className="size-4" />
-                {t("global.refresh")}
-              </button>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item asChild>
-              <button
-                type="button"
-                onClick={() => move(column.id, "left")}
-                className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
-              >
-                <MoveLeftIcon className="size-4" />
-                {t("global.moveLeft")}
-              </button>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item asChild>
-              <button
-                type="button"
-                onClick={() => move(column.id, "right")}
-                className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
-              >
-                <MoveRightIcon className="size-4" />
-                {t("global.moveRight")}
-              </button>
-            </DropdownMenu.Item>
-            <DropdownMenu.Separator className="my-1 h-px bg-black/10 dark:bg-white/10" />
-            <DropdownMenu.Item asChild>
-              <button
-                type="button"
-                onClick={() => remove(column.id)}
-                className="inline-flex h-9 items-center gap-3 rounded-lg px-3 text-sm font-medium text-red-500 hover:bg-red-500 hover:text-red-50 focus:outline-none"
-              >
-                <TrashIcon className="size-4" />
-                {t("global.delete")}
-              </button>
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu.Portal>
-      </div>
-    </DropdownMenu.Root>
-  );
-}
diff --git a/packages/ui/src/column/index.ts b/packages/ui/src/column/index.ts
deleted file mode 100644
index 6b6813b8..00000000
--- a/packages/ui/src/column/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Route } from "react-router-dom";
-import { ColumnContent } from "./content";
-import { ColumnHeader } from "./header";
-import { ColumnLiveWidget } from "./live";
-import { ColumnProvider } from "./provider";
-import { ColumnRoot } from "./root";
-
-export const Column = {
-	Provider: ColumnProvider,
-	Root: ColumnRoot,
-	Live: ColumnLiveWidget,
-	Header: ColumnHeader,
-	Content: ColumnContent,
-	Route: Route,
-};
diff --git a/packages/ui/src/column/live.tsx b/packages/ui/src/column/live.tsx
deleted file mode 100644
index 09118ebe..00000000
--- a/packages/ui/src/column/live.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ArrowUpIcon } from "@lume/icons";
-import { useEffect, useState } from "react";
-
-export function ColumnLiveWidget({
-	filter,
-	onClick,
-}: {
-	filter: NDKFilter;
-	onClick: (event: NDKEvent[]) => void;
-}) {
-	const ark = useArk();
-	const [events, setEvents] = useState<NDKEvent[]>([]);
-
-	const update = async () => {
-		onClick(events);
-		// reset
-		setEvents([]);
-	};
-
-	useEffect(() => {
-		const sub = ark.subscribe({
-			filter,
-			closeOnEose: false,
-			cb: (event: NDKEvent) => setEvents((prev) => [...prev, event]),
-		});
-
-		return () => {
-			if (sub) sub.stop();
-		};
-	}, []);
-
-	if (!events.length) return null;
-
-	return (
-		<div className="absolute left-0 z-40 flex items-center justify-center w-full top-12 h-11">
-			<button
-				type="button"
-				onClick={update}
-				className="inline-flex items-center justify-center h-9 gap-1 pl-4 pr-3 text-sm font-semibold rounded-full w-max bg-neutral-950 dark:bg-neutral-50 hover:bg-neutral-900 dark:hover:bg-neutral-100 text-neutral-50 dark:text-neutral-950"
-			>
-				{events.length} {events.length === 1 ? "new note" : "new notes"}
-				<ArrowUpIcon className="size-4" />
-			</button>
-		</div>
-	);
-}
diff --git a/packages/ui/src/column/provider.tsx b/packages/ui/src/column/provider.tsx
deleted file mode 100644
index d37d5cd3..00000000
--- a/packages/ui/src/column/provider.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { LumeColumn } from "@lume/types";
-import { ReactNode, createContext, useContext } from "react";
-
-const ColumnContext = createContext<LumeColumn>(null);
-
-export function ColumnProvider({
-	column,
-	children,
-}: { column: LumeColumn; children: ReactNode }) {
-	return (
-		<ColumnContext.Provider value={column}>{children}</ColumnContext.Provider>
-	);
-}
-
-export function useColumnContext() {
-	const context = useContext(ColumnContext);
-	if (!context) {
-		throw new Error(
-			"Please import Column Provider to use useColumnContext() hook",
-		);
-	}
-	return context;
-}
diff --git a/packages/ui/src/column/root.tsx b/packages/ui/src/column/root.tsx
deleted file mode 100644
index bcafbb5f..00000000
--- a/packages/ui/src/column/root.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { cn } from "@lume/utils";
-import { Resizable } from "re-resizable";
-import { ReactNode, useState } from "react";
-import { MemoryRouter, UNSAFE_LocationContext } from "react-router-dom";
-
-export function ColumnRoot({
-	children,
-	className,
-}: {
-	children: ReactNode;
-	className?: string;
-}) {
-	const [width, setWidth] = useState(420);
-
-	return (
-		<UNSAFE_LocationContext.Provider value={null}>
-			<Resizable
-				size={{ width, height: "100%" }}
-				onResizeStart={(e) => e.preventDefault()}
-				onResizeStop={(_e, _direction, _ref, d) => {
-					setWidth((prevWidth) => prevWidth + d.width);
-				}}
-				minWidth={420}
-				maxWidth={600}
-				className={cn(
-					"relative flex flex-col border-r-2 border-neutral-50 hover:border-neutral-100 dark:border-neutral-950 dark:hover:border-neutral-900",
-					className,
-				)}
-				enable={{ right: true }}
-			>
-				<MemoryRouter future={{ v7_startTransition: true }}>
-					{children}
-				</MemoryRouter>
-			</Resizable>
-		</UNSAFE_LocationContext.Provider>
-	);
-}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 566e7dcb..8ab1ac2d 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,6 +1,5 @@
 export * from "./user";
 export * from "./note";
-export * from "./column";
 
 // UI
 export * from "./container";
diff --git a/packages/ui/src/note/buttons/zap.tsx b/packages/ui/src/note/buttons/zap.tsx
index 3d00d580..3e3c193e 100644
--- a/packages/ui/src/note/buttons/zap.tsx
+++ b/packages/ui/src/note/buttons/zap.tsx
@@ -1,9 +1,22 @@
+import { useArk } from "@lume/ark";
 import { ZapIcon } from "@lume/icons";
 
 export function NoteZap() {
+  const ark = useArk();
+
+  const zap = async () => {
+    const nwc = await ark.nwc_status();
+    if (!nwc) {
+      ark.open_nwc();
+    } else {
+      ark.open_zap();
+    }
+  };
+
   return (
     <button
       type="button"
+      onClick={zap}
       className="group inline-flex size-7 items-center justify-center text-neutral-800 dark:text-neutral-200"
     >
       <ZapIcon className="size-5 group-hover:text-blue-500" />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9993e337..62c91ae0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -935,9 +935,6 @@ importers:
       react-i18next:
         specifier: ^14.0.5
         version: 14.0.5(i18next@23.10.0)(react-dom@18.2.0)(react@18.2.0)
-      react-router-dom:
-        specifier: ^6.22.2
-        version: 6.22.2(react-dom@18.2.0)(react@18.2.0)
       react-string-replace:
         specifier: ^1.1.1
         version: 1.1.1
@@ -2989,11 +2986,6 @@ packages:
       '@babel/runtime': 7.24.0
     dev: false
 
-  /@remix-run/router@1.15.2:
-    resolution: {integrity: sha512-+Rnav+CaoTE5QJc4Jcwh5toUpnVLKYbpU6Ys0zqbakqbaLQHeglLVHPfxOiQqdNmUy5C2lXz5dwC6tQNX2JW2Q==}
-    engines: {node: '>=14.0.0'}
-    dev: false
-
   /@rollup/plugin-virtual@3.0.2:
     resolution: {integrity: sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==}
     engines: {node: '>=14.0.0'}
@@ -6337,29 +6329,6 @@ packages:
       use-sidecar: 1.1.2(@types/react@18.2.61)(react@18.2.0)
     dev: false
 
-  /react-router-dom@6.22.2(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      react: '>=16.8'
-      react-dom: '>=16.8'
-    dependencies:
-      '@remix-run/router': 1.15.2
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-router: 6.22.2(react@18.2.0)
-    dev: false
-
-  /react-router@6.22.2(react@18.2.0):
-    resolution: {integrity: sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      react: '>=16.8'
-    dependencies:
-      '@remix-run/router': 1.15.2
-      react: 18.2.0
-    dev: false
-
   /react-string-replace@1.1.1:
     resolution: {integrity: sha512-26TUbLzLfHQ5jO5N7y3Mx88eeKo0Ml0UjCQuX4BMfOd/JX+enQqlKpL1CZnmjeBRvQE8TR+ds9j1rqx9CxhKHQ==}
     engines: {node: '>=0.12.0'}
diff --git a/src-tauri/capabilities/main.json b/src-tauri/capabilities/main.json
index ac6f984e..3d7e447d 100644
--- a/src-tauri/capabilities/main.json
+++ b/src-tauri/capabilities/main.json
@@ -8,6 +8,8 @@
     "splash",
     "editor",
     "settings",
+    "nwc",
+    "zap",
     "event-*",
     "user-*",
     "column-*"
diff --git a/src-tauri/gen/schemas/capabilities.json b/src-tauri/gen/schemas/capabilities.json
index a9eaf54c..7fc969d9 100644
--- a/src-tauri/gen/schemas/capabilities.json
+++ b/src-tauri/gen/schemas/capabilities.json
@@ -1 +1 @@
-{"desktop-capability":{"identifier":"desktop-capability","description":"Capability for the desktop","local":true,"windows":["main","splash","editor","settings","event-*","user-*","column-*"],"permissions":["path:default","event:default","window:default","app:default","resources:default","menu:default","tray:default","notification:allow-is-permission-granted","notification:allow-request-permission","notification:default","os:allow-locale","os:allow-platform","updater:allow-check","updater:default","window:allow-start-dragging","store:allow-get","clipboard-manager:allow-write","clipboard-manager:allow-read","webview:allow-create-webview-window","webview:allow-create-webview","dialog:allow-open","fs:allow-read-file","shell:allow-open",{"identifier":"http:default","allow":[{"url":"http://**/"},{"url":"https://**/"}]},{"identifier":"fs:allow-read-text-file","allow":[{"path":"$RESOURCE/locales/*"}]}],"platforms":["linux","macOS","windows"]}}
\ No newline at end of file
+{"desktop-capability":{"identifier":"desktop-capability","description":"Capability for the desktop","local":true,"windows":["main","splash","editor","settings","nwc","zap","event-*","user-*","column-*"],"permissions":["path:default","event:default","window:default","app:default","resources:default","menu:default","tray:default","notification:allow-is-permission-granted","notification:allow-request-permission","notification:default","os:allow-locale","os:allow-platform","updater:allow-check","updater:default","window:allow-start-dragging","store:allow-get","clipboard-manager:allow-write","clipboard-manager:allow-read","webview:allow-create-webview-window","webview:allow-create-webview","dialog:allow-open","fs:allow-read-file","shell:allow-open",{"identifier":"http:default","allow":[{"url":"http://**/"},{"url":"https://**/"}]},{"identifier":"fs:allow-read-text-file","allow":[{"path":"$RESOURCE/locales/*"}]}],"platforms":["linux","macOS","windows"]}}
\ No newline at end of file
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 91b54505..0b6c3a2f 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -103,6 +103,7 @@ fn main() {
       nostr::metadata::get_settings,
       nostr::metadata::get_nwc_status,
       nostr::metadata::set_nwc,
+      nostr::metadata::nwc_status,
       nostr::metadata::zap_profile,
       nostr::metadata::zap_event,
       nostr::event::get_event,
diff --git a/src-tauri/src/nostr/metadata.rs b/src-tauri/src/nostr/metadata.rs
index 3169530b..8b71a2c9 100644
--- a/src-tauri/src/nostr/metadata.rs
+++ b/src-tauri/src/nostr/metadata.rs
@@ -1,4 +1,5 @@
 use crate::Nostr;
+use keyring::Entry;
 use nostr_sdk::prelude::*;
 use std::{str::FromStr, time::Duration};
 use tauri::State;
@@ -285,18 +286,30 @@ pub async fn get_nwc_status(state: State<'_, Nostr>) -> Result<bool, ()> {
 pub async fn set_nwc(uri: &str, state: State<'_, Nostr>) -> Result<bool, String> {
   let client = &state.client;
 
-  if let Ok(uri) = NostrWalletConnectURI::from_str(&uri) {
-    if let Ok(nwc) = NWC::new(uri).await {
+  if let Ok(nwc_uri) = NostrWalletConnectURI::from_str(&uri) {
+    if let Ok(nwc) = NWC::new(nwc_uri).await {
+      let keyring = Entry::new("Lume Secret Storage", "NWC").unwrap();
+      let _ = keyring.set_password(uri);
       let _ = client.set_zapper(nwc);
+
       Ok(true)
     } else {
-      Ok(false)
+      Err("URI is not valid".into())
     }
   } else {
     Err("Set NWC failed".into())
   }
 }
 
+#[tauri::command]
+pub async fn nwc_status(state: State<'_, Nostr>) -> Result<bool, bool> {
+  let client = &state.client;
+  match client.zapper().await {
+    Ok(_) => Ok(true),
+    Err(_) => Err(false),
+  }
+}
+
 #[tauri::command]
 pub async fn zap_profile(
   id: &str,

From e6b97ab9ae9e4881fea46dd71bb62af20407b3f7 Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Mon, 11 Mar 2024 15:36:17 +0700
Subject: [PATCH 2/3] feat: add zap

---
 apps/desktop2/package.json                |   1 +
 apps/desktop2/src/components/balance.tsx  |  51 +++
 apps/desktop2/src/routes/nwc.lazy.tsx     |  68 ++--
 apps/desktop2/src/routes/zap.$id.lazy.tsx | 108 ++++++
 packages/ark/src/ark.ts                   |  45 ++-
 packages/ui/src/note/buttons/zap.tsx      |  17 +-
 packages/utils/package.json               |   1 +
 packages/utils/src/formater.ts            |  32 ++
 pnpm-lock.yaml                            | 422 ++--------------------
 src-tauri/capabilities/main.json          |   2 +-
 src-tauri/gen/schemas/capabilities.json   |   2 +-
 src-tauri/src/main.rs                     |   4 +-
 src-tauri/src/nostr/metadata.rs           |  47 ++-
 13 files changed, 349 insertions(+), 451 deletions(-)
 create mode 100644 apps/desktop2/src/components/balance.tsx
 create mode 100644 apps/desktop2/src/routes/zap.$id.lazy.tsx

diff --git a/apps/desktop2/package.json b/apps/desktop2/package.json
index 763359f7..fb531acf 100644
--- a/apps/desktop2/package.json
+++ b/apps/desktop2/package.json
@@ -26,6 +26,7 @@
     "i18next-resources-to-backend": "^1.2.0",
     "nostr-tools": "^2.3.1",
     "react": "^18.2.0",
+    "react-currency-input-field": "^3.8.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",
     "slate": "^0.101.5",
diff --git a/apps/desktop2/src/components/balance.tsx b/apps/desktop2/src/components/balance.tsx
new file mode 100644
index 00000000..5be1f4ec
--- /dev/null
+++ b/apps/desktop2/src/components/balance.tsx
@@ -0,0 +1,51 @@
+import { useArk } from "@lume/ark";
+import { User } from "@lume/ui";
+import { getBitcoinDisplayValues } from "@lume/utils";
+import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export function Balance({
+  recipient,
+  account,
+}: {
+  recipient: string;
+  account: string;
+}) {
+  const [t] = useTranslation();
+  const [balance, setBalance] = useState(0);
+
+  const ark = useArk();
+  const value = useMemo(() => getBitcoinDisplayValues(balance), [balance]);
+
+  useEffect(() => {
+    async function getBalance() {
+      const val = await ark.get_balance();
+      setBalance(val);
+    }
+
+    getBalance();
+  }, []);
+
+  return (
+    <div
+      data-tauri-drag-region
+      className="flex h-16 items-center justify-end px-3"
+    >
+      <div className="flex items-center gap-2">
+        <div className="text-end">
+          <div className="text-sm leading-tight text-neutral-700 dark:text-neutral-300">
+            Your balance
+          </div>
+          <div className="font-medium leading-tight">
+            ₿ {value.bitcoinFormatted}
+          </div>
+        </div>
+        <User.Provider pubkey={account}>
+          <User.Root>
+            <User.Avatar className="size-9 rounded-full" />
+          </User.Root>
+        </User.Provider>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/desktop2/src/routes/nwc.lazy.tsx b/apps/desktop2/src/routes/nwc.lazy.tsx
index ade7af10..97c952ab 100644
--- a/apps/desktop2/src/routes/nwc.lazy.tsx
+++ b/apps/desktop2/src/routes/nwc.lazy.tsx
@@ -25,37 +25,43 @@ function Screen() {
   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>
+        {!isDone ? (
+          <>
+            <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>Done</div>
+        )}
       </div>
     </Container>
   );
diff --git a/apps/desktop2/src/routes/zap.$id.lazy.tsx b/apps/desktop2/src/routes/zap.$id.lazy.tsx
new file mode 100644
index 00000000..c86fb900
--- /dev/null
+++ b/apps/desktop2/src/routes/zap.$id.lazy.tsx
@@ -0,0 +1,108 @@
+import { Balance } from "@/components/balance";
+import { useArk } from "@lume/ark";
+import { Box, Container, User } from "@lume/ui";
+import { createLazyFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import CurrencyInput from "react-currency-input-field";
+
+const DEFAULT_VALUES = [69, 100, 200, 500];
+
+export const Route = createLazyFileRoute("/zap/$id")({
+  component: Screen,
+});
+
+function Screen() {
+  const { t } = useTranslation();
+  const { id } = Route.useParams();
+  // @ts-ignore, magic !!!
+  const { pubkey, account } = Route.useSearch();
+
+  const [amount, setAmount] = useState(21);
+  const [message, setMessage] = useState("");
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const ark = useArk();
+
+  const submit = async () => {
+    const val = await ark.zap_event(id, amount, message);
+    console.log(val);
+  };
+
+  return (
+    <Container>
+      <Balance recipient={pubkey} account={account} />
+      <Box className="flex flex-col gap-3">
+        <div className="flex h-full flex-col justify-between py-5">
+          <div className="flex h-11 shrink-0 items-center justify-center gap-2">
+            {t("note.zap.modalTitle")}{" "}
+            <User.Provider pubkey={pubkey}>
+              <User.Root className="inline-flex items-center gap-2 rounded-full bg-neutral-100 p-1 dark:bg-neutral-900">
+                <User.Avatar className="size-6 rounded-full" />
+                <User.Name className="pr-2 text-sm font-medium" />
+              </User.Root>
+            </User.Provider>
+          </div>
+          <div className="flex flex-1 flex-col justify-between px-5">
+            <div className="relative flex flex-1 flex-col pb-8">
+              <div className="inline-flex h-full flex-1 items-center justify-center gap-1">
+                <CurrencyInput
+                  placeholder="0"
+                  defaultValue={21}
+                  value={amount}
+                  decimalsLimit={2}
+                  min={0} // 0 sats
+                  max={10000} // 1M sats
+                  maxLength={10000} // 1M sats
+                  onValueChange={(value) => setAmount(Number(value))}
+                  className="w-full flex-1 border-none bg-transparent text-right text-4xl font-semibold placeholder:text-neutral-600 focus:outline-none focus:ring-0 dark:text-neutral-400"
+                />
+                <span className="w-full flex-1 text-left text-4xl font-semibold text-neutral-500 dark:text-neutral-400">
+                  sats
+                </span>
+              </div>
+              <div className="inline-flex items-center justify-center gap-2">
+                {DEFAULT_VALUES.map((value) => (
+                  <button
+                    type="button"
+                    onClick={() => setAmount(value)}
+                    className="w-max rounded-full bg-neutral-100 px-2.5 py-1 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+                  >
+                    {value} sats
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="flex w-full flex-col gap-2">
+              <input
+                name="message"
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                spellCheck={false}
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                placeholder={t("note.zap.messagePlaceholder")}
+                className="h-11 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-950 dark:text-neutral-400"
+              />
+              <div className="flex flex-col gap-2">
+                <button
+                  type="button"
+                  onClick={() => submit()}
+                  className="inline-flex h-9 w-full items-center justify-center rounded-lg border-t border-neutral-900 bg-neutral-950 pb-[2px] font-semibold text-neutral-50 hover:bg-neutral-900 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+                >
+                  {isCompleted
+                    ? t("note.zap.buttonFinish")
+                    : isLoading
+                      ? t("note.zap.buttonLoading")
+                      : t("note.zap.zap")}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Box>
+    </Container>
+  );
+}
diff --git a/packages/ark/src/ark.ts b/packages/ark/src/ark.ts
index 19bcf928..f41b01c3 100644
--- a/packages/ark/src/ark.ts
+++ b/packages/ark/src/ark.ts
@@ -404,17 +404,26 @@ export class Ark {
 		try {
 			const cmd: boolean = await invoke("set_nwc", { uri });
 			return cmd;
-		} catch {
-			return false;
+		} catch (e) {
+			throw new Error(String(e));
 		}
 	}
 
-	public async nwc_status() {
+	public async load_nwc() {
 		try {
-			const cmd: boolean = await invoke("nwc_status");
+			const cmd: boolean = await invoke("load_nwc");
 			return cmd;
-		} catch {
-			return false;
+		} catch (e) {
+			throw new Error(String(e));
+		}
+	}
+
+	public async get_balance() {
+		try {
+			const cmd: number = await invoke("get_balance");
+			return cmd;
+		} catch (e) {
+			throw new Error(String(e));
 		}
 	}
 
@@ -422,8 +431,8 @@ export class Ark {
 		try {
 			const cmd: boolean = await invoke("zap_profile", { id, amount, message });
 			return cmd;
-		} catch {
-			return false;
+		} catch (e) {
+			throw new Error(String(e));
 		}
 	}
 
@@ -431,8 +440,8 @@ export class Ark {
 		try {
 			const cmd: boolean = await invoke("zap_event", { id, amount, message });
 			return cmd;
-		} catch {
-			return false;
+		} catch (e) {
+			throw new Error(String(e));
 		}
 	}
 
@@ -486,8 +495,7 @@ export class Ark {
 
 			return content.url as string;
 		} catch (e) {
-			console.error(String(e));
-			return null;
+			throw new Error(String(e));
 		}
 	}
 
@@ -549,7 +557,16 @@ export class Ark {
 		});
 	}
 
-	public open_zap() {
-		// todo
+	public open_zap(id: string, pubkey: string, account: string) {
+		return new WebviewWindow(`zap-${id}`, {
+			title: "Nostr Wallet Connect",
+			url: `/zap/${id}?pubkey=${pubkey}&account=${account}`,
+			minWidth: 400,
+			width: 400,
+			height: 500,
+			hiddenTitle: true,
+			titleBarStyle: "overlay",
+			fileDropEnabled: true,
+		});
 	}
 }
diff --git a/packages/ui/src/note/buttons/zap.tsx b/packages/ui/src/note/buttons/zap.tsx
index 3e3c193e..c01dfe82 100644
--- a/packages/ui/src/note/buttons/zap.tsx
+++ b/packages/ui/src/note/buttons/zap.tsx
@@ -1,15 +1,22 @@
 import { useArk } from "@lume/ark";
 import { ZapIcon } from "@lume/icons";
+import { toast } from "sonner";
+import { useNoteContext } from "../provider";
 
 export function NoteZap() {
   const ark = useArk();
+  const event = useNoteContext();
 
   const zap = async () => {
-    const nwc = await ark.nwc_status();
-    if (!nwc) {
-      ark.open_nwc();
-    } else {
-      ark.open_zap();
+    try {
+      const nwc = await ark.load_nwc();
+      if (!nwc) {
+        ark.open_nwc();
+      } else {
+        ark.open_zap(event.id, event.pubkey);
+      }
+    } catch (e) {
+      toast.error(String(e));
     }
   };
 
diff --git a/packages/utils/package.json b/packages/utils/package.json
index b1214bc0..de777c07 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -9,6 +9,7 @@
 	},
 	"dependencies": {
 		"@tanstack/react-query": "^5.24.1",
+		"bitcoin-units": "^1.0.0",
 		"clsx": "^2.1.0",
 		"dayjs": "^1.11.10",
 		"nostr-tools": "^2.3.1",
diff --git a/packages/utils/src/formater.ts b/packages/utils/src/formater.ts
index 9d0e511b..9532b58e 100644
--- a/packages/utils/src/formater.ts
+++ b/packages/utils/src/formater.ts
@@ -3,6 +3,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import updateLocale from "dayjs/plugin/updateLocale";
 import { nip19 } from "nostr-tools";
 import { AUDIOS, IMAGES, VIDEOS } from "./constants";
+import { BitcoinUnit } from "bitcoin-units";
 
 dayjs.extend(relativeTime);
 dayjs.extend(updateLocale);
@@ -89,3 +90,34 @@ export function canPreview(text: string) {
 
 	return true;
 }
+
+// source: https://github.com/synonymdev/bitkit/blob/master/src/utils/displayValues/index.ts
+export function getBitcoinDisplayValues(satoshis: number) {
+	let bitcoinFormatted = new BitcoinUnit(satoshis, "satoshis")
+		.getValue()
+		.toFixed(10)
+		.replace(/\.?0+$/, "");
+
+	const [bitcoinWhole, bitcoinDecimal] = bitcoinFormatted.split(".");
+
+	// format sats to group thousands
+	// 4000000 -> 4 000 000
+	let res = "";
+	bitcoinFormatted
+		.split("")
+		.reverse()
+		.forEach((c, index) => {
+			if (index > 0 && index % 3 === 0) {
+				res = " " + res;
+			}
+			res = c + res;
+		});
+
+	bitcoinFormatted = res;
+
+	return {
+		bitcoinFormatted,
+		bitcoinWhole,
+		bitcoinDecimal,
+	};
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 62c91ae0..06380c33 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -111,6 +111,9 @@ importers:
       react:
         specifier: ^18.2.0
         version: 18.2.0
+      react-currency-input-field:
+        specifier: ^3.8.0
+        version: 3.8.0(react@18.2.0)
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
@@ -874,19 +877,19 @@ importers:
         version: 1.0.4(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-collapsible':
         specifier: ^1.0.3
-        version: 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+        version: 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-dialog':
         specifier: ^1.0.5
-        version: 1.0.5(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+        version: 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.0.6
-        version: 2.0.6(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+        version: 2.0.6(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-hover-card':
         specifier: ^1.0.7
         version: 1.0.7(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-popover':
         specifier: ^1.0.7
-        version: 1.0.7(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+        version: 1.0.7(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-tooltip':
         specifier: ^1.0.7
         version: 1.0.7(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
@@ -984,6 +987,9 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.24.1
         version: 5.24.1(react@18.2.0)
+      bitcoin-units:
+        specifier: ^1.0.0
+        version: 1.0.0
       clsx:
         specifier: ^2.1.0
         version: 2.1.0
@@ -1882,13 +1888,13 @@ packages:
     dependencies:
       '@babel/runtime': 7.24.0
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collapsible': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-collection': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-collapsible': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.2.61)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.2.0)
       '@types/react': 18.2.61
       react: 18.2.0
@@ -1912,8 +1918,8 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-dialog': 1.0.5(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.2.0)
       '@types/react': 18.2.61
       react: 18.2.0
@@ -1941,26 +1947,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-arrow@1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.0
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.61
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-avatar@1.0.4(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==}
     peerDependencies:
@@ -1976,7 +1962,7 @@ packages:
     dependencies:
       '@babel/runtime': 7.24.0
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.2.0)
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.2.0)
       '@types/react': 18.2.61
@@ -2040,33 +2026,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-collapsible@1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.0
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@types/react': 18.2.61
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
     peerDependencies:
@@ -2091,29 +2050,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-collection@1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.0
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.2.0)
-      '@types/react': 18.2.61
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.61)(react@18.2.0):
     resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
     peerDependencies:
@@ -2176,39 +2112,6 @@ packages:
       react-remove-scroll: 2.5.5(@types/react@18.2.61)(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-dialog@1.0.5(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.0
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.4(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@types/react': 18.2.61
-      aria-hidden: 1.2.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.2.61)(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-direction@1.0.1(@types/react@18.2.61)(react@18.2.0):
     resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
     peerDependencies:
@@ -2248,30 +2151,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-dismissable-layer@1.0.5(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.0
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.61)(react@18.2.0)
-      '@types/react': 18.2.61
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-dropdown-menu@2.0.6(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==}
     peerDependencies:
@@ -2299,32 +2178,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-dropdown-menu@2.0.6(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.0
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-menu': 2.0.6(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@types/react': 18.2.61
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.61)(react@18.2.0):
     resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
     peerDependencies:
@@ -2362,28 +2215,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-focus-scope@1.0.4(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.0
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@types/react': 18.2.61
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-hover-card@1.0.7(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==}
     peerDependencies:
@@ -2401,11 +2232,11 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.4(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.2.0)
       '@types/react': 18.2.61
       react: 18.2.0
@@ -2465,43 +2296,6 @@ packages:
       react-remove-scroll: 2.5.5(@types/react@18.2.61)(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-menu@2.0.6(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.0
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.4(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@types/react': 18.2.61
-      aria-hidden: 1.2.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.2.61)(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-popover@1.0.7(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==}
     peerDependencies:
@@ -2537,40 +2331,6 @@ packages:
       react-remove-scroll: 2.5.5(@types/react@18.2.61)(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-popover@1.0.7(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.0
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.4(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@types/react': 18.2.61
-      aria-hidden: 1.2.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.2.61)(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-popper@1.1.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
     peerDependencies:
@@ -2601,35 +2361,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-popper@1.1.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.0
-      '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-arrow': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/rect': 1.0.1
-      '@types/react': 18.2.61
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
     peerDependencies:
@@ -2651,26 +2382,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-portal@1.0.4(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.0
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.61
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
     peerDependencies:
@@ -2693,27 +2404,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-presence@1.0.1(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.0
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@types/react': 18.2.61
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
     peerDependencies:
@@ -2735,26 +2425,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-primitive@1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.0
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.2.0)
-      '@types/react': 18.2.61
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
     peerDependencies:
@@ -2784,34 +2454,6 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-roving-focus@1.0.4(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.0
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@types/react': 18.2.61
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@radix-ui/react-slot@1.0.2(@types/react@18.2.61)(react@18.2.0):
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -2844,12 +2486,12 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.61)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.2.61)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.4(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.61)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.61)(react@18.2.0)
       '@radix-ui/react-visually-hidden': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
@@ -2974,7 +2616,7 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.24.0
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.19)(@types/react@18.2.61)(react-dom@18.2.0)(react@18.2.0)
       '@types/react': 18.2.61
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -3992,10 +3634,20 @@ packages:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: false
 
+  /big.js@6.2.1:
+    resolution: {integrity: sha512-bCtHMwL9LeDIozFn+oNhhFoq+yQ3BNdnsLSASUxLciOb1vgvpHsIO1dsENiGMgbb4SkP5TrzWzRiLddn8ahVOQ==}
+    dev: false
+
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
 
+  /bitcoin-units@1.0.0:
+    resolution: {integrity: sha512-brac+Ttz7ovf/8D0jQHSWHnN2hmdjxDRBStxhjO752URLJlQIFpfZxzUteSZ81UYnRNiMkvsW9WsYPDuxHfnYA==}
+    dependencies:
+      big.js: 6.2.1
+    dev: false
+
   /bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
     requiresBuild: true
diff --git a/src-tauri/capabilities/main.json b/src-tauri/capabilities/main.json
index 3d7e447d..9421989f 100644
--- a/src-tauri/capabilities/main.json
+++ b/src-tauri/capabilities/main.json
@@ -9,7 +9,7 @@
     "editor",
     "settings",
     "nwc",
-    "zap",
+    "zap-*",
     "event-*",
     "user-*",
     "column-*"
diff --git a/src-tauri/gen/schemas/capabilities.json b/src-tauri/gen/schemas/capabilities.json
index 7fc969d9..da9a0763 100644
--- a/src-tauri/gen/schemas/capabilities.json
+++ b/src-tauri/gen/schemas/capabilities.json
@@ -1 +1 @@
-{"desktop-capability":{"identifier":"desktop-capability","description":"Capability for the desktop","local":true,"windows":["main","splash","editor","settings","nwc","zap","event-*","user-*","column-*"],"permissions":["path:default","event:default","window:default","app:default","resources:default","menu:default","tray:default","notification:allow-is-permission-granted","notification:allow-request-permission","notification:default","os:allow-locale","os:allow-platform","updater:allow-check","updater:default","window:allow-start-dragging","store:allow-get","clipboard-manager:allow-write","clipboard-manager:allow-read","webview:allow-create-webview-window","webview:allow-create-webview","dialog:allow-open","fs:allow-read-file","shell:allow-open",{"identifier":"http:default","allow":[{"url":"http://**/"},{"url":"https://**/"}]},{"identifier":"fs:allow-read-text-file","allow":[{"path":"$RESOURCE/locales/*"}]}],"platforms":["linux","macOS","windows"]}}
\ No newline at end of file
+{"desktop-capability":{"identifier":"desktop-capability","description":"Capability for the desktop","local":true,"windows":["main","splash","editor","settings","nwc","zap-*","event-*","user-*","column-*"],"permissions":["path:default","event:default","window:default","app:default","resources:default","menu:default","tray:default","notification:allow-is-permission-granted","notification:allow-request-permission","notification:default","os:allow-locale","os:allow-platform","updater:allow-check","updater:default","window:allow-start-dragging","store:allow-get","clipboard-manager:allow-write","clipboard-manager:allow-read","webview:allow-create-webview-window","webview:allow-create-webview","dialog:allow-open","fs:allow-read-file","shell:allow-open",{"identifier":"http:default","allow":[{"url":"http://**/"},{"url":"https://**/"}]},{"identifier":"fs:allow-read-text-file","allow":[{"path":"$RESOURCE/locales/*"}]}],"platforms":["linux","macOS","windows"]}}
\ No newline at end of file
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 0b6c3a2f..53bd5515 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -101,9 +101,9 @@ fn main() {
       nostr::metadata::get_interest,
       nostr::metadata::set_settings,
       nostr::metadata::get_settings,
-      nostr::metadata::get_nwc_status,
       nostr::metadata::set_nwc,
-      nostr::metadata::nwc_status,
+      nostr::metadata::load_nwc,
+      nostr::metadata::get_balance,
       nostr::metadata::zap_profile,
       nostr::metadata::zap_event,
       nostr::event::get_event,
diff --git a/src-tauri/src/nostr/metadata.rs b/src-tauri/src/nostr/metadata.rs
index 8b71a2c9..0007e514 100644
--- a/src-tauri/src/nostr/metadata.rs
+++ b/src-tauri/src/nostr/metadata.rs
@@ -274,14 +274,6 @@ pub async fn get_settings(id: &str, state: State<'_, Nostr>) -> Result<String, S
   }
 }
 
-#[tauri::command]
-pub async fn get_nwc_status(state: State<'_, Nostr>) -> Result<bool, ()> {
-  let client = &state.client;
-  let zapper = client.zapper().await.is_ok();
-
-  Ok(zapper)
-}
-
 #[tauri::command]
 pub async fn set_nwc(uri: &str, state: State<'_, Nostr>) -> Result<bool, String> {
   let client = &state.client;
@@ -290,7 +282,7 @@ pub async fn set_nwc(uri: &str, state: State<'_, Nostr>) -> Result<bool, String>
     if let Ok(nwc) = NWC::new(nwc_uri).await {
       let keyring = Entry::new("Lume Secret Storage", "NWC").unwrap();
       let _ = keyring.set_password(uri);
-      let _ = client.set_zapper(nwc);
+      let _ = client.set_zapper(nwc).await;
 
       Ok(true)
     } else {
@@ -302,14 +294,45 @@ pub async fn set_nwc(uri: &str, state: State<'_, Nostr>) -> Result<bool, String>
 }
 
 #[tauri::command]
-pub async fn nwc_status(state: State<'_, Nostr>) -> Result<bool, bool> {
+pub async fn load_nwc(state: State<'_, Nostr>) -> Result<bool, bool> {
   let client = &state.client;
-  match client.zapper().await {
-    Ok(_) => Ok(true),
+  let keyring = Entry::new("Lume Secret Storage", "NWC").unwrap();
+
+  match keyring.get_password() {
+    Ok(val) => {
+      let uri = NostrWalletConnectURI::from_str(&val).unwrap();
+      if let Ok(nwc) = NWC::new(uri).await {
+        client.set_zapper(nwc).await;
+        Ok(true)
+      } else {
+        Err(false)
+      }
+    }
     Err(_) => Err(false),
   }
 }
 
+#[tauri::command]
+pub async fn get_balance() -> Result<u64, String> {
+  let keyring = Entry::new("Lume Secret Storage", "NWC").unwrap();
+
+  match keyring.get_password() {
+    Ok(val) => {
+      let uri = NostrWalletConnectURI::from_str(&val).unwrap();
+      if let Ok(nwc) = NWC::new(uri).await {
+        if let Ok(balance) = nwc.get_balance().await {
+          Ok(balance)
+        } else {
+          Err("Get balance failed".into())
+        }
+      } else {
+        Err("Cannot connect to NWC".into())
+      }
+    }
+    Err(_) => Err("Something wrong".into()),
+  }
+}
+
 #[tauri::command]
 pub async fn zap_profile(
   id: &str,

From 5b13c3e45c32e4fd91b514a0d75c6507c9b7967f Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Mon, 11 Mar 2024 15:38:54 +0700
Subject: [PATCH 3/3] feat: auto close window if zapp successfully

---
 apps/desktop2/src/routes/zap.$id.lazy.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/desktop2/src/routes/zap.$id.lazy.tsx b/apps/desktop2/src/routes/zap.$id.lazy.tsx
index c86fb900..b84a4c72 100644
--- a/apps/desktop2/src/routes/zap.$id.lazy.tsx
+++ b/apps/desktop2/src/routes/zap.$id.lazy.tsx
@@ -4,6 +4,8 @@ import { Box, Container, User } from "@lume/ui";
 import { createLazyFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { getCurrent } from "@tauri-apps/api/webviewWindow";
+import { toast } from "sonner";
 import CurrencyInput from "react-currency-input-field";
 
 const DEFAULT_VALUES = [69, 100, 200, 500];
@@ -26,8 +28,22 @@ function Screen() {
   const ark = useArk();
 
   const submit = async () => {
-    const val = await ark.zap_event(id, amount, message);
-    console.log(val);
+    try {
+      // start loading
+      setIsLoading(true);
+
+      const val = await ark.zap_event(id, amount, message);
+
+      if (val) {
+        setIsCompleted(true);
+        const window = getCurrent();
+        // close current window
+        window.close();
+      }
+    } catch (e) {
+      setIsLoading(false);
+      toast.error(e);
+    }
   };
 
   return (