address pr comments

packages/core-mobile/app/new/contexts/SignupProvider.tsx

@@ -20,13 +20,9 @@ import { OidcAuth } from 'new/types'
 
 export interface SignupContextState {
   handleAccountVerified: () => Promise<void>
-  handleBack: () => void
   handleCopyCode: () => void
   onVerifyCode: (code: string) => Promise<Result<undefined, TotpErrors>>
   onVerifySuccess: () => void
-  goToEnterCodeManually: () => void
-  goToScanQrCode: () => void
-  goToVerifyCode: () => void
   totpKey?: string
   totpChallenge?: TotpChallenge
   setTotpChallenge: Dispatch<SetStateAction<TotpChallenge | undefined>>
@@ -60,22 +56,6 @@ export const SignupProvider = ({
     totpKey && copyToClipboard(totpKey, 'Code copied')
   }, [totpKey])
 
-  const handleBack = useCallback((): void => {
-    router.canGoBack() && router.back()
-  }, [router])
-
-  const goToEnterCodeManually = (): void => {
-    router.navigate('./copyCode')
-  }
-
-  const goToScanQrCode = (): void => {
-    router.navigate('./scanQrCode')
-  }
-
-  const goToVerifyCode = (): void => {
-    router.push('./verifyCode')
-  }
-
   const onVerifyCode = useCallback(
     async (code: string): Promise<Result<undefined, TotpErrors>> => {
       await totpChallenge?.answer(code)
@@ -116,13 +96,9 @@ export const SignupProvider = ({
 
   const state: SignupContextState = {
     handleAccountVerified,
-    handleBack,
     handleCopyCode,
     onVerifyCode,
     onVerifySuccess,
-    goToEnterCodeManually,
-    goToScanQrCode,
-    goToVerifyCode,
     totpKey,
     totpChallenge,
     setTotpChallenge,

packages/core-mobile/app/new/routes/(totp)/_layout.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Stack } from 'new/components/navigation/Stack'
+
+export default function TotpLayout(): JSX.Element {
+  return (
+    <Stack>
+      <Stack.Screen name="authenticatorSetup" />
+      <Stack.Screen name="scanQrCode" />
+      <Stack.Screen name="copyCode" />
+      <Stack.Screen name="verifyCode" />
+    </Stack>
+  )
+}

packages/core-mobile/app/new/routes/(authenticator)/totp/authenticatorSetup.tsx → packages/core-mobile/app/new/routes/(totp)/authenticatorSetup.tsx

@@ -3,21 +3,24 @@ import { useSignupContext } from 'new/contexts/SignupProvider'
 import useSeedlessManageMFA from 'new/hooks/useSeedlessManageMFA'
 import AnalyticsService from 'services/analytics/AnalyticsService'
 import Logger from 'utils/Logger'
-import { AuthenticatorSetup as AuthenticatorSetupComponent } from '../components/AuthenticatorSetup'
-import { Loader } from '../components/Loader'
+import { useRouter } from 'expo-router'
+import { AuthenticatorSetup as AuthenticatorSetupComponent } from '../../components/totp/AuthenticatorSetup'
+import { Loader } from '../../components/totp/Loader'
 
 export default function AuthenticatorSetup(): JSX.Element {
-  const {
-    totpKey,
-    goToScanQrCode,
-    handleCopyCode,
-    goToVerifyCode,
-    totpChallenge,
-    setTotpChallenge
-  } = useSignupContext()
-
+  const { totpKey, handleCopyCode, totpChallenge, setTotpChallenge } =
+    useSignupContext()
+  const router = useRouter()
   const { totpResetInit } = useSeedlessManageMFA()
 
+  const goToVerifyCode = (): void => {
+    router.push('./verifyCode')
+  }
+
+  const goToScanQrCode = (): void => {
+    router.navigate('./scanQrCode')
+  }
+
   useEffect(() => {
     const initChallenge = async (): Promise<void> => {
       try {

packages/core-mobile/app/new/routes/(totp)/copyCode.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { useSignupContext } from 'new/contexts/SignupProvider'
+import { useRouter } from 'expo-router'
+import { CopyCode as CopyCodeComponent } from '../../components/totp/CopyCode'
+import { Loader } from '../../components/totp/Loader'
+
+export default function CopyCode(): JSX.Element {
+  const { handleCopyCode, totpKey } = useSignupContext()
+  const router = useRouter()
+
+  const handleBack = (): void => {
+    router.canGoBack() && router.back()
+  }
+
+  if (totpKey === undefined) {
+    return <Loader />
+  }
+
+  return (
+    <CopyCodeComponent
+      totpKey={totpKey}
+      onCopyCode={handleCopyCode}
+      onBack={handleBack}
+    />
+  )
+}

packages/core-mobile/app/new/routes/(totp)/scanQrCode.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { useSignupContext } from 'new/contexts/SignupProvider'
+import { useRouter } from 'expo-router'
+import { ScanQrCode as ScanQrCodeComponent } from '../../components/totp/ScanQrCode'
+
+export default function ScanQrCode(): JSX.Element {
+  const { totpChallenge } = useSignupContext()
+  const router = useRouter()
+
+  const goToVerifyCode = (): void => {
+    router.push('./verifyCode')
+  }
+
+  const goToEnterCodeManually = (): void => {
+    router.navigate('./copyCode')
+  }
+
+  return (
+    <ScanQrCodeComponent
+      totpChallenge={totpChallenge}
+      onEnterCodeManually={goToEnterCodeManually}
+      onVerifyCode={goToVerifyCode}
+    />
+  )
+}

packages/core-mobile/app/new/routes/(authenticator)/totp/verifyCode.tsx → packages/core-mobile/app/new/routes/(totp)/verifyCode.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useSignupContext } from 'new/contexts/SignupProvider'
-import { VerifyCode as VerifyCodeComponent } from '../components/VerifyCode'
+import { VerifyCode as VerifyCodeComponent } from '../../components/totp/VerifyCode'
 
 export default function VerifyCode(): JSX.Element {
   const { onVerifyCode, onVerifySuccess } = useSignupContext()

packages/core-mobile/app/new/routes/_layout.tsx

@@ -112,6 +112,7 @@ export default function RootLayout(): JSX.Element | null {
               />
               <Stack.Screen name="forgotPin" />
               <Stack.Screen name="+not-found" />
+              <Stack.Screen name="(totp)" />
             </Stack>
             {enabledPrivacyScreen && <LogoModal />}
           </SignupProvider>

packages/core-mobile/app/new/routes/addRecoveryMethods.tsx

@@ -48,7 +48,7 @@ const AddRecoveryMethods = (): JSX.Element => {
       return
     }
     if (selectedMethod === RecoveryMethods.Authenticator) {
-      navigate('./totp/authenticatorSetup')
+      navigate('./authenticatorSetup')
       AnalyticsService.capture('SeedlessAddMfa', { type: 'Authenticator' })
     }
   }