migrated to vite and vite-plugin-ssr

2023-04-22 17:56:09 +07:00
parent c50e507c14
commit b9bafc851e
67 changed files with 911 additions and 1060 deletions
--- a/src/pages/channel/index.page.tsx
+++ b/src/pages/channel/index.page.tsx
@@ -0,0 +1,97 @@
+import { ChannelMessages } from '@components/channels/messages';
+import { FormChannel } from '@components/form/channel';
+import NewsfeedLayout from '@components/layouts/newsfeed';
+import { RelayContext } from '@components/relaysProvider';
+
+import { channelMessagesAtom, channelReplyAtom } from '@stores/channel';
+import { FULL_RELAYS } from '@stores/constants';
+
+import { dateToUnix, hoursAgo } from '@utils/getDate';
+import { usePageContext } from '@utils/hooks/usePageContext';
+
+import useLocalStorage from '@rehooks/local-storage';
+import { useSetAtom } from 'jotai';
+import { useResetAtom } from 'jotai/utils';
+import { useContext, useEffect, useRef } from 'react';
+import useSWRSubscription from 'swr/subscription';
+
+export function Page() {
+  const pageContext = usePageContext();
+  const searchParams: any = pageContext.urlParsed.search;
+
+  const id = searchParams.id;
+
+  const [pool]: any = useContext(RelayContext);
+  const [activeAccount]: any = useLocalStorage('account', {});
+
+  const setChannelMessages = useSetAtom(channelMessagesAtom);
+  const resetChannelMessages = useResetAtom(channelMessagesAtom);
+  const resetChannelReply = useResetAtom(channelReplyAtom);
+
+  const now = useRef(new Date());
+  const muted = useRef(new Set());
+  const hided = useRef(new Set());
+
+  useSWRSubscription(id, () => {
+    const unsubscribe = pool.subscribe(
+      [
+        {
+          authors: [activeAccount.pubkey],
+          kinds: [43, 44],
+          since: dateToUnix(hoursAgo(48, now.current)),
+        },
+        {
+          '#e': [id],
+          kinds: [42],
+          since: dateToUnix(hoursAgo(48, now.current)),
+        },
+      ],
+      FULL_RELAYS,
+      (event: { kind: number; tags: string[][]; pubkey: string; id: string }) => {
+        if (event.kind === 44) {
+          muted.current = muted.current.add(event.tags[0][1]);
+        } else if (event.kind === 43) {
+          hided.current = hided.current.add(event.tags[0][1]);
+        } else {
+          if (muted.current.has(event.pubkey)) {
+            console.log('muted');
+          } else if (hided.current.has(event.id)) {
+            console.log('hided');
+          } else {
+            setChannelMessages((prev) => [...prev, event]);
+          }
+        }
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  });
+
+  useEffect(() => {
+    let ignore = false;
+
+    if (!ignore) {
+      // reset channel reply
+      resetChannelReply();
+      // reset channel messages
+      resetChannelMessages();
+    }
+
+    return () => {
+      ignore = true;
+    };
+  }, [resetChannelReply, resetChannelMessages]);
+
+  return (
+    <NewsfeedLayout>
+      <div className="flex h-full w-full flex-col justify-between">
+        <ChannelMessages />
+        <div className="shrink-0 p-3">
+          <FormChannel eventId={id} />
+        </div>
+      </div>
+    </NewsfeedLayout>
+  );
+}
--- a/src/pages/chat/index.page.tsx
+++ b/src/pages/chat/index.page.tsx
@@ -0,0 +1,76 @@
+import { MessageList } from '@components/chats/messageList';
+import FormChat from '@components/form/chat';
+import NewsfeedLayout from '@components/layouts/newsfeed';
+import { RelayContext } from '@components/relaysProvider';
+
+import { chatMessagesAtom } from '@stores/chat';
+import { FULL_RELAYS } from '@stores/constants';
+
+import { usePageContext } from '@utils/hooks/usePageContext';
+
+import useLocalStorage from '@rehooks/local-storage';
+import { useSetAtom } from 'jotai';
+import { useResetAtom } from 'jotai/utils';
+import { useContext, useEffect } from 'react';
+import useSWRSubscription from 'swr/subscription';
+
+export function Page() {
+  const pageContext = usePageContext();
+  const searchParams: any = pageContext.urlParsed.search;
+
+  const pubkey = searchParams.pubkey;
+
+  const [pool]: any = useContext(RelayContext);
+  const [activeAccount]: any = useLocalStorage('account', {});
+
+  const setChatMessages = useSetAtom(chatMessagesAtom);
+  const resetChatMessages = useResetAtom(chatMessagesAtom);
+
+  useSWRSubscription(pubkey, () => {
+    const unsubscribe = pool.subscribe(
+      [
+        {
+          kinds: [4],
+          authors: [pubkey],
+          '#p': [activeAccount.pubkey],
+        },
+        {
+          kinds: [4],
+          authors: [activeAccount.pubkey],
+          '#p': [pubkey],
+        },
+      ],
+      FULL_RELAYS,
+      (event: any) => {
+        setChatMessages((prev) => [...prev, event]);
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  });
+
+  useEffect(() => {
+    let ignore = false;
+
+    if (!ignore) {
+      resetChatMessages();
+    }
+
+    return () => {
+      ignore = true;
+    };
+  }, [resetChatMessages]);
+
+  return (
+    <NewsfeedLayout>
+      <div className="flex h-full w-full flex-col justify-between">
+        <MessageList />
+        <div className="shrink-0 p-3">
+          <FormChat receiverPubkey={pubkey} />
+        </div>
+      </div>
+    </NewsfeedLayout>
+  );
+}
--- a/src/pages/index.page.tsx
+++ b/src/pages/index.page.tsx
@@ -0,0 +1,212 @@
+import { RelayContext } from '@components/relaysProvider';
+
+import { dateToUnix, hoursAgo } from '@utils/getDate';
+import {
+  countTotalChannels,
+  countTotalNotes,
+  createChannel,
+  createChat,
+  createNote,
+  getActiveAccount,
+  getLastLogin,
+  getPlebs,
+  updateLastLogin,
+} from '@utils/storage';
+import { getParentID } from '@utils/transform';
+
+import LumeSymbol from '@assets/icons/Lume';
+
+import { writeStorage } from '@rehooks/local-storage';
+import { useCallback, useContext, useEffect, useRef } from 'react';
+import { navigate } from 'vite-plugin-ssr/client/router';
+
+export function Page() {
+  const [pool, relays]: any = useContext(RelayContext);
+
+  const now = useRef(new Date());
+  const timeout = useRef(null);
+
+  const fetchData = useCallback(
+    async (account: { id: number; pubkey: string; chats: string[] }, tags: any) => {
+      const lastLogin = await getLastLogin();
+      const notes = await countTotalNotes();
+      const channels = await countTotalChannels();
+
+      const chats = account.chats?.length || 0;
+      const follows = JSON.parse(tags);
+      const query = [];
+
+      let since: number;
+
+      // kind 1 (notes) query
+      if (notes.total === 0) {
+        since = dateToUnix(hoursAgo(24, now.current));
+      } else {
+        if (parseInt(lastLogin) > 0) {
+          since = parseInt(lastLogin);
+        } else {
+          since = dateToUnix(hoursAgo(24, now.current));
+        }
+      }
+      query.push({
+        kinds: [1, 6],
+        authors: follows,
+        since: since,
+        until: dateToUnix(now.current),
+      });
+      // kind 4 (chats) query
+      if (chats === 0) {
+        query.push({
+          kinds: [4],
+          '#p': [account.pubkey],
+          since: 0,
+          until: dateToUnix(now.current),
+        });
+      }
+      // kind 40 (channels) query
+      if (channels.total === 0) {
+        query.push({
+          kinds: [40],
+          since: 0,
+          until: dateToUnix(now.current),
+        });
+      }
+      // subscribe relays
+      const unsubscribe = pool.subscribe(
+        query,
+        relays,
+        (event: { kind: number; tags: string[]; id: string; pubkey: string; content: string; created_at: number }) => {
+          switch (event.kind) {
+            // short text note
+            case 1:
+              const parentID = getParentID(event.tags, event.id);
+              // insert event to local database
+              createNote(
+                event.id,
+                account.id,
+                event.pubkey,
+                event.kind,
+                event.tags,
+                event.content,
+                event.created_at,
+                parentID
+              );
+              break;
+            // chat
+            case 4:
+              if (event.pubkey !== account.pubkey) {
+                createChat(account.id, event.pubkey, event.created_at);
+              }
+              break;
+            // repost
+            case 6:
+              createNote(
+                event.id,
+                account.id,
+                event.pubkey,
+                event.kind,
+                event.tags,
+                event.content,
+                event.created_at,
+                ''
+              );
+              break;
+            // channel
+            case 40:
+              createChannel(event.id, event.content, event.created_at);
+              break;
+            default:
+              break;
+          }
+        },
+        undefined,
+        () => {
+          updateLastLogin(dateToUnix(now.current));
+          timeout.current = setTimeout(() => {
+            navigate('/newsfeed/following', { overwriteLastHistoryEntry: true });
+          }, 5000);
+        },
+        {
+          unsubscribeOnEose: true,
+          logAllEvents: false,
+        }
+      );
+
+      return () => {
+        unsubscribe();
+      };
+    },
+    [pool, relays]
+  );
+
+  useEffect(() => {
+    let ignore = false;
+
+    if (!ignore) {
+      getActiveAccount()
+        .then((res: any) => {
+          if (res) {
+            const account = res;
+            // update local storage
+            writeStorage('account', account);
+            // fetch data
+            fetchData(account, account.follows);
+          } else {
+            navigate('/onboarding', { overwriteLastHistoryEntry: true });
+          }
+        })
+        .catch(console.error);
+
+      getPlebs()
+        .then((res) => {
+          if (res && !ignore) {
+            writeStorage('plebs', res);
+          }
+        })
+        .catch(console.error);
+    }
+
+    return () => {
+      ignore = true;
+      clearTimeout(timeout.current);
+    };
+  }, [fetchData]);
+
+  return (
+    <div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
+      <div className="relative h-full overflow-hidden">
+        {/* dragging area */}
+        <div data-tauri-drag-region className="absolute left-0 top-0 z-20 h-16 w-full bg-transparent" />
+        {/* end dragging area */}
+        <div className="relative flex h-full flex-col items-center justify-center">
+          <div className="flex flex-col items-center gap-2">
+            <LumeSymbol className="h-16 w-16 text-black dark:text-white" />
+            <div className="text-center">
+              <h3 className="text-lg font-semibold leading-tight text-zinc-900 dark:text-zinc-100">
+                Here&apos;s an interesting fact:
+              </h3>
+              <p className="font-medium text-zinc-300 dark:text-zinc-600">
+                Bitcoin and Nostr can be used by anyone, and no one can stop you!
+              </p>
+            </div>
+          </div>
+          <div className="absolute bottom-16 left-1/2 -translate-x-1/2 transform">
+            <svg
+              className="h-5 w-5 animate-spin text-black dark:text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/pages/newsfeed/circle/index.page.tsx
+++ b/src/pages/newsfeed/circle/index.page.tsx
@@ -0,0 +1,3 @@
+export function Page() {
+  return <></>;
+}
--- a/src/pages/newsfeed/following/index.page.tsx
+++ b/src/pages/newsfeed/following/index.page.tsx
@@ -0,0 +1,116 @@
+import FormBase from '@components/form/base';
+import NewsfeedLayout from '@components/layouts/newsfeed';
+import { NoteBase } from '@components/note/base';
+import { Placeholder } from '@components/note/placeholder';
+import { NoteQuoteRepost } from '@components/note/quoteRepost';
+
+import { filteredNotesAtom, hasNewerNoteAtom, notesAtom } from '@stores/note';
+
+import { dateToUnix } from '@utils/getDate';
+import { getLatestNotes, getNotes } from '@utils/storage';
+
+import { ArrowUp } from 'iconoir-react';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useCallback, useEffect, useRef } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+
+export function Page() {
+  const [hasNewerNote, setHasNewerNote] = useAtom(hasNewerNoteAtom);
+  const setData = useSetAtom(notesAtom);
+  const data = useAtomValue(filteredNotesAtom);
+
+  const virtuosoRef = useRef(null);
+  const now = useRef(new Date());
+  const limit = useRef(20);
+  const offset = useRef(0);
+
+  const itemContent: any = useCallback(
+    (index: string | number) => {
+      switch (data[index].kind) {
+        case 1:
+          return <NoteBase event={data[index]} />;
+        case 6:
+          return <NoteQuoteRepost event={data[index]} />;
+        default:
+          break;
+      }
+    },
+    [data]
+  );
+
+  const computeItemKey = useCallback(
+    (index: string | number) => {
+      return data[index].event_id;
+    },
+    [data]
+  );
+
+  const initialData = useCallback(async () => {
+    const result: any = await getNotes(dateToUnix(now.current), limit.current, offset.current);
+    setData((data) => [...data, ...result]);
+  }, [setData]);
+
+  const loadMore = useCallback(async () => {
+    offset.current += limit.current;
+    // query next page
+    const result: any = await getNotes(dateToUnix(now.current), limit.current, offset.current);
+    setData((data) => [...data, ...result]);
+  }, [setData]);
+
+  const loadLatest = useCallback(async () => {
+    // next query
+    const result: any = await getLatestNotes(dateToUnix(now.current));
+    // update data
+    setData((data) => [...result, ...data]);
+    // hide newer trigger
+    setHasNewerNote(false);
+    // scroll to top
+    virtuosoRef.current.scrollToIndex({ index: -1 });
+  }, [setData, setHasNewerNote]);
+
+  useEffect(() => {
+    let initPage = false;
+
+    if (!initPage) {
+      initialData().catch(console.error);
+    }
+
+    return () => {
+      initPage = true;
+    };
+  }, [initialData]);
+
+  return (
+    <NewsfeedLayout>
+      <div className="relative h-full w-full">
+        {hasNewerNote && (
+          <div className="absolute left-1/2 top-2 z-50 -translate-x-1/2 transform">
+            <button
+              onClick={() => loadLatest()}
+              className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 pl-3 pr-3.5 text-sm shadow-md shadow-fuchsia-800/20 active:translate-y-1"
+            >
+              <ArrowUp width={14} height={14} />
+              Load latest
+            </button>
+          </div>
+        )}
+        <Virtuoso
+          ref={virtuosoRef}
+          data={data}
+          itemContent={itemContent}
+          computeItemKey={computeItemKey}
+          components={COMPONENTS}
+          overscan={200}
+          endReached={loadMore}
+          className="scrollbar-hide h-full w-full overflow-y-auto"
+        />
+      </div>
+    </NewsfeedLayout>
+  );
+}
+
+const COMPONENTS = {
+  Header: () => <FormBase />,
+  EmptyPlaceholder: () => <Placeholder />,
+  ScrollSeekPlaceholder: () => <Placeholder />,
+};
--- a/src/pages/onboarding/create/index.page.tsx
+++ b/src/pages/onboarding/create/index.page.tsx
@@ -0,0 +1,172 @@
+import OnboardingLayout from '@components/layouts/onboarding';
+import { RelayContext } from '@components/relaysProvider';
+
+import { createAccount } from '@utils/storage';
+
+import { EyeClose, EyeEmpty } from 'iconoir-react';
+import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools';
+import { useCallback, useContext, useMemo, useState } from 'react';
+import { Config, names, uniqueNamesGenerator } from 'unique-names-generator';
+import { navigate } from 'vite-plugin-ssr/client/router';
+
+const config: Config = {
+  dictionaries: [names],
+};
+
+export function Page() {
+  const [pool, relays]: any = useContext(RelayContext);
+
+  const [type, setType] = useState('password');
+  const [loading, setLoading] = useState(false);
+
+  const privkey = useMemo(() => generatePrivateKey(), []);
+  const name = useMemo(() => uniqueNamesGenerator(config).toString(), []);
+
+  const pubkey = getPublicKey(privkey);
+  const npub = nip19.npubEncode(pubkey);
+  const nsec = nip19.nsecEncode(privkey);
+
+  // auto-generated profile metadata
+  const metadata: any = useMemo(
+    () => ({
+      display_name: name,
+      name: name,
+      username: name.toLowerCase(),
+      picture: 'https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp',
+    }),
+    [name]
+  );
+
+  // toggle privatek key
+  const showPrivateKey = () => {
+    if (type === 'password') {
+      setType('text');
+    } else {
+      setType('password');
+    }
+  };
+
+  // create account and broadcast to all relays
+  const submit = useCallback(async () => {
+    setLoading(true);
+
+    // build event
+    const event: any = {
+      content: JSON.stringify(metadata),
+      created_at: Math.floor(Date.now() / 1000),
+      kind: 0,
+      pubkey: pubkey,
+      tags: [],
+    };
+    event.id = getEventHash(event);
+    event.sig = signEvent(event, privkey);
+    // insert to database
+    createAccount(pubkey, privkey, metadata);
+    // broadcast
+    pool.publish(event, relays);
+    // redirect to next step
+    navigate(`/onboarding/create/step-2?pubkey=${pubkey}&privkey=${privkey}`);
+  }, [pool, pubkey, privkey, metadata, relays]);
+
+  return (
+    <OnboardingLayout>
+      <div className="grid h-full w-full grid-rows-5">
+        <div className="row-span-1 mx-auto flex w-full max-w-md items-center justify-center">
+          <h1 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent">
+            Create new account
+          </h1>
+        </div>
+        <div className="row-span-4">
+          <div className="mx-auto w-full max-w-md">
+            <div className="mb-8 flex flex-col gap-4">
+              <div className="flex flex-col gap-1">
+                <label className="text-sm font-semibold text-zinc-400">Public Key</label>
+                <div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
+                  <input
+                    readOnly
+                    value={npub}
+                    className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600"
+                  />
+                </div>
+              </div>
+              <div className="flex flex-col gap-1">
+                <label className="text-sm font-semibold text-zinc-400">Private Key</label>
+                <div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
+                  <input
+                    readOnly
+                    type={type}
+                    value={nsec}
+                    className="relative w-full rounded-lg border border-black/5 py-2.5 pl-3.5 pr-11 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600"
+                  />
+                  <button
+                    onClick={() => showPrivateKey()}
+                    className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700"
+                  >
+                    {type === 'password' ? (
+                      <EyeClose width={20} height={20} className="text-zinc-500 group-hover:text-zinc-200" />
+                    ) : (
+                      <EyeEmpty width={20} height={20} className="text-zinc-500 group-hover:text-zinc-200" />
+                    )}
+                  </button>
+                </div>
+              </div>
+              <div className="flex flex-col gap-1">
+                <label className="text-sm font-semibold text-zinc-400">Default Profile (you can change it later)</label>
+                <div className="relative w-full shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
+                  <div className="relative w-full rounded-lg border border-black/5 px-3.5 py-4 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200  dark:shadow-black/10 dark:placeholder:text-zinc-600">
+                    <div className="flex space-x-2">
+                      <div className="relative h-11 w-11 rounded-md">
+                        <img
+                          src={metadata.picture}
+                          alt="default avatar"
+                          className="h-11 w-11 rounded-md object-cover"
+                        />
+                      </div>
+                      <div className="flex-1 space-y-2 py-1">
+                        <div className="flex items-center gap-1">
+                          <p className="font-semibold">{metadata.display_name}</p>
+                          <p className="text-zinc-400">@{metadata.username}</p>
+                        </div>
+                        <div className="space-y-1">
+                          <div className="grid grid-cols-3 gap-4">
+                            <div className="col-span-2 h-2 rounded bg-zinc-700"></div>
+                            <div className="col-span-1 h-2 rounded bg-zinc-700"></div>
+                          </div>
+                          <div className="h-2 rounded bg-zinc-700"></div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="flex h-10 items-center justify-center">
+              {loading === true ? (
+                <svg
+                  className="h-5 w-5 animate-spin text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+              ) : (
+                <button
+                  onClick={() => submit()}
+                  className="w-full transform rounded-lg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+                >
+                  <span className="drop-shadow-lg">Continue →</span>
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </OnboardingLayout>
+  );
+}
--- a/src/pages/onboarding/create/step-2/index.page.tsx
+++ b/src/pages/onboarding/create/step-2/index.page.tsx
@@ -0,0 +1,188 @@
+import OnboardingLayout from '@components/layouts/onboarding';
+import { RelayContext } from '@components/relaysProvider';
+import { UserBase } from '@components/user/base';
+
+import { usePageContext } from '@utils/hooks/usePageContext';
+import { fetchProfileMetadata } from '@utils/hooks/useProfileMetadata';
+import { createPleb, updateAccount } from '@utils/storage';
+import { arrayToNIP02 } from '@utils/transform';
+
+import { createClient } from '@supabase/supabase-js';
+import { CheckCircle } from 'iconoir-react';
+import { getEventHash, signEvent } from 'nostr-tools';
+import { Key, useCallback, useContext, useEffect, useState } from 'react';
+import { navigate } from 'vite-plugin-ssr/client/router';
+
+const supabase = createClient(
+  'https://niwaazauwnrwiwmnocnn.supabase.co',
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im5pd2FhemF1d25yd2l3bW5vY25uIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NzYwMjAzMjAsImV4cCI6MTk5MTU5NjMyMH0.IbjrnE6rDgC6lhIAHBIMN4niM2bPjxkRLtvAy_gFgqw'
+);
+
+const initialList = [
+  { pubkey: '82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2' },
+  { pubkey: 'a341f45ff9758f570a21b000c17d4e53a3a497c8397f26c0e6d61e5acffc7a98' },
+  { pubkey: '04c915daefee38317fa734444acee390a8269fe5810b2241e5e6dd343dfbecc9' },
+  { pubkey: 'c4eabae1be3cf657bc1855ee05e69de9f059cb7a059227168b80b89761cbc4e0' },
+  { pubkey: '6e468422dfb74a5738702a8823b9b28168abab8655faacb6853cd0ee15deee93' },
+  { pubkey: 'e88a691e98d9987c964521dff60025f60700378a4879180dcbbb4a5027850411' },
+  { pubkey: '3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d' },
+  { pubkey: 'c49d52a573366792b9a6e4851587c28042fb24fa5625c6d67b8c95c8751aca15' },
+  { pubkey: 'e33fe65f1fde44c6dc17eeb38fdad0fceaf1cae8722084332ed1e32496291d42' },
+  { pubkey: '84dee6e676e5bb67b4ad4e042cf70cbd8681155db535942fcc6a0533858a7240' },
+  { pubkey: '703e26b4f8bc0fa57f99d815dbb75b086012acc24fc557befa310f5aa08d1898' },
+  { pubkey: 'bf2376e17ba4ec269d10fcc996a4746b451152be9031fa48e74553dde5526bce' },
+  { pubkey: '4523be58d395b1b196a9b8c82b038b6895cb02b683d0c253a955068dba1facd0' },
+  { pubkey: 'c9b19ffcd43e6a5f23b3d27106ce19e4ad2df89ba1031dd4617f1b591e108965' },
+  { pubkey: 'c7dccba4fe4426a7b1ea239a5637ba40fab9862c8c86b3330fe65e9f667435f6' },
+  { pubkey: '6e1534f56fc9e937e06237c8ba4b5662bcacc4e1a3cfab9c16d89390bec4fca3' },
+  { pubkey: '50d94fc2d8580c682b071a542f8b1e31a200b0508bab95a33bef0855df281d63' },
+  { pubkey: '3d2e51508699f98f0f2bdbe7a45b673c687fe6420f466dc296d90b908d51d594' },
+  { pubkey: '6e3f51664e19e082df5217fd4492bb96907405a0b27028671dd7f297b688608c' },
+  { pubkey: '2edbcea694d164629854a52583458fd6d965b161e3c48b57d3aff01940558884' },
+  { pubkey: '3f770d65d3a764a9c5cb503ae123e62ec7598ad035d836e2a810f3877a745b24' },
+  { pubkey: 'eab0e756d32b80bcd464f3d844b8040303075a13eabc3599a762c9ac7ab91f4f' },
+  { pubkey: 'be1d89794bf92de5dd64c1e60f6a2c70c140abac9932418fee30c5c637fe9479' },
+  { pubkey: 'a5e93aef8e820cbc7ab7b6205f854b87aed4b48c5f6b30fbbeba5c99e40dcf3f' },
+  { pubkey: '1989034e56b8f606c724f45a12ce84a11841621aaf7182a1f6564380b9c4276b' },
+  { pubkey: 'c48b5cced5ada74db078df6b00fa53fc1139d73bf0ed16de325d52220211dbd5' },
+  { pubkey: '460c25e682fda7832b52d1f22d3d22b3176d972f60dcdc3212ed8c92ef85065c' },
+  { pubkey: '7f3b464b9ff3623630485060cbda3a7790131c5339a7803bde8feb79a5e1b06a' },
+  { pubkey: 'b99dbca0184a32ce55904cb267b22e434823c97f418f36daf5d2dff0dd7b5c27' },
+  { pubkey: 'e9e4276490374a0daf7759fd5f475deff6ffb9b0fc5fa98c902b5f4b2fe3bba2' },
+  { pubkey: 'ea2e3c814d08a378f8a5b8faecb2884d05855975c5ca4b5c25e2d6f936286f14' },
+  { pubkey: 'ff04a0e6cd80c141b0b55825fed127d4532a6eecdb7e743a38a3c28bf9f44609' },
+];
+
+export function Page() {
+  const pageContext = usePageContext();
+  const searchParams: any = pageContext.urlParsed.search;
+
+  const pubkey = searchParams.pubkey;
+  const privkey = searchParams.privkey;
+
+  const [pool, relays]: any = useContext(RelayContext);
+  const [loading, setLoading] = useState(false);
+  const [list, setList]: any = useState(initialList);
+  const [follows, setFollows] = useState([]);
+
+  // toggle follow state
+  const toggleFollow = (pubkey: string) => {
+    const arr = follows.includes(pubkey) ? follows.filter((i) => i !== pubkey) : [...follows, pubkey];
+    setFollows(arr);
+  };
+
+  // save follows to database then broadcast
+  const submit = useCallback(async () => {
+    setLoading(true);
+
+    const nip02 = arrayToNIP02(follows);
+
+    // update account's folllows with NIP-02 tag list
+    updateAccount('follows', follows, pubkey);
+
+    // create pleb
+    for (const tag of follows) {
+      fetchProfileMetadata(tag)
+        .then((res: any) => createPleb(tag, res.content))
+        .catch(console.error);
+    }
+
+    // build event
+    const event: any = {
+      content: '',
+      created_at: Math.floor(Date.now() / 1000),
+      kind: 3,
+      pubkey: pubkey,
+      tags: nip02,
+    };
+    event.id = getEventHash(event);
+    event.sig = signEvent(event, privkey);
+    // broadcast
+    pool.publish(event, relays);
+    // redirect to splashscreen
+    navigate('/');
+  }, [pubkey, privkey, follows, pool, relays]);
+
+  useEffect(() => {
+    let ignore = false;
+
+    const fetchData = async () => {
+      const { data } = await supabase.from('random_users').select('pubkey').limit(28);
+      // update state
+      setList((list: any) => [...list, ...data]);
+    };
+
+    if (!ignore) {
+      fetchData().catch(console.error);
+    }
+
+    return () => {
+      ignore = true;
+    };
+  }, []);
+
+  return (
+    <OnboardingLayout>
+      <div className="relative grid h-full w-full grid-rows-5">
+        <div className="row-span-1 flex items-center justify-center">
+          <div className="text-center">
+            <h1 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium leading-tight text-transparent">
+              Personalized your newsfeed
+            </h1>
+            <h3 className="text-lg text-zinc-500">
+              Follow at least{' '}
+              <span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-transparent">
+                {follows.length}/10
+              </span>{' '}
+              plebs
+            </h3>
+          </div>
+        </div>
+        <div className="row-span-4 h-full w-full overflow-y-auto">
+          <div className="grid grid-cols-4 gap-4 px-8 py-4">
+            {list.map((item: { pubkey: string }, index: Key) => (
+              <button
+                key={index}
+                onClick={() => toggleFollow(item.pubkey)}
+                className="flex transform items-center justify-between rounded-lg bg-zinc-900 p-2 ring-amber-100 hover:ring-1 active:translate-y-1"
+              >
+                <UserBase pubkey={item.pubkey} />
+                {follows.includes(item.pubkey) && (
+                  <div>
+                    <CheckCircle width={16} height={16} className="text-zinc-400" />
+                  </div>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+        {follows.length >= 10 && (
+          <div className="fixed bottom-0 left-0 z-10 flex h-24 w-full items-center justify-center">
+            <button
+              onClick={() => submit()}
+              className="relative z-20 inline-flex w-36 transform items-center justify-center rounded-full bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 shadow-xl active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+            >
+              {loading === true ? (
+                <svg
+                  className="h-5 w-5 animate-spin text-zinc-900"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+              ) : (
+                <span className="drop-shadow-lg">Done! Go to newsfeed</span>
+              )}
+            </button>
+          </div>
+        )}
+      </div>
+    </OnboardingLayout>
+  );
+}
--- a/src/pages/onboarding/index.page.tsx
+++ b/src/pages/onboarding/index.page.tsx
@@ -0,0 +1,118 @@
+import OnboardingLayout from '@components/layouts/onboarding';
+
+import { ArrowRight } from 'iconoir-react';
+
+const PLEBS = [
+  'https://133332.xyz/p.jpg',
+  'https://void.cat/d/3Bp6jSHURFNQ9u3pK8nwtq.webp',
+  'https://i.imgur.com/f8SyhRL.jpg',
+  'http://nostr.build/i/6369.jpg',
+  'https://pbs.twimg.com/profile_images/1622010345589190656/mAPqsmtz_400x400.jpg',
+  'https://media.tenor.com/l5arkXy9RfIAAAAd/thunder.gif',
+  'https://nostr.build/i/p/nostr.build_0e412058980ed2ac4adf3de639304c9e970e2745ba9ca19c75f984f4f6da4971.jpeg',
+  'https://nostr.build/i/nostr.build_864a019a6c1d3a90a17363553d32b71de618d250f02cf0a59ca19fb3029fd5bc.jpg',
+  'https://void.cat/d/8zE9T8a39YfUVjrLM4xcpE.webp',
+  'https://avatars.githubusercontent.com/u/89577423',
+  'https://pbs.twimg.com/profile_images/1363180486080663554/iN-r_BiM_400x400.jpg',
+  'https://void.cat/d/JUBBqXgCcGBEh7jUgJaayy',
+  'https://phase1.attract-eu.com/wp-content/uploads/2020/03/ATTRACT_HPLM.png',
+  'https://www.retro-synthwave.com/wp-content/uploads/2017/01/PowerGlove-23.jpg',
+  'https://void.cat/d/KvAEMvYNmy1rfCH6a7HZzh.webp',
+  'https://media.giphy.com/media/NqfMNCkyGwtXhKFlCR/giphy-downsized-large.gif',
+  'https://i.imgur.com/VGpUNFS.jpg',
+  'https://nostr.build/i/p/nostr.build_b39254db43d5557df99d1eb516f1c2f56a21a01b10c248f6eb66aa827c9a90f4.jpeg',
+  'https://davidcoen.it/wp-content/uploads/2020/11/7004972-taglio.jpg',
+  'https://pbs.twimg.com/profile_images/1570432066348515330/26PtCuwF_400x400.jpg',
+  'https://nostr.build/i/nostr.build_9d33ee801aa08955be174554832952ab95a65d5e015176834c8aa9a4e2f2e3a5.jpg',
+  'https://www.linkpicture.com/q/0FE78CFF-C931-4568-A7AA-DD8AEE889992.jpeg',
+  'https://nostr.build/i/nostr.build_97d6e2d25dd92422eb3d6d645b7cee9ed9c614f331be7e6f7db9ccfdbc5ee260.png',
+  'https://pbs.twimg.com/profile_images/1569570198348337152/-n1KD74u_400x400.jpg',
+  'https://pbs.twimg.com/profile_images/1600149653898596354/5PVe-r-J_400x400.jpg',
+  'https://pbs.twimg.com/profile_images/1639659216372658178/Dnn-Ysp-_400x400.jpg',
+  'https://pbs.twimg.com/profile_images/1554429112978120706/yr1hXl6R_400x400.jpg',
+  'https://pbs.twimg.com/profile_images/1615478486688272385/q2ECeZDX_400x400.jpg',
+  'https://pbs.twimg.com/profile_images/1638644441773748226/tNsA6RpG_400x400.jpg',
+  'https://pbs.twimg.com/profile_images/1607882836740120576/3Tg1mTYJ_400x400.jpg',
+  'https://pbs.twimg.com/profile_images/1401907430339002369/WKrP9Esn_400x400.jpg',
+  'https://pbs.twimg.com/profile_images/1523971278478131200/TMPzfvhE_400x400.jpg',
+  'https://pbs.twimg.com/profile_images/1626421539884204032/aj4tmzsk_400x400.png',
+  'https://pbs.twimg.com/profile_images/1582771691779985408/C9MHYIgt_400x400.jpg',
+  'https://pbs.twimg.com/profile_images/1409612480465276931/38Vyx4e8_400x400.jpg',
+  'https://pbs.twimg.com/profile_images/1549826566787588098/MlduJCZO_400x400.jpg',
+  'https://pbs.twimg.com/profile_images/539211568035004416/sBMjPR9q_400x400.jpeg',
+  'https://pbs.twimg.com/profile_images/1548660003522887682/1QMHmles_400x400.jpg',
+  'https://pbs.twimg.com/profile_images/1362497143999787013/KLUoN1Vn_400x400.png',
+  'https://pbs.twimg.com/profile_images/1600434913240563713/AssmMGwf_400x400.jpg',
+];
+
+const DURATION = 50000;
+const ROWS = 7;
+const PLEBS_PER_ROW = 20;
+
+const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
+const shuffle = (arr) => [...arr].sort(() => 0.5 - Math.random());
+
+const InfiniteLoopSlider = ({ children, duration, reverse }: { children: any; duration: any; reverse: any }) => {
+  return (
+    <div>
+      <div
+        className="flex w-fit"
+        style={{
+          animationName: 'loop',
+          animationIterationCount: 'infinite',
+          animationDirection: reverse ? 'reverse' : 'normal',
+          animationDuration: duration + 'ms',
+          animationTimingFunction: 'linear',
+        }}
+      >
+        {children}
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export function Page() {
+  return (
+    <OnboardingLayout>
+      <div className="grid h-full w-full grid-rows-5">
+        <div className="row-span-3 overflow-hidden">
+          <div className="relaive flex w-full max-w-full shrink-0 flex-col gap-4 overflow-hidden p-4">
+            {[...new Array(ROWS)].map((_, i) => (
+              <InfiniteLoopSlider key={i} duration={random(DURATION - 5000, DURATION + 20000)} reverse={i % 2}>
+                {shuffle(PLEBS)
+                  .slice(0, PLEBS_PER_ROW)
+                  .map((tag) => (
+                    <div key={tag} className="relative mr-4 h-11 w-11 gap-2 rounded-md bg-zinc-900 shadow-xl">
+                      <img src={tag} alt={tag} className="h-11 w-11 rounded-md border border-zinc-900" />
+                    </div>
+                  ))}
+              </InfiniteLoopSlider>
+            ))}
+            <div className="pointer-events-none absolute inset-0 bg-fade" />
+          </div>
+        </div>
+        <div className="row-span-2 flex w-full flex-col items-center gap-4 overflow-hidden pt-6 min-[1050px]:gap-8 min-[1050px]:pt-10">
+          <h1 className="animate-moveBg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-5xl font-bold leading-none text-transparent">
+            Let&apos;s start!
+          </h1>
+          <div className="mt-4 flex flex-col items-center gap-1.5">
+            <a
+              href="/onboarding/create"
+              className="relative inline-flex h-14 w-64 items-center justify-center gap-2 rounded-full bg-zinc-900 px-6 text-lg font-medium ring-1 ring-zinc-800 hover:bg-zinc-800"
+            >
+              Create new key
+              <ArrowRight width={20} height={20} />
+            </a>
+            <a
+              href="/onboarding/login"
+              className="inline-flex h-14 w-64 items-center justify-center gap-2 rounded-full px-6 text-base font-medium text-zinc-300 hover:bg-zinc-800"
+            >
+              Login with private key
+            </a>
+          </div>
+        </div>
+      </div>
+    </OnboardingLayout>
+  );
+}
--- a/src/pages/onboarding/login/index.page.tsx
+++ b/src/pages/onboarding/login/index.page.tsx
@@ -0,0 +1,121 @@
+import OnboardingLayout from '@components/layouts/onboarding';
+
+import { CableTag } from 'iconoir-react';
+import { getPublicKey, nip19 } from 'nostr-tools';
+import { Resolver, useForm } from 'react-hook-form';
+import { navigate } from 'vite-plugin-ssr/client/router';
+
+type FormValues = {
+  key: string;
+};
+
+const resolver: Resolver<FormValues> = async (values) => {
+  return {
+    values: values.key ? values : {},
+    errors: !values.key
+      ? {
+          key: {
+            type: 'required',
+            message: 'This is required.',
+          },
+        }
+      : {},
+  };
+};
+
+export function Page() {
+  const {
+    register,
+    setError,
+    handleSubmit,
+    formState: { errors, isDirty, isValid, isSubmitting },
+  } = useForm<FormValues>({ resolver });
+
+  const onSubmit = async (data: any) => {
+    try {
+      let privkey = data['key'];
+
+      if (privkey.substring(0, 4) === 'nsec') {
+        privkey = nip19.decode(privkey).data;
+      }
+      if (typeof getPublicKey(privkey) === 'string') {
+        navigate(`/onboarding/login/step-2?privkey=${privkey}`);
+      }
+    } catch (error) {
+      setError('key', {
+        type: 'custom',
+        message: 'Private Key is invalid, please check again',
+      });
+    }
+  };
+
+  return (
+    <OnboardingLayout>
+      <div className="grid h-full w-full grid-rows-5">
+        <div className="row-span-1 mx-auto flex w-full max-w-md items-center justify-center">
+          <h1 className="bg-gradient-to-br from-zinc-200 via-white to-zinc-300 bg-clip-text text-3xl font-semibold text-transparent">
+            Login with Private Key
+          </h1>
+        </div>
+        <form onSubmit={handleSubmit(onSubmit)} className="row-span-4">
+          <div className="mx-auto w-full max-w-md">
+            <div className="flex flex-col gap-4">
+              <div>
+                {/* #TODO: add function */}
+                <button className="inline-flex w-full transform items-center justify-center gap-1.5 rounded-lg bg-zinc-700 px-3.5 py-2.5 font-medium text-zinc-200 shadow-input ring-1 ring-zinc-600 active:translate-y-1">
+                  {/* #TODO: change to nostr connect logo */}
+                  <CableTag width={20} height={20} className="text-fuchsia-500" />
+                  <span>Continue with Nostr Connect</span>
+                </button>
+              </div>
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <div className="w-full border-t border-zinc-800"></div>
+                </div>
+                <div className="relative flex justify-center">
+                  <span className="bg-black px-2 text-sm text-zinc-500">or</span>
+                </div>
+              </div>
+              <div className="flex flex-col gap-0.5">
+                <div className="relative shrink-0 before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">
+                  <input
+                    {...register('key', { required: true, minLength: 32 })}
+                    type={'password'}
+                    placeholder="Paste private key here..."
+                    className="relative w-full rounded-lg border border-black/5 px-3.5 py-2.5 text-center shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+                  />
+                </div>
+                <span className="text-xs text-red-400">{errors.key && <p>{errors.key.message}</p>}</span>
+              </div>
+            </div>
+            <div className="mt-3 flex h-10 items-center justify-center">
+              {isSubmitting ? (
+                <svg
+                  className="h-5 w-5 animate-spin text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+              ) : (
+                <button
+                  type="submit"
+                  disabled={!isDirty || !isValid}
+                  className="w-full transform rounded-lg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+                >
+                  <span className="drop-shadow-lg">Continue →</span>
+                </button>
+              )}
+            </div>
+          </div>
+        </form>
+      </div>
+    </OnboardingLayout>
+  );
+}
--- a/src/pages/onboarding/login/step-2/index.page.tsx
+++ b/src/pages/onboarding/login/step-2/index.page.tsx
@@ -0,0 +1,144 @@
+import OnboardingLayout from '@components/layouts/onboarding';
+import { RelayContext } from '@components/relaysProvider';
+
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+import { usePageContext } from '@utils/hooks/usePageContext';
+import { fetchProfileMetadata } from '@utils/hooks/useProfileMetadata';
+import { shortenKey } from '@utils/shortenKey';
+import { createAccount, createPleb, updateAccount } from '@utils/storage';
+import { nip02ToArray } from '@utils/transform';
+
+import { getPublicKey } from 'nostr-tools';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+
+export function Page() {
+  const pageContext = usePageContext();
+  const searchParams = pageContext.urlParsed.search;
+
+  const privkey = searchParams.privkey;
+  const pubkey = getPublicKey(privkey);
+
+  const [pool, relays]: any = useContext(RelayContext);
+  const [profile, setProfile] = useState({ metadata: null });
+  const [done, setDone] = useState(false);
+
+  const timeout = useRef(null);
+
+  const createPlebs = useCallback(async (tags: string[]) => {
+    for (const tag of tags) {
+      fetchProfileMetadata(tag[1])
+        .then((res: any) => createPleb(tag[1], res.content))
+        .catch(console.error);
+    }
+  }, []);
+
+  useEffect(() => {
+    const unsubscribe = pool.subscribe(
+      [
+        {
+          kinds: [0, 3],
+          authors: [pubkey],
+        },
+      ],
+      relays,
+      (event: any) => {
+        if (event.kind === 0) {
+          // create account
+          createAccount(pubkey, privkey, event.content);
+          // update state
+          setProfile({
+            metadata: JSON.parse(event.content),
+          });
+        } else {
+          if (event.tags.length > 0) {
+            createPlebs(event.tags);
+            const arr = nip02ToArray(event.tags);
+            // update account's folllows with NIP-02 tag list
+            updateAccount('follows', arr, pubkey);
+          }
+        }
+      },
+      undefined,
+      () => {
+        timeout.current = setTimeout(() => setDone(true), 5000);
+      },
+      {
+        unsubscribeOnEose: true,
+        logAllEvents: false,
+      }
+    );
+
+    return () => {
+      unsubscribe();
+      clearTimeout(timeout.current);
+    };
+  }, [pool, relays, pubkey, privkey, createPlebs]);
+
+  return (
+    <OnboardingLayout>
+      <div className="grid h-full w-full grid-rows-5">
+        <div className="row-span-1 flex items-center justify-center">
+          <h1 className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent">
+            Bringing back your profile...
+          </h1>
+        </div>
+        <div className="row-span-4 flex flex-col gap-8">
+          <div className="mx-auto w-full max-w-md">
+            <div className="mb-4 flex flex-col gap-2">
+              <div className="w-full rounded-lg bg-zinc-900 p-4 shadow-input ring-1 ring-zinc-800">
+                <div className="flex space-x-4">
+                  <div className="relative h-10 w-10 rounded-full">
+                    <img
+                      className="h-10 w-10 rounded-full object-cover"
+                      src={profile.metadata?.picture || DEFAULT_AVATAR}
+                      alt="avatar"
+                    />
+                  </div>
+                  <div className="flex-1 space-y-4 py-1">
+                    <div className="flex items-center gap-2">
+                      <p className="font-semibold">{profile.metadata?.display_name || profile.metadata?.name}</p>
+                      <span className="leading-tight text-zinc-500">·</span>
+                      <p className="text-zinc-500">@{profile.metadata?.username || (pubkey && shortenKey(pubkey))}</p>
+                    </div>
+                    <div className="space-y-3">
+                      <div className="grid grid-cols-3 gap-4">
+                        <div className="col-span-2 h-2 rounded bg-zinc-700"></div>
+                        <div className="col-span-1 h-2 rounded bg-zinc-700"></div>
+                      </div>
+                      <div className="h-2 rounded bg-zinc-700"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center justify-center">
+              {done === false ? (
+                <svg
+                  className="h-5 w-5 animate-spin text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+              ) : (
+                <a
+                  href="/"
+                  className="inline-flex w-full transform items-center justify-center rounded-lg bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 px-3.5 py-2.5 font-medium text-zinc-800 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+                >
+                  <span className="drop-shadow-lg">Done! Go to newsfeed</span>
+                </a>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </OnboardingLayout>
+  );
+}
--- a/src/pages/user/index.page.tsx
+++ b/src/pages/user/index.page.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import NewsfeedLayout from '@components/layouts/newsfeed';
+import ProfileFollowers from '@components/profile/followers';
+import ProfileFollows from '@components/profile/follows';
+import ProfileMetadata from '@components/profile/metadata';
+import ProfileNotes from '@components/profile/notes';
+
+import { usePageContext } from '@utils/hooks/usePageContext';
+
+import * as Tabs from '@radix-ui/react-tabs';
+
+export function Page() {
+  const pageContext = usePageContext();
+  const searchParams: any = pageContext.urlParsed.search;
+
+  const pubkey = searchParams.pubkey;
+
+  return (
+    <NewsfeedLayout>
+      <div className="scrollbar-hide h-full w-full overflow-y-auto">
+        <ProfileMetadata id={pubkey} />
+        <Tabs.Root className="flex w-full flex-col" defaultValue="notes">
+          <Tabs.List className="flex border-b border-zinc-800">
+            <Tabs.Trigger
+              className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium leading-none text-zinc-400 outline-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
+              value="notes"
+            >
+              Notes
+            </Tabs.Trigger>
+            <Tabs.Trigger
+              className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium text-zinc-400 outline-none placeholder:leading-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
+              value="followers"
+            >
+              Followers
+            </Tabs.Trigger>
+            <Tabs.Trigger
+              className="flex h-10 flex-1 cursor-default select-none items-center justify-center px-5 text-sm font-medium leading-none text-zinc-400 outline-none hover:text-fuchsia-400 data-[state=active]:text-fuchsia-500 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current"
+              value="following"
+            >
+              Following
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="notes">
+            <ProfileNotes id={pubkey} />
+          </Tabs.Content>
+          <Tabs.Content value="followers">
+            <ProfileFollowers id={pubkey} />
+          </Tabs.Content>
+          <Tabs.Content value="following">
+            <ProfileFollows id={pubkey} />
+          </Tabs.Content>
+        </Tabs.Root>
+      </div>
+    </NewsfeedLayout>
+  );
+}