feature(setup-wallet): display text when there are not suggestions

Emurgo · May 3, 2024 · 025e7e3 · 025e7e3
1 parent 366b24d
commit 025e7e3
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 25 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,6 +2,7 @@ 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'
 
@@ -15,6 +16,7 @@ storiesOf('MnemonicInput', module)
       Array.from({length: 15}).map(() => ''),
     )
     const [mnemonic, setMnemonic] = React.useState('')
+    const [inputErrorsIndexes, setInputErrorsIndexes] = React.useState<Array<number>>([])
 
     const onSelect = (index: number, word: string) => {
       setMnemonicWords((words) => {
@@ -31,6 +33,21 @@ storiesOf('MnemonicInput', module)
       setFocusedIndex(index)
     }
 
+    const addInputErrorIndex = (indexToAdd: number) => {
+      const newInputErrors = [...inputErrorsIndexes, indexToAdd]
+      setInputErrorsIndexes(newInputErrors)
+    }
+
+    const removeInputErrorIndex = (indexToRemove: number) => {
+      const newInputErrors = inputErrorsIndexes.filter((index) => index !== indexToRemove)
+      setInputErrorsIndexes(newInputErrors)
+    }
+
+    const onError = (error: string, index: number) => {
+      if (!isEmptyString(error)) addInputErrorIndex(index)
+      else removeInputErrorIndex(index)
+    }
+
     return (
       <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
         <MnemonicInput
@@ -45,6 +62,7 @@ storiesOf('MnemonicInput', module)
           mnemonicSelectedWords={mnemonicSelectedWords}
           setMnemonicSelectedWords={setMnemonicSelectedWords}
           mnemonic={mnemonic}
+          onError={onError}
         />
       </View>
     )
@@ -58,6 +76,7 @@ storiesOf('MnemonicInput', module)
       Array.from({length: 15}).map(() => ''),
     )
     const [mnemonic, setMnemonic] = React.useState('')
+    const [inputErrorsIndexes, setInputErrorsIndexes] = React.useState<Array<number>>([])
 
     const onSelect = (index: number, word: string) => {
       setMnemonicWords((words) => {
@@ -74,6 +93,21 @@ storiesOf('MnemonicInput', module)
       setFocusedIndex(index)
     }
 
+    const addInputErrorIndex = (indexToAdd: number) => {
+      const newInputErrors = [...inputErrorsIndexes, indexToAdd]
+      setInputErrorsIndexes(newInputErrors)
+    }
+
+    const removeInputErrorIndex = (indexToRemove: number) => {
+      const newInputErrors = inputErrorsIndexes.filter((index) => index !== indexToRemove)
+      setInputErrorsIndexes(newInputErrors)
+    }
+
+    const onError = (error: string, index: number) => {
+      if (!isEmptyString(error)) addInputErrorIndex(index)
+      else removeInputErrorIndex(index)
+    }
+
     return (
       <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
         <MnemonicInput
@@ -88,6 +122,7 @@ storiesOf('MnemonicInput', module)
           mnemonicSelectedWords={mnemonicSelectedWords}
           setMnemonicSelectedWords={setMnemonicSelectedWords}
           mnemonic={mnemonic}
+          onError={onError}
         />
       </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
@@ -23,8 +23,7 @@ export const MnemonicInput = ({
   onFocus,
   mnenonicRefs,
   mnemonic,
-  addInputErrorIndex,
-  removeInputErrorIndex,
+  onError,
 }: {
   length: number
   isValidPhrase: boolean
@@ -38,8 +37,7 @@ export const MnemonicInput = ({
   onFocus: (index: number) => void
   mnenonicRefs: React.RefObject<MnemonicWordInputRef>[]
   mnemonic: string
-  addInputErrorIndex: (index: number) => void
-  removeInputErrorIndex: (index: number) => void
+  onError: (error: string, index: number) => void
 }) => {
   const strings = useStrings()
   const {styles} = useStyles()
@@ -57,8 +55,7 @@ export const MnemonicInput = ({
         suggestedWords={suggestedWords}
         setSuggestedWords={setSuggestedWords}
         onFocus={onFocus}
-        addInputErrorIndex={addInputErrorIndex}
-        removeInputErrorIndex={removeInputErrorIndex}
+        onError={onError}
       />
 
       <Space height="l" />
@@ -112,8 +109,7 @@ type MnemonicWordsInputProps = {
   suggestedWords: Array<string>
   setSuggestedWords: (suggestedWord: Array<string>) => void
   onFocus: (index: number) => void
-  addInputErrorIndex: (index: number) => void
-  removeInputErrorIndex: (index: number) => void
+  onError: (error: string, index: number) => void
 }
 const MnemonicWordsInput = ({
   onSelect,
@@ -123,8 +119,7 @@ const MnemonicWordsInput = ({
   suggestedWords,
   setSuggestedWords,
   onFocus,
-  addInputErrorIndex,
-  removeInputErrorIndex,
+  onError,
 }: MnemonicWordsInputProps) => {
   const {styles} = useStyles()
   const scrollView = useScrollView()
@@ -167,8 +162,7 @@ const MnemonicWordsInput = ({
               }
             }}
             onError={(error: string) => {
-              if (!isEmptyString(error)) addInputErrorIndex(index)
-              else removeInputErrorIndex(index)
+              onError(error, index)
             }}
           />
         </View>
@@ -243,6 +237,9 @@ const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInp
           if (suggestedWords.length <= 0) {
             setError('error')
             onError('error')
+          } else {
+            setError('')
+            onError('')
           }
         } else {
           setSuggestedWords([])

diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletScreen.tsx
@@ -57,7 +57,22 @@ export const RestoreWalletScreen = () => {
     Array.from({length: mnemonicType}).map(() => ''),
   )
   const [inputErrorsIndexes, setInputErrorsIndexes] = React.useState<Array<number>>([])
-  const hasFocusedInputError = inputErrorsIndexes[focusedIndex] !== undefined
+  const hasFocusedInputError = inputErrorsIndexes.find((index) => index === focusedIndex) !== undefined
+
+  const addInputErrorIndex = (indexToAdd: number) => {
+    const newInputErrors = [...inputErrorsIndexes, indexToAdd]
+    setInputErrorsIndexes(newInputErrors)
+  }
+
+  const removeInputErrorIndex = (indexToRemove: number) => {
+    const newInputErrors = inputErrorsIndexes.filter((index) => index !== indexToRemove)
+    setInputErrorsIndexes(newInputErrors)
+  }
+
+  const onError = (error: string, index: number) => {
+    if (!isEmptyString(error)) addInputErrorIndex(index)
+    else removeInputErrorIndex(index)
+  }
 
   const mnenonicRefs = React.useRef(mnemonicSelectedWords.map(() => React.createRef<MnemonicWordInputRef>())).current
 
@@ -159,16 +174,6 @@ export const RestoreWalletScreen = () => {
     walletMetas,
   ])
 
-  const addInputErrorIndex = (indexToAdd: number) => {
-    const newInputErrors = [...inputErrorsIndexes, indexToAdd]
-    setInputErrorsIndexes(newInputErrors)
-  }
-
-  const removeInputErrorIndex = (indexToRemove: number) => {
-    const newInputErrors = inputErrorsIndexes.filter((index) => index !== indexToRemove)
-    setInputErrorsIndexes(newInputErrors)
-  }
-
   return (
     <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.root}>
       <KeyboardAvoidingView style={{flex: 1}}>
@@ -195,8 +200,7 @@ export const RestoreWalletScreen = () => {
             onFocus={onFocus}
             mnemonic={mnemonic}
             mnenonicRefs={mnenonicRefs}
-            addInputErrorIndex={addInputErrorIndex}
-            removeInputErrorIndex={removeInputErrorIndex}
+            onError={onError}
           />
         </ScrollView>