From 2a92b7c202c79d1004f36830ee99434d523ed25d Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Sun, 3 Dec 2023 08:34:44 +0700
Subject: [PATCH] polish

---
 src/app/chats/components/chatForm.tsx       |  2 +-
 src/app/nwc/components/form.tsx             | 22 +++++++--------
 src/app/nwc/index.tsx                       |  8 +++---
 src/app/relays/components/userRelayList.tsx | 31 +++++++++++++--------
 src/app/settings/backup.tsx                 |  2 +-
 src/app/settings/editProfile.tsx            | 14 +++++-----
 src/app/users/components/profile.tsx        |  2 +-
 src/shared/notes/actions/zap.tsx            | 26 +++++++++--------
 8 files changed, 59 insertions(+), 48 deletions(-)

diff --git a/src/app/chats/components/chatForm.tsx b/src/app/chats/components/chatForm.tsx
index 3cf6c4d0..27b62455 100644
--- a/src/app/chats/components/chatForm.tsx
+++ b/src/app/chats/components/chatForm.tsx
@@ -54,7 +54,7 @@ export function ChatForm({ receiverPubkey }: { receiverPubkey: string }) {
           autoCorrect="off"
           autoCapitalize="off"
           placeholder="Message..."
-          className="h-10 flex-1 resize-none bg-transparent px-3 text-neutral-900 placeholder:text-neutral-600 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-300"
+          className="h-10 flex-1 resize-none border-none bg-transparent px-3 text-neutral-900 placeholder:text-neutral-600 focus:border-none focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-100 dark:placeholder:text-neutral-300"
         />
         <button
           type="button"
diff --git a/src/app/nwc/components/form.tsx b/src/app/nwc/components/form.tsx
index 035a0e20..41a38faa 100644
--- a/src/app/nwc/components/form.tsx
+++ b/src/app/nwc/components/form.tsx
@@ -43,21 +43,19 @@ export function NWCForm({ setWalletConnectURL }) {
 
   return (
     <div className="flex flex-col gap-3 rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
-      <div className="flex flex-col gap-1.5">
-        <textarea
-          name="walletConnectURL"
-          value={uri}
-          // eslint-disable-next-line jsx-a11y/no-autofocus
-          autoFocus={false}
-          onChange={(e) => setUri(e.target.value)}
-          placeholder="nostr+walletconnect://"
-          className="h-40 w-full resize-none rounded-lg bg-neutral-200 px-3 py-3 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
-        />
-      </div>
+      <textarea
+        name="walletConnectURL"
+        value={uri}
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus={false}
+        onChange={(e) => setUri(e.target.value)}
+        placeholder="nostr+walletconnect://"
+        className="h-40 w-full resize-none rounded-lg border-transparent bg-neutral-200 px-3 py-3 text-neutral-900 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+      />
       <button
         type="button"
         onClick={submit}
-        className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
+        className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
       >
         {loading ? <LoaderIcon className="h-4 w-4 animate-spin" /> : 'Connect'}
       </button>
diff --git a/src/app/nwc/index.tsx b/src/app/nwc/index.tsx
index e13b3dff..a970338e 100644
--- a/src/app/nwc/index.tsx
+++ b/src/app/nwc/index.tsx
@@ -11,7 +11,7 @@ export function NWCScreen() {
   const [walletConnectURL, setWalletConnectURL] = useState<null | string>(null);
 
   const remove = async () => {
-    await db.secureRemove('nwc');
+    await db.secureRemove(`${db.account.pubkey}-nwc`);
     setWalletConnectURL(null);
   };
 
@@ -41,16 +41,16 @@ export function NWCScreen() {
                 <CheckCircleIcon className="h-4 w-4" />
                 <div>You&apos;re using nostr wallet connect</div>
               </div>
-              <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-3">
                 <textarea
                   readOnly
                   value={walletConnectURL.substring(0, 120) + '****'}
-                  className="relative h-40 w-full resize-none rounded-lg bg-neutral-200 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+                  className="h-40 w-full resize-none rounded-lg border-transparent bg-neutral-200 px-3 py-3 text-neutral-900 !outline-none placeholder:text-neutral-600 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
                 />
                 <button
                   type="button"
                   onClick={() => remove()}
-                  className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-neutral-200 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:bg-neutral-800 dark:text-neutral-100"
+                  className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-neutral-200 px-6 font-medium text-red-500 hover:bg-red-500 hover:text-white focus:outline-none dark:bg-neutral-800 dark:text-neutral-100"
                 >
                   Remove connection
                 </button>
diff --git a/src/app/relays/components/userRelayList.tsx b/src/app/relays/components/userRelayList.tsx
index 872e56cc..07d7c383 100644
--- a/src/app/relays/components/userRelayList.tsx
+++ b/src/app/relays/components/userRelayList.tsx
@@ -12,7 +12,7 @@ import { useRelay } from '@utils/hooks/useRelay';
 
 export function UserRelayList() {
   const { db } = useStorage();
-  const { ndk, relayUrls } = useNDK();
+  const { ndk } = useNDK();
   const { removeRelay } = useRelay();
   const { status, data } = useQuery({
     queryKey: ['relays', db.account.pubkey],
@@ -31,6 +31,8 @@ export function UserRelayList() {
     refetchOnWindowFocus: false,
   });
 
+  const currentRelays = new Set([...ndk.pool.relays.values()].map((item) => item.url));
+
   return (
     <div className="col-span-1">
       <div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
@@ -47,10 +49,10 @@ export function UserRelayList() {
           data.map((item) => (
             <div
               key={item[1]}
-              className="group flex h-11 items-center justify-between rounded-lg bg-neutral-100 pl-3 pr-1.5 dark:bg-neutral-900"
+              className="group flex h-11 items-center justify-between rounded-lg bg-neutral-100 px-3 dark:bg-neutral-900"
             >
-              <div className="inline-flex items-center gap-2.5">
-                {relayUrls.includes(item[1]) ? (
+              <div className="inline-flex items-baseline gap-2">
+                {currentRelays.has(item[1]) ? (
                   <span className="relative flex h-2 w-2">
                     <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
                     <span className="relative inline-flex h-2 w-2 rounded-full bg-teal-500"></span>
@@ -65,13 +67,20 @@ export function UserRelayList() {
                   {item[1]}
                 </p>
               </div>
-              <button
-                type="button"
-                onClick={() => removeRelay.mutate(item[1])}
-                className="hidden h-6 w-6 items-center justify-center rounded group-hover:inline-flex hover:bg-neutral-300 dark:hover:bg-neutral-700"
-              >
-                <CancelIcon className="h-4 w-4 text-neutral-900 dark:text-neutral-100" />
-              </button>
+              <div className="inline-flex items-center gap-2">
+                {item[2] ? (
+                  <div className="inline-flex h-6 w-max items-center justify-center rounded bg-neutral-200 px-2 text-xs font-medium capitalize dark:bg-neutral-900">
+                    {item[2]}
+                  </div>
+                ) : null}
+                <button
+                  type="button"
+                  onClick={() => removeRelay.mutate(item[1])}
+                  className="hidden h-6 w-6 items-center justify-center rounded group-hover:inline-flex hover:bg-neutral-300 dark:hover:bg-neutral-700"
+                >
+                  <CancelIcon className="h-4 w-4 text-neutral-900 dark:text-neutral-100" />
+                </button>
+              </div>
             </div>
           ))
         )}
diff --git a/src/app/settings/backup.tsx b/src/app/settings/backup.tsx
index abf3d77f..c8cd0cd1 100644
--- a/src/app/settings/backup.tsx
+++ b/src/app/settings/backup.tsx
@@ -39,7 +39,7 @@ export function BackupSettingScreen() {
                 readOnly
                 type={showPassword ? 'text' : 'password'}
                 value={nip19.nsecEncode(privkey)}
-                className="relative h-11 w-full resize-none rounded-lg bg-neutral-200 py-1 pl-3 pr-11 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
+                className="relative h-11 w-full resize-none rounded-lg border-none bg-neutral-200 py-1 pl-3 pr-11 text-neutral-900 !outline-none placeholder:text-neutral-600 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-400"
               />
               <button
                 type="button"
diff --git a/src/app/settings/editProfile.tsx b/src/app/settings/editProfile.tsx
index e11d99a9..3ba8ff21 100644
--- a/src/app/settings/editProfile.tsx
+++ b/src/app/settings/editProfile.tsx
@@ -186,7 +186,7 @@ export function EditProfileScreen() {
               type={'text'}
               {...register('display_name')}
               spellCheck={false}
-              className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+              className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
             />
           </div>
           <div className="flex flex-col gap-1">
@@ -200,7 +200,7 @@ export function EditProfileScreen() {
               type={'text'}
               {...register('name')}
               spellCheck={false}
-              className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+              className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
             />
           </div>
           <div className="flex flex-col gap-1">
@@ -214,7 +214,7 @@ export function EditProfileScreen() {
               <input
                 {...register('nip05')}
                 spellCheck={false}
-                className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+                className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
               />
               <div className="absolute right-2 top-1/2 -translate-y-1/2 transform">
                 {nip05.verified ? (
@@ -247,7 +247,7 @@ export function EditProfileScreen() {
               type={'text'}
               {...register('website', { required: false })}
               spellCheck={false}
-              className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+              className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
             />
           </div>
           <div className="flex flex-col gap-1">
@@ -261,7 +261,7 @@ export function EditProfileScreen() {
               type={'text'}
               {...register('lud16', { required: false })}
               spellCheck={false}
-              className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+              className="relative h-11 w-full rounded-lg border-transparent bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
             />
           </div>
           <div className="flex flex-col gap-1">
@@ -274,14 +274,14 @@ export function EditProfileScreen() {
             <textarea
               {...register('about')}
               spellCheck={false}
-              className="relative h-20 w-full resize-none rounded-lg bg-neutral-100 px-3 py-2 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100"
+              className="relative h-20 w-full resize-none rounded-lg border-transparent bg-neutral-100 px-3 py-2 text-neutral-900 !outline-none backdrop-blur-xl placeholder:text-neutral-500 focus:border-blue-500 focus:ring focus:ring-blue-200 dark:bg-neutral-900 dark:text-neutral-100"
             />
           </div>
           <div>
             <button
               type="submit"
               disabled={!isValid}
-              className="mx-auto inline-flex h-9 w-full transform items-center justify-center gap-1 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
+              className="mx-auto inline-flex h-11 w-full transform items-center justify-center gap-1 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none active:translate-y-1 disabled:pointer-events-none disabled:opacity-50"
             >
               {loading ? (
                 <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
diff --git a/src/app/users/components/profile.tsx b/src/app/users/components/profile.tsx
index 57bcf132..0e357482 100644
--- a/src/app/users/components/profile.tsx
+++ b/src/app/users/components/profile.tsx
@@ -100,7 +100,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
             loading="lazy"
             decoding="async"
             style={{ contentVisibility: 'auto' }}
-            className="h-14 w-14 rounded-lg bg-white ring-2 ring-neutral-100 dark:ring-neutral-900"
+            className="h-14 w-14 rounded-lg bg-white object-cover ring-2 ring-neutral-100 dark:ring-neutral-900"
           />
           <Avatar.Fallback delayMs={300}>
             <img
diff --git a/src/shared/notes/actions/zap.tsx b/src/shared/notes/actions/zap.tsx
index 7eddcd99..9f7fbaac 100644
--- a/src/shared/notes/actions/zap.tsx
+++ b/src/shared/notes/actions/zap.tsx
@@ -10,6 +10,7 @@ import CurrencyInput from 'react-currency-input-field';
 import { useNavigate } from 'react-router-dom';
 
 import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
 
 import { CancelIcon, ZapIcon } from '@shared/icons';
 
@@ -21,6 +22,7 @@ export function NoteZap({ event }: { event: NDKEvent }) {
   const nwc = useRef(null);
   const navigate = useNavigate();
 
+  const { db } = useStorage();
   const { ndk } = useNDK();
   const { user } = useProfile(event.pubkey);
 
@@ -84,7 +86,9 @@ export function NoteZap({ event }: { event: NDKEvent }) {
 
   useEffect(() => {
     async function getWalletConnectURL() {
-      const uri: string = await invoke('secure_load', { key: 'nwc' });
+      const uri: string = await invoke('secure_load', {
+        key: `${db.account.pubkey}-nwc`,
+      });
       if (uri) setWalletConnectURL(uri);
     }
 
@@ -135,7 +139,7 @@ export function NoteZap({ event }: { event: NDKEvent }) {
                         max={10000} // 1M sats
                         maxLength={10000} // 1M sats
                         onValueChange={(value) => setAmount(value)}
-                        className="w-full flex-1 bg-transparent text-right text-4xl font-semibold placeholder:text-neutral-600 focus:outline-none dark:text-neutral-400"
+                        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-600 dark:text-neutral-400">
                         sats
@@ -189,28 +193,28 @@ export function NoteZap({ event }: { event: NDKEvent }) {
                       autoCorrect="off"
                       autoCapitalize="off"
                       placeholder="Enter message (optional)"
-                      className="w-full resize-none rounded-lg bg-neutral-100 px-3 py-3 !outline-none placeholder:text-neutral-600 dark:bg-neutral-900 dark:text-neutral-400"
+                      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">
                       {walletConnectURL ? (
                         <button
                           type="button"
                           onClick={() => createZapRequest()}
-                          className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
+                          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
                         >
                           {isCompleted ? (
-                            <p>Successfully tipped</p>
+                            <p className="leading-tight">Successfully zapped</p>
                           ) : isLoading ? (
                             <span className="flex flex-col">
-                              <p>Waiting for approval</p>
-                              <p className="text-xs text-neutral-600 dark:text-neutral-400">
+                              <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>Send tip</p>
-                              <p className="text-xs text-neutral-600 dark:text-neutral-400">
+                              <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>
@@ -220,7 +224,7 @@ export function NoteZap({ event }: { event: NDKEvent }) {
                         <button
                           type="button"
                           onClick={() => createZapRequest()}
-                          className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
+                          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-blue-500 px-4 font-medium text-white hover:bg-blue-600"
                         >
                           Create Lightning invoice
                         </button>
@@ -234,7 +238,7 @@ export function NoteZap({ event }: { event: NDKEvent }) {
                     <QRCodeSVG value={invoice} size={256} />
                   </div>
                   <div className="flex flex-col items-center gap-1">
-                    <h3 className="text-lg font-medium">Scan to pay</h3>
+                    <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 />