diff --git a/src/App.tsx b/src/App.tsx index 27368f57..29cb4766 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -75,7 +75,10 @@ const router = createBrowserRouter([ { path: 'validator-setup', element: }, { path: 'validator-setup-install', element: }, { path: 'consensus-selection', element: }, - { path: 'activation-validator-setup', element: }, + { + path: 'activation-validator-setup', + element: , + }, { path: 'client-setup', element: }, { path: 'key-generation', element: }, { path: 'deposit', element: }, diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx index 93996ebf..ddcc5077 100644 --- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx +++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx @@ -35,7 +35,11 @@ const Activation = () => { - + { gaugeTotal={172.503} /> - + - + diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index 538f9cf6..f865972a 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -46,9 +46,15 @@ const ContinueButton = () => { '/validator-onboarding/deposit': 8, '/validator-onboarding/activation': 9, } - dispatch(setActiveStep(pathToStepMap[location.pathname as keyof typeof pathToStepMap] || 0)) + dispatch( + setActiveStep( + pathToStepMap[location.pathname as keyof typeof pathToStepMap] || 0, + ), + ) - const { isValidatorSet } = useSelector((state: RootState) => state.validatorSetup) + const { isValidatorSet } = useSelector( + (state: RootState) => state.validatorSetup, + ) const navigate = useNavigate() @@ -105,10 +111,14 @@ const ContinueButton = () => { const continueHandler = () => { let nextPath if (activeStep === 0) nextPath = '/validator-onboarding/advisories' - else if (activeStep === 1) nextPath = '/validator-onboarding/validator-setup' - else if (activeStep === 2) nextPath = '/validator-onboarding/validator-setup-install' - else if (activeStep === 3) nextPath = '/validator-onboarding/consensus-selection' - else if (activeStep === 4) nextPath = '/validator-onboarding/activation-validator-setup' + else if (activeStep === 1) + nextPath = '/validator-onboarding/validator-setup' + else if (activeStep === 2) + nextPath = '/validator-onboarding/validator-setup-install' + else if (activeStep === 3) + nextPath = '/validator-onboarding/consensus-selection' + else if (activeStep === 4) + nextPath = '/validator-onboarding/activation-validator-setup' else if (activeStep === 5) { nextPath = '/validator-onboarding/client-setup' } else if (activeStep === 6) { diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index a0ee1c68..7a035b56 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -25,7 +25,11 @@ const FormStepper = ({ activeStep }: FormStepperProps) => { '/validator-onboarding/activation', ] - const getIsStepVisible = (index: number, stepsBefore: number, stepsAfter: number) => { + const getIsStepVisible = ( + index: number, + stepsBefore: number, + stepsAfter: number, + ) => { const totalSteps = FORM_STEPS.length let start = activeStep - stepsBefore let end = activeStep + stepsAfter @@ -96,7 +100,9 @@ const FormStepper = ({ activeStep }: FormStepperProps) => { data-subtitle={step.subtitle} data-step={step.label} style={ - originalIndex === activeStep ? { backgroundColor: stepStyle.currentBgColor } : {} + originalIndex === activeStep + ? { backgroundColor: stepStyle.currentBgColor } + : {} } /> ) diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx index e61b75e0..b661fe55 100644 --- a/src/pages/ValidatorOnboarding/Overview/Overview.tsx +++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx @@ -12,7 +12,12 @@ const Overview = () => { imgHeight="250%" rightImageSrc="./background-images/sync-status-background.png" > - + Overview diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index e0285612..79baa6b2 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -12,7 +12,9 @@ import styles from './layoutGradient.module.css' import { Outlet } from 'react-router-dom' const ValidatorOnboarding = () => { - const { activeStep } = useSelector((state: RootState) => state.validatorOnboarding) + const { activeStep } = useSelector( + (state: RootState) => state.validatorOnboarding, + ) const windowSize = useWindowSize() return ( diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx index 82ebbd9d..fb871cfd 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusGaugeCard.tsx @@ -13,7 +13,12 @@ type ConsensusGaugeCardProps = { color: string } -const ConsensusGaugeCard = ({ synced, total, title, color }: ConsensusGaugeCardProps) => { +const ConsensusGaugeCard = ({ + synced, + total, + title, + color, +}: ConsensusGaugeCardProps) => { const windowSize = useWindowSize() return ( { const windowSize = useWindowSize() - const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient) as - | 'Nethermind' - | 'Besu' - | 'Geth' - | 'Erigon' - | 'Nimbus' + const selectedClient = useSelector( + (state: RootState) => state.execClient.selectedClient, + ) as 'Nethermind' | 'Besu' | 'Geth' | 'Erigon' | 'Nimbus' const clients = [ { diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx index bb2d4df2..dc026b99 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx @@ -36,7 +36,11 @@ const ActivationValidatorSetup = () => { - + { gaugeTotal={172.503} /> - + - + diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx index ac29e2ad..1f6a3f10 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx @@ -18,7 +18,11 @@ const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => { {cards.map(card => (
handleOSCardClick(card.name)} > diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx index 32769cbf..19d6c0f7 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx @@ -24,7 +24,9 @@ function extractBashCommands(documentation: any) { const ValidatorSetupInstall = () => { const dispatch = useDispatch() const [selectedOS, setSelectedOS] = useState(MAC) - const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient) + const selectedClient = useSelector( + (state: RootState) => state.execClient.selectedClient, + ) const docText = DOCUMENTATIONS[selectedClient].documentation[selectedOS] const bashCommands = extractBashCommands(docText) @@ -72,9 +74,16 @@ const ValidatorSetupInstall = () => { - + copyCommands()}> - +