feat(onboarding): finishing word recovery passphrase screen [PERA-3266]

apps/mobile/ios/Podfile.lock

@@ -2933,6 +2933,34 @@ PODS:
     - React-perflogger (= 0.83.0)
     - React-utils (= 0.83.0)
     - SocketRocket
+  - ReactNativeBiometrics (0.11.0):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - SocketRocket
+    - Yoga
   - RNBootSplash (6.3.11):
     - boost
     - DoubleConversion
@@ -3538,6 +3566,7 @@ DEPENDENCIES:
   - ReactAppDependencyProvider (from `build/generated/ios/ReactAppDependencyProvider`)
   - ReactCodegen (from `build/generated/ios/ReactCodegen`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "ReactNativeBiometrics (from `../node_modules/@sbaiahmed1/react-native-biometrics`)"
   - RNBootSplash (from `../node_modules/react-native-bootsplash`)
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
@@ -3766,6 +3795,8 @@ EXTERNAL SOURCES:
     :path: build/generated/ios/ReactCodegen
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  ReactNativeBiometrics:
+    :path: "../node_modules/@sbaiahmed1/react-native-biometrics"
   RNBootSplash:
     :path: "../node_modules/react-native-bootsplash"
   RNCClipboard:
@@ -3831,7 +3862,7 @@ SPEC CHECKSUMS:
   GoogleAppMeasurement: 3bf40aff49a601af5da1c3345702fcb4991d35ee
   GoogleDataTransport: aae35b7ea0c09004c3797d53c8c41f66f219d6a7
   GoogleUtilities: 00c88b9a86066ef77f0da2fab05f65d7768ed8e1
-  hermes-engine: 617e25b15d2a434c37e627dfb6dff32a86fea6c2
+  hermes-engine: c3de7a5fb8b174d0371f1dd0bb649d3ac1a4df4e
   lottie-ios: a881093fab623c467d3bce374367755c272bdd59
   lottie-react-native: 86fa7488b1476563f41071244aa73d5b738faf19
   nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
@@ -3918,6 +3949,7 @@ SPEC CHECKSUMS:
   ReactAppDependencyProvider: ebcf3a78dc1bcdf054c9e8d309244bade6b31568
   ReactCodegen: 37f746e57fa4a5109edd15a2336009ad72e80f8c
   ReactCommon: 424cc34cf5055d69a3dcf02f3436481afb8b0f6f
+  ReactNativeBiometrics: 70a5300cf5272c127e700417e3cd4cba4bf05cac
   RNBootSplash: 98a34471966945e8dacd1da8f0c2f87cbc2e2df7
   RNCClipboard: 4b58c780f63676367640f23c8e114e9bd0cf86ac
   RNDeviceInfo: bcce8752b5043a623fe3c26789679b473f705d3c
@@ -3942,4 +3974,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: f8175fd2f0a1ebad4218ad393842b4d06245a8e2
 
-COCOAPODS: 1.16.2
+COCOAPODS: 1.15.2

apps/mobile/src/i18n/locales/en.json

@@ -276,7 +276,7 @@
     "onboarding": {
         "import_options": {
             "title": "Select your Mnemonic type",
-            "universal_wallet": {
+            "hd_wallet": {
                 "title": "Universal Wallet",
                 "description": "Wallet that lets you derive new accounts, all using the same mnemonic",
                 "chip": "new"
@@ -294,6 +294,7 @@
             "button": "Recover an Algorand Wallet"
         },
         "import_account": {
+            "title": "Enter your Recovery Passphrase",
             "importing": "Importing wallet...",
             "button": "Import Wallet",
             "failed_title": "Import failed",

apps/mobile/src/modules/onboarding/routes/index.tsx

@@ -76,24 +76,23 @@ export const OnboardingStackNavigator = () => {
                 name='ImportInfo'
                 options={{
                     headerShown: false,
+                    title: '',
                 }}
                 layout={safeAreaLayout}
                 component={ImportInfoScreenWithErrorBoundary}
             />
             <OnboardingStack.Screen
                 name='NameAccount'
                 options={{
-                    headerShown: true,
-                    headerTitle: '',
+                    headerShown: false,
                 }}
                 layout={safeAreaLayout}
                 component={NameAccountScreenWithErrorBoundary}
             />
             <OnboardingStack.Screen
                 name='ImportAccount'
                 options={{
-                    headerShown: true,
-                    headerTitle: 'Enter your Recovery Passphrase',
+                    headerShown: false,
                 }}
                 layout={safeAreaLayout}
                 component={ImportAccountScreenWithErrorBoundary}

apps/mobile/src/modules/onboarding/routes/types.ts

@@ -10,7 +10,10 @@
  limitations under the License
  */
 
-import { WalletAccount } from '@perawallet/wallet-core-accounts'
+import {
+    WalletAccount,
+    ImportAccountType,
+} from '@perawallet/wallet-core-accounts'
 
 export type OnboardingStackParamList = {
     OnboardingHome: undefined
@@ -19,6 +22,10 @@ export type OnboardingStackParamList = {
               account?: WalletAccount
           }
         | undefined
-    ImportInfo: undefined
-    ImportAccount: undefined
+    ImportInfo: {
+        accountType: ImportAccountType
+    }
+    ImportAccount: {
+        accountType: ImportAccountType
+    }
 }

apps/mobile/src/modules/onboarding/screens/ImportAccountScreen/ImportAccountScreen.tsx

@@ -10,96 +10,80 @@
  limitations under the License
  */
 
-import { ParamListBase, useNavigation } from '@react-navigation/native'
-import { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import { useStyles } from './styles'
 import { useTheme } from '@rneui/themed'
-import { PWButton, PWInput, PWOverlay, PWText, PWView } from '@components/core'
+import {
+    PWButton,
+    PWIcon,
+    PWInput,
+    PWOverlay,
+    PWText,
+    PWToolbar,
+    PWView,
+} from '@components/core'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
-import { useImportAccount } from '@perawallet/wallet-core-accounts'
-import { useState } from 'react'
 import {
     ActivityIndicator,
     KeyboardAvoidingView,
-    Platform,
     ScrollView,
 } from 'react-native'
-import { useToast } from '@hooks/useToast'
-import { useLanguage } from '@hooks/useLanguage'
-
-const NUM_WORDS = 24 //TODO: we'll add legacy 25 word accounts later
+import { useImportAccountScreen } from './useImportAccountScreen'
+import { useAppNavigation } from '@hooks/useAppNavigation'
 
 export const ImportAccountScreen = () => {
     const { theme } = useTheme()
-    const navigation = useNavigation<NativeStackNavigationProp<ParamListBase>>()
-    const styles = useStyles()
-    const importAccount = useImportAccount()
-    const { showToast } = useToast()
-
-    const [words, setWords] = useState<string[]>(new Array(NUM_WORDS).fill(''))
-    const [focused, setFocused] = useState(0)
-    const [canImport, setCanImport] = useState(false)
-    const [processing, setProcessing] = useState(false)
-    const { t } = useLanguage()
-
-    const updateWord = (word: string, index: number) => {
-        const splitWords = word.split('\n')
-
-        if (splitWords.length === NUM_WORDS) {
-            setWords(splitWords)
-        } else {
-            setWords(prev => {
-                prev[index] = word.trim()
-                return [...prev]
-            })
-        }
-
-        if (words.every(w => w.length)) {
-            setCanImport(true)
-        }
-    }
-
-    const handleImportAccount = () => {
-        setProcessing(true)
-        setTimeout(async () => {
-            try {
-                await importAccount({ mnemonic: words.join(' ') })
-                goToHome()
-            } catch {
-                showToast({
-                    title: t('onboarding.import_account.failed_title'),
-                    body: t('onboarding.import_account.failed_body'),
-                    type: 'error',
-                })
-            } finally {
-                setProcessing(false)
-            }
-        }, 0)
-    }
+    const insets = useSafeAreaInsets()
+    const navigation = useAppNavigation()
+    const {
+        words,
+        focused,
+        setFocused,
+        canImport,
+        processing,
+        updateWord,
+        handleImportAccount,
+        mnemonicLength,
+        t,
+        isKeyboardVisible,
+        keyboardHeight,
+    } = useImportAccountScreen()
+    const styles = useStyles({ insets, isKeyboardVisible, keyboardHeight })
 
-    const goToHome = () => {
-        navigation.replace('TabBar', {
-            screen: 'Home',
-        })
-    }
+    const wordsPerColumn = Math.ceil(mnemonicLength / 2)
 
     return (
-        <>
-            <KeyboardAvoidingView
-                style={styles.mainContainer}
-                behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-            >
-                <ScrollView contentContainerStyle={styles.scrollView}>
+        <PWView style={styles.mainContainer}>
+            <KeyboardAvoidingView style={styles.mainContainer}>
+                <PWToolbar
+                    left={
+                        <PWIcon
+                            name='chevron-left'
+                            onPress={navigation.goBack}
+                        />
+                    }
+                />
+
+                <ScrollView
+                    style={styles.scrollContainer}
+                    contentContainerStyle={styles.scrollView}
+                >
+                    <PWText variant='h1'>
+                        {t('onboarding.import_account.title')}
+                    </PWText>
                     <PWView style={styles.wordContainer}>
                         {[0, 1].map(column => {
-                            const columnOffset = 12 * column
+                            const columnOffset = wordsPerColumn * column
                             return (
                                 <PWView
                                     style={styles.column}
                                     key={`column-${columnOffset}`}
                                 >
                                     {words
-                                        .slice(columnOffset, columnOffset + 12)
+                                        .slice(
+                                            columnOffset,
+                                            columnOffset + wordsPerColumn,
+                                        )
                                         .map((word, index) => {
                                             const offsetIndex =
                                                 index + columnOffset
@@ -168,15 +152,18 @@ export const ImportAccountScreen = () => {
                             )
                         })}
                     </PWView>
+                </ScrollView>
+
+                <PWView style={styles.footer}>
                     <PWButton
-                        style={styles.finishButton}
                         variant='primary'
                         title={t('onboarding.import_account.button')}
                         onPress={handleImportAccount}
                         isDisabled={!canImport}
                     />
-                </ScrollView>
+                </PWView>
             </KeyboardAvoidingView>
+
             <PWOverlay
                 isVisible={processing}
                 overlayStyle={styles.overlay}
@@ -188,6 +175,6 @@ export const ImportAccountScreen = () => {
                     color={theme.colors.linkPrimary}
                 />
             </PWOverlay>
-        </>
+        </PWView>
     )
 }