don't hate me, old git is fuck up

src/pages/onboarding/create.tsx

@@ -0,0 +1,239 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import BaseLayout from '@layouts/baseLayout';
+import OnboardingLayout from '@layouts/onboardingLayout';
+
+import { currentUser } from '@stores/currentUser';
+
+import EyeIcon from '@assets/icons/Eye';
+
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { dateToUnix, useNostr } from 'nostr-react';
+import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useState } from 'react';
+import Database from 'tauri-plugin-sql-api';
+import { Config, names, uniqueNamesGenerator } from 'unique-names-generator';
+
+const config: Config = {
+  dictionaries: [names],
+};
+
+const defaultAvatars = [
+  'https://bafybeidfsbrzqbvontmucteomoz2rkrxugu462l5hyhh6uioslkfzzs4oq.ipfs.w3s.link/avatar-11.png',
+  'https://bafybeid7mrvznbnd6r2ju2iu7lsxkcikufys6z6ssy5ldxrxq5qh3yqf4u.ipfs.w3s.link/avatar-12.png',
+  'https://bafybeih5gpwu53ohui6p7scekjpxjk2d4lusq2jqohqhjsvhfkeu56ea4e.ipfs.w3s.link/avatar-13.png',
+  'https://bafybeibpbvrpuphkerjygdbnh26av5brqggzunbbbmfl3ozlvcn2mj6zxa.ipfs.w3s.link/avatar-14.png',
+  'https://bafybeia4ue4loinuflu7y5q3xu6hcvt653mzw5yorw25oarf2wqksig4ma.ipfs.w3s.link/avatar-15.png',
+  'https://bafybeib3gzl6n2bebiru2cpkdljmlzbtqfsl6xcnqtabxt6jrpj7l7ltm4.ipfs.w3s.link/avatar-16.png',
+];
+
+const defaultBanners = [
+  'https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg',
+  'https://bafybeiderllqadxsikh3envikobmyka3uwgojriwh6epctqartq2loswyi.ipfs.w3s.link/banner-2.jpg',
+  'https://bafybeiba4tifde2kczvd26vxhbb5jpqi3wmgvccpkcrle4hse2cqrwlwiy.ipfs.w3s.link/banner-3.jpg',
+  'https://bafybeifqpny2eom7ccvmaguxxxfajutmn5h3fotaasga7gce2xfx37p6oy.ipfs.w3s.link/banner-4.jpg',
+];
+
+export default function Page() {
+  const router = useRouter();
+  const { publish } = useNostr();
+
+  const [type, setType] = useState('password');
+  const [loading, setLoading] = useState(false);
+
+  const [privKey] = useState(() => generatePrivateKey());
+  const [name] = useState(() => uniqueNamesGenerator(config).toString());
+  const [avatar] = useState(
+    () => defaultAvatars[Math.floor(Math.random() * defaultAvatars.length)]
+  );
+  const [banner] = useState(
+    () => defaultBanners[Math.floor(Math.random() * defaultBanners.length)]
+  );
+
+  const pubKey = getPublicKey(privKey);
+  const npub = nip19.npubEncode(pubKey);
+  const nsec = nip19.nsecEncode(pubKey);
+
+  // auto-generated profile
+  const data = {
+    display_name: name,
+    name: name,
+    username: name.toLowerCase(),
+    picture: avatar,
+    banner: banner,
+  };
+
+  const createAccount = async () => {
+    setLoading(true);
+
+    // publish account to relays
+    const event: any = {
+      content: JSON.stringify(data),
+      created_at: dateToUnix(),
+      kind: 0,
+      pubkey: pubKey,
+      tags: [],
+    };
+    event.id = getEventHash(event);
+    event.sig = signEvent(event, privKey);
+    publish(event);
+
+    // save account to database
+    const db = await Database.load('sqlite:lume.db');
+    await db.execute(
+      `INSERT INTO accounts (privkey, pubkey, npub, nsec, metadata) VALUES ("${privKey}", "${pubKey}", "${npub}", "${nsec}", '${JSON.stringify(
+        data
+      )}')`
+    );
+    await db.close();
+
+    // set currentUser in global state
+    currentUser.set({
+      metadata: JSON.stringify(data),
+      npub: npub,
+      privkey: privKey,
+      pubkey: pubKey,
+    });
+
+    // redirect to following newsfeed
+    setTimeout(() => {
+      setLoading(false);
+      router.push('/onboarding/following');
+    }, 1500);
+  };
+
+  const showNsec = () => {
+    if (type === 'password') {
+      setType('text');
+    } else {
+      setType('password');
+    }
+  };
+
+  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">
+            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>
+        </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>
+          <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={() => showNsec()}
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700">
+                <EyeIcon className="h-5 w-5 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 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>
+                    <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>
+        </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={() => 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">
+                <span className="drop-shadow-lg">Continue →</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/following.tsx

@@ -0,0 +1,161 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import BaseLayout from '@layouts/baseLayout';
+import OnboardingLayout from '@layouts/onboardingLayout';
+
+import { truncate } from '@utils/truncate';
+
+import { currentUser } from '@stores/currentUser';
+
+import data from '@assets/directory.json';
+import CheckCircleIcon from '@assets/icons/CheckCircle';
+
+import { useStore } from '@nanostores/react';
+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, useState } from 'react';
+import Database from 'tauri-plugin-sql-api';
+
+export default function Page() {
+  const router = useRouter();
+  const shuffle = (arr) => [...arr].sort(() => Math.random() - 0.5);
+
+  const [follow, setFollow] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [list] = useState(shuffle(data));
+  const $currentUser: any = useStore(currentUser);
+
+  const followUser = (e) => {
+    const npub = e.currentTarget.getAttribute('data-npub');
+    setFollow((arr) => [...arr, npub]);
+  };
+
+  const insertDB = async () => {
+    const db = await Database.load('sqlite:lume.db');
+    await db.execute(
+      `INSERT INTO followings (pubkey, account) VALUES ("${$currentUser.pubkey}", "${$currentUser.pubkey}")`
+    );
+    follow.forEach(async (npub) => {
+      const { data } = nip19.decode(npub);
+      await db.execute(
+        `INSERT INTO followings (pubkey, account) VALUES ("${data}", "${$currentUser.pubkey}")`
+      );
+    });
+  };
+
+  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) ? (
+                      <CheckCircleIcon 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/import.tsx

@@ -0,0 +1,139 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import BaseLayout from '@layouts/baseLayout';
+import OnboardingLayout from '@layouts/onboardingLayout';
+
+import { motion } from 'framer-motion';
+import { useRouter } from 'next/router';
+import { getPublicKey, nip19 } from 'nostr-tools';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
+import { Resolver, useForm } from 'react-hook-form';
+import Database from 'tauri-plugin-sql-api';
+
+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 default function Page() {
+  const router = useRouter();
+  const {
+    register,
+    setError,
+    handleSubmit,
+    formState: { errors, isDirty, isValid, isSubmitting },
+  } = useForm<FormValues>({ resolver });
+
+  const onSubmit = async (data: any) => {
+    let privKey = data['key'];
+    if (privKey.substring(0, 4) === 'nsec') {
+      privKey = nip19.decode(privKey).data;
+    }
+    try {
+      const pubKey = getPublicKey(privKey);
+      if (pubKey) {
+        const npub = nip19.npubEncode(pubKey);
+        const db = await Database.load('sqlite:lume.db');
+
+        await db.execute(
+          `INSERT INTO accounts (privkey, pubkey, npub) VALUES ("${privKey}", "${pubKey}", "${npub}")`
+        );
+        await db.close();
+
+        router.push('/');
+      }
+    } catch (error) {
+      setError('key', {
+        type: 'custom',
+        message: 'Private Key is invalid, please check again',
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex h-full flex-col justify-between">
+      <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 })}
+              placeholder="Paste 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-900 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600"
+            />
+          </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>
+    </form>
+  );
+}
+
+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

@@ -0,0 +1,60 @@
+import BaseLayout from '@layouts/baseLayout';
+import OnboardingLayout from '@layouts/onboardingLayout';
+
+import { motion } from 'framer-motion';
+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">
+          <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">
+            Create new key
+          </Link>
+          <Link
+            href="/onboarding/import"
+            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">
+            Import key
+          </Link>
+        </motion.div>
+      </div>
+      <div>{/* spacer */}</div>
+    </div>
+  );
+}
+
+Page.getLayout = function getLayout(
+  page:
+    | string
+    | number
+    | boolean
+    | ReactElement<unknown, string | JSXElementConstructor<unknown>>
+    | ReactFragment
+    | ReactPortal
+) {
+  return (
+    <BaseLayout>
+      <OnboardingLayout>{page}</OnboardingLayout>
+    </BaseLayout>
+  );
+};