Skip to content

Commit

Permalink
fix(setup wallet): fix handle invalid word message (#3233)
Browse files Browse the repository at this point in the history 
Co-authored-by: Rahul <rahulnair87@gmail.com>
  • Loading branch information
@banklesss @rahulnr7
banklesss and rahulnr7 committed May 3, 2024
1 parent 90305b5 commit 24a0281
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 13 deletions.
1 change: 1 addition & 0 deletions apps/wallet-mobile/.storybook/storybook.requires.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

35 changes: 35 additions & 0 deletions apps/wallet-mobile/src/features/SetupWallet/common/MnemonicInput/MnemonicInput.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -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) => {
Expand All @@ -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
Expand All @@ -45,6 +62,7 @@ storiesOf('MnemonicInput', module)
mnemonicSelectedWords={mnemonicSelectedWords}
setMnemonicSelectedWords={setMnemonicSelectedWords}
mnemonic={mnemonic}
onError={onError}
/>
</View>
)
Expand All @@ -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) => {
Expand All @@ -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
Expand All @@ -88,6 +122,7 @@ storiesOf('MnemonicInput', module)
mnemonicSelectedWords={mnemonicSelectedWords}
setMnemonicSelectedWords={setMnemonicSelectedWords}
mnemonic={mnemonic}
onError={onError}
/>
</View>
)
Expand Down
33 changes: 25 additions & 8 deletions apps/wallet-mobile/src/features/SetupWallet/common/MnemonicInput/MnemonicInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export const MnemonicInput = ({
onFocus,
mnenonicRefs,
mnemonic,
onError,
}: {
length: number
isValidPhrase: boolean
Expand All @@ -36,6 +37,7 @@ export const MnemonicInput = ({
onFocus: (index: number) => void
mnenonicRefs: React.RefObject<MnemonicWordInputRef>[]
mnemonic: string
onError: (error: string, index: number) => void
}) => {
const strings = useStrings()
const {styles} = useStyles()
Expand All @@ -53,6 +55,7 @@ export const MnemonicInput = ({
suggestedWords={suggestedWords}
setSuggestedWords={setSuggestedWords}
onFocus={onFocus}
onError={onError}
/>

<Space height="l" />
Expand Down Expand Up @@ -106,6 +109,7 @@ type MnemonicWordsInputProps = {
suggestedWords: Array<string>
setSuggestedWords: (suggestedWord: Array<string>) => void
onFocus: (index: number) => void
onError: (error: string, index: number) => void
}
const MnemonicWordsInput = ({
onSelect,
Expand All @@ -115,6 +119,7 @@ const MnemonicWordsInput = ({
suggestedWords,
setSuggestedWords,
onFocus,
onError,
}: MnemonicWordsInputProps) => {
const {styles} = useStyles()
const scrollView = useScrollView()
Expand Down Expand Up @@ -156,6 +161,9 @@ const MnemonicWordsInput = ({
mnenonicRefs[index - 1]?.current?.focus()
}
}}
onError={(error: string) => {
onError(error, index)
}}
/>
</View>
))}
Expand All @@ -174,6 +182,7 @@ type MnemonicWordInputProps = {
index: number
suggestedWords: Array<string>
setSuggestedWords: (suggestedWord: Array<string>) => void
onError: (error: string) => void
}

const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInputProps>(
Expand All @@ -187,22 +196,22 @@ const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInp
index,
suggestedWords,
setSuggestedWords,
onError,
},
ref,
) => {
const inputRef = React.useRef<RNTextInput>(null)
const {styles} = useStyles()
const [word, setWord] = React.useState(mnemonicSelectedWords[index])
const [error, setError] = React.useState('')
const [error, setError] = React.useState(false)

React.useImperativeHandle(
ref,
() => ({
selectWord: setWord,
word: word,
focus: () => inputRef.current?.focus(),
}),
[word],
[],
)

const onSubmitEditing = React.useCallback(() => {
Expand All @@ -226,11 +235,19 @@ const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInp
setSuggestedWords(suggestedWords)

if (suggestedWords.length <= 0) {
setError('error')
} else if (error !== '') setError('')
} else setSuggestedWords([])
setError(true)
onError('error')
} else {
setError(false)
onError('')
}
} else {
setSuggestedWords([])
setError(false)
onError('')
}
},
[error, onSubmitEditing, setSuggestedWords],
[onError, onSubmitEditing, setSuggestedWords],
)

return (
Expand All @@ -255,7 +272,7 @@ const MnemonicWordInput = React.forwardRef<MnemonicWordInputRef, MnemonicWordInp
selectTextOnFocus
noHelper
errorDelay={0}
errorText={error}
errorText={error ? 'error' : ''}
autoCorrect={false}
spellCheck={false}
autoComplete="off"
Expand Down
30 changes: 25 additions & 5 deletions apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ import {useStrings} from '../../common/useStrings'

export type MnemonicWordInputRef = {
focus: () => void
word: string
selectWord: (matchingWord: string) => void
}

Expand Down Expand Up @@ -57,6 +56,24 @@ 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.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

const onSelect = (index: number, word: string) => {
Expand Down Expand Up @@ -183,14 +200,17 @@ export const RestoreWalletScreen = () => {
onFocus={onFocus}
mnemonic={mnemonic}
mnenonicRefs={mnenonicRefs}
onError={onError}
/>
</ScrollView>

{mnemonic !== '' && isValidPhrase && <NextButton onPress={handleOnNext} />}

{suggestedWords.length > 0 ? (
{suggestedWords.length > 0 && !hasFocusedInputError && (
<WordSuggestionList data={suggestedWords} index={focusedIndex} onSelect={onSelect} />
) : (
)}

{suggestedWords.length === 0 && hasFocusedInputError && (
<View style={styles.suggestionArea}>
<Text style={styles.suggestionMessage}>{strings.wordNotFound}</Text>
</View>
Expand Down Expand Up @@ -380,12 +400,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,
},
})

Expand Down

0 comments on commit 24a0281

Please sign in to comment.