feat: extra test txn step during signup to validate passkey and account setup

src/app/(mobile-ui)/home/page.tsx

@@ -20,7 +20,6 @@ import { twMerge } from 'tailwind-merge'
 import { useAccount } from 'wagmi'
 // import ReferralCampaignModal from '@/components/Home/ReferralCampaignModal'
 // import FloatingReferralButton from '@/components/Home/FloatingReferralButton'
-import { AccountType } from '@/interfaces'
 import { formatUnits } from 'viem'
 import { PEANUT_WALLET_TOKEN_DECIMALS } from '@/constants'
 import { PostSignupActionManager } from '@/components/Global/PostSignupActionManager'
@@ -51,7 +50,7 @@ const BALANCE_WARNING_EXPIRY = parseInt(process.env.NEXT_PUBLIC_BALANCE_WARNING_
 
 export default function Home() {
     const { showPermissionModal } = useNotifications()
-    const { balance, address, isFetchingBalance } = useWallet()
+    const { balance, isFetchingBalance } = useWallet()
     const { resetFlow: resetClaimBankFlow } = useClaimBankFlow()
     const { resetWithdrawFlow } = useWithdrawFlow()
     const { deviceType } = useDeviceType()
@@ -64,7 +63,7 @@ export default function Home() {
     const { disconnect: disconnectWagmi } = useDisconnect()
     const { triggerHaptic } = useHaptic()
 
-    const { isFetchingUser, addAccount, fetchUser } = useAuth()
+    const { isFetchingUser, fetchUser } = useAuth()
     const { isUserKycApproved } = useKycStatus()
     const username = user?.user.username
 
@@ -107,19 +106,6 @@ export default function Home() {
         resetWithdrawFlow()
     }, [resetClaimBankFlow, resetWithdrawFlow])
 
-    useEffect(() => {
-        if (isFetchingUser) return
-        // We have some users that didn't have the peanut wallet created
-        // correctly, so we need to create it
-        if (address && user && !user.accounts.some((a) => a.type === AccountType.PEANUT_WALLET)) {
-            addAccount({
-                accountIdentifier: address,
-                accountType: 'peanut-wallet',
-                userId: user.user.userId,
-            })
-        }
-    }, [user, address, isFetchingUser])
-
     // always reset external wallet connection on home page
     useEffect(() => {
         if (isWagmiConnected) {

src/app/(mobile-ui)/layout.tsx

@@ -22,6 +22,7 @@ import ForceIOSPWAInstall from '@/components/ForceIOSPWAInstall'
 import { PUBLIC_ROUTES_REGEX } from '@/constants/routes'
 import { usePullToRefresh } from '@/hooks/usePullToRefresh'
 import { useNetworkStatus } from '@/hooks/useNetworkStatus'
+import { useAccountSetupRedirect } from '@/hooks/useAccountSetupRedirect'
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
     const pathName = usePathname()
@@ -80,6 +81,9 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         }
     }, [user, isFetchingUser, isReady, isPublicPath, router])
 
+    // redirect logged-in users without peanut wallet account to complete setup
+    const { needsRedirect, isCheckingAccount } = useAccountSetupRedirect()
+
     // show full-page offline screen when user is offline
     // only show after initialization to prevent flash on initial load
     // when connection is restored, page auto-reloads (no "back online" screen)
@@ -97,8 +101,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             )
         }
     } else {
-        // For protected paths, wait for user auth
-        if (!isReady || isFetchingUser || !hasToken || !user) {
+        // for protected paths, wait for user auth and account setup check
+        if (!isReady || isFetchingUser || !hasToken || !user || needsRedirect || isCheckingAccount) {
             return (
                 <div className="flex h-[100dvh] w-full flex-col items-center justify-center">
                     <PeanutLoading />

src/app/(setup)/setup/finish/page.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { Suspense } from 'react'
+import PeanutLoading from '@/components/Global/PeanutLoading'
+import { SetupWrapper } from '@/components/Setup/components/SetupWrapper'
+import SignTestTransaction from '@/components/Setup/Views/SignTestTransaction'
+import chillPeanutAnim from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif'
+
+/**
+ * finish setup page for users who logged in but haven't completed account setup
+ * shows test transaction step to verify passkey works before finalizing
+ */
+function FinishSetupPageContent() {
+    return (
+        <SetupWrapper
+            layoutType="signup"
+            screenId="sign-test-transaction"
+            image={chillPeanutAnim.src}
+            title="Sign a test transaction"
+            description="Let's make sure your passkey is working and you have everything set up correctly."
+            showBackButton={false}
+            showSkipButton={false}
+            contentClassName="flex flex-col items-center justify-center gap-5"
+        >
+            <SignTestTransaction />
+        </SetupWrapper>
+    )
+}
+
+export default function FinishSetupPage() {
+    return (
+        <Suspense fallback={<PeanutLoading coverFullScreen />}>
+            <FinishSetupPageContent />
+        </Suspense>
+    )
+}

src/components/Setup/Setup.consts.tsx

@@ -1,11 +1,9 @@
 import chillPeanutAnim from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif'
-import peanutWithGlassesAnim from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_06.gif'
 import happyPeanutAnim from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_03.gif'
 import { PEANUTMAN_MOBILE, ThinkingPeanut } from '@/assets'
 import type { ISetupStep } from '@/components/Setup/Setup.types'
-import { InstallPWA, SetupPasskey, SignupStep, JoinBetaStep, CollectEmail, LandingStep } from '@/components/Setup/Views'
+import { InstallPWA, SetupPasskey, SignupStep, LandingStep, SignTestTransaction } from '@/components/Setup/Views'
 import JoinWaitlist from './Views/JoinWaitlist'
-import ForceIOSPWAInstall from '../ForceIOSPWAInstall'
 
 export const setupSteps: ISetupStep[] = [
     {
@@ -89,12 +87,12 @@ export const setupSteps: ISetupStep[] = [
         contentClassName: 'flex flex-col items-end pt-8 justify-center gap-5',
     },
     {
-        screenId: 'collect-email',
+        screenId: 'sign-test-transaction',
         layoutType: 'signup',
-        title: 'Stay in the loop',
-        description: 'Enter your email to finish setup. We’ll send you an update as soon as you get access.',
+        title: 'Sign a test transaction',
+        description: "Let's make sure your passkey is working and you have everything set up correctly.",
         image: chillPeanutAnim.src,
-        component: CollectEmail,
+        component: SignTestTransaction,
         showBackButton: false,
         showSkipButton: false,
         contentClassName: 'flex flex-col items-center justify-center gap-5',

src/components/Setup/Setup.types.ts

@@ -11,7 +11,7 @@ export type ScreenId =
     | 'success'
     | 'unsupported-browser'
     | 'join-beta'
-    | 'collect-email'
+    | 'sign-test-transaction'
 
 export type LayoutType = 'signup' | 'standard' | 'android-initial-pwa-install'
 
@@ -31,7 +31,7 @@ export type ScreenProps = {
     'android-initial-pwa-install': undefined
     'unsupported-browser': undefined
     'join-beta': undefined
-    'collect-email': undefined
+    'sign-test-transaction': undefined
 }
 
 export interface StepComponentProps {