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

Emurgo · May 3, 2024 · 282934e · 282934e
1 parent 5a158c4
commit 282934e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 15 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
@@ -23,6 +23,8 @@ export const MnemonicInput = ({
   onFocus,
   mnenonicRefs,
   mnemonic,
+  addInputErrorIndex,
+  removeInputErrorIndex,
 }: {
   length: number
   isValidPhrase: boolean
@@ -36,6 +38,8 @@ export const MnemonicInput = ({
   onFocus: (index: number) => void
   mnenonicRefs: React.RefObject<MnemonicWordInputRef>[]
   mnemonic: string
+  addInputErrorIndex: (index: number) => void
+  removeInputErrorIndex: (index: number) => void
 }) => {
   const strings = useStrings()
   const {styles} = useStyles()
@@ -53,6 +57,8 @@ export const MnemonicInput = ({
         suggestedWords={suggestedWords}
         setSuggestedWords={setSuggestedWords}
         onFocus={onFocus}
+        addInputErrorIndex={addInputErrorIndex}
+        removeInputErrorIndex={removeInputErrorIndex}
       />
 
       <Space height="l" />
@@ -106,6 +112,8 @@ type MnemonicWordsInputProps = {
   suggestedWords: Array<string>
   setSuggestedWords: (suggestedWord: Array<string>) => void
   onFocus: (index: number) => void
+  addInputErrorIndex: (index: number) => void
+  removeInputErrorIndex: (index: number) => void
 }
 const MnemonicWordsInput = ({
   onSelect,
@@ -115,6 +123,8 @@ const MnemonicWordsInput = ({
   suggestedWords,
   setSuggestedWords,
   onFocus,
+  addInputErrorIndex,
+  removeInputErrorIndex,
 }: MnemonicWordsInputProps) => {
   const {styles} = useStyles()
   const scrollView = useScrollView()
@@ -156,6 +166,10 @@ const MnemonicWordsInput = ({
                 mnenonicRefs[index - 1]?.current?.focus()
               }
             }}
+            onError={(error: string) => {
+              if (!isEmptyString(error)) addInputErrorIndex(index)
+              else removeInputErrorIndex(index)
+            }}
           />
         </View>
       ))}
@@ -174,6 +188,7 @@ type MnemonicWordInputProps = {
   index: number
   suggestedWords: Array<string>
   setSuggestedWords: (suggestedWord: Array<string>) => void
+  onError: (error: string) => void
 }
 
 const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInputProps>(
@@ -187,6 +202,7 @@ const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInp
       index,
       suggestedWords,
       setSuggestedWords,
+      onError,
     },
     ref,
   ) => {
@@ -199,10 +215,9 @@ const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInp
       ref,
       () => ({
         selectWord: setWord,
-        word: word,
         focus: () => inputRef.current?.focus(),
       }),
-      [word],
+      [setWord],
     )
 
     const onSubmitEditing = React.useCallback(() => {
@@ -227,10 +242,15 @@ const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInp
 
           if (suggestedWords.length <= 0) {
             setError('error')
-          } else if (error !== '') setError('')
-        } else setSuggestedWords([])
+            onError('error')
+          }
+        } else {
+          setSuggestedWords([])
+          setError('')
+          onError('')
+        }
       },
-      [error, onSubmitEditing, setSuggestedWords],
+      [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
@@ -29,7 +29,6 @@ import {useStrings} from '../../common/useStrings'
 
 export type MnemonicWordInputRef = {
   focus: () => void
-  word: string
   selectWord: (matchingWord: string) => void
 }
 
@@ -57,6 +56,9 @@ export const RestoreWalletScreen = () => {
   const [mnemonicSelectedWords, setMnemonicSelectedWords] = React.useState<Array<string>>(
     Array.from({length: mnemonicType}).map(() => ''),
   )
+  const [inputErrorsIndexes, setInputErrorsIndexes] = React.useState<Array<number>>([])
+  const hasFocusedInputError = inputErrorsIndexes[focusedIndex] !== undefined
+
   const mnenonicRefs = React.useRef(mnemonicSelectedWords.map(() => React.createRef<MnemonicWordInputRef>())).current
 
   const onSelect = (index: number, word: string) => {
@@ -157,6 +159,16 @@ 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}}>
@@ -183,19 +195,21 @@ export const RestoreWalletScreen = () => {
             onFocus={onFocus}
             mnemonic={mnemonic}
             mnenonicRefs={mnenonicRefs}
+            addInputErrorIndex={addInputErrorIndex}
+            removeInputErrorIndex={removeInputErrorIndex}
           />
         </ScrollView>
 
         {mnemonic !== '' && isValidPhrase && <NextButton onPress={handleOnNext} />}
 
-        {suggestedWords.length > 0 ? (
+        {suggestedWords.length > 0 && !hasFocusedInputError && (
           <WordSuggestionList data={suggestedWords} index={focusedIndex} onSelect={onSelect} />
-        ) : (
-          !isEmptyString(mnenonicRefs[focusedIndex].current?.word) && (
-            <View style={styles.suggestionArea}>
-              <Text style={styles.suggestionMessage}>{strings.wordNotFound}</Text>
-            </View>
-          )
+        )}
+
+        {suggestedWords.length === 0 && hasFocusedInputError && (
+          <View style={styles.suggestionArea}>
+            <Text style={styles.suggestionMessage}>{strings.wordNotFound}</Text>
+          </View>
         )}
       </KeyboardAvoidingView>
     </SafeAreaView>
@@ -382,12 +396,12 @@ const useStyles = () => {
       borderColor: theme.color.gray[200],
       borderTopWidth: 1,
       alignItems: 'center',
+      paddingTop: 30,
+      paddingBottom: 30,
     },
     suggestionMessage: {
       ...theme.typography['body-1-l-regular'],
       textAlign: 'center',
-      paddingTop: 24,
-      paddingBottom: 24,
     },
   })