wip: complete new onboarding

src/app/auth/onboarding/relays.tsx

@@ -1,53 +1,37 @@
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
 
-import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';
 
-import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
+import { ArrowLeftIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
 import { User } from '@shared/user';
 
-import { FULL_RELAYS } from '@stores/constants';
+import { useOnboarding } from '@stores/onboarding';
 
 import { useNostr } from '@utils/hooks/useNostr';
 
 export function OnboardRelaysScreen() {
   const navigate = useNavigate();
+  const toggleRelays = useOnboarding((state) => state.toggleRelays);
 
   const [loading, setLoading] = useState(false);
   const [relays, setRelays] = useState(new Set<string>());
 
   const { publish } = useNostr();
   const { db } = useStorage();
-  const { ndk } = useNDK();
+  const { getAllRelaysByUsers } = useNostr();
   const { status, data } = useQuery(
     ['relays'],
     async () => {
-      const tmp = new Map<string, string>();
-      const events = await ndk.fetchEvents({
-        kinds: [10002],
-        authors: db.account.follows,
-      });
-
-      if (events) {
-        events.forEach((event) => {
-          event.tags.forEach((tag) => {
-            tmp.set(tag[1], event.pubkey);
-          });
-        });
-      }
-
-      return tmp;
+      return await getAllRelaysByUsers();
     },
     {
-      enabled: db.account ? true : false,
       refetchOnWindowFocus: false,
     }
   );
 
-  const relaysAsArray = Array.from(data?.keys() || []);
-
   const toggleRelay = (relay: string) => {
     if (relays.has(relay)) {
       setRelays((prev) => {
@@ -59,120 +43,110 @@ export function OnboardRelaysScreen() {
     }
   };
 
-  const submit = async (skip?: boolean) => {
+  const submit = async () => {
     try {
       setLoading(true);
 
-      if (!skip) {
-        for (const relay of relays) {
-          await db.createRelay(relay);
-        }
-
-        const tags = Array.from(relays).map((relay) => ['r', relay.replace(/\/+$/, '')]);
-        await publish({ content: '', kind: 10002, tags: tags });
-      } else {
-        for (const relay of FULL_RELAYS) {
-          await db.createRelay(relay);
-        }
+      for (const relay of relays) {
+        await db.createRelay(relay);
       }
 
-      // update last login
-      await db.updateLastLogin();
+      const tags = Array.from(relays).map((relay) => ['r', relay.replace(/\/+$/, '')]);
+      await publish({ content: '', kind: 10002, tags: tags });
 
-      navigate('/', { replace: true });
+      toggleRelays();
+      navigate(-1);
     } catch (e) {
       setLoading(false);
-      console.log('error: ', e);
+      toast.error(e);
     }
   };
 
   return (
-    <div className="mx-auto w-full max-w-md">
-      <div className="mb-8 text-center">
-        <h1 className="text-xl font-semibold text-white">Relay discovery</h1>
-        <p className="text-sm text-white/50">
-          You can add relay which is using by who you&apos;re following to easier reach
-          their content. Learn more about relay{' '}
-          <a
-            href="https://nostr.com/relays"
-            target="_blank"
-            rel="noreferrer"
-            className="text-blue-500 underline"
-          >
-            here (nostr.com)
-          </a>
-        </p>
+    <div className="relative flex h-full w-full flex-col justify-center">
+      <div className="absolute left-[8px] top-4">
+        <button
+          onClick={() => navigate(-1)}
+          className="inline-flex items-center gap-2 text-sm font-medium"
+        >
+          <div className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-neutral-200 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200">
+            <ArrowLeftIcon className="h-5 w-5" />
+          </div>
+          Back
+        </button>
       </div>
-      <div className="flex flex-col gap-4">
-        <div className="relative flex h-[500px] w-full flex-col divide-y divide-white/10 overflow-y-auto rounded-xl bg-white/10 backdrop-blur-xl scrollbar-none">
-          {status === 'loading' ? (
-            <div className="flex h-full w-full items-center justify-center">
-              <LoaderIcon className="h-4 w-4 animate-spin text-white" />
-            </div>
-          ) : relaysAsArray.length === 0 ? (
-            <div className="flex h-full w-full items-center justify-center px-6">
-              <p className="text-center text-white/50">
-                Lume couldn&apos;t find any relays from your follows.
-                <br />
-                You can skip this step and use default relays instead.
-              </p>
-            </div>
-          ) : (
-            relaysAsArray.map((item, index) => (
-              <button
-                key={item + index}
-                type="button"
-                onClick={() => toggleRelay(item)}
-                className="inline-flex transform items-start justify-between bg-white/10 px-4 py-2 backdrop-blur-xl hover:bg-white/20"
-              >
-                <div className="flex flex-col items-start gap-1">
-                  <p className="max-w-[15rem] truncate">{item.replace(/\/+$/, '')}</p>
-                  <User pubkey={data.get(item)} variant="mention" />
-                </div>
-                {relays.has(item) && (
-                  <div className="pt-1.5">
-                    <CheckCircleIcon className="h-4 w-4 text-green-400" />
+      <div className="mx-auto flex w-full max-w-md flex-col gap-10 px-3">
+        <h1 className="text-center text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
+          Relay discovery
+        </h1>
+        <div className="flex flex-col gap-4">
+          <div className="flex h-[420px] w-full flex-col overflow-y-auto rounded-xl bg-neutral-100 dark:bg-neutral-900">
+            {status === 'loading' ? (
+              <div className="flex h-full w-full items-center justify-center">
+                <LoaderIcon className="h-4 w-4 animate-spin text-neutral-900 dark:text-neutral-100" />
+              </div>
+            ) : data.size === 0 ? (
+              <div className="flex h-full w-full items-center justify-center px-6">
+                <p className="text-center text-neutral-300 dark:text-neutral-600">
+                  Lume couldn&apos;t find any relays from your follows.
+                  <br />
+                  You can skip this step and use default relays instead.
+                </p>
+              </div>
+            ) : (
+              [...data].map(([key, value]) => (
+                <button
+                  key={key}
+                  type="button"
+                  onClick={() => toggleRelay(key)}
+                  className="inline-flex transform items-start justify-between px-4 py-2 hover:bg-neutral-300 dark:hover:bg-neutral-700"
+                >
+                  <div className="flex w-full items-center justify-between">
+                    <div className="inline-flex items-center gap-2">
+                      <div className="pt-1.5">
+                        {relays.has(key) ? (
+                          <CheckCircleIcon className="h-4 w-4 text-teal-500" />
+                        ) : (
+                          <CheckCircleIcon className="h-4 w-4 text-neutral-300 dark:text-neutral-700" />
+                        )}
+                      </div>
+                      <p className="max-w-[15rem] truncate">{key.replace(/\/+$/, '')}</p>
+                    </div>
+                    <div className="inline-flex items-center gap-2">
+                      <span className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
+                        Used by
+                      </span>
+                      <div className="isolate flex -space-x-2">
+                        {value.slice(0, 3).map((item) => (
+                          <User key={item} pubkey={item} variant="stacked" />
+                        ))}
+                        {value.length > 3 ? (
+                          <div className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
+                            <span className="text-xs font-medium">+{value.length}</span>
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
                   </div>
-                )}
-              </button>
-            ))
-          )}
-          {relays.size > 5 && (
-            <div className="sticky bottom-0 left-0 inline-flex w-full items-center justify-center bg-white/10 px-4 py-2 backdrop-blur-2xl">
-              <p className="text-sm text-orange-400">
-                Using too much relay can cause high resource usage
-              </p>
-            </div>
-          )}
-        </div>
-        <div className="flex flex-col gap-2">
+                </button>
+              ))
+            )}
+          </div>
           <button
             type="button"
-            disabled={loading}
             onClick={() => submit()}
-            className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
+            disabled={loading}
+            className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
           >
             {loading ? (
               <>
-                <span className="w-5" />
-                <span>Creating...</span>
-                <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                <LoaderIcon className="h-4 w-4 animate-spin" />
+                <span>Adding...</span>
               </>
             ) : (
-              <>
-                <span className="w-5" />
-                <span>Add {relays.size} relays & Continue</span>
-                <ArrowRightCircleIcon className="h-5 w-5" />
-              </>
+              <span>Add {relays.size} relays & Continue</span>
             )}
           </button>
-          <button
-            type="button"
-            onClick={() => submit(true)}
-            className="inline-flex h-11 w-full items-center justify-center rounded-lg px-6 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/10 focus:outline-none"
-          >
-            Skip, use Lume default relays
-          </button>
         </div>
       </div>
     </div>