diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.tsx index ad475748..39b61f1c 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.tsx @@ -12,20 +12,17 @@ import styles from './AutocompleteInput.module.css' type AutocompleteInputProps = { index: number - isValid: boolean - changeIsValid: (isValid: boolean, index: number) => void } -const AutocompleteInput = ({ index, isValid, changeIsValid }: AutocompleteInputProps) => { +const AutocompleteInput = ({ index }: AutocompleteInputProps) => { const [suggestions, setSuggestions] = useState([]) const [isFocused, setIsFocused] = useState(false) const word = useSelector((state: RootState) => state.keyGeneration.words[index]) const dispatch = useDispatch() useEffect(() => { - const newSuggestions = getNewSuggestions(word) - setSuggestions(newSuggestions) - }, []) + setSuggestions(wordlist.filter(w => w.startsWith(word.toLowerCase()))) + }, [word]) const handleInputChange = (e: React.ChangeEvent) => { if (!isFocused) { @@ -38,11 +35,6 @@ const AutocompleteInput = ({ index, isValid, changeIsValid }: AutocompleteInputP if (mnemonicLength === 1) { dispatch(setWord({ index, word: value })) - - const newSuggestions = getNewSuggestions(value) - setSuggestions(newSuggestions) - - changeIsValid(isWordValidTyping(value, newSuggestions), index) } else if (mnemonicLength === 24) { dispatch(setMnemonic(mnemonic)) dispatch(setIsCopyPastedPhrase(true)) @@ -59,8 +51,6 @@ const AutocompleteInput = ({ index, isValid, changeIsValid }: AutocompleteInputP setIsFocused(false) dispatch(setWord({ index, word: suggestion })) - - changeIsValid(isWordValidBlur(suggestion), index) } const handleInputFocus = () => { @@ -69,19 +59,6 @@ const AutocompleteInput = ({ index, isValid, changeIsValid }: AutocompleteInputP const handleInputBlur = () => { setIsFocused(false) - changeIsValid(isWordValidBlur(word), index) - } - - const getNewSuggestions = (value: string) => { - return wordlist.filter(w => w.startsWith(value.toLowerCase())) - } - - const isWordValidTyping = (value: string, newSuggestions: string[]) => { - return wordlist.includes(value) || newSuggestions.length > 0 || value === '' - } - - const isWordValidBlur = (value: string) => { - return wordlist.includes(value) } return ( @@ -94,7 +71,7 @@ const AutocompleteInput = ({ index, isValid, changeIsValid }: AutocompleteInputP onChange={handleInputChange} onFocus={handleInputFocus} onBlur={handleInputBlur} - style={inputStyle(index, isFocused, isValid)} + style={inputStyle(index, isFocused)} />
@@ -115,17 +92,16 @@ const AutocompleteInput = ({ index, isValid, changeIsValid }: AutocompleteInputP export default AutocompleteInput -const inputStyle = (index: number, isFocused: boolean, isValid: boolean) => { +const inputStyle = (index: number, isFocused: boolean) => { const style = { outline: 'none', padding: `12px 16px 12px ${index + 1 < 10 ? '35px' : '45px'}`, - border: isValid ? 'none' : '2px solid #E53E3E', } if (isFocused) { return { ...style, - border: isValid ? '2px solid #4360DF' : '2px solid #E53E3E', + border: '2px solid #4360DF', backgroundColor: '#f1f2f4', } } else { diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx index 2f2903a6..20521db4 100644 --- a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx +++ b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx @@ -3,33 +3,8 @@ import { Text } from '@status-im/components' import AutocompleteInput from './AutocompleteInput' import KeyGenerationTitle from '../KeyGenerationTitle' -import { useState, useEffect } from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { setIsRightPhrase } from '../../../../redux/ValidatorOnboarding/KeyGeneration/slice' -import { RootState } from '../../../../redux/store' const ConfirmRecoveryPhrase = () => { - const [validWords, setValidWords] = useState([]) - const { words } = useSelector((state: RootState) => state.keyGeneration) - const dispatch = useDispatch() - - useEffect(() => { - const newValidWords = Array.from({ length: 24 }).map(() => true) - setValidWords(newValidWords) - }, []) - - useEffect(() => { - const isValidWords = validWords.every(isValid => isValid) - const isFilledWords = words.every(word => word !== '') - dispatch(setIsRightPhrase(isValidWords && isFilledWords)) - }, [validWords]) - - const changeIsValid = (isValid: boolean, index: number) => { - const newValidWords = [...validWords] - newValidWords[index] = isValid - setValidWords(newValidWords) - } - return ( @@ -44,12 +19,7 @@ const ConfirmRecoveryPhrase = () => { }} > {Array.from({ length: 24 }).map((_, index) => ( - + ))}