wip: new onboarding process

src/app.tsx

@@ -4,8 +4,6 @@ import { AuthCreateScreen } from '@app/auth/create';
 import { CreateStep1Screen } from '@app/auth/create/step-1';
 import { CreateStep2Screen } from '@app/auth/create/step-2';
 import { CreateStep3Screen } from '@app/auth/create/step-3';
-import { CreateStep4Screen } from '@app/auth/create/step-4';
-import { CreateStep5Screen } from '@app/auth/create/step-5';
 import { AuthImportScreen } from '@app/auth/import';
 import { ImportStep1Screen } from '@app/auth/import/step-1';
 import { ImportStep2Screen } from '@app/auth/import/step-2';
@@ -96,8 +94,6 @@ const router = createBrowserRouter([
           { path: '', element: <CreateStep1Screen /> },
           { path: 'step-2', element: <CreateStep2Screen /> },
           { path: 'step-3', element: <CreateStep3Screen /> },
-          { path: 'step-4', element: <CreateStep4Screen /> },
-          { path: 'step-5', element: <CreateStep5Screen /> },
         ],
       },
       { path: 'unlock', element: <UnlockScreen /> },

src/app/auth/create/step-1.tsx

@@ -8,6 +8,7 @@ import { createAccount } from '@libs/storage';
 
 import { Button } from '@shared/button';
 import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
+import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 
 import { useOnboarding } from '@stores/onboarding';
 import { useStronghold } from '@stores/stronghold';
@@ -118,13 +119,25 @@ export function CreateStep1Screen() {
           </div>
         </div>
         <div className="flex flex-col gap-2">
-          <Button preset="large" onClick={() => submit()}>
+          <button
+            type="button"
+            onClick={() => submit()}
+            className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
+          >
             {loading ? (
-              <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
+              <>
+                <span className="w-5" />
+                <span>Creating...</span>
+                <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+              </>
             ) : (
-              'I have saved my key, continue →'
+              <>
+                <span className="w-5" />
+                <span>I have saved my key, continue</span>
+                <ArrowRightCircleIcon className="h-5 w-5" />
+              </>
             )}
-          </Button>
+          </button>
           {downloaded ? (
             <span className="inline-flex h-11 w-full items-center justify-center text-sm text-white/50">
               Saved in Download folder

src/app/auth/create/step-2.tsx

@@ -3,6 +3,7 @@ import { Resolver, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
 import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
+import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 
 import { useOnboarding } from '@stores/onboarding';
 import { useStronghold } from '@stores/stronghold';
@@ -114,12 +115,20 @@ export function CreateStep2Screen() {
             <button
               type="submit"
               disabled={!isDirty || !isValid}
-              className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
             >
               {loading ? (
-                <LoaderIcon className="h-4 w-4 animate-spin text-white" />
+                <>
+                  <span className="w-5" />
+                  <span>Creating...</span>
+                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                </>
               ) : (
-                'Continue →'
+                <>
+                  <span className="w-5" />
+                  <span>Continue</span>
+                  <ArrowRightCircleIcon className="h-5 w-5" />
+                </>
               )}
             </button>
           </div>

src/app/auth/create/step-3.tsx

@@ -5,18 +5,20 @@ import { useNavigate } from 'react-router-dom';
 import { AvatarUploader } from '@shared/avatarUploader';
 import { BannerUploader } from '@shared/bannerUploader';
 import { LoaderIcon } from '@shared/icons';
+import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 import { Image } from '@shared/image';
 
 import { DEFAULT_AVATAR } from '@stores/constants';
-import { useOnboarding } from '@stores/onboarding';
+
+import { usePublish } from '@utils/hooks/usePublish';
 
 export function CreateStep3Screen() {
+  const { publish } = usePublish();
   const navigate = useNavigate();
-  const createProfile = useOnboarding((state) => state.createProfile);
 
+  const [loading, setLoading] = useState(false);
   const [picture, setPicture] = useState(DEFAULT_AVATAR);
   const [banner, setBanner] = useState('');
-  const [loading, setLoading] = useState(false);
 
   const {
     register,
@@ -24,21 +26,29 @@ export function CreateStep3Screen() {
     formState: { isDirty, isValid },
   } = useForm();
 
-  const onSubmit = (data: { name: string; about: string }) => {
+  const onSubmit = async (data: { name: string; about: string; website: string }) => {
     setLoading(true);
     try {
       const profile = {
         ...data,
-        username: data.name,
         name: data.name,
         display_name: data.name,
         bio: data.about,
+        website: data.website,
       };
-      createProfile(profile);
-      // redirect to next step
-      setTimeout(() => navigate('/auth/create/step-4', { replace: true }), 1200);
-    } catch {
-      console.log('error');
+
+      const event = await publish({
+        content: JSON.stringify(profile),
+        kind: 0,
+        tags: [],
+      });
+
+      if (event) {
+        setTimeout(() => navigate('/auth/create/step-4', { replace: true }), 1000);
+      }
+    } catch (e) {
+      console.log('error: ', e);
+      setLoading(false);
     }
   };
 
@@ -52,7 +62,7 @@ export function CreateStep3Screen() {
           <input type={'hidden'} {...register('picture')} value={picture} />
           <input type={'hidden'} {...register('banner')} value={banner} />
           <div className="relative">
-            <div className="relative h-44 w-full bg-zinc-800">
+            <div className="relative h-44 w-full bg-white/10">
               <Image
                 src={banner}
                 fallback="https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"
@@ -127,12 +137,20 @@ export function CreateStep3Screen() {
             <button
               type="submit"
               disabled={!isDirty || !isValid}
-              className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600"
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
             >
               {loading ? (
-                <LoaderIcon className="h-4 w-4 animate-spin text-white" />
+                <>
+                  <span className="w-5" />
+                  <span>Creating...</span>
+                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                </>
               ) : (
-                'Continue →'
+                <>
+                  <span className="w-5" />
+                  <span>Continue</span>
+                  <ArrowRightCircleIcon className="h-5 w-5" />
+                </>
               )}
             </button>
           </div>

src/app/auth/create/step-4.tsx

@@ -1,86 +0,0 @@
-import { Body, fetch } from '@tauri-apps/plugin-http';
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { Button } from '@shared/button';
-import { LoaderIcon } from '@shared/icons';
-
-import { useOnboarding } from '@stores/onboarding';
-
-import { useAccount } from '@utils/hooks/useAccount';
-import { usePublish } from '@utils/hooks/usePublish';
-
-export function CreateStep4Screen() {
-  const navigate = useNavigate();
-  const profile = useOnboarding((state) => state.profile);
-
-  const { publish } = usePublish();
-  const { account } = useAccount();
-
-  const [username, setUsername] = useState('');
-  const [loading, setLoading] = useState(false);
-
-  const createNIP05 = async () => {
-    try {
-      setLoading(true);
-
-      const response = await fetch('https://lume.nu/api/user-create', {
-        method: 'POST',
-        timeout: 30,
-        headers: {
-          'Content-Type': 'application/json; charset=utf-8',
-        },
-        body: Body.json({
-          username: username,
-          pubkey: account.pubkey,
-          lightningAddress: '',
-        }),
-      });
-
-      if (response.ok) {
-        const data = { ...profile, nip05: `${username}@lume.nu` };
-        publish({ content: JSON.stringify(data), kind: 0, tags: [] });
-
-        // redirect to step 4
-        navigate('/auth/create/step-5', { replace: true });
-      }
-    } catch (error) {
-      setLoading(false);
-      console.error('Error:', error);
-    }
-  };
-
-  return (
-    <div className="mx-auto w-full max-w-md">
-      <div className="mb-8 text-center">
-        <h1 className="text-xl font-semibold text-white">Create your Lume ID</h1>
-      </div>
-      <div className="flex w-full flex-col items-center justify-center gap-4">
-        <div className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-white/10">
-          <input
-            type="text"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            autoCapitalize="false"
-            autoCorrect="none"
-            spellCheck="false"
-            placeholder="satoshi"
-            className="relative h-11 w-full bg-transparent py-1 pl-3.5 text-white !outline-none placeholder:text-white/50"
-          />
-          <span className="pr-3.5 font-semibold text-fuchsia-500">@lume.nu</span>
-        </div>
-        <Button
-          preset="large"
-          onClick={() => createNIP05()}
-          disabled={username.length === 0}
-        >
-          {loading ? (
-            <LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-white" />
-          ) : (
-            'Continue →'
-          )}
-        </Button>
-      </div>
-    </div>
-  );
-}

src/app/auth/create/step-5.tsx

@@ -1,222 +0,0 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { User } from '@app/auth/components/user';
-
-import { updateAccount } from '@libs/storage';
-
-import { CheckCircleIcon, LoaderIcon } from '@shared/icons';
-
-import { useAccount } from '@utils/hooks/useAccount';
-import { usePublish } from '@utils/hooks/usePublish';
-import { arrayToNIP02 } from '@utils/transform';
-
-const INITIAL_LIST = [
-  {
-    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 CreateStep5Screen() {
-  const queryClient = useQueryClient();
-  const navigate = useNavigate();
-
-  const [loading, setLoading] = useState(false);
-  const [follows, setFollows] = useState([]);
-
-  const { publish } = usePublish();
-  const { account } = useAccount();
-  const { status, data } = useQuery(['trending-profiles'], async () => {
-    const res = await fetch('https://api.nostr.band/v0/trending/profiles');
-    if (!res.ok) {
-      throw new Error('Error');
-    }
-    return res.json();
-  });
-
-  // toggle follow state
-  const toggleFollow = (pubkey: string) => {
-    const arr = follows.includes(pubkey)
-      ? follows.filter((i) => i !== pubkey)
-      : [...follows, pubkey];
-    setFollows(arr);
-  };
-
-  const update = useMutation({
-    mutationFn: (follows: string[]) => {
-      return updateAccount('follows', follows);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['currentAccount'] });
-    },
-  });
-
-  // save follows to database then broadcast
-  const submit = async () => {
-    try {
-      setLoading(true);
-
-      const tags = arrayToNIP02([...follows, account.pubkey]);
-      publish({ content: '', kind: 3, tags: tags });
-
-      // update
-      update.mutate([...follows, account.pubkey]);
-
-      // redirect to next step
-      setTimeout(() => navigate('/auth/onboarding', { replace: true }), 1200);
-    } catch {
-      console.log('error');
-    }
-  };
-
-  const list = data ? data.profiles.concat(INITIAL_LIST) : INITIAL_LIST;
-
-  return (
-    <div className="mx-auto w-full max-w-md">
-      <div className="mb-8 text-center">
-        <h1 className="text-xl font-semibold text-white">Personalized your newsfeed</h1>
-      </div>
-      <div className="flex flex-col gap-4">
-        <div className="w-full overflow-hidden rounded-xl bg-white/10">
-          <div className="inline-flex h-10 w-full items-center gap-1 border-b border-white/10 px-4 text-base font-medium text-white/50">
-            Follow at least
-            <span className="font-semibold text-fuchsia-500">
-              {follows.length}/10
-            </span>{' '}
-            plebs
-          </div>
-          {status === 'loading' ? (
-            <div className="inline-flex h-11 w-full items-center justify-center px-4 py-2">
-              <LoaderIcon className="h-4 w-4 animate-spin text-white" />
-            </div>
-          ) : (
-            <div className="scrollbar-hide flex h-96 flex-col overflow-y-auto py-2">
-              {list.map((item: { pubkey: string; profile: { content: string } }) => (
-                <button
-                  key={item.pubkey}
-                  type="button"
-                  onClick={() => toggleFollow(item.pubkey)}
-                  className="inline-flex transform items-center justify-between bg-white/10 px-4 py-2 hover:bg-white/20 active:translate-y-1"
-                >
-                  <User pubkey={item.pubkey} fallback={item.profile?.content} />
-                  {follows.includes(item.pubkey) && (
-                    <div>
-                      <CheckCircleIcon className="h-4 w-4 text-green-400" />
-                    </div>
-                  )}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-        {follows.length >= 10 && (
-          <button
-            type="button"
-            onClick={() => submit()}
-            className="inline-flex h-11 w-full items-center justify-center rounded-md bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600"
-          >
-            {loading ? (
-              <LoaderIcon className="h-4 w-4 animate-spin text-white" />
-            ) : (
-              'Finish →'
-            )}
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}

src/app/auth/import/step-1.tsx

@@ -7,6 +7,7 @@ import { useNavigate } from 'react-router-dom';
 import { createAccount } from '@libs/storage';
 
 import { LoaderIcon } from '@shared/icons';
+import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 
 import { useOnboarding } from '@stores/onboarding';
 import { useStronghold } from '@stores/stronghold';
@@ -118,12 +119,20 @@ export function ImportStep1Screen() {
             <button
               type="submit"
               disabled={!isDirty || !isValid}
-              className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600"
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
             >
               {loading ? (
-                <LoaderIcon className="h-4 w-4 animate-spin text-white" />
+                <>
+                  <span className="w-5" />
+                  <span>Creating...</span>
+                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                </>
               ) : (
-                'Continue →'
+                <>
+                  <span className="w-5" />
+                  <span>Continue</span>
+                  <ArrowRightCircleIcon className="h-5 w-5" />
+                </>
               )}
             </button>
           </div>

src/app/auth/import/step-2.tsx

@@ -3,6 +3,7 @@ import { Resolver, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
 import { EyeOffIcon, EyeOnIcon, LoaderIcon } from '@shared/icons';
+import { ArrowRightCircleIcon } from '@shared/icons/arrowRightCircle';
 
 import { useOnboarding } from '@stores/onboarding';
 import { useStronghold } from '@stores/stronghold';
@@ -99,13 +100,11 @@ export function ImportStep2Screen() {
                 )}
               </button>
             </div>
-            <div className="text-sm text-white/50">
-              <p>
-                Password is use to unlock app and secure your key store in local machine.
-                When you move to other clients, you just need to copy your private key as
-                nsec or hexstring
-              </p>
-            </div>
+            <p className="text-sm text-white/50">
+              Password is use to unlock app and secure your key store in local machine.
+              When you move to other clients, you just need to copy your private key as
+              nsec or hexstring
+            </p>
             <span className="text-sm text-red-400">
               {errors.password && <p>{errors.password.message}</p>}
             </span>
@@ -114,12 +113,20 @@ export function ImportStep2Screen() {
             <button
               type="submit"
               disabled={!isDirty || !isValid}
-              className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-fuchsia-500 font-medium text-white hover:bg-fuchsia-600 disabled:pointer-events-none disabled:opacity-50"
+              className="inline-flex h-11 w-full items-center justify-between gap-2 rounded-lg bg-fuchsia-500 px-6 font-medium leading-none text-white hover:bg-fuchsia-600 focus:outline-none"
             >
               {loading ? (
-                <LoaderIcon className="h-4 w-4 animate-spin text-white" />
+                <>
+                  <span className="w-5" />
+                  <span>Creating...</span>
+                  <LoaderIcon className="h-5 w-5 animate-spin text-white" />
+                </>
               ) : (
-                'Continue →'
+                <>
+                  <span className="w-5" />
+                  <span>Continue</span>
+                  <ArrowRightCircleIcon className="h-5 w-5" />
+                </>
               )}
             </button>
           </div>

src/shared/avatarUploader.tsx

@@ -23,7 +23,7 @@ export function AvatarUploader({ setPicture }: { setPicture: any }) {
     <button
       type="button"
       onClick={() => uploadAvatar()}
-      className="inline-flex h-full w-full items-center justify-center bg-zinc-900/40"
+      className="inline-flex h-full w-full items-center justify-center rounded-lg bg-black/50 hover:bg-black/60"
     >
       {loading ? (
         <LoaderIcon className="h-6 w-6 animate-spin text-white" />

src/shared/bannerUploader.tsx

@@ -23,7 +23,7 @@ export function BannerUploader({ setBanner }: { setBanner: any }) {
     <button
       type="button"
       onClick={() => uploadBanner()}
-      className="inline-flex h-full w-full items-center justify-center bg-zinc-900/40"
+      className="inline-flex h-full w-full items-center justify-center bg-black/40 hover:bg-black/50"
     >
       {loading ? (
         <LoaderIcon className="h-8 w-8 animate-spin text-white" />