chore: fix navigation bugs

Author: Juligs

apps/wallet/src/ui/app/components/NavigationStackProvider.tsx

@@ -20,26 +20,34 @@ function getRootDepth({ pathname, search }: { pathname: string; search: string }
     return null;
 }
 
+function getHistoryIndex(): number {
+    return window.history.state?.idx ?? 0;
+}
+
 export function NavigationStackProvider({ children }: { children: ReactNode }) {
     const location = useLocation();
     const navigationType = useNavigationType();
-    const [depth, setDepth] = useState(() => getRootDepth(location) ?? 2);
+    const initialRootDepth = getRootDepth(location);
+    const [depth, setDepth] = useState(() => initialRootDepth ?? Math.min(2, getHistoryIndex()));
     const lastLocationKey = useRef(location.key);
-    const isDepthUnknown = useRef(getRootDepth(location) === null);
+    const minPopDepth = useRef(initialRootDepth === null ? 2 : 1);
 
     useEffect(() => {
         if (lastLocationKey.current === location.key) return;
         lastLocationKey.current = location.key;
 
         const rootDepth = getRootDepth(location);
         if (rootDepth !== null) {
-            isDepthUnknown.current = false;
+            minPopDepth.current = 1;
             setDepth(rootDepth);
-        } else if (navigationType === 'PUSH') {
-            setDepth((prev) => prev + 1);
+            return;
+        }
+
+        const maxDepth = getHistoryIndex();
+        if (navigationType === 'PUSH') {
+            setDepth((prev) => Math.min(maxDepth, prev + 1));
         } else if (navigationType === 'POP') {
-            const minDepth = isDepthUnknown.current ? 2 : 1;
-            setDepth((prev) => Math.max(minDepth, prev - 1));
+            setDepth((prev) => Math.min(maxDepth, Math.max(minPopDepth.current, prev - 1)));
         }
         // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, [location.key, navigationType]);

apps/wallet/src/ui/app/pages/accounts/CreateNewPasskey.tsx

@@ -80,11 +80,7 @@ export function CreateNewPasskey() {
     ];
 
     return (
-        <PageTemplate
-            title="Create Passkey Account"
-            isTitleCentered
-            onBack={() => navigate('/accounts/import-existing', { replace: true })}
-        >
+        <PageTemplate title="Create Passkey Account" isTitleCentered>
             <Form
                 className="flex h-full flex-col justify-between"
                 form={form}

apps/wallet/src/ui/app/pages/accounts/ImportPasskeyPage.tsx

@@ -18,17 +18,12 @@ import { z } from 'zod';
 import { useBackgroundClient } from '../../hooks';
 
 export function ImportPasskeyPage() {
-    const navigate = useNavigate();
     const [searchParams] = useSearchParams();
     const accountID = searchParams.get('accountID') || '';
     useBootstrapSourceFlow();
 
     return (
-        <PageTemplate
-            title="Import Passkey Account"
-            isTitleCentered
-            onBack={() => navigate('/accounts/import-existing', { replace: true })}
-        >
+        <PageTemplate title="Import Passkey Account" isTitleCentered>
             {accountID ? (
                 <NicknameSetContent accountID={accountID} />
             ) : (