diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index 5b6688e7..6c8ce64d 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -6,6 +6,15 @@ type FormStepperProps = { changeActiveStep: (step: number) => void } +const steps = [ + { label: 'Overview', subtitle: 'Get Started' }, + { label: 'Advicsories', subtitle: 'Understand your Duties' }, + { label: 'Client Setup', subtitle: 'Execution & Consensus' }, + { label: 'Validator Setup', subtitle: 'Validators & Withdrawal' }, + { label: 'Key Generation', subtitle: 'Secure your Keypairs' }, + { label: 'Activation', subtitle: 'Complete Setup' }, +] + const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => { return ( { connectorStyleConfig={customConnectorStyle} style={{ fontSize: '14px', zIndex: 999, width: '100%', padding: 0, marginBottom: '2rem' }} > - changeActiveStep(0)} - completed={activeStep >= 0} - data-subtitle="Get Started" - data-step="Overview" - /> - changeActiveStep(1)} - completed={activeStep > 0} - data-subtitle="Understand your Duties" - data-step="Advicsories" - /> - changeActiveStep(2)} - completed={activeStep > 1} - data-subtitle="Execution & Consensus" - data-step="Advicsories" - /> - changeActiveStep(3)} - completed={activeStep > 2} - data-subtitle="Validators & Withdrawal" - data-step="Validator Setup" - /> - changeActiveStep(4)} - completed={activeStep > 3} - data-subtitle="Secure your Keypairs" - data-step="Key Generation" - /> - changeActiveStep(5)} - completed={activeStep > 4} - data-subtitle="Complete Setup" - data-step="Activation" - /> + {steps.map((step, index) => ( + changeActiveStep(index)} + completed={activeStep > index - 1} + data-subtitle={step.subtitle} + data-step={step.label} + /> + ))} ) }