feature(wallet-setup): hide mnemonic button until phrase is valid (#3204

)
Emurgo · Apr 17, 2024 · da085f5 · da085f5
1 parent 1cf1be7
commit da085f5
Show file tree

Hide file tree

Showing 5 changed files with 342 additions and 333 deletions.
diff --git a/apps/wallet-mobile/src/features/SetupWallet/common/MnemonicInput/MnemonicInput.tsx b/apps/wallet-mobile/src/features/SetupWallet/common/MnemonicInput/MnemonicInput.tsx
@@ -34,6 +34,7 @@ export const MnemonicInput = ({
   const {styles} = useStyles()
   const [mnemonicWords, setMnemonicWords] = React.useState<Array<string>>(Array.from({length}).map(() => ''))
   const {track} = useMetrics()
+  const refs = React.useRef(mnemonicWords.map(() => React.createRef<RNTextInput>())).current
 
   const mnemonicWordsComplete = mnemonicWords.every(Boolean)
   const isValid: boolean = mnemonicWordsComplete ? validate(mnemonicWords.join(' ')) : false
@@ -61,7 +62,12 @@ export const MnemonicInput = ({
 
   return (
     <View>
-      <MnemonicWordsInput onSelect={onSelect} words={mnemonicWords} isPhraseValid={isValid && mnemonicWordsComplete} />
+      <MnemonicWordsInput
+        refs={refs}
+        onSelect={onSelect}
+        words={mnemonicWords}
+        isPhraseValid={isValid && mnemonicWordsComplete}
+      />
 
       <Space height="l" />
 
@@ -85,7 +91,10 @@ export const MnemonicInput = ({
         <TouchableOpacity
           activeOpacity={0.5}
           style={[styles.textView]}
-          onPress={() => setMnemonicWords(Array.from({length}).map(() => ''))}
+          onPress={() => {
+            setMnemonicWords(Array.from({length}).map(() => ''))
+            refs[0].current?.focus()
+          }}
         >
           <Text style={styles.clearAll}>{strings.clearAll}</Text>
         </TouchableOpacity>
@@ -97,13 +106,13 @@ export const MnemonicInput = ({
 }
 
 type MnemonicWordsInputProps = {
+  refs: React.RefObject<RNTextInput>[]
   words: Array<string>
   onSelect: (index: number, word: string) => void
   isPhraseValid: boolean
 }
-const MnemonicWordsInput = ({onSelect, words, isPhraseValid = false}: MnemonicWordsInputProps) => {
+const MnemonicWordsInput = ({onSelect, words, refs, isPhraseValid = false}: MnemonicWordsInputProps) => {
   const {styles} = useStyles()
-  const refs = React.useRef(words.map(() => React.createRef<RNTextInput>())).current
   const scrollView = useScrollView()
   const rowHeightRef = React.useRef<number | void>()
 

diff --git a/apps/wallet-mobile/src/features/SetupWallet/common/TextInput/TextInput.tsx b/apps/wallet-mobile/src/features/SetupWallet/common/TextInput/TextInput.tsx
@@ -88,6 +88,10 @@ export const TextInput = React.forwardRef((props: TextInputProps, ref: React.For
     </HelperText>
   )
 
+  React.useEffect(() => {
+    if (value === '') setIsWordValid(false)
+  }, [value])
+
   return (
     <View style={containerStyle}>
       {isWordValid && isEmptyString(errorText) && (

diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletScreen.tsx
@@ -15,7 +15,6 @@ import {showErrorDialog} from '../../../../dialogs'
 import {errorMessages} from '../../../../i18n/global-messages'
 import {useMetrics} from '../../../../metrics/metricsManager'
 import {useWalletNavigation, WalletInitRouteNavigation} from '../../../../navigation'
-import {isEmptyString} from '../../../../utils'
 import {useWalletManager} from '../../../../wallet-manager/WalletManagerContext'
 import {InvalidState} from '../../../../yoroi-wallets/cardano/errors'
 import {makeKeys} from '../../../../yoroi-wallets/cardano/shelley/makeKeys'
@@ -120,14 +119,11 @@ export const RestoreWalletScreen = () => {
           <MnemonicInput length={mnemonicType} onDone={setMnemonic} />
         </ScrollView>
 
-        <View style={styles.padding}>
-          <Button
-            title={strings.next}
-            style={styles.button}
-            disabled={isEmptyString(mnemonic)}
-            onPress={handleOnNext}
-          />
-        </View>
+        {mnemonic !== '' && (
+          <View style={styles.padding}>
+            <Button title={strings.next} style={styles.button} onPress={handleOnNext} />
+          </View>
+        )}
       </KeyboardAvoidingView>
     </SafeAreaView>
   )

diff --git a/apps/wallet-mobile/translations/messages/src/WalletNavigator.json b/apps/wallet-mobile/translations/messages/src/WalletNavigator.json
@@ -6,12 +6,12 @@
     "start": {
       "line": 230,
       "column": 22,
-      "index": 8180
+      "index": 8222
     },
     "end": {
       "line": 233,
       "column": 3,
-      "index": 8283
+      "index": 8325
     }
   },
   {
@@ -21,12 +21,12 @@
     "start": {
       "line": 234,
       "column": 14,
-      "index": 8299
+      "index": 8341
     },
     "end": {
       "line": 237,
       "column": 3,
-      "index": 8398
+      "index": 8440
     }
   },
   {
@@ -36,12 +36,12 @@
     "start": {
       "line": 238,
       "column": 17,
-      "index": 8417
+      "index": 8459
     },
     "end": {
       "line": 241,
       "column": 3,
-      "index": 8522
+      "index": 8564
     }
   },
   {
@@ -51,12 +51,12 @@
     "start": {
       "line": 242,
       "column": 19,
-      "index": 8543
+      "index": 8585
     },
     "end": {
       "line": 245,
       "column": 3,
-      "index": 8640
+      "index": 8682
     }
   },
   {
@@ -66,12 +66,12 @@
     "start": {
       "line": 246,
       "column": 18,
-      "index": 8660
+      "index": 8702
     },
     "end": {
       "line": 249,
       "column": 3,
-      "index": 8755
+      "index": 8797
     }
   },
   {
@@ -81,12 +81,12 @@
     "start": {
       "line": 250,
       "column": 16,
-      "index": 8773
+      "index": 8815
     },
     "end": {
       "line": 253,
       "column": 3,
-      "index": 8871
+      "index": 8913
     }
   },
   {
@@ -96,12 +96,12 @@
     "start": {
       "line": 254,
       "column": 17,
-      "index": 8890
+      "index": 8932
     },
     "end": {
       "line": 257,
       "column": 3,
-      "index": 8955
+      "index": 8997
     }
   },
   {
@@ -111,12 +111,12 @@
     "start": {
       "line": 258,
       "column": 14,
-      "index": 8971
+      "index": 9013
     },
     "end": {
       "line": 261,
       "column": 3,
-      "index": 9065
+      "index": 9107
     }
   },
   {
@@ -126,12 +126,12 @@
     "start": {
       "line": 262,
       "column": 14,
-      "index": 9081
+      "index": 9123
     },
     "end": {
       "line": 265,
       "column": 3,
-      "index": 9133
+      "index": 9175
     }
   },
   {
@@ -141,12 +141,12 @@
     "start": {
       "line": 266,
       "column": 31,
-      "index": 9166
+      "index": 9208
     },
     "end": {
       "line": 269,
       "column": 3,
-      "index": 9275
+      "index": 9317
     }
   }
 ]