wip: complete new onboarding

2023-10-17 16:33:41 +07:00
parent 3aa4f294f9
commit 7fa1e89dc8
44 changed files with 580 additions and 732 deletions
--- a/src/app/auth/complete.tsx
+++ b/src/app/auth/complete.tsx
@@ -1,42 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-export function CompleteScreen() {
-  const navigate = useNavigate();
-  const [count, setCount] = useState(5);
-
-  useEffect(() => {
-    let counter: NodeJS.Timeout;
-
-    if (count > 0) {
-      counter = setTimeout(() => setCount(count - 1), 1000);
-    }
-
-    if (count === 0) {
-      navigate('/', { replace: true });
-    }
-
-    return () => {
-      clearTimeout(counter);
-    };
-  }, [count]);
-
-  return (
-    <div className="relative flex h-full w-full flex-col items-center justify-center">
-      <div className="mx-auto flex max-w-xl flex-col gap-1.5 text-center">
-        <h1 className="text-2xl font-light leading-none text-white">
-          <span className="font-semibold">You&apos;re ready</span>, redirecting in {count}
-        </h1>
-        <p className="text-white/70">
-          Thank you for using Lume. Lume doesn&apos;t use telemetry. If you encounter any
-          problems, please submit a report via the &quot;Report Issue&quot; button.
-          <br />
-          You can find it while using the application.
-        </p>
-      </div>
-      <div className="absolute bottom-6 left-1/2 flex -translate-x-1/2 transform items-center justify-center">
-        <img src="/lume.png" alt="lume" className="h-auto w-1/5" />
-      </div>
-    </div>
-  );
-}
--- a/src/app/auth/components/features/allowNotification.tsx
+++ b/src/app/auth/components/features/allowNotification.tsx
@@ -0,0 +1,50 @@
+import { isPermissionGranted, requestPermission } from '@tauri-apps/plugin-notification';
+
+import { CheckCircleIcon } from '@shared/icons';
+
+import { useOnboarding } from '@stores/onboarding';
+
+export function AllowNotification() {
+  const [notification, setNotification] = useOnboarding((state) => [
+    state.notification,
+    state.toggleNotification,
+  ]);
+
+  const allow = async () => {
+    let permissionGranted = await isPermissionGranted();
+    if (!permissionGranted) {
+      const permission = await requestPermission();
+      permissionGranted = permission === 'granted';
+    }
+    if (permissionGranted) {
+      setNotification();
+    }
+  };
+
+  return (
+    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
+      <div className="flex items-start justify-between gap-2">
+        <div>
+          <h5 className="font-semibold">Allow notification</h5>
+          <p className="text-sm">
+            By allowing Lume to send notifications in your OS settings, you will receive
+            notification messages when someone interacts with you or your content.
+          </p>
+        </div>
+        {notification ? (
+          <div className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-teal-500 text-white">
+            <CheckCircleIcon className="h-4 w-4" />
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={allow}
+            className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
+          >
+            Allow
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/src/app/auth/components/features/customRelay.tsx
+++ b/src/app/auth/components/features/customRelay.tsx
@@ -1,21 +0,0 @@
-export function CustomRelay() {
-  return (
-    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
-      <div className="flex items-start justify-between">
-        <div>
-          <h5 className="font-semibold">Personalize relay list</h5>
-          <p className="text-sm">
-            Lume offers some default relays for users who are not familiar with Nostr, but
-            you can consider adding more relays to discover more content.
-          </p>
-        </div>
-        <button
-          type="button"
-          className="mt-1 h-9 w-24 shrink-0 rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
-        >
-          Custom
-        </button>
-      </div>
-    </div>
-  );
-}
--- a/src/app/auth/components/features/enableCircle.tsx
+++ b/src/app/auth/components/features/enableCircle.tsx
@@ -0,0 +1,99 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
+import { LRUCache } from 'lru-cache';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+import { CheckCircleIcon, LoaderIcon } from '@shared/icons';
+
+import { useOnboarding } from '@stores/onboarding';
+
+export function Circle() {
+  const { db } = useStorage();
+  const { ndk } = useNDK();
+
+  const [circle, setCircle] = useOnboarding((state) => [
+    state.circle,
+    state.toggleCircle,
+  ]);
+  const [loading, setLoading] = useState(false);
+
+  const enableLinks = async () => {
+    setLoading(true);
+
+    const users = ndk.getUser({ hexpubkey: db.account.pubkey });
+    const follows = await users.follows();
+
+    if (follows.size === 0) {
+      setLoading(false);
+      return toast('You need to follow at least 1 account');
+    }
+
+    const lru = new LRUCache<string, string, void>({ max: 300 });
+    const followsAsArr = [];
+
+    // add user's follows to lru
+    follows.forEach((user) => {
+      lru.set(user.pubkey, user.pubkey);
+      followsAsArr.push(user.pubkey);
+    });
+
+    // get follows from follows
+    const events = await ndk.fetchEvents({
+      kinds: [NDKKind.Contacts],
+      authors: followsAsArr,
+      limit: 300,
+    });
+
+    events.forEach((event: NDKEvent) => {
+      event.tags.forEach((tag) => {
+        if (tag[0] === 'p') lru.set(tag[1], tag[1]);
+      });
+    });
+
+    // get lru values
+    const circleList = [...lru.values()] as string[];
+
+    // update db
+    await db.updateAccount('follows', JSON.stringify(followsAsArr));
+    await db.updateAccount('circles', JSON.stringify(circleList));
+
+    db.account.follows = followsAsArr;
+    db.account.circles = circleList;
+
+    // clear lru
+    lru.clear();
+
+    // done
+    setCircle();
+  };
+
+  return (
+    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
+      <div className="flex items-start justify-between gap-2">
+        <div>
+          <h5 className="font-semibold">Enable Circle</h5>
+          <p className="text-sm">
+            Beside newsfeed from your follows, you will see more content from all people
+            that followed by your follows.
+          </p>
+        </div>
+        {circle ? (
+          <div className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-teal-500 text-white">
+            <CheckCircleIcon className="h-4 w-4" />
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={enableLinks}
+            className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
+          >
+            {loading ? <LoaderIcon className="h-4 w-4 animate-spin" /> : 'Enable'}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/src/app/auth/components/features/enableOutbox.tsx
+++ b/src/app/auth/components/features/enableOutbox.tsx
@@ -0,0 +1,47 @@
+import { useStorage } from '@libs/storage/provider';
+
+import { CheckCircleIcon } from '@shared/icons';
+
+import { useOnboarding } from '@stores/onboarding';
+
+export function OutboxModel() {
+  const { db } = useStorage();
+
+  const [outbox, setOutbox] = useOnboarding((state) => [
+    state.outbox,
+    state.toggleOutbox,
+  ]);
+
+  const enableOutbox = async () => {
+    await db.createSetting('outbox', '1');
+    setOutbox();
+  };
+
+  return (
+    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
+      <div className="flex items-start justify-between gap-2">
+        <div>
+          <h5 className="font-semibold">Enable Outbox (experiment)</h5>
+          <p className="text-sm">
+            When you request information about a user, Lume will automatically query the
+            user&apos;s outbox relays and subsequent queries will favour using those
+            relays for queries with that user&apos;s pubkey.
+          </p>
+        </div>
+        {outbox ? (
+          <div className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-teal-500 text-white">
+            <CheckCircleIcon className="h-4 w-4" />
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={enableOutbox}
+            className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
+          >
+            Enable
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/src/app/auth/components/features/favoriteHashtag.tsx
+++ b/src/app/auth/components/features/favoriteHashtag.tsx
@@ -1,4 +1,12 @@
+import { Link } from 'react-router-dom';
+
+import { CheckCircleIcon } from '@shared/icons';
+
+import { useOnboarding } from '@stores/onboarding';
+
 export function FavoriteHashtag() {
+  const hashtag = useOnboarding((state) => state.hashtag);
+
  return (
    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
      <div className="flex items-start justify-between">
@@ -9,12 +17,18 @@ export function FavoriteHashtag() {
            hashtag as a column
          </p>
        </div>
-        <button
-          type="button"
-          className="mt-1 h-9 w-24 shrink-0 rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
-        >
-          Add
-        </button>
+        {hashtag ? (
+          <div className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-teal-500 text-white">
+            <CheckCircleIcon className="h-4 w-4" />
+          </div>
+        ) : (
+          <Link
+            to="/auth/onboarding/hashtag"
+            className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
+          >
+            Add
+          </Link>
+        )}
      </div>
    </div>
  );
--- a/src/app/auth/components/features/followList.tsx
+++ b/src/app/auth/components/features/followList.tsx
@@ -1,3 +1,58 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+import { LoaderIcon } from '@shared/icons';
+import { User } from '@shared/user';
+
 export function FollowList() {
-  return <div></div>;
+  const { db } = useStorage();
+  const { ndk } = useNDK();
+  const { status, data } = useQuery(
+    ['follows'],
+    async () => {
+      const user = ndk.getUser({ hexpubkey: db.account.pubkey });
+      const follows = await user.follows();
+      const followsAsArr = [];
+
+      follows.forEach((user) => {
+        followsAsArr.push(user.pubkey);
+      });
+
+      // update db
+      await db.updateAccount('follows', JSON.stringify(followsAsArr));
+      await db.updateAccount('circles', JSON.stringify(followsAsArr));
+
+      db.account.follows = followsAsArr;
+      db.account.circles = followsAsArr;
+
+      return followsAsArr;
+    },
+    {
+      refetchOnWindowFocus: false,
+    }
+  );
+
+  return (
+    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
+      <h5 className="font-semibold">Your follows</h5>
+      <div className="mt-2 flex w-full items-center justify-center">
+        {status === 'loading' ? (
+          <LoaderIcon className="h-4 w-4 animate-spin text-neutral-900 dark:text-neutral-100" />
+        ) : (
+          <div className="isolate flex -space-x-2">
+            {data.slice(0, 16).map((item) => (
+              <User key={item} pubkey={item} variant="stacked" />
+            ))}
+            {data.length > 16 ? (
+              <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">+{data.length}</span>
+              </div>
+            ) : null}
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }
--- a/src/app/auth/components/features/linkList.tsx
+++ b/src/app/auth/components/features/linkList.tsx
@@ -1,21 +0,0 @@
-export function LinkList() {
-  return (
-    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
-      <div className="flex items-start justify-between">
-        <div>
-          <h5 className="font-semibold">Enable Links</h5>
-          <p className="text-sm">
-            Beside newsfeed from your follows, you will see more content from all people
-            that followed by your follows.
-          </p>
-        </div>
-        <button
-          type="button"
-          className="mt-1 h-9 w-24 shrink-0 rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
-        >
-          Enable
-        </button>
-      </div>
-    </div>
-  );
-}
--- a/src/app/auth/components/features/nip04.tsx
+++ b/src/app/auth/components/features/nip04.tsx
@@ -1,21 +0,0 @@
-export function NIP04() {
-  return (
-    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
-      <div className="flex items-start justify-between">
-        <div>
-          <h5 className="font-semibold">Enable direct message (Deprecated)</h5>
-          <p className="text-sm">
-            Send direct message to other user (NIP-04), all messages will be encrypted,
-            but your metadata will be leaked.
-          </p>
-        </div>
-        <button
-          type="button"
-          className="mt-1 h-9 w-24 shrink-0 rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
-        >
-          Enable
-        </button>
-      </div>
-    </div>
-  );
-}
--- a/src/app/auth/components/features/suggestFollow.tsx
+++ b/src/app/auth/components/features/suggestFollow.tsx
@@ -1,6 +1,12 @@
 import { Link } from 'react-router-dom';

+import { CheckCircleIcon } from '@shared/icons';
+
+import { useOnboarding } from '@stores/onboarding';
+
 export function SuggestFollow() {
+  const enrich = useOnboarding((state) => state.enrich);
+
  return (
    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
      <div className="flex items-start justify-between">
@@ -11,12 +17,18 @@ export function SuggestFollow() {
            world.
          </p>
        </div>
-        <Link
-          to="/auth/onboarding/enrich"
-          className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
-        >
-          Check
-        </Link>
+        {enrich ? (
+          <div className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-teal-500 text-white">
+            <CheckCircleIcon className="h-4 w-4" />
+          </div>
+        ) : (
+          <Link
+            to="/auth/onboarding/enrich"
+            className="mt-1 inline-flex h-9 w-24 shrink-0 items-center justify-center rounded-lg bg-neutral-200 font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-800"
+          >
+            Check
+          </Link>
+        )}
      </div>
    </div>
  );
--- a/src/app/auth/import.tsx
+++ b/src/app/auth/import.tsx
@@ -82,7 +82,7 @@ export function ImportAccountScreen() {
          <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
            <div className="flex flex-col gap-1.5">
              <label htmlFor="npub" className="font-semibold">
-                Enter your npub:
+                Enter your public key:
              </label>
              <div className="inline-flex w-full items-center gap-2">
                <input
@@ -156,7 +156,7 @@ export function ImportAccountScreen() {
              >
                <div className="flex flex-col gap-1.5">
                  <label htmlFor="nsec" className="font-semibold">
-                    Enter your nsec (optional):
+                    Enter your private key (optional):
                  </label>
                  <div className="inline-flex w-full items-center gap-2">
                    <input
@@ -187,12 +187,12 @@ export function ImportAccountScreen() {
                </div>
                <div className="mt-3 select-text">
                  <p className="text-sm">
-                    <b>nsec</b> is used to sign your event. For example, if you want to
-                    make a new post or send a message to your contact, you need to use
-                    nsec to sign this event.
+                    <b>Private Key</b> is used to sign your event. For example, if you
+                    want to make a new post or send a message to your contact, you need to
+                    use your private key to sign this event.
                  </p>
                  <h5 className="mt-2 font-semibold">
-                    1. In case you store nsec in Lume
+                    1. In case you store private key in Lume
                  </h5>
                  <p className="text-sm">
                    Lume will put your nsec to{' '}
@@ -204,12 +204,12 @@ export function ImportAccountScreen() {
                    , it will be secured by your OS
                  </p>
                  <h5 className="mt-2 font-semibold">
-                    2. In case you do not store nsec in Lume
+                    2. In case you do not store private key in Lume
                  </h5>
                  <p className="text-sm">
-                    When you make an event that requires a sign by your nsec, Lume will
-                    show a prompt popup for you to enter nsec. It will be cleared after
-                    signing and not stored anywhere.
+                    When you make an event that requires a sign by your private key, Lume
+                    will show a prompt for you to enter private key. It will be cleared
+                    after signing and not stored anywhere.
                  </p>
                </div>
              </motion.div>
--- a/src/app/auth/onboarding/enrich.tsx
+++ b/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">
--- a/src/app/auth/onboarding/hashtag.tsx
+++ b/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>
--- a/src/app/auth/onboarding/list.tsx
+++ b/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"
--- a/src/app/auth/onboarding/relays.tsx
+++ b/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>
--- a/src/app/communities/index.tsx
+++ b/src/app/communities/index.tsx
@@ -1,7 +0,0 @@
-export function CommunitiesScreen() {
-  return (
-    <div>
-      <p>TODO</p>
-    </div>
-  );
-}