diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index 84b171ed..cb126085 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -1,6 +1,6 @@ import { Stepper, Step } from 'react-form-stepper' +import { useNavigate } from 'react-router-dom' import { useDispatch } from 'react-redux' - import { setActiveStep } from '../../../redux/ValidatorOnboarding/slice' import { FORM_STEPS } from '../../../constants' import { useWindowSize } from '../../../hooks/useWindowSize' @@ -12,14 +12,28 @@ type FormStepperProps = { const FormStepper = ({ activeStep }: FormStepperProps) => { const dispatch = useDispatch() + const navigate = useNavigate() const windowSize = useWindowSize() + const stepToUrlMap = [ + '/validator-onboarding/', + '/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', + '/validator-onboarding/activation', + // Add more steps as needed + ] + const getIsStepVisible = (index: number, stepsBefore: number, stepsAfter: number) => { const totalSteps = FORM_STEPS.length let start = activeStep - stepsBefore let end = activeStep + stepsAfter - // active step is near the start or end if (start < 0) { end -= start start = 0 @@ -37,21 +51,22 @@ const FormStepper = ({ activeStep }: FormStepperProps) => { const isStepVisible = (index: number) => { if (windowSize.width < 774) { - return getIsStepVisible(index, 1, 1) // 3 steps (1 before, 1 after) + return getIsStepVisible(index, 1, 1) } else if (windowSize.width < 963) { - return getIsStepVisible(index, 1, 2) // 4 steps + return getIsStepVisible(index, 1, 2) } else if (windowSize.width < 1183) { - return getIsStepVisible(index, 1, 3) // 5 steps + return getIsStepVisible(index, 1, 3) } else if (windowSize.width < 1300) { - return getIsStepVisible(index, 2, 3) // 6 steps + return getIsStepVisible(index, 2, 3) } else { return true } } const changeStepOnClickHandler = (index: number) => { - if (activeStep > index) { - dispatch(setActiveStep(index)) + const path = stepToUrlMap[index] + if (path) { + navigate(path) } } @@ -87,6 +102,7 @@ const FormStepper = ({ activeStep }: FormStepperProps) => { ) } + const stepStyle = { // For default dots: inactiveBgColor: '#FFFFFF',