refactor(setup-wallet): mnemonic input (#3237)

Emurgo · May 3, 2024 · 9f7e75c · 9f7e75c
1 parent bb8f58c
commit 9f7e75c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 19 deletions.
diff --git a/apps/wallet-mobile/src/features/SetupWallet/common/MnemonicInput/MnemonicInput.stories.tsx b/apps/wallet-mobile/src/features/SetupWallet/common/MnemonicInput/MnemonicInput.stories.tsx
@@ -2,7 +2,6 @@ import {storiesOf} from '@storybook/react-native'
 import React from 'react'
 import {View} from 'react-native'
 
-import {isEmptyString} from '../../../../utils'
 import {MnemonicWordInputRef} from '../../useCases/RestoreWallet/RestoreWalletScreen'
 import {MnemonicInput} from './MnemonicInput'
 
@@ -43,9 +42,12 @@ storiesOf('MnemonicInput', module)
       setInputErrorsIndexes(newInputErrors)
     }
 
-    const onError = (error: string, index: number) => {
-      if (!isEmptyString(error)) addInputErrorIndex(index)
-      else removeInputErrorIndex(index)
+    const onError = (index: number) => {
+      addInputErrorIndex(index)
+    }
+
+    const onClearError = (index: number) => {
+      removeInputErrorIndex(index)
     }
 
     return (
@@ -63,6 +65,7 @@ storiesOf('MnemonicInput', module)
           setMnemonicSelectedWords={setMnemonicSelectedWords}
           mnemonic={mnemonic}
           onError={onError}
+          onClearError={onClearError}
         />
       </View>
     )
@@ -103,9 +106,12 @@ storiesOf('MnemonicInput', module)
       setInputErrorsIndexes(newInputErrors)
     }
 
-    const onError = (error: string, index: number) => {
-      if (!isEmptyString(error)) addInputErrorIndex(index)
-      else removeInputErrorIndex(index)
+    const onError = (index: number) => {
+      addInputErrorIndex(index)
+    }
+
+    const onClearError = (index: number) => {
+      removeInputErrorIndex(index)
     }
 
     return (
@@ -123,6 +129,7 @@ storiesOf('MnemonicInput', module)
           setMnemonicSelectedWords={setMnemonicSelectedWords}
           mnemonic={mnemonic}
           onError={onError}
+          onClearError={onClearError}
         />
       </View>
     )

diff --git a/apps/wallet-mobile/src/features/SetupWallet/common/MnemonicInput/MnemonicInput.tsx b/apps/wallet-mobile/src/features/SetupWallet/common/MnemonicInput/MnemonicInput.tsx
@@ -24,6 +24,7 @@ export const MnemonicInput = ({
   mnenonicRefs,
   mnemonic,
   onError,
+  onClearError,
 }: {
   length: number
   isValidPhrase: boolean
@@ -37,7 +38,8 @@ export const MnemonicInput = ({
   onFocus: (index: number) => void
   mnenonicRefs: React.RefObject<MnemonicWordInputRef>[]
   mnemonic: string
-  onError: (error: string, index: number) => void
+  onError: (index: number) => void
+  onClearError: (index: number) => void
 }) => {
   const strings = useStrings()
   const {styles} = useStyles()
@@ -56,6 +58,7 @@ export const MnemonicInput = ({
         setSuggestedWords={setSuggestedWords}
         onFocus={onFocus}
         onError={onError}
+        onClearError={onClearError}
       />
 
       <Space height="l" />
@@ -109,7 +112,8 @@ type MnemonicWordsInputProps = {
   suggestedWords: Array<string>
   setSuggestedWords: (suggestedWord: Array<string>) => void
   onFocus: (index: number) => void
-  onError: (error: string, index: number) => void
+  onError: (index: number) => void
+  onClearError: (index: number) => void
 }
 const MnemonicWordsInput = ({
   onSelect,
@@ -120,6 +124,7 @@ const MnemonicWordsInput = ({
   setSuggestedWords,
   onFocus,
   onError,
+  onClearError,
 }: MnemonicWordsInputProps) => {
   const {styles} = useStyles()
   const scrollView = useScrollView()
@@ -161,9 +166,8 @@ const MnemonicWordsInput = ({
                 mnenonicRefs[index - 1]?.current?.focus()
               }
             }}
-            onError={(error: string) => {
-              onError(error, index)
-            }}
+            onError={() => onError(index)}
+            onClearError={() => onClearError(index)}
           />
         </View>
       ))}
@@ -183,6 +187,7 @@ type MnemonicWordInputProps = {
   suggestedWords: Array<string>
   setSuggestedWords: (suggestedWord: Array<string>) => void
   onError: (error: string) => void
+  onClearError: () => void
 }
 
 const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInputProps>(
@@ -197,6 +202,7 @@ const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInp
       suggestedWords,
       setSuggestedWords,
       onError,
+      onClearError,
     },
     ref,
   ) => {
@@ -239,15 +245,15 @@ const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInp
             onError('error')
           } else {
             setError(false)
-            onError('')
+            onClearError()
           }
         } else {
           setSuggestedWords([])
           setError(false)
-          onError('')
+          onClearError()
         }
       },
-      [onError, onSubmitEditing, setSuggestedWords],
+      [onClearError, onError, onSubmitEditing, setSuggestedWords],
     )
 
     return (

diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletScreen.tsx
@@ -69,17 +69,19 @@ export const RestoreWalletScreen = () => {
     setInputErrorsIndexes(newInputErrors)
   }
 
-  const onError = (error: string, index: number) => {
-    if (!isEmptyString(error)) addInputErrorIndex(index)
-    else removeInputErrorIndex(index)
+  const onError = (index: number) => {
+    addInputErrorIndex(index)
+  }
+
+  const onClearError = (index: number) => {
+    removeInputErrorIndex(index)
   }
 
   const mnenonicRefs = React.useRef(mnemonicSelectedWords.map(() => React.createRef<MnemonicWordInputRef>())).current
 
   const onSelect = (index: number, word: string) => {
     const newWords = [...mnemonicSelectedWords]
     newWords[index] = word
-    setSuggestedWords([])
     setMnemonicSelectedWords(newWords)
     mnenonicRefs[index].current?.selectWord(isEmptyString(word) ? '' : word)
 
@@ -114,6 +116,7 @@ export const RestoreWalletScreen = () => {
   }
 
   const onFocus = (index: number) => {
+    setSuggestedWords([])
     setFocusedIndex(index)
   }
 
@@ -201,6 +204,7 @@ export const RestoreWalletScreen = () => {
             mnemonic={mnemonic}
             mnenonicRefs={mnenonicRefs}
             onError={onError}
+            onClearError={onClearError}
           />
         </ScrollView>