diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index 45d569a1..dcd0f941 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -19,14 +19,29 @@ type FormStepperProps = { } const FormStepper = ({ activeStep }: FormStepperProps) => { + const isStepVisible = (index: number) => { + if (activeStep === 0) { + // Show the first three steps if the active step is the first one + return index <= 2; + } else if (activeStep === steps.length - 1) { + // Show the last three steps if the active step is the last one + return index >= steps.length - 3; + } else { + // Otherwise, show the previous, current, and next steps + return index === activeStep || index === activeStep - 1 || index === activeStep + 1; + } + } + + const dispatch = useDispatch() - + const changeStepOnClickHandler = (index: number) => { if (activeStep > index) { dispatch(setActiveStep(index)) } } - + + const visibleSteps = steps.filter((_, index) => isStepVisible(index)); return ( { overflow: 'hidden', }} > - {steps.map((step, index) => ( - changeStepOnClickHandler(index)} - completed={activeStep > index - 1} - data-subtitle={step.subtitle} - data-step={step.label} - /> - ))} + {visibleSteps.map((step) => { + const originalIndex = steps.indexOf(step); + return ( + changeStepOnClickHandler(originalIndex)} + completed={activeStep > originalIndex - 1} + data-subtitle={step.subtitle} + data-step={step.label} + /> + ); + })} ) }