From 4fa8f40e6aa538e24a07595339b62376c8d9b404 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Tue, 19 Sep 2023 15:06:12 +0700
Subject: [PATCH] improve nwc

---
 src-tauri/Cargo.lock                    |  2 +-
 src/app/nwc/index.tsx                   |  6 +++---
 src/shared/notes/actions/zap.tsx        | 17 ++++++++++++++++-
 src/shared/widgets/other/learnNostr.tsx | 19 ++++++++-----------
 src/stores/activities.ts                |  4 ++--
 5 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 0e80e80e..8770ab3a 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -2627,7 +2627,7 @@ dependencies = [
 
 [[package]]
 name = "lume"
-version = "1.2.4"
+version = "1.2.5"
 dependencies = [
  "rust-argon2 1.0.0",
  "serde",
diff --git a/src/app/nwc/index.tsx b/src/app/nwc/index.tsx
index 4c00138d..10f1b133 100644
--- a/src/app/nwc/index.tsx
+++ b/src/app/nwc/index.tsx
@@ -38,7 +38,7 @@ export function NWCScreen() {
               <NWCOther />
             </div>
           ) : (
-            <div className="flex w-full flex-col rounded-xl bg-white/10 p-3">
+            <div className="flex w-full flex-col rounded-xl border-t border-white/10 bg-white/20 p-3">
               <div className="mb-1 inline-flex items-center gap-1.5 text-sm text-green-500">
                 <CheckCircleIcon className="h-4 w-4" />
                 <p>You&apos;re using nostr wallet connect</p>
@@ -47,12 +47,12 @@ export function NWCScreen() {
                 <textarea
                   readOnly
                   value={walletConnectURL.substring(0, 120) + '****'}
-                  className="relative h-40 w-full resize-none rounded-lg bg-white/10 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
+                  className="relative h-40 w-full resize-none rounded-lg bg-white/20 px-3 py-1 text-white !outline-none backdrop-blur-xl placeholder:text-white/50"
                 />
                 <button
                   type="button"
                   onClick={() => remove()}
-                  className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/5 px-6 font-medium leading-none text-red-500 hover:bg-white/10 focus:outline-none disabled:opacity-50"
+                  className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-white/10 px-6 font-medium leading-none text-red-500 hover:bg-white/20 focus:outline-none disabled:opacity-50"
                 >
                   Remove connection
                 </button>
diff --git a/src/shared/notes/actions/zap.tsx b/src/shared/notes/actions/zap.tsx
index e1d02e9f..dff857f4 100644
--- a/src/shared/notes/actions/zap.tsx
+++ b/src/shared/notes/actions/zap.tsx
@@ -27,6 +27,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
   const [invoice, setInvoice] = useState<null | string>(null);
   const [isOpen, setIsOpen] = useState(false);
   const [isCompleted, setIsCompleted] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const walletConnectURL = useStronghold((state) => state.walletConnectURL);
   const nwc = useRef(null);
@@ -51,7 +52,11 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
       });
       await nwc.current.enable();
 
+      // start loading
+      setIsLoading(true);
+      // send payment via nwc
       const send: SendPaymentResponse = await nwc.current.sendPayment(res);
+
       if (send) {
         await sendNativeNotification(
           `You've tipped ${compactNumber.format(send.amount)} sats to ${
@@ -62,6 +67,7 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
         // eose
         nwc.current.close();
         setIsCompleted(true);
+        setIsLoading(false);
 
         // reset after 3 secs
         const timeout = setTimeout(() => setIsCompleted(false), 3000);
@@ -69,15 +75,17 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
       }
     } catch (e) {
       nwc.current.close();
+      setIsLoading(false);
       await message(JSON.stringify(e), { title: 'Zap', type: 'error' });
     }
   };
 
   useEffect(() => {
     return () => {
-      setAmount('');
+      setAmount('21');
       setZapMessage('');
       setIsCompleted(false);
+      setIsLoading(false);
     };
   }, []);
 
@@ -183,6 +191,13 @@ export function NoteZap({ id, pubkey }: { id: string; pubkey: string }) {
                         >
                           {isCompleted ? (
                             <p>Successfully tipped</p>
+                          ) : isLoading ? (
+                            <span className="flex flex-col">
+                              <p className="mb-px leading-none">Waiting for approval</p>
+                              <p className="text-xs leading-none text-white/70">
+                                Go to your wallet and approve payment request
+                              </p>
+                            </span>
                           ) : (
                             <span className="flex flex-col">
                               <p className="mb-px leading-none">Send tip</p>
diff --git a/src/shared/widgets/other/learnNostr.tsx b/src/shared/widgets/other/learnNostr.tsx
index f31c761a..aee20b27 100644
--- a/src/shared/widgets/other/learnNostr.tsx
+++ b/src/shared/widgets/other/learnNostr.tsx
@@ -34,18 +34,15 @@ export function LearnNostrWidget({ params }: { params: Widget }) {
                     key={index}
                     type="button"
                     onClick={() => open(item.id)}
-                    className="flex items-center justify-between rounded-xl bg-white/10 px-3 py-3 hover:bg-white/20"
+                    className="flex items-center justify-between rounded-xl bg-white/10 px-4 py-3 hover:bg-white/20"
                   >
-                    <div className="inline-flex items-center gap-2.5">
-                      <div className="h-10 w-10 shrink-0 rounded-md bg-white/10" />
-                      <div className="flex flex-col items-start gap-1">
-                        <h5 className="font-semibold leading-none">{item.title}</h5>
-                        {seens.has(item.id) ? (
-                          <p className="text-sm leading-none text-green-500">Readed</p>
-                        ) : (
-                          <p className="text-sm leading-none text-white/70">Unread</p>
-                        )}
-                      </div>
+                    <div className="flex flex-col items-start gap-1">
+                      <h5 className="font-semibold leading-none">{item.title}</h5>
+                      {seens.has(item.id) ? (
+                        <p className="text-sm leading-none text-green-500">Readed</p>
+                      ) : (
+                        <p className="text-sm leading-none text-white/70">Unread</p>
+                      )}
                     </div>
                     <ArrowRightIcon className="h-5 w-5 text-white" />
                   </button>
diff --git a/src/stores/activities.ts b/src/stores/activities.ts
index 906b89cc..a5a3b9cb 100644
--- a/src/stores/activities.ts
+++ b/src/stores/activities.ts
@@ -13,10 +13,10 @@ export const useActivities = create<ActivitiesState>((set) => ({
   activities: null,
   totalNewActivities: 0,
   setActivities: (events: NDKEvent[], lastLogin: number) => {
-    const latest = events.filter((ev) => ev.created_at > lastLogin);
+    const totalLatest = events.filter((ev) => ev.created_at > lastLogin)?.length ?? 0;
     set(() => ({
       activities: events,
-      totalNewActivities: latest.length > 0 ? latest.length : 0,
+      totalNewActivities: totalLatest,
     }));
   },
   addActivity: (event: NDKEvent) => {