Revert "fix continue button to work with all steps"

This reverts commit 40db43bf890b5f2206652765639d78eba2816a49.

src/pages/ValidatorOnboarding/ContinueButton.tsx

@@ -1,36 +1,25 @@
-import { Stack, XStack } from 'tamagui';
+import { Stack, XStack } from 'tamagui'
-import { Button, InformationBox } from '@status-im/components';
+import { Button, InformationBox } from '@status-im/components'
-import { CloseCircleIcon } from '@status-im/icons';
+import { CloseCircleIcon } from '@status-im/icons'
-import { useEffect, useState } from 'react';
+
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux'
-import { useSelector } from 'react-redux';
+import { useEffect, useState } from 'react'
-import { RootState } from '../../redux/store';
+import { useNavigate } from 'react-router-dom'
-import LinkWithArrow from '../../components/General/LinkWithArrow';
+
-import { useWindowSize } from '../../hooks/useWindowSize';
+import { RootState } from '../../redux/store'
+import LinkWithArrow from '../../components/General/LinkWithArrow'
+import { setActiveStep, setSubStepValidatorSetup } from '../../redux/ValidatorOnboarding/slice'
+import { KEYSTORE_FILES } from '../../constants'
+import {
+  setIsConfirmPhraseStage,
+  setIsCopyPastedPhrase,
+  setValidWords,
+} from '../../redux/ValidatorOnboarding/KeyGeneration/slice'
+import { useWindowSize } from '../../hooks/useWindowSize'
 
 const ContinueButton = () => {
-  const windowSize = useWindowSize();
+  const windowSize = useWindowSize()
-  const [isDisabled, setIsDisabled] = useState(false);
+  const [isDisabled, setIsDisabled] = useState(false)
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  // Derive the active step index based on the current URL
-  const pathToStepMap = {
-    '/validator-onboarding/overview': 0,
-    '/validator-onboarding/advisories': 1,
-    '/validator-onboarding/validator-setup': 2,
-    '/validator-onboarding/validator-setup-install': 3,
-    '/validator-onboarding/consensus-selection': 4,
-    '/validator-onboarding/activation-validator-setup': 5,
-    '/validator-onboarding/client-setup': 6,
-    '/validator-onboarding/key-generation': 7,
-    '/validator-onboarding/deposit': 8,
-    '/validator-onboarding/activation': 9,
-    // Add more mappings as needed
-  };
-
-  const activeStep = pathToStepMap[location.pathname] || 0;
-
   const {
     isCopyPastedPhrase,
     mnemonic,
@@ -38,60 +27,115 @@ const ContinueButton = () => {
     isConfirmPhraseStage,
     recoveryMechanism,
     generatedMnemonic,
-  } = useSelector((state: RootState) => state.keyGeneration);
+  } = useSelector((state: RootState) => state.keyGeneration)
 
-  const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup);
+  const stepToPathMap: (string | string[])[] = [
+    '/validator-onboarding/overview',
+    '/validator-onboarding/advisories',
+    [
+      '/validator-onboarding/validator-setup',
+      '/validator-onboarding/validator-setup-install',
+      '/validator-onboarding/consensus-selection',
+      '/validator-onboarding/activation-validator-setup',
+    ],
+    '/validator-onboarding/client-setup',
+    '/validator-onboarding/key-generation',
+    '/validator-onboarding/deposit',
+    '/dashboard',
+  ]
+  const { activeStep, subStepValidatorSetup } = useSelector(
+    (state: RootState) => state.validatorOnboarding,
+  )
+  const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup)
+
+  const dispatch = useDispatch()
+  const navigate = useNavigate()
+  const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3
 
   useEffect(() => {
     const getDisabledButton = () => {
-      if (activeStep === 7 && isConfirmPhraseStage) {
+      if (activeStep === 4 && isConfirmPhraseStage) {
         if (
           validWords.some(w => w === false) ||
           generatedMnemonic.some((w, i) => w !== mnemonic[i])
         ) {
-          return true;
+          return true
         }
-      } else if (activeStep === 6 && !isValidatorSet) {
+      } else if (activeStep === 3 && !isValidatorSet) {
-        return true;
+        return true
       }
-      return false;
+      return false
-    };
+    }
 
-    setIsDisabled(getDisabledButton());
+    setIsDisabled(getDisabledButton())
   }, [
     activeStep,
+    subStepValidatorSetup,
     isConfirmPhraseStage,
     mnemonic,
     validWords,
     isValidatorSet,
-  ]);
+  ])
 
-  const continueHandler = () => {
+  const handleStep1 = () => {
-    // Logic to determine the next path based on activeStep
+    dispatch(setActiveStep(activeStep + 1))
-    // For example, if activeStep is 1 (advisories), navigate to step 2's URL
+  }
-    let nextPath;
+
-    switch(activeStep) {
+  const handleStep2 = () => {
-      case 0: nextPath = '/validator-onboarding/advisories'; break;
+    if (subStepValidatorSetup === 3) {
-      case 1: nextPath = '/validator-onboarding/validator-setup'; break;
+      return dispatch(setActiveStep(activeStep + 1))
-      case 2: nextPath = '/validator-onboarding/validator-setup-install'; break;
+    }
-      case 3: nextPath = '/validator-onboarding/consensus-selection'; break;
+    dispatch(setSubStepValidatorSetup(subStepValidatorSetup + 1))
-      case 4: nextPath = '/validator-onboarding/activation-validator-setup'; break;
+  }
-      case 5: nextPath = '/validator-onboarding/client-setup'; break;
+
-      case 6: nextPath = '/validator-onboarding/key-generation'; break;
+  const handleStep4 = () => {
-      case 7: nextPath = '/validator-onboarding/deposit'; break;
+    if (!isConfirmPhraseStage && recoveryMechanism === KEYSTORE_FILES) {
-      case 8: nextPath = '/validator-onboarding/activation'; break;
+      return dispatch(setActiveStep(activeStep + 1))
-      case 9: nextPath = '/dashboard'; break;
-      default: nextPath = '/validator-onboarding/overview';
     }
 
-    navigate(nextPath);
+    if (!isConfirmPhraseStage) {
-  };
+      return dispatch(setIsConfirmPhraseStage(true))
+    }
 
+    if (isConfirmPhraseStage) {
+      const newValidWords = mnemonic.map((w, index) => generatedMnemonic[index] === w)
+      dispatch(setValidWords(newValidWords))
+
+      if (!newValidWords.includes(false)) {
+        dispatch(setActiveStep(activeStep + 1))
+        if (isCopyPastedPhrase) {
+          dispatch(setIsCopyPastedPhrase(false))
+        }
+      }
+    }
+  }
+
+  const continueHandler = () => {
+    let nextPath: string
+
+    if (activeStep === 2) {
+      const paths = stepToPathMap[activeStep]
+      if (Array.isArray(paths)) {
+        nextPath = paths[subStepValidatorSetup + 1] || '/dashboard'
+      } else {
+        nextPath = '/dashboard'
+      }
+    } else {
+      const path = stepToPathMap[activeStep + 1]
+      nextPath = typeof path === 'string' ? path : '/dashboard'
+    }
+
+    navigate(nextPath)
+  }
   return (
     <XStack
       style={{
         width: '100%',
-        justifyContent: windowSize.width < 560 ? 'start' : 'end',
+        justifyContent: isActivationValScreen
+          ? 'space-between'
+          : windowSize.width < 560
+          ? 'start'
+          : 'end',
         alignItems: 'center',
         zIndex: 1000,
         marginTop: '21px',
@@ -106,17 +150,19 @@ const ContinueButton = () => {
           />
         </Stack>
       )}
-      <LinkWithArrow
+      {isActivationValScreen && (
-        text="Skip to Dashboard"
+        <LinkWithArrow
-        to="/dashboard"
+          text="Skip to Dashboard"
-        arrowRight={true}
+          to="/dashboard"
-        style={{ fontWeight: 'bold', zIndex: 999 }}
+          arrowRight={true}
-      />
+          style={{ fontWeight: 'bold', zIndex: 999 }}
+        />
+      )}
       <Button onPress={continueHandler} size={40} disabled={isDisabled}>
         {activeStep < 6 ? 'Continue' : 'Continue to Dashboard'}
       </Button>
     </XStack>
-  );
+  )
-};
+}
 
-export default ContinueButton;
+export default ContinueButton