fix: form stepper to read urls

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) => {
     </Stepper>
   )
 }
+
 const stepStyle = {
   // For default dots:
   inactiveBgColor: '#FFFFFF',