From ed6423e4aafe89d5e18d3e565a6aecb34b915566 Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Thu, 18 Jan 2024 15:09:16 +0700
Subject: [PATCH] feat: polish

---
 apps/desktop/src/routes/activty/index.tsx     |   9 +
 apps/desktop/src/routes/settings/nwc.tsx      |  67 +++---
 .../ark/src/components/note/buttons/zap.tsx   | 194 +++++++++---------
 packages/ark/src/provider.tsx                 |  29 ++-
 packages/ui/src/navigation.tsx                |   4 +-
 packages/ui/src/unread.tsx                    |  14 ++
 6 files changed, 176 insertions(+), 141 deletions(-)
 create mode 100644 packages/ui/src/unread.tsx

diff --git a/apps/desktop/src/routes/activty/index.tsx b/apps/desktop/src/routes/activty/index.tsx
index 84945ffc..5a13bf81 100644
--- a/apps/desktop/src/routes/activty/index.tsx
+++ b/apps/desktop/src/routes/activty/index.tsx
@@ -1,7 +1,16 @@
+import { activityUnreadAtom } from "@lume/utils";
+import { useSetAtom } from "jotai";
+import { useEffect } from "react";
 import { Outlet } from "react-router-dom";
 import { ActivityList } from "./components/list";
 
 export function ActivityScreen() {
+	const setUnreadActivity = useSetAtom(activityUnreadAtom);
+
+	useEffect(() => {
+		setUnreadActivity(0);
+	}, []);
+
 	return (
 		<div className="flex h-full w-full rounded-xl shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] dark:shadow-none dark:ring-1 dark:ring-white/10">
 			<div className="h-full flex flex-col w-96 shrink-0 rounded-l-xl bg-white/50 backdrop-blur-xl dark:bg-black/50">
diff --git a/apps/desktop/src/routes/settings/nwc.tsx b/apps/desktop/src/routes/settings/nwc.tsx
index 73d41647..17fa1b6d 100644
--- a/apps/desktop/src/routes/settings/nwc.tsx
+++ b/apps/desktop/src/routes/settings/nwc.tsx
@@ -1,4 +1,3 @@
-import { webln } from "@getalby/sdk";
 import { useArk } from "@lume/ark";
 import { useStorage } from "@lume/storage";
 import * as Switch from "@radix-ui/react-switch";
@@ -28,7 +27,10 @@ export function NWCScreen() {
 			const params = new URLSearchParams(uriObj.search);
 
 			if (params.has("relay") && params.has("secret")) {
-				await storage.createPrivkey("Nostr Wallet Connect", walletConnectURL);
+				await storage.createPrivkey(
+					`${ark.account.pubkey}.nwc`,
+					walletConnectURL,
+				);
 
 				storage.nwc = walletConnectURL;
 
@@ -52,19 +54,11 @@ export function NWCScreen() {
 	};
 
 	const remove = async () => {
-		await storage.removePrivkey(`${ark.account.pubkey}-nwc`);
-		setWalletConnectURL(null);
-	};
+		await storage.removePrivkey(`${ark.account.pubkey}.nwc`);
 
-	const loadBalance = async () => {
-		const nwc = new webln.NostrWebLNProvider({
-			nostrWalletConnectUrl: walletConnectURL,
-		});
-		await nwc.enable();
-
-		const balanceResponse = await nwc.getBalance();
-
-		nwc.close();
+		setWalletConnectURL("");
+		setSettings((state) => ({ ...state, nwc: false }));
+		storage.nwc = null;
 	};
 
 	useEffect(() => {
@@ -78,37 +72,34 @@ export function NWCScreen() {
 		<div className="mx-auto w-full max-w-lg">
 			<div className="flex flex-col gap-6">
 				<div className="flex w-full items-center justify-between">
-					<div className="flex w-full items-center gap-8">
+					<div className="flex w-full items-start gap-8">
 						<div className="w-36 shrink-0 text-end text-sm font-semibold">
 							Connection String
 						</div>
-						<div className="relative w-full">
-							<input
-								type="password"
+						<div className="flex flex-col items-end gap-2 w-full">
+							<textarea
 								spellCheck={false}
 								value={walletConnectURL}
 								onChange={(e) => setWalletConnectURL(e.target.value)}
-								className="w-full border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none h-9 rounded-lg ring-0 placeholder:text-neutral-600 bg-neutral-100 dark:bg-neutral-900"
+								className="w-full h-24 resize-none border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none rounded-lg ring-0 placeholder:text-neutral-600 bg-neutral-100 dark:bg-neutral-900"
 							/>
-							<div className="h-9 absolute right-0 top-0 inline-flex items-center justify-center">
-								{!settings.nwc ? (
-									<button
-										type="button"
-										onClick={saveNWC}
-										className="mr-1 h-7 w-16 text-sm font-medium shrink-0 inline-flex items-center justify-center rounded-md bg-neutral-200 dark:bg-neutral-800 hover:bg-neutral-300 dark:hover:bg-neutral-700"
-									>
-										Save
-									</button>
-								) : (
-									<button
-										type="button"
-										onClick={remove}
-										className="mr-1 h-7 w-16 text-sm font-medium shrink-0 inline-flex items-center justify-center rounded-md bg-neutral-200 dark:bg-neutral-800 hover:bg-neutral-300 dark:hover:bg-neutral-700"
-									>
-										Remove
-									</button>
-								)}
-							</div>
+							{!settings.nwc ? (
+								<button
+									type="button"
+									onClick={saveNWC}
+									className="h-8 w-16 text-sm font-medium shrink-0 inline-flex items-center justify-center rounded-md bg-neutral-200 dark:bg-neutral-800 hover:bg-neutral-300 dark:hover:bg-neutral-700"
+								>
+									Save
+								</button>
+							) : (
+								<button
+									type="button"
+									onClick={remove}
+									className="h-8 w-16 text-sm font-medium shrink-0 inline-flex items-center justify-center rounded-md bg-neutral-200 dark:bg-neutral-800 hover:bg-neutral-300 dark:hover:bg-neutral-700"
+								>
+									Remove
+								</button>
+							)}
 						</div>
 					</div>
 				</div>
diff --git a/packages/ark/src/components/note/buttons/zap.tsx b/packages/ark/src/components/note/buttons/zap.tsx
index 0bf8b1b1..3523cc24 100644
--- a/packages/ark/src/components/note/buttons/zap.tsx
+++ b/packages/ark/src/components/note/buttons/zap.tsx
@@ -5,15 +5,14 @@ import { useStorage } from "@lume/storage";
 import { cn, compactNumber, displayNpub } from "@lume/utils";
 import * as Dialog from "@radix-ui/react-dialog";
 import * as Tooltip from "@radix-ui/react-tooltip";
+import { QRCodeSVG } from "qrcode.react";
 import { useState } from "react";
 import CurrencyInput from "react-currency-input-field";
 import { toast } from "sonner";
-import { useArk } from "../../../hooks/useArk";
 import { useProfile } from "../../../hooks/useProfile";
 import { useNoteContext } from "../provider";
 
 export function NoteZap() {
-	const ark = useArk();
 	const storage = useStorage();
 	const event = useNoteContext();
 
@@ -22,11 +21,12 @@ export function NoteZap() {
 	const [isOpen, setIsOpen] = useState(false);
 	const [isCompleted, setIsCompleted] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
+	const [invoice, setInvoice] = useState<string>(null);
 
 	const { user } = useProfile(event.pubkey);
 
 	const createZapRequest = async (instant?: boolean) => {
-		if (!storage.nwc) return;
+		if (instant && !storage.nwc) return;
 
 		let nwc: webln.NostrWebLNProvider = undefined;
 
@@ -37,6 +37,8 @@ export function NoteZap() {
 			const zapAmount = parseInt(amount) * 1000;
 			const res = await event.zap(zapAmount, zapMessage);
 
+			if (!storage.nwc) return setInvoice(res);
+
 			// user connect nwc
 			nwc = new webln.NostrWebLNProvider({
 				nostrWalletConnectUrl: storage.nwc,
@@ -144,101 +146,105 @@ export function NoteZap() {
 								<CancelIcon className="w-4 h-4" />
 							</Dialog.Close>
 						</div>
-						<div className="px-5 pb-5 overflow-x-hidden overflow-y-auto">
-							<div className="relative flex flex-col h-40">
-								<div className="inline-flex items-center justify-center flex-1 h-full 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(value)}
-										className="flex-1 w-full text-4xl font-semibold text-right bg-transparent border-none placeholder:text-neutral-600 focus:outline-none focus:ring-0 dark:text-neutral-400"
+						{!invoice ? (
+							<div className="px-5 pb-5 overflow-x-hidden overflow-y-auto">
+								<div className="relative flex flex-col h-40">
+									<div className="inline-flex items-center justify-center flex-1 h-full 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(value)}
+											className="flex-1 w-full text-4xl font-semibold text-right bg-transparent border-none placeholder:text-neutral-600 focus:outline-none focus:ring-0 dark:text-neutral-400"
+										/>
+										<span className="flex-1 w-full text-4xl font-semibold text-left text-neutral-500 dark:text-neutral-400">
+											sats
+										</span>
+									</div>
+									<div className="inline-flex items-center justify-center gap-2">
+										<button
+											type="button"
+											onClick={() => setAmount("69")}
+											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"
+										>
+											69 sats
+										</button>
+										<button
+											type="button"
+											onClick={() => setAmount("100")}
+											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"
+										>
+											100 sats
+										</button>
+										<button
+											type="button"
+											onClick={() => setAmount("200")}
+											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"
+										>
+											200 sats
+										</button>
+										<button
+											type="button"
+											onClick={() => setAmount("500")}
+											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"
+										>
+											500 sats
+										</button>
+										<button
+											type="button"
+											onClick={() => setAmount("1000")}
+											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"
+										>
+											1K sats
+										</button>
+									</div>
+								</div>
+								<div className="flex flex-col w-full gap-2 mt-4">
+									<input
+										name="zapMessage"
+										value={zapMessage}
+										onChange={(e) => setZapMessage(e.target.value)}
+										spellCheck={false}
+										autoComplete="off"
+										autoCorrect="off"
+										autoCapitalize="off"
+										placeholder="Enter message (optional)"
+										className="w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-3 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-400"
 									/>
-									<span className="flex-1 w-full text-4xl font-semibold text-left text-neutral-500 dark:text-neutral-400">
-										sats
+									<div className="flex flex-col gap-2">
+										<button
+											type="button"
+											onClick={() => createZapRequest()}
+											className="inline-flex items-center justify-center w-full px-4 font-medium text-white bg-blue-500 rounded-lg h-11 hover:bg-blue-600"
+										>
+											{isCompleted
+												? "Zapped"
+												: isLoading
+												  ? "Processing..."
+												  : "Zap"}
+										</button>
+									</div>
+								</div>
+							</div>
+						) : (
+							<div className="px-5 pb-5 flex flex-col items-center justify-center gap-4">
+								<div className="rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
+									<QRCodeSVG value={invoice} size={256} />
+								</div>
+								<div className="flex flex-col items-center gap-1">
+									<h3 className="text-lg font-medium">Scan to zap</h3>
+									<span className="text-center text-sm text-neutral-600 dark:text-neutral-400">
+										You must use Bitcoin wallet which support Lightning
+										<br />
+										such as: Blue Wallet, Bitkit, Phoenix,...
 									</span>
 								</div>
-								<div className="inline-flex items-center justify-center gap-2">
-									<button
-										type="button"
-										onClick={() => setAmount("69")}
-										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"
-									>
-										69 sats
-									</button>
-									<button
-										type="button"
-										onClick={() => setAmount("100")}
-										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"
-									>
-										100 sats
-									</button>
-									<button
-										type="button"
-										onClick={() => setAmount("200")}
-										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"
-									>
-										200 sats
-									</button>
-									<button
-										type="button"
-										onClick={() => setAmount("500")}
-										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"
-									>
-										500 sats
-									</button>
-									<button
-										type="button"
-										onClick={() => setAmount("1000")}
-										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"
-									>
-										1K sats
-									</button>
-								</div>
 							</div>
-							<div className="flex flex-col w-full gap-2 mt-4">
-								<input
-									name="zapMessage"
-									value={zapMessage}
-									onChange={(e) => setZapMessage(e.target.value)}
-									spellCheck={false}
-									autoComplete="off"
-									autoCorrect="off"
-									autoCapitalize="off"
-									placeholder="Enter message (optional)"
-									className="w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-3 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-400"
-								/>
-								<div className="flex flex-col gap-2">
-									<button
-										type="button"
-										onClick={() => createZapRequest()}
-										className="inline-flex items-center justify-center w-full px-4 font-medium text-white bg-blue-500 rounded-lg h-11 hover:bg-blue-600"
-									>
-										{isCompleted ? (
-											<p className="leading-tight">Successfully zapped</p>
-										) : isLoading ? (
-											<span className="flex flex-col">
-												<p className="leading-tight">Waiting for approval</p>
-												<p className="text-xs leading-tight text-neutral-100">
-													Go to your wallet and approve payment request
-												</p>
-											</span>
-										) : (
-											<span className="flex flex-col">
-												<p className="leading-tight">Send zap</p>
-												<p className="text-xs leading-tight text-neutral-100">
-													You&apos;re using nostr wallet connect
-												</p>
-											</span>
-										)}
-									</button>
-								</div>
-							</div>
-						</div>
+						)}
 					</div>
 				</Dialog.Content>
 			</Dialog.Portal>
diff --git a/packages/ark/src/provider.tsx b/packages/ark/src/provider.tsx
index e5be26f4..a28d7f00 100644
--- a/packages/ark/src/provider.tsx
+++ b/packages/ark/src/provider.tsx
@@ -1,7 +1,12 @@
 import { LoaderIcon } from "@lume/icons";
 import { NDKCacheAdapterTauri } from "@lume/ndk-cache-tauri";
 import { useStorage } from "@lume/storage";
-import { FETCH_LIMIT, QUOTES, sendNativeNotification } from "@lume/utils";
+import {
+	FETCH_LIMIT,
+	QUOTES,
+	activityUnreadAtom,
+	sendNativeNotification,
+} from "@lume/utils";
 import NDK, {
 	NDKEvent,
 	NDKKind,
@@ -14,6 +19,7 @@ import NDK, {
 import { useQueryClient } from "@tanstack/react-query";
 import { message } from "@tauri-apps/plugin-dialog";
 import { fetch } from "@tauri-apps/plugin-http";
+import { useSetAtom } from "jotai";
 import Linkify from "linkify-react";
 import { normalizeRelayUrlSet } from "nostr-fetch";
 import { PropsWithChildren, useEffect, useState } from "react";
@@ -23,6 +29,7 @@ import { LumeContext } from "./context";
 export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
 	const storage = useStorage();
 	const queryClient = useQueryClient();
+	const setUnreadActivity = useSetAtom(activityUnreadAtom);
 
 	const [ark, setArk] = useState<Ark>(undefined);
 	const [ndk, setNDK] = useState<NDK>(undefined);
@@ -66,6 +73,11 @@ export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
 			const userPrivkey = await storage.loadPrivkey(storage.currentUser.pubkey);
 			if (!userPrivkey) return null;
 
+			// load nwc
+			storage.nwc = await storage.loadPrivkey(
+				`${storage.currentUser.pubkey}.nwc`,
+			);
+
 			return new NDKPrivateKeySigner(userPrivkey);
 		} catch (e) {
 			console.error(e);
@@ -99,7 +111,7 @@ export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
 			enableOutboxModel: !storage.settings.lowPower,
 			autoConnectUserRelays: !storage.settings.lowPower,
 			autoFetchUserMutelist: !storage.settings.lowPower,
-			// clientName: "Lume",
+			clientName: "Lume",
 			// clientNip89: '',
 		});
 
@@ -120,7 +132,7 @@ export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
 		ndk.relayAuthDefaultPolicy = async (relay: NDKRelay, challenge: string) => {
 			const signIn = NDKRelayAuthPolicies.signIn({ ndk });
 			const event = await signIn(relay, challenge).catch((e) =>
-				console.error(e),
+				console.log("auth failed", e),
 			);
 			if (event) {
 				await sendNativeNotification(
@@ -147,7 +159,7 @@ export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
 			await ark.getUserContacts();
 
 			// subscribe for new activity
-			const notifySub = ndk.subscribe(
+			const activitySub = ndk.subscribe(
 				{
 					kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Zap],
 					since: Math.floor(Date.now() / 1000),
@@ -156,25 +168,26 @@ export const LumeProvider = ({ children }: PropsWithChildren<object>) => {
 				{ closeOnEose: false, groupable: false },
 			);
 
-			notifySub.addListener("event", async (event: NDKEvent) => {
+			activitySub.addListener("event", async (event: NDKEvent) => {
+				setUnreadActivity((state) => state + 1);
 				const profile = await ark.getUserProfile(event.pubkey);
 				switch (event.kind) {
 					case NDKKind.Text:
 						return await sendNativeNotification(
 							`${
-								profile.displayName || profile.name || "anon"
+								profile.displayName || profile.name || "Anon"
 							} has replied to your note`,
 						);
 					case NDKKind.Repost:
 						return await sendNativeNotification(
 							`${
-								profile.displayName || profile.name || "anon"
+								profile.displayName || profile.name || "Anon"
 							} has reposted to your note`,
 						);
 					case NDKKind.Zap:
 						return await sendNativeNotification(
 							`${
-								profile.displayName || profile.name || "anon"
+								profile.displayName || profile.name || "Anon"
 							} has zapped to your note`,
 						);
 					default:
diff --git a/packages/ui/src/navigation.tsx b/packages/ui/src/navigation.tsx
index 7240765b..0bc3dd03 100644
--- a/packages/ui/src/navigation.tsx
+++ b/packages/ui/src/navigation.tsx
@@ -15,6 +15,7 @@ import { useAtom } from "jotai";
 import { useHotkeys } from "react-hotkeys-hook";
 import { NavLink } from "react-router-dom";
 import { ActiveAccount } from "./account/active";
+import { UnreadActivity } from "./unread";
 
 export function Navigation() {
 	const [isEditorOpen, setIsEditorOpen] = useAtom(editorAtom);
@@ -74,7 +75,7 @@ export function Navigation() {
 						{({ isActive }) => (
 							<div
 								className={cn(
-									"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
+									"relative inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
 									isActive
 										? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
 										: "text-black/50 dark:text-neutral-400",
@@ -85,6 +86,7 @@ export function Navigation() {
 								) : (
 									<BellIcon className="size-6" />
 								)}
+								<UnreadActivity />
 							</div>
 						)}
 					</NavLink>
diff --git a/packages/ui/src/unread.tsx b/packages/ui/src/unread.tsx
new file mode 100644
index 00000000..d4dcc5fd
--- /dev/null
+++ b/packages/ui/src/unread.tsx
@@ -0,0 +1,14 @@
+import { activityUnreadAtom, compactNumber } from "@lume/utils";
+import { useAtomValue } from "jotai";
+
+export function UnreadActivity() {
+	const total = useAtomValue(activityUnreadAtom);
+
+	if (total <= 0) return null;
+
+	return (
+		<div className="absolute -right-0.5 -top-0.5 inline-flex size-5 items-center justify-center rounded-full bg-teal-500 text-[9px] font-medium text-white">
+			{compactNumber.format(total)}
+		</div>
+	);
+}