feat: disable continue button

src/pages/ValidatorOnboarding/ContinueButton.tsx

@@ -8,13 +8,21 @@ import { RootState } from '../../redux/store'
 type ContinueButton = {
   continueHandler: () => void
   activeStep: number
+  isConfirmPhraseStage: boolean
 }
 
-const ContinueButton = ({ continueHandler, activeStep }: ContinueButton) => {
-  const isCopyPastedPhrase = useSelector(
-    (state: RootState) => state.keyGeneration.isCopyPastedPhrase,
+const ContinueButton = ({ continueHandler, activeStep, isConfirmPhraseStage }: ContinueButton) => {
+  const { isCopyPastedPhrase, isRightPhrase } = useSelector(
+    (state: RootState) => state.keyGeneration,
   )
 
+  const isDisabled = () => {
+    if (isConfirmPhraseStage && !isRightPhrase) {
+      return true
+    }
+    return false
+  }
+
   return (
     <XStack style={{ width: '100%', marginTop: '16px', zIndex: 999, alignItems: 'center' }}>
       <Stack style={{ width: '100%' }}>
@@ -35,7 +43,7 @@ const ContinueButton = ({ continueHandler, activeStep }: ContinueButton) => {
           marginTop: isCopyPastedPhrase ? '0px' : '40px',
         }}
       >
-        <Button onPress={continueHandler} size={40}>
+        <Button onPress={continueHandler} size={40} disabled={isDisabled()}>
           {activeStep < 5 ? 'Continue' : 'Continue to Dashboard'}
         </Button>
       </Stack>

src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx

@@ -87,7 +87,11 @@ const ValidatorOnboarding = () => {
           {activeStep === 4 && <KeyGeneration isConfirmPhraseStage={isConfirmPhraseStage} />}
           {activeStep === 5 && <Activation />}
         </ValidatorBoxWrapper>
-        <ContinueButton activeStep={activeStep} continueHandler={continueHandler} />
+        <ContinueButton
+          activeStep={activeStep}
+          continueHandler={continueHandler}
+          isConfirmPhraseStage={isConfirmPhraseStage}
+        />
       </YStack>
     </div>
   )

src/redux/ValidatorOnboarding/KeyGeneration/slice.ts

@@ -3,6 +3,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 type KeyGenerationState = {
   words: string[]
   isCopyPastedPhrase: boolean
+  isRightPhrase: boolean
 }
 
 type wordProps = {
@@ -13,6 +14,7 @@ type wordProps = {
 const initialState: KeyGenerationState = {
   words: Array(24).fill(''),
   isCopyPastedPhrase: false,
+  isRightPhrase: false,
 }
 
 const keyGenerationSlice = createSlice({
@@ -30,13 +32,13 @@ const keyGenerationSlice = createSlice({
     setIsCopyPastedPhrase: (state, action: PayloadAction<boolean>) => {
       state.isCopyPastedPhrase = action.payload
     },
+    setIsRightPhrase: (state, action: PayloadAction<boolean>) => {
+      state.isRightPhrase = action.payload
+    },
   },
 })
 
-export const {
-  setWord,
-  setMnemonic,
-  setIsCopyPastedPhrase,
-} = keyGenerationSlice.actions
+export const { setWord, setMnemonic, setIsCopyPastedPhrase, setIsRightPhrase } =
+  keyGenerationSlice.actions
 
 export default keyGenerationSlice.reducer