clean up & save onboarding process as state

src/app/auth/create/index.tsx

@@ -1,6 +1,19 @@
+import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 
+import { useOnboarding } from '@stores/onboarding';
+import { useStronghold } from '@stores/stronghold';
+
 export function AuthCreateScreen() {
+  const [step, tmpPrivkey] = useOnboarding((state) => [state.step, state.tempPrivkey]);
+  const setPrivkey = useStronghold((state) => state.setPrivkey);
+
+  useEffect(() => {
+    if (step) {
+      setPrivkey(tmpPrivkey);
+    }
+  }, [tmpPrivkey]);
+
   return (
     <div className="flex h-full w-full items-center justify-center">
       <Outlet />

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

@@ -1,7 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { BaseDirectory, writeTextFile } from '@tauri-apps/plugin-fs';
 import { generatePrivateKey, getPublicKey, nip19 } from 'nostr-tools';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { createAccount } from '@libs/storage';
@@ -17,7 +17,9 @@ export function CreateStep1Screen() {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const setPrivkey = useStronghold((state) => state.setPrivkey);
+  const setTempPrivkey = useOnboarding((state) => state.setTempPrivkey);
   const setPubkey = useOnboarding((state) => state.setPubkey);
+  const setStep = useOnboarding((state) => state.setStep);
 
   const [privkeyInput, setPrivkeyInput] = useState('password');
   const [loading, setLoading] = useState(false);
@@ -61,8 +63,9 @@ export function CreateStep1Screen() {
   const submit = () => {
     setLoading(true);
 
-    setPubkey(pubkey);
     setPrivkey(privkey);
+    setTempPrivkey(privkey); // only use if user close app and reopen it
+    setPubkey(pubkey);
 
     account.mutate({
       npub,
@@ -75,6 +78,11 @@ export function CreateStep1Screen() {
     setTimeout(() => navigate('/auth/create/step-2', { replace: true }), 1200);
   };
 
+  useEffect(() => {
+    // save current step, if user close app and reopen it
+    setStep('/auth/create/step-1');
+  }, []);
+
   return (
     <div className="mx-auto w-full max-w-md">
       <div className="mb-8 text-center">

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Resolver, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
@@ -30,13 +30,13 @@ const resolver: Resolver<FormValues> = async (values) => {
 
 export function CreateStep2Screen() {
   const navigate = useNavigate();
+  const setStep = useOnboarding((state) => state.setStep);
+  const pubkey = useOnboarding((state) => state.pubkey);
+  const privkey = useStronghold((state) => state.privkey);
 
   const [passwordInput, setPasswordInput] = useState('password');
   const [loading, setLoading] = useState(false);
 
-  const privkey = useStronghold((state) => state.privkey);
-  const pubkey = useOnboarding((state) => state.pubkey);
-
   const { save } = useSecureStorage();
 
   // toggle private key
@@ -72,6 +72,11 @@ export function CreateStep2Screen() {
     }
   };
 
+  useEffect(() => {
+    // save current step, if user close app and reopen it
+    setStep('/auth/create/step-2');
+  }, []);
+
   return (
     <div className="mx-auto w-full max-w-md">
       <div className="mb-8 text-center">

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

@@ -1,5 +1,5 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
@@ -10,19 +10,20 @@ 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';
+import { useNostr } from '@utils/hooks/useNostr';
 
 export function CreateStep3Screen() {
-  const { publish } = usePublish();
-
   const navigate = useNavigate();
+  const setStep = useOnboarding((state) => state.setStep);
   const queryClient = useQueryClient();
 
   const [loading, setLoading] = useState(false);
   const [picture, setPicture] = useState(DEFAULT_AVATAR);
   const [banner, setBanner] = useState('');
 
+  const { publish } = useNostr();
   const {
     register,
     handleSubmit,
@@ -57,6 +58,11 @@ export function CreateStep3Screen() {
     }
   };
 
+  useEffect(() => {
+    // save current step, if user close app and reopen it
+    setStep('/auth/create/step-3');
+  }, []);
+
   return (
     <div className="mx-auto w-full max-w-md">
       <div className="mb-8 text-center">

src/app/auth/import/index.tsx

@@ -1,6 +1,19 @@
+import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 
+import { useOnboarding } from '@stores/onboarding';
+import { useStronghold } from '@stores/stronghold';
+
 export function AuthImportScreen() {
+  const [step, tmpPrivkey] = useOnboarding((state) => [state.step, state.tempPrivkey]);
+  const setPrivkey = useStronghold((state) => state.setPrivkey);
+
+  useEffect(() => {
+    if (step) {
+      setPrivkey(tmpPrivkey);
+    }
+  }, [tmpPrivkey]);
+
   return (
     <div className="flex h-full w-full items-center justify-center">
       <Outlet />

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

@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { getPublicKey, nip19 } from 'nostr-tools';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Resolver, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
@@ -34,7 +34,9 @@ export function ImportStep1Screen() {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const setPrivkey = useStronghold((state) => state.setPrivkey);
+  const setTempPubkey = useOnboarding((state) => state.setTempPrivkey);
   const setPubkey = useOnboarding((state) => state.setPubkey);
+  const setStep = useOnboarding((state) => state.setStep);
 
   const [loading, setLoading] = useState(false);
 
@@ -72,10 +74,9 @@ export function ImportStep1Screen() {
         const pubkey = getPublicKey(privkey);
         const npub = nip19.npubEncode(pubkey);
 
-        // use for onboarding process only
-        setPubkey(pubkey);
-        // add stronghold state
         setPrivkey(privkey);
+        setTempPubkey(privkey); // only use if user close app and reopen it
+        setPubkey(pubkey);
 
         // add account to local database
         account.mutate({
@@ -91,11 +92,16 @@ export function ImportStep1Screen() {
     } catch (error) {
       setError('privkey', {
         type: 'custom',
-        message: 'Private Key is invalid, please check again',
+        message: 'Private key is invalid, please check again',
       });
     }
   };
 
+  useEffect(() => {
+    // save current step, if user close app and reopen it
+    setStep('/auth/import/step-1');
+  }, []);
+
   return (
     <div className="mx-auto w-full max-w-md">
       <div className="mb-8 text-center">

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Resolver, useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
@@ -30,13 +30,13 @@ const resolver: Resolver<FormValues> = async (values) => {
 
 export function ImportStep2Screen() {
   const navigate = useNavigate();
+  const setStep = useOnboarding((state) => state.setStep);
+  const pubkey = useOnboarding((state) => state.pubkey);
+  const privkey = useStronghold((state) => state.privkey);
 
   const [passwordInput, setPasswordInput] = useState('password');
   const [loading, setLoading] = useState(false);
 
-  const privkey = useStronghold((state) => state.privkey);
-  const pubkey = useOnboarding((state) => state.pubkey);
-
   const { save } = useSecureStorage();
 
   // toggle private key
@@ -72,6 +72,11 @@ export function ImportStep2Screen() {
     }
   };
 
+  useEffect(() => {
+    // save current step, if user close app and reopen it
+    setStep('/auth/import/step-2');
+  }, []);
+
   return (
     <div className="mx-auto w-full max-w-md">
       <div className="mb-8 text-center">

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

@@ -1,5 +1,5 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { User } from '@app/auth/components/user';
@@ -8,12 +8,15 @@ import { updateLastLogin } from '@libs/storage';
 
 import { ArrowRightCircleIcon, LoaderIcon } from '@shared/icons';
 
+import { useOnboarding } from '@stores/onboarding';
+
 import { useAccount } from '@utils/hooks/useAccount';
 import { useNostr } from '@utils/hooks/useNostr';
 
 export function ImportStep3Screen() {
-  const navigate = useNavigate();
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const setStep = useOnboarding((state) => state.setStep);
 
   const [loading, setLoading] = useState(false);
 
@@ -39,6 +42,11 @@ export function ImportStep3Screen() {
     }
   };
 
+  useEffect(() => {
+    // save current step, if user close app and reopen it
+    setStep('/auth/import/step-3');
+  }, []);
+
   return (
     <div className="mx-auto w-full max-w-md">
       <div className="mb-8 text-center">

src/app/auth/onboarding/index.tsx

@@ -1,6 +1,19 @@
+import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 
+import { useOnboarding } from '@stores/onboarding';
+import { useStronghold } from '@stores/stronghold';
+
 export function OnboardingScreen() {
+  const [step, tmpPrivkey] = useOnboarding((state) => [state.step, state.tempPrivkey]);
+  const setPrivkey = useStronghold((state) => state.setPrivkey);
+
+  useEffect(() => {
+    if (step) {
+      setPrivkey(tmpPrivkey);
+    }
+  }, [tmpPrivkey]);
+
   return (
     <div className="flex h-full w-full items-center justify-center">
       <Outlet />

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

@@ -1,5 +1,5 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
 import { User } from '@app/auth/components/user';
@@ -8,17 +8,18 @@ import { updateAccount } from '@libs/storage';
 
 import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
 
+import { useOnboarding } from '@stores/onboarding';
+
 import { useAccount } from '@utils/hooks/useAccount';
 import { useNostr } from '@utils/hooks/useNostr';
-import { usePublish } from '@utils/hooks/usePublish';
 import { arrayToNIP02 } from '@utils/transform';
 
 export function OnboardStep1Screen() {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
+  const setStep = useOnboarding((state) => state.setStep);
 
-  const { publish } = usePublish();
-  const { fetchNotes } = useNostr();
+  const { publish, fetchNotes } = useNostr();
   const { account } = useAccount();
   const { status, data } = useQuery(['trending-profiles'], async () => {
     const res = await fetch('https://api.nostr.band/v0/trending/profiles');
@@ -62,6 +63,11 @@ export function OnboardStep1Screen() {
     }
   };
 
+  useEffect(() => {
+    // save current step, if user close app and reopen it
+    setStep('/auth/onboarding');
+  }, []);
+
   return (
     <div className="mx-auto w-full max-w-md">
       <div className="mb-8 text-center">

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
 import { createBlock } from '@libs/storage';
@@ -6,6 +6,7 @@ import { createBlock } from '@libs/storage';
 import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
 
 import { BLOCK_KINDS } from '@stores/constants';
+import { useOnboarding } from '@stores/onboarding';
 
 const data = [
   { hashtag: '#bitcoin' },
@@ -27,6 +28,7 @@ const data = [
 
 export function OnboardStep2Screen() {
   const navigate = useNavigate();
+  const setStep = useOnboarding((state) => state.setStep);
 
   const [loading, setLoading] = useState(false);
   const [tags, setTags] = useState(new Set<string>());
@@ -57,6 +59,11 @@ export function OnboardStep2Screen() {
     }
   };
 
+  useEffect(() => {
+    // save current step, if user close app and reopen it
+    setStep('/auth/onboarding/step-2');
+  }, []);
+
   return (
     <div className="mx-auto w-full max-w-md">
       <div className="mb-8 text-center">

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

@@ -10,17 +10,19 @@ import { createRelay } from '@libs/storage';
 import { ArrowRightCircleIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';
 
 import { FULL_RELAYS } from '@stores/constants';
+import { useOnboarding } from '@stores/onboarding';
 
 import { useAccount } from '@utils/hooks/useAccount';
-import { usePublish } from '@utils/hooks/usePublish';
+import { useNostr } from '@utils/hooks/useNostr';
 
 export function OnboardStep3Screen() {
   const navigate = useNavigate();
 
+  const [setStep, clearStep] = useOnboarding((state) => [state.setStep, state.clearStep]);
   const [loading, setLoading] = useState(false);
   const [relays, setRelays] = useState(new Set<string>());
 
-  const { publish } = usePublish();
+  const { publish } = useNostr();
   const { account } = useAccount();
   const { fetcher, relayUrls } = useNDK();
   const { status, data } = useQuery(
@@ -48,6 +50,9 @@ export function OnboardStep3Screen() {
     }
   );
 
+  // save current step, if user close app and reopen it
+  setStep('/auth/onboarding/step-3');
+
   const toggleRelay = (relay: string) => {
     if (relays.has(relay)) {
       setRelays((prev) => {
@@ -76,6 +81,7 @@ export function OnboardStep3Screen() {
       }
 
       setTimeout(() => {
+        clearStep();
         navigate('/', { replace: true });
       }, 1000);
     } catch (e) {

src/app/auth/welcome.tsx

@@ -9,7 +9,9 @@ export function WelcomeScreen() {
     async function setWindow() {
       await appWindow.setSize(new LogicalSize(400, 500));
       await appWindow.setResizable(false);
+      await appWindow.center();
     }
+
     setWindow();
 
     return () => {