From 16efe2d895091631a8ebe9307229933eccc55bdc Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 18 Jan 2024 18:24:36 +0200
Subject: [PATCH] fix: move steps to constants

---
 src/constants.ts                                |  9 +++++++++
 .../FormStepper/FormStepper.tsx                 | 17 ++++-------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/constants.ts b/src/constants.ts
index ac5240b3..1c6a6033 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -31,6 +31,15 @@ export const KEYSTORE_FILES = 'KeystoreFiles'
 export const RECOVERY_PHRASE = 'Recovery Phrase'
 export const BOTH_KEY_AND_RECOVERY = 'Both KeystoreFiles & Recovery Phrase'
 export const ETH_PER_VALIDATOR = 32
+export const FORM_STEPS = [
+  { label: 'Overview', subtitle: 'Get Started' },
+  { label: 'Advisories', subtitle: 'Understand your Duties' },
+  { label: 'Client Setup', subtitle: 'Execution & Consensus' },
+  { label: 'Validator Setup', subtitle: 'Validators & Withdrawal' },
+  { label: 'Key Generation', subtitle: 'Secure your Keypairs' },
+  { label: 'Deposit', subtitle: 'Stake your ETH' },
+  { label: 'Activation', subtitle: 'Complete Setup' },
+]
 
 export const MAC = 'MacOS'
 export const WINDOWS = 'Windows'
diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
index be023844..05737ce1 100644
--- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -2,18 +2,9 @@ import { Stepper, Step } from 'react-form-stepper'
 import { useDispatch } from 'react-redux'
 
 import { setActiveStep } from '../../../redux/ValidatorOnboarding/slice'
+import { FORM_STEPS } from '../../../constants'
 import './FormStepper.css'
 
-const steps = [
-  { label: 'Overview', subtitle: 'Get Started' },
-  { label: 'Advisories', subtitle: 'Understand your Duties' },
-  { label: 'Client Setup', subtitle: 'Execution & Consensus' },
-  { label: 'Validator Setup', subtitle: 'Validators & Withdrawal' },
-  { label: 'Key Generation', subtitle: 'Secure your Keypairs' },
-  { label: 'Deposit', subtitle: 'Stake your ETH' },
-  { label: 'Activation', subtitle: 'Complete Setup' },
-]
-
 type FormStepperProps = {
   activeStep: number
   windowWidth: number
@@ -24,7 +15,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
   const isStepVisible = (index: number) => {
     if (windowWidth < 740) {
       const start = Math.max(0, activeStep - 1)
-      const end = Math.min(steps.length - 1, activeStep + 1)
+      const end = Math.min(FORM_STEPS.length - 1, activeStep + 1)
       return index >= start && index <= end
     } else {
       return true
@@ -37,7 +28,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
     }
   }
 
-  const visibleSteps = steps.filter((_, index) => isStepVisible(index))
+  const visibleSteps = FORM_STEPS.filter((_, index) => isStepVisible(index))
 
   return (
     <Stepper
@@ -55,7 +46,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
       }}
     >
       {visibleSteps.map(step => {
-        const originalIndex = steps.indexOf(step)
+        const originalIndex = FORM_STEPS.indexOf(step)
         return (
           <Step
             key={originalIndex}