feat: check words after continue

src/pages/ValidatorOnboarding/ContinueButton.tsx

@@ -1,9 +1,11 @@
 import { Stack, XStack } from 'tamagui'
 import { Button, InformationBox } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
+import { useEffect } from 'react'
 
 import { RootState } from '../../redux/store'
+import { setIsRightPhrase } from '../../redux/ValidatorOnboarding/KeyGeneration/slice'
 
 type ContinueButton = {
   continueHandler: () => void
@@ -12,9 +14,14 @@ type ContinueButton = {
 }
 
 const ContinueButton = ({ continueHandler, activeStep, isConfirmPhraseStage }: ContinueButton) => {
-  const { isCopyPastedPhrase, isRightPhrase } = useSelector(
+  const { isCopyPastedPhrase, isRightPhrase, words } = useSelector(
     (state: RootState) => state.keyGeneration,
   )
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    dispatch(setIsRightPhrase(words.every(word => word !== '')))
+  }, [words])
 
   const isDisabled = () => {
     if (isConfirmPhraseStage && !isRightPhrase) {

src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.tsx

@@ -18,6 +18,7 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
   const [suggestions, setSuggestions] = useState<string[]>([])
   const [isFocused, setIsFocused] = useState(false)
   const word = useSelector((state: RootState) => state.keyGeneration.words[index])
+  const isValidWord = useSelector((state: RootState) => state.keyGeneration.validWords[index])
   const dispatch = useDispatch()
 
   useEffect(() => {
@@ -71,7 +72,7 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
           onChange={handleInputChange}
           onFocus={handleInputFocus}
           onBlur={handleInputBlur}
-          style={inputStyle(index, isFocused)}
+          style={inputStyle(index, isFocused, isValidWord)}
         />
       </div>
       <div className={isFocused ? styles['suggestion-list'] : ''}>
@@ -92,16 +93,17 @@ const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
 
 export default AutocompleteInput
 
-const inputStyle = (index: number, isFocused: boolean) => {
+const inputStyle = (index: number, isFocused: boolean, isValidWord: boolean) => {
   const style = {
     outline: 'none',
     padding: `12px 16px 12px ${index + 1 < 10 ? '35px' : '45px'}`,
+    border: isValidWord ? 'none' : '2px solid #E53E3E',
   }
 
   if (isFocused) {
     return {
       ...style,
-      border: '2px solid #4360DF',
+      border: isValidWord ? '2px solid #4360DF' : '2px solid #E53E3E',
       backgroundColor: '#f1f2f4',
     }
   } else {

src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx

@@ -15,18 +15,20 @@ import Advisories from './Advisories/Advisories'
 import ValidatorSetup from './ValidatorSetup/ValidatorSetup'
 import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall'
 import ContinueButton from './ContinueButton'
-import { setIsCopyPastedPhrase } from '../../redux/ValidatorOnboarding/KeyGeneration/slice'
+import {
+  setIsCopyPastedPhrase,
+  setValidWords,
+} from '../../redux/ValidatorOnboarding/KeyGeneration/slice'
 import { RootState } from '../../redux/store'
 import './layoutGradient.css'
 import ActivationValidatorSetup from './ValidatorSetup/ActivationValidatorSetup'
+import wordlist from 'web-bip39/wordlists/english'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
   const [isConfirmPhraseStage, setIsConfirmPhraseStage] = useState(false)
   const [subStepValidatorSetup, setSubStepValidatorSetup] = useState(0)
-  const isCopyPastedPhrase = useSelector(
+  const { isCopyPastedPhrase, words } = useSelector((state: RootState) => state.keyGeneration)
-    (state: RootState) => state.keyGeneration.isCopyPastedPhrase,
-  )
   const navigate = useNavigate()
   const dispatch = useDispatch()
 
@@ -39,6 +41,15 @@ const ValidatorOnboarding = () => {
   const continueHandler = () => {
     if (activeStep === 4 && isConfirmPhraseStage === false) {
       return setIsConfirmPhraseStage(true)
+    } else if (activeStep === 4 && isConfirmPhraseStage === true) {
+      const newValidWords = words.map(w => wordlist.includes(w))
+      dispatch(setValidWords(newValidWords))
+
+      if (newValidWords.every(w => w === true)) {
+        setActiveStep(activeStep + 1)
+      } else {
+        return
+      }
     } else if (activeStep === 3 && subStepValidatorSetup < 3) {
       setSubStepValidatorSetup(subStepValidatorSetup + 1)
     } else if (activeStep < 5) {
@@ -49,6 +60,7 @@ const ValidatorOnboarding = () => {
     } else {
       navigate('/')
     }
+    
     removeCopyPastePhraseInfoBox()
     removeConfirmPhraseStage()
   }

src/redux/ValidatorOnboarding/KeyGeneration/slice.ts

@@ -4,6 +4,7 @@ type KeyGenerationState = {
   words: string[]
   isCopyPastedPhrase: boolean
   isRightPhrase: boolean
+  validWords: boolean[]
 }
 
 type wordProps = {
@@ -15,6 +16,7 @@ const initialState: KeyGenerationState = {
   words: Array(24).fill(''),
   isCopyPastedPhrase: false,
   isRightPhrase: false,
+  validWords: Array(24).fill(true),
 }
 
 const keyGenerationSlice = createSlice({
@@ -35,10 +37,13 @@ const keyGenerationSlice = createSlice({
     setIsRightPhrase: (state, action: PayloadAction<boolean>) => {
       state.isRightPhrase = action.payload
     },
+    setValidWords: (state, action: PayloadAction<boolean[]>) => {
+      state.validWords = action.payload
+    },
   },
 })
 
-export const { setWord, setMnemonic, setIsCopyPastedPhrase, setIsRightPhrase } =
+export const { setWord, setMnemonic, setIsCopyPastedPhrase, setIsRightPhrase, setValidWords } =
   keyGenerationSlice.actions
 
 export default keyGenerationSlice.reducer