wip: complete new onboarding

src/app/auth/onboarding/enrich.tsx

@@ -1,17 +1,19 @@
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
 
 import { useStorage } from '@libs/storage/provider';
 
 import { ArrowLeftIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
 import { User } from '@shared/user';
 
+import { useOnboarding } from '@stores/onboarding';
+
 import { useNostr } from '@utils/hooks/useNostr';
 import { arrayToNIP02 } from '@utils/transform';
 
 export function OnboardEnrichScreen() {
-  const { publish, fetchUserData } = useNostr();
   const { db } = useStorage();
   const { status, data } = useQuery(['trending-profiles-widget'], async () => {
     const res = await fetch('https://api.nostr.band/v0/trending/profiles');
@@ -20,11 +22,13 @@ export function OnboardEnrichScreen() {
     }
     return res.json();
   });
+  const { publish } = useNostr();
 
   const [loading, setLoading] = useState(false);
   const [follows, setFollows] = useState([]);
 
   const navigate = useNavigate();
+  const setEnrich = useOnboarding((state) => state.toggleEnrich);
 
   // toggle follow state
   const toggleFollow = (pubkey: string) => {
@@ -38,21 +42,24 @@ export function OnboardEnrichScreen() {
     try {
       setLoading(true);
 
-      const tags = arrayToNIP02([...follows, db.account.pubkey]);
+      const tags = arrayToNIP02(follows);
       const event = await publish({ content: '', kind: 3, tags: tags });
 
-      // prefetch data
-      const user = await fetchUserData(follows);
-
       // redirect to next step
-      if (event && user.status === 'ok') {
-        navigate('/auth/onboarding/step-2', { replace: true });
+      if (event) {
+        db.account.follows = follows;
+
+        await db.updateAccount('follows', JSON.stringify(follows));
+        await db.updateAccount('circles', JSON.stringify(follows));
+
+        setEnrich();
+        navigate(-1);
       } else {
         setLoading(false);
       }
     } catch (e) {
       setLoading(false);
-      console.log('error: ', e);
+      toast(e);
     }
   };
 
@@ -71,7 +78,7 @@ export function OnboardEnrichScreen() {
       </div>
       <div className="mx-auto mb-8 w-full max-w-md px-3">
         <h1 className="text-center text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
-          {loading ? 'Loading...' : 'Enrich your network'}
+          Enrich your network
         </h1>
       </div>
       <div className="flex w-full flex-nowrap items-center gap-4 overflow-x-auto px-4 scrollbar-none">

src/app/auth/onboarding/hashtag.tsx

@@ -4,17 +4,20 @@ import { useNavigate } from 'react-router-dom';
 
 import { useStorage } from '@libs/storage/provider';
 
-import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
+import { ArrowLeftIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
 
+import { useOnboarding } from '@stores/onboarding';
 import { WidgetKinds } from '@stores/widgets';
 
 const data = [
   { hashtag: '#bitcoin' },
   { hashtag: '#nostr' },
   { hashtag: '#nostrdesign' },
+  { hashtag: '#security' },
   { hashtag: '#zap' },
   { hashtag: '#LFG' },
   { hashtag: '#zapchain' },
+  { hashtag: '#shitcoin' },
   { hashtag: '#plebchain' },
   { hashtag: '#nodes' },
   { hashtag: '#hodl' },
@@ -23,21 +26,26 @@ const data = [
   { hashtag: '#meme' },
   { hashtag: '#memes' },
   { hashtag: '#memestr' },
-  { hashtag: '#penisbutter' },
+  { hashtag: '#nostriches' },
+  { hashtag: '#dev' },
   { hashtag: '#anime' },
   { hashtag: '#waifu' },
   { hashtag: '#manga' },
-  { hashtag: '#nostriches' },
-  { hashtag: '#dev' },
+  { hashtag: '#lume' },
+  { hashtag: '#snort' },
+  { hashtag: '#damus' },
+  { hashtag: '#primal' },
 ];
 
 export function OnboardHashtagScreen() {
   const { db } = useStorage();
-  const navigate = useNavigate();
 
   const [loading, setLoading] = useState(false);
   const [tags, setTags] = useState(new Set<string>());
 
+  const navigate = useNavigate();
+  const setHashtag = useOnboarding((state) => state.toggleHashtag);
+
   const toggleTag = (tag: string) => {
     if (tags.has(tag)) {
       setTags((prev) => {
@@ -50,13 +58,6 @@ export function OnboardHashtagScreen() {
     }
   };
 
-  const skip = async () => {
-    // update last login
-    await db.updateLastLogin();
-
-    navigate('/auth/complete', { replace: true });
-  };
-
   const submit = async () => {
     try {
       setLoading(true);
@@ -65,10 +66,8 @@ export function OnboardHashtagScreen() {
         await db.createWidget(WidgetKinds.global.hashtag, tag, tag.replace('#', ''));
       }
 
-      // update last login
-      await db.updateLastLogin();
-
-      navigate('/auth/complete', { replace: true });
+      setHashtag();
+      navigate(-1);
     } catch (e) {
       setLoading(false);
       await message(e, { title: 'Lume', type: 'error' });
@@ -76,64 +75,55 @@ export function OnboardHashtagScreen() {
   };
 
   return (
-    <div className="mx-auto w-full max-w-md">
-      <div className="mb-4 border-b border-white/10 pb-4">
-        <h1 className="mb-2 text-center text-2xl font-semibold text-white">
-          Choose {tags.size}/3 your favorite hashtags
-        </h1>
-        <p className="text-white/70">
-          Hashtags are an easy way to discover more content. By adding a hashtag, Lume
-          will show all related posts. You can always add more later.
-        </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="flex h-[450px] w-full flex-col divide-y divide-white/5 overflow-y-auto rounded-xl bg-white/20 backdrop-blur-xl scrollbar-none">
-          {data.map((item: { hashtag: string }) => (
-            <button
-              key={item.hashtag}
-              type="button"
-              onClick={() => toggleTag(item.hashtag)}
-              className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-white/10"
-            >
-              <p className="text-white">{item.hashtag}</p>
-              {tags.has(item.hashtag) && (
-                <div>
-                  <CheckCircleIcon className="h-4 w-4 text-green-400" />
-                </div>
-              )}
-            </button>
-          ))}
-        </div>
-        <div className="flex flex-col gap-2">
+      <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">
+          Choose {tags.size}/3 your favorite hashtag
+        </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">
+            {data.map((item: { hashtag: string }) => (
+              <button
+                key={item.hashtag}
+                type="button"
+                onClick={() => toggleTag(item.hashtag)}
+                className="inline-flex items-center justify-between px-4 py-2 hover:bg-neutral-300 dark:hover:bg-neutral-700"
+              >
+                <p className="text-neutral-900 dark:text-neutral-100">{item.hashtag}</p>
+                {tags.has(item.hashtag) && (
+                  <div>
+                    <CheckCircleIcon className="h-5 w-5 text-teal-500" />
+                  </div>
+                )}
+              </button>
+            ))}
+          </div>
           <button
             type="button"
             onClick={submit}
-            disabled={loading || tags.size === 0 || tags.size > 3}
-            className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg border-t border-white/10 bg-blue-500 px-6 font-medium leading-none text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
+            disabled={loading || tags.size === 0}
+            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 {tags.size} tags & Continue</span>
-                <ArrowRightCircleIcon className="h-5 w-5" />
-              </>
+              <span>Add {tags.size} tags & Continue</span>
             )}
           </button>
-          {!loading ? (
-            <button
-              type="button"
-              onClick={() => skip()}
-              className="inline-flex h-12 w-full items-center justify-center rounded-lg border-t border-white/10 bg-white/20 font-medium leading-none text-white backdrop-blur-xl hover:bg-white/30 focus:outline-none"
-            >
-              Skip, you can add later
-            </button>
-          ) : null}
         </div>
       </div>
     </div>

src/app/auth/onboarding/list.tsx

@@ -1,10 +1,10 @@
 import { Link, useLocation } from 'react-router-dom';
 
-import { CustomRelay } from '@app/auth/components/features/customRelay';
+import { AllowNotification } from '@app/auth/components/features/allowNotification';
+import { Circle } from '@app/auth/components/features/enableCircle';
+import { OutboxModel } from '@app/auth/components/features/enableOutbox';
 import { FavoriteHashtag } from '@app/auth/components/features/favoriteHashtag';
 import { FollowList } from '@app/auth/components/features/followList';
-import { LinkList } from '@app/auth/components/features/linkList';
-import { NIP04 } from '@app/auth/components/features/nip04';
 import { SuggestFollow } from '@app/auth/components/features/suggestFollow';
 
 export function OnboardingListScreen() {
@@ -25,9 +25,9 @@ export function OnboardingListScreen() {
         <div className="flex flex-col gap-3">
           {newuser ? <SuggestFollow /> : <FollowList />}
           <FavoriteHashtag />
-          <LinkList />
-          <NIP04 />
-          <CustomRelay />
+          <Circle />
+          <OutboxModel />
+          <AllowNotification />
           <Link
             to="/"
             className="inline-flex h-9 w-full items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"

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>