status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: move steps to constants

This commit is contained in:
RadoslavDimchev 2024-01-18 18:24:36 +02:00
parent c40c15b70f
commit 16efe2d895
2 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/constants.ts
View File

@ -31,6 +31,15 @@ export const KEYSTORE_FILES = 'KeystoreFiles'
export const RECOVERY_PHRASE = 'Recovery Phrase' export const RECOVERY_PHRASE = 'Recovery Phrase'
export const BOTH_KEY_AND_RECOVERY = 'Both KeystoreFiles & Recovery Phrase' export const BOTH_KEY_AND_RECOVERY = 'Both KeystoreFiles & Recovery Phrase'
export const ETH_PER_VALIDATOR = 32 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 MAC = 'MacOS'
export const WINDOWS = 'Windows' export const WINDOWS = 'Windows'

17
src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
View File

@ -2,18 +2,9 @@ import { Stepper, Step } from 'react-form-stepper'
import { useDispatch } from 'react-redux' import { useDispatch } from 'react-redux'
import { setActiveStep } from '../../../redux/ValidatorOnboarding/slice' import { setActiveStep } from '../../../redux/ValidatorOnboarding/slice'
import { FORM_STEPS } from '../../../constants'
import './FormStepper.css' 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 = { type FormStepperProps = {
activeStep: number activeStep: number
windowWidth: number windowWidth: number
@ -24,7 +15,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
const isStepVisible = (index: number) => { const isStepVisible = (index: number) => {
if (windowWidth < 740) { if (windowWidth < 740) {
const start = Math.max(0, activeStep - 1) 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 return index >= start && index <= end
} else { } else {
return true 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 ( return (
<Stepper <Stepper
@ -55,7 +46,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
}} }}
> >
{visibleSteps.map(step => { {visibleSteps.map(step => {
const originalIndex = steps.indexOf(step) const originalIndex = FORM_STEPS.indexOf(step)
return ( return (
<Step <Step
key={originalIndex} key={originalIndex}