updated onboarding, include UI & UX

src/pages/onboarding/create/index.tsx

@@ -1,12 +1,10 @@
 import BaseLayout from '@layouts/base';
-import OnboardingLayout from '@layouts/onboarding';
 
 import { DatabaseContext } from '@components/contexts/database';
 import { RelayContext } from '@components/contexts/relay';
 
 import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
 import { useLocalStorage, writeStorage } from '@rehooks/local-storage';
-import { motion } from 'framer-motion';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools';
@@ -100,115 +98,107 @@ export default function Page() {
         // redirect to pre-follow
         setTimeout(() => {
           setLoading(false);
-          router.push('/onboarding/create/pre-follows');
+          router.push('/');
         }, 1500);
       })
       .catch(console.error);
   };
 
   return (
-    <div className="flex h-full flex-col justify-between px-8">
-      <div>{/* spacer */}</div>
-      <motion.div layoutId="form">
+    <div className="grid h-full w-full grid-rows-5">
+      <div className="row-span-1 flex items-center justify-center">
         <div className="mb-8 flex flex-col gap-3">
-          <motion.h1
-            layoutId="title"
-            className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent"
-          >
-            Create new key
-          </motion.h1>
-          <motion.h2 layoutId="subtitle" className="w-3/4 text-zinc-400">
-            Lume will generate key with default profile for you, you can edit it later, and please store your key safely
-            so you can restore your account or use other client
-          </motion.h2>
+          <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="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 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 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>
-          <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 px-3.5 py-2 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' ? (
-                  <EyeClosedIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-200" />
-                ) : (
-                  <EyeOpenIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-200" />
-                )}
-              </button>
+            <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 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"
+                />
+                <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' ? (
+                    <EyeClosedIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-200" />
+                  ) : (
+                    <EyeOpenIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-200" />
+                  )}
+                </button>
+              </div>
             </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 max-w-sm 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 max-w-sm 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-4">
-                  <div className="relative h-10 w-10 rounded-full">
-                    <Image className="inline-block rounded-full" src={data.picture} alt="" fill={true} />
-                  </div>
-                  <div className="flex-1 space-y-4 py-1">
-                    <div className="flex items-center gap-2">
-                      <p className="font-semibold">{data.display_name}</p>
-                      <p className="text-zinc-400">@{data.username}</p>
+            <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-4">
+                    <div className="relative h-10 w-10 rounded-full">
+                      <Image className="inline-block rounded-full" src={data.picture} alt="" fill={true} />
                     </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 className="flex-1 space-y-4 py-1">
+                      <div className="flex items-center gap-2">
+                        <p className="font-semibold">{data.display_name}</p>
+                        <p className="text-zinc-400">@{data.username}</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 className="h-2 rounded bg-zinc-700"></div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-      </motion.div>
-      <motion.div layoutId="action" className="pb-5">
-        <div className="flex h-10 items-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>
-          ) : (
-            <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">
+          <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={() => createAccount()}
-                className="transform rounded-lg border border-white/10 bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-300 via-fuchsia-600 to-orange-600 px-3.5 py-2 font-medium shadow-input shadow-black/5 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-50 dark:shadow-black/10"
+                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>
-      </motion.div>
+      </div>
     </div>
   );
 }
@@ -222,9 +212,5 @@ Page.getLayout = function getLayout(
     | ReactFragment
     | ReactPortal
 ) {
-  return (
-    <BaseLayout>
-      <OnboardingLayout>{page}</OnboardingLayout>
-    </BaseLayout>
-  );
+  return <BaseLayout>{page}</BaseLayout>;
 };

src/pages/onboarding/create/pre-follows.tsx

@@ -1,147 +0,0 @@
-import BaseLayout from '@layouts/base';
-import OnboardingLayout from '@layouts/onboarding';
-
-import { DatabaseContext } from '@components/contexts/database';
-
-import { truncate } from '@utils/truncate';
-
-import data from '@assets/directory.json';
-import { CheckCircledIcon } from '@radix-ui/react-icons';
-import { useLocalStorage } from '@rehooks/local-storage';
-import { motion } from 'framer-motion';
-import Image from 'next/image';
-import { useRouter } from 'next/router';
-import { nip19 } from 'nostr-tools';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useState } from 'react';
-
-const shuffle = (arr: { name: string; avatar: string; npub: string }[]) => [...arr].sort(() => Math.random() - 0.5);
-
-export default function Page() {
-  const { db }: any = useContext(DatabaseContext);
-  const router = useRouter();
-
-  const [follow, setFollow] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [list] = useState(shuffle(data));
-  const [currentUser]: any = useLocalStorage('current-user');
-
-  const followUser = (e) => {
-    const npub = e.currentTarget.getAttribute('data-npub');
-    setFollow((arr) => [...arr, npub]);
-  };
-
-  const insertDB = async () => {
-    // self follow
-    await db.execute(
-      `INSERT INTO follows (pubkey, account, kind) VALUES ("${currentUser.id}", "${currentUser.id}", "0")`
-    );
-    // follow selected
-    follow.forEach(async (npub) => {
-      const { data } = nip19.decode(npub);
-      await db.execute(`INSERT INTO follows (pubkey, account, kind) VALUES ("${data}", "${currentUser.id}", "0")`);
-    });
-  };
-
-  const createFollowing = async () => {
-    setLoading(true);
-
-    insertDB().then(() =>
-      setTimeout(() => {
-        setLoading(false);
-        router.push('/');
-      }, 1500)
-    );
-  };
-
-  return (
-    <div className="flex h-full flex-col justify-between px-8">
-      <div>{/* spacer */}</div>
-      <motion.div layoutId="form" className="flex flex-col">
-        <div className="mb-8 flex flex-col gap-3">
-          <motion.h1
-            layoutId="title"
-            className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent"
-          >
-            Choose 10 people you want to following
-          </motion.h1>
-          <motion.h2 layoutId="subtitle" className="w-3/4 text-zinc-400">
-            For better experiences, you should follow the people you care about to personalize your newsfeed, otherwise
-            you will be very bored
-          </motion.h2>
-        </div>
-        <div className="h-full w-full shrink">
-          <div className="scrollbar-hide grid grid-cols-3 gap-4 overflow-y-auto">
-            {list.map((item, index) => (
-              <div
-                key={index}
-                onClick={(e) => followUser(e)}
-                data-npub={item.npub}
-                className={`col-span-1 inline-flex cursor-pointer items-center gap-3 rounded-lg p-2 hover:bg-zinc-700 ${
-                  follow.includes(item.npub) ? 'bg-zinc-800' : ''
-                }`}
-              >
-                <div className="relative h-10 w-10 flex-shrink-0">
-                  <Image className="rounded-full object-cover" src={item.avatar} alt={item.name} fill={true} />
-                </div>
-                <div className="inline-flex flex-1 items-center justify-between">
-                  <div>
-                    <p className="truncate text-sm font-medium text-zinc-200">{item.name}</p>
-                    <p className="text-sm leading-tight text-zinc-500">{truncate(item.npub, 16, ' .... ')}</p>
-                  </div>
-                  <div>
-                    {follow.includes(item.npub) ? <CheckCircledIcon className="h-4 w-4 text-green-500" /> : <></>}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </motion.div>
-      <motion.div layoutId="action" className="pb-5">
-        <div className="flex h-10 items-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>
-          ) : (
-            <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">
-              <button
-                onClick={() => createFollowing()}
-                disabled={follow.length < 10 ? true : false}
-                className="transform rounded-lg border border-white/10 bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-300 via-fuchsia-600 to-orange-600 px-3.5 py-2 font-medium shadow-input shadow-black/5 active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-50 dark:shadow-black/10"
-              >
-                <span className="drop-shadow-lg">Finish →</span>
-              </button>
-            </div>
-          )}
-        </div>
-      </motion.div>
-    </div>
-  );
-}
-
-Page.getLayout = function getLayout(
-  page:
-    | string
-    | number
-    | boolean
-    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
-    | ReactFragment
-    | ReactPortal
-) {
-  return (
-    <BaseLayout>
-      <OnboardingLayout>{page}</OnboardingLayout>
-    </BaseLayout>
-  );
-};

src/pages/onboarding/index.tsx

@@ -1,47 +1,33 @@
 import BaseLayout from '@layouts/base';
-import OnboardingLayout from '@layouts/onboarding';
 
-import { motion } from 'framer-motion';
+import { ArrowRightIcon } from '@radix-ui/react-icons';
 import Link from 'next/link';
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
 
 export default function Page() {
   return (
-    <div className="flex h-full flex-col justify-between px-8">
-      <div>{/* spacer */}</div>
-      <div className="flex flex-col gap-3">
-        <motion.h1
-          layoutId="title"
-          className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent"
-        >
-          Other social network require email/password
-          <br />
-          nostr use{' '}
-          <span className="bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-300 via-fuchsia-600 to-orange-600 bg-clip-text text-transparent">
-            public/private key instead
-          </span>
-        </motion.h1>
-        <motion.h2 layoutId="subtitle" className="w-3/4 text-zinc-400">
-          If you have used nostr before, you can import your own private key. Otherwise, you can create a new key or use
-          auto-generated account created by system.
-        </motion.h2>
-        <motion.div layoutId="form"></motion.div>
-        <motion.div layoutId="action" className="mt-4 flex gap-2">
+    <div className="grid h-full w-full grid-rows-5">
+      <div className="row-span-3 overflow-hidden p-4"></div>
+      <div className="row-span-2 flex w-full flex-col items-center gap-8 overflow-hidden 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">
           <Link
             href="/onboarding/create"
-            className="hover:bg-zinc-900/2.5 transform rounded-lg border border-black/5 bg-zinc-800 px-3.5 py-2 font-medium ring-1 ring-inset ring-zinc-900/10 hover:text-zinc-900 active:translate-y-1 dark:text-zinc-300 dark:ring-white/10 dark:hover:bg-zinc-700 dark:hover:text-white"
+            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
+            <ArrowRightIcon className="h-5 w-5" />
           </Link>
           <Link
             href="/onboarding/login"
-            className="hover:bg-zinc-900/2.5 transform rounded-lg border border-black/5 bg-zinc-800 px-3.5 py-2 font-medium ring-1 ring-inset ring-zinc-900/10 hover:text-zinc-900 active:translate-y-1 dark:text-zinc-300 dark:ring-white/10 dark:hover:bg-zinc-700 dark:hover:text-white"
+            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
           </Link>
-        </motion.div>
+        </div>
       </div>
-      <div>{/* spacer */}</div>
     </div>
   );
 }
@@ -55,9 +41,5 @@ Page.getLayout = function getLayout(
     | ReactFragment
     | ReactPortal
 ) {
-  return (
-    <BaseLayout>
-      <OnboardingLayout>{page}</OnboardingLayout>
-    </BaseLayout>
-  );
+  return <BaseLayout>{page}</BaseLayout>;
 };

src/pages/onboarding/login/fetch.tsx

@@ -1,149 +0,0 @@
-import BaseLayout from '@layouts/base';
-import OnboardingLayout from '@layouts/onboarding';
-
-import { DatabaseContext } from '@components/contexts/database';
-import { RelayContext } from '@components/contexts/relay';
-
-import { useLocalStorage } from '@rehooks/local-storage';
-import { motion } from 'framer-motion';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { getPublicKey, nip19 } from 'nostr-tools';
-import {
-  JSXElementConstructor,
-  ReactElement,
-  ReactFragment,
-  ReactPortal,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
-
-export default function Page() {
-  const { db }: any = useContext(DatabaseContext);
-  const relayPool: any = useContext(RelayContext);
-
-  const [loading, setLoading] = useState(false);
-  const [relays] = useLocalStorage('relays');
-
-  const router = useRouter();
-  const { privkey }: any = router.query;
-
-  const pubkey = useMemo(() => (privkey ? getPublicKey(privkey) : null), [privkey]);
-
-  // save account to database
-  const insertAccount = useCallback(
-    async (metadata) => {
-      if (loading === false) {
-        const npub = privkey ? nip19.npubEncode(pubkey) : null;
-        const nsec = privkey ? nip19.nsecEncode(privkey) : null;
-        await db.execute(
-          `INSERT OR IGNORE INTO accounts (id, privkey, npub, nsec, metadata) VALUES ("${pubkey}", "${privkey}", "${npub}", "${nsec}", '${metadata}')`
-        );
-        setLoading(true);
-      }
-    },
-    [db, privkey, pubkey, loading]
-  );
-
-  // save follows to database
-  const insertFollows = useCallback(
-    async (follows) => {
-      follows.forEach(async (item) => {
-        if (item) {
-          await db.execute(
-            `INSERT OR IGNORE INTO follows (pubkey, account, kind) VALUES ("${item[1]}", "${pubkey}", "0")`
-          );
-        }
-      });
-    },
-    [db, pubkey]
-  );
-
-  relayPool.subscribe(
-    [
-      {
-        authors: [pubkey],
-        kinds: [0, 3],
-        since: 0,
-      },
-    ],
-    relays,
-    (event: any) => {
-      if (event.kind === 0) {
-        insertAccount(event.content);
-      } else {
-        if (event.tags.length > 0) {
-          insertFollows(event.tags);
-        }
-      }
-    },
-    undefined,
-    (events: any, relayURL: any) => {
-      console.log(events, relayURL);
-    }
-  );
-
-  return (
-    <div className="flex h-full flex-col justify-between px-8">
-      <div>{/* spacer */}</div>
-      <motion.div layoutId="form">
-        <div className="mb-8 flex flex-col gap-3">
-          <motion.h1
-            layoutId="title"
-            className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent"
-          >
-            Fetching your profile...
-          </motion.h1>
-          <motion.h2 layoutId="subtitle" className="w-3/4 text-zinc-400">
-            As long as you have private key, you alway can sync your profile and follows list on every nostr client, so
-            please keep your key safely
-          </motion.h2>
-        </div>
-      </motion.div>
-      <motion.div layoutId="action" className="pb-5">
-        <div className="flex h-10 items-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>
-          ) : (
-            <Link
-              href="/"
-              className="transform rounded-lg bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-300 via-fuchsia-600 to-orange-600 px-3.5 py-2 font-medium active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
-            >
-              <span className="drop-shadow-lg">Finish</span>
-            </Link>
-          )}
-        </div>
-      </motion.div>
-    </div>
-  );
-}
-
-Page.getLayout = function getLayout(
-  page:
-    | string
-    | number
-    | boolean
-    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
-    | ReactFragment
-    | ReactPortal
-) {
-  return (
-    <BaseLayout>
-      <OnboardingLayout>{page}</OnboardingLayout>
-    </BaseLayout>
-  );
-};

src/pages/onboarding/login/index.tsx

@@ -1,7 +1,6 @@
 import BaseLayout from '@layouts/base';
-import OnboardingLayout from '@layouts/onboarding';
 
-import { motion } from 'framer-motion';
+import { LightningBoltIcon } from '@radix-ui/react-icons';
 import { useRouter } from 'next/router';
 import { nip19 } from 'nostr-tools';
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
@@ -43,7 +42,7 @@ export default function Page() {
 
     try {
       router.push({
-        pathname: '/onboarding/login/fetch',
+        pathname: '/onboarding/login/step-2',
         query: { privkey: privkey },
       });
     } catch (error) {
@@ -55,60 +54,70 @@ export default function Page() {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="flex h-full flex-col justify-between px-8">
-      <div>{/* spacer */}</div>
-      <motion.div layoutId="form">
-        <div className="mb-8 flex flex-col gap-3">
-          <motion.h1
-            layoutId="title"
-            className="bg-gradient-to-br from-zinc-200 to-zinc-400 bg-clip-text text-3xl font-medium text-transparent"
-          >
-            Import your private key
-          </motion.h1>
-          <motion.h2 layoutId="subtitle" className="w-3/4 text-zinc-400">
-            You can import private key format as hex string or nsec. If you have installed Nostr Connect compality
-            wallet in your mobile, you can connect by scan QR Code below
-          </motion.h2>
-        </div>
-        <div className="flex flex-col gap-2">
-          <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 nsec or hex key here..."
-              className="relative w-full rounded-lg border border-black/5 px-3.5 py-2 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"
-            />
+    <form onSubmit={handleSubmit(onSubmit)} 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 via-white to-zinc-300 bg-clip-text text-3xl font-semibold text-transparent">
+          Login with Private Key
+        </h1>
+      </div>
+      <div 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 */}
+                <LightningBoltIcon className="h-5 w-5 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-2">
+              <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-sm text-red-400">{errors.key && <p>{errors.key.message}</p>}</span>
+            </div>
+          </div>
+          <div className="mt-1 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>
-          <span className="text-sm text-red-400">{errors.key && <p>{errors.key.message}</p>}</span>
         </div>
-      </motion.div>
-      <motion.div layoutId="action" className="pb-5">
-        <div className="flex h-10 items-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="transform rounded-lg bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-300 via-fuchsia-600 to-orange-600 px-3.5 py-2 font-medium active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
-            >
-              <span className="drop-shadow-lg">Continue →</span>
-            </button>
-          )}
-        </div>
-      </motion.div>
+      </div>
     </form>
   );
 }
@@ -122,9 +131,5 @@ Page.getLayout = function getLayout(
     | ReactFragment
     | ReactPortal
 ) {
-  return (
-    <BaseLayout>
-      <OnboardingLayout>{page}</OnboardingLayout>
-    </BaseLayout>
-  );
+  return <BaseLayout>{page}</BaseLayout>;
 };

src/pages/onboarding/login/step-2.tsx

@@ -0,0 +1,147 @@
+import BaseLayout from '@layouts/base';
+
+import { DatabaseContext } from '@components/contexts/database';
+import { RelayContext } from '@components/contexts/relay';
+
+import { useLocalStorage } from '@rehooks/local-storage';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { getPublicKey, nip19 } from 'nostr-tools';
+import {
+  JSXElementConstructor,
+  ReactElement,
+  ReactFragment,
+  ReactPortal,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+export default function Page() {
+  const { db }: any = useContext(DatabaseContext);
+  const relayPool: any = useContext(RelayContext);
+
+  const router = useRouter();
+  const { privkey }: any = router.query;
+
+  const [relays] = useLocalStorage('relays');
+  const [profile, setProfile] = useState({ picture: '', display_name: '', username: '' });
+
+  const pubkey = useMemo(() => (privkey ? getPublicKey(privkey) : null), [privkey]);
+
+  // save account to database
+  const insertAccount = useCallback(
+    async (metadata) => {
+      const npub = privkey ? nip19.npubEncode(pubkey) : null;
+      const nsec = privkey ? nip19.nsecEncode(privkey) : null;
+      // insert to database
+      await db.execute(
+        `INSERT OR IGNORE INTO accounts (id, privkey, npub, nsec, metadata) VALUES ("${pubkey}", "${privkey}", "${npub}", "${nsec}", '${metadata}')`
+      );
+      // update state
+      setProfile(JSON.parse(metadata));
+    },
+    [db, privkey, pubkey]
+  );
+
+  // save follows to database
+  const insertFollows = useCallback(
+    async (follows) => {
+      follows.forEach(async (item) => {
+        if (item) {
+          // insert to database
+          await db.execute(
+            `INSERT OR IGNORE INTO follows (pubkey, account, kind) VALUES ("${item[1]}", "${pubkey}", "0")`
+          );
+        }
+      });
+    },
+    [db, pubkey]
+  );
+
+  useEffect(() => {
+    relayPool.subscribe(
+      [
+        {
+          authors: [pubkey],
+          kinds: [0, 3],
+          since: 0,
+        },
+      ],
+      relays,
+      (event: any) => {
+        if (event.kind === 0) {
+          insertAccount(event.content);
+        } else {
+          if (event.tags.length > 0) {
+            insertFollows(event.tags);
+          }
+        }
+      },
+      undefined,
+      (events: any, relayURL: any) => {
+        console.log(events, relayURL);
+      }
+    );
+  }, [insertAccount, insertFollows, pubkey, relayPool, relays]);
+
+  return (
+    <div className="grid h-full w-full grid-rows-5">
+      <div className="row-span-1 flex items-center justify-center">
+        <div className="mb-8 flex flex-col gap-3">
+          <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>
+      <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">
+                  <Image className="inline-block rounded-full" src={profile.picture} alt="" fill={true} />
+                </div>
+                <div className="flex-1 space-y-4 py-1">
+                  <div className="flex items-center gap-2">
+                    <p className="font-semibold">{profile.display_name}</p>
+                    <span className="leading-tight text-zinc-500">·</span>
+                    <p className="text-zinc-500">@{profile.username}</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>
+          <Link
+            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 →</span>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Page.getLayout = function getLayout(
+  page:
+    | string
+    | number
+    | boolean
+    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
+    | ReactFragment
+    | ReactPortal
+) {
+  return <BaseLayout>{page}</BaseLayout>;
+};