format

src/App.tsx

@@ -75,7 +75,10 @@ const router = createBrowserRouter([
       { path: 'validator-setup', element: <ValidatorSetup /> },
       { path: 'validator-setup-install', element: <ValidatorSetupInstall /> },
       { path: 'consensus-selection', element: <ConsensusSelection /> },
-      { path: 'activation-validator-setup', element: <ActivationValidatorSetup /> },
+      {
+        path: 'activation-validator-setup',
+        element: <ActivationValidatorSetup />,
+      },
       { path: 'client-setup', element: <ClientSetup /> },
       { path: 'key-generation', element: <KeyGeneration /> },
       { path: 'deposit', element: <Deposit /> },

src/pages/ValidatorOnboarding/Activation/Activation.tsx

@@ -35,7 +35,11 @@ const Activation = () => {
             </Text>
           </Stack>
           <YStack space={'$3'} marginTop={'25px'}>
-            <XStack space={'$3'} width="100%" flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'}>
+            <XStack
+              space={'$3'}
+              width="100%"
+              flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'}
+            >
               <ActivationCard
                 text="Execution Sync Status"
                 isGaugeIncluded={true}
@@ -51,9 +55,16 @@ const Activation = () => {
                 gaugeTotal={172.503}
               />
             </XStack>
-            <XStack space={'$3'} flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'} width="100%">
+            <XStack
+              space={'$3'}
+              flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'}
+              width="100%"
+            >
               <ActivationCard text="Validator Queue" value="92603" />
-              <ActivationCard text="Estimated Activation Time" value="32 Days" />
+              <ActivationCard
+                text="Estimated Activation Time"
+                value="32 Days"
+              />
               <ActivationCard text="Current APR" value="4.40%" isLast={true} />
             </XStack>
           </YStack>

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 === 1)
-    else if (activeStep === 2) nextPath = '/validator-onboarding/validator-setup-install'
+      nextPath = '/validator-onboarding/validator-setup'
-    else if (activeStep === 3) nextPath = '/validator-onboarding/consensus-selection'
+    else if (activeStep === 2)
-    else if (activeStep === 4) nextPath = '/validator-onboarding/activation-validator-setup'
+      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) {

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 }
+                : {}
             }
           />
         )

src/pages/ValidatorOnboarding/Overview/Overview.tsx

@@ -12,7 +12,12 @@ const Overview = () => {
       imgHeight="250%"
       rightImageSrc="./background-images/sync-status-background.png"
     >
-      <YStack space={'$5'} marginTop={'2rem'} marginBottom={'2rem'} width="100%">
+      <YStack
+        space={'$5'}
+        marginTop={'2rem'}
+        marginBottom={'2rem'}
+        width="100%"
+      >
         <Stack marginBottom={'$2'}>
           <Text size={27} weight={'semibold'}>
             Overview

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 (

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 (
     <Stack

src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/ConsensusSelection.tsx

@@ -19,12 +19,9 @@ const clientIcons = {
 
 const ConsensusSelection = () => {
   const windowSize = useWindowSize()
-  const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient) as
+  const selectedClient = useSelector(
-    | 'Nethermind'
+    (state: RootState) => state.execClient.selectedClient,
-    | 'Besu'
+  ) as 'Nethermind' | 'Besu' | 'Geth' | 'Erigon' | 'Nimbus'
-    | 'Geth'
-    | 'Erigon'
-    | 'Nimbus'
 
   const clients = [
     {

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx

@@ -36,7 +36,11 @@ const ActivationValidatorSetup = () => {
             </Text>
           </Stack>
           <YStack space={'$3'} marginTop={'25px'}>
-            <XStack space={'$3'} width="100%" flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'}>
+            <XStack
+              space={'$3'}
+              width="100%"
+              flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'}
+            >
               <ActivationCard
                 text="Execution Sync Status"
                 isGaugeIncluded={true}
@@ -52,9 +56,16 @@ const ActivationValidatorSetup = () => {
                 gaugeTotal={172.503}
               />
             </XStack>
-            <XStack space={'$3'} flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'} width="100%">
+            <XStack
+              space={'$3'}
+              flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'}
+              width="100%"
+            >
               <ActivationCard text="Validator Queue" value="92603" />
-              <ActivationCard text="Estimated Activation Time" value="32 Days" />
+              <ActivationCard
+                text="Estimated Activation Time"
+                value="32 Days"
+              />
               <ActivationCard text="Current APR" value="4.40%" isLast={true} />
             </XStack>
           </YStack>

src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx

@@ -18,7 +18,11 @@ const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
       {cards.map(card => (
         <div
           key={card.name}
-          className={selectedOS === card.name ? styles['os-card-selected'] : styles['os-card']}
+          className={
+            selectedOS === card.name
+              ? styles['os-card-selected']
+              : styles['os-card']
+          }
           onClick={() => handleOSCardClick(card.name)}
         >
           <OSCard key={card.name} icon={card.icon} name={card.name} />

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 = () => {
         </Text>
         <Stack>
           <Markdown children={DOCUMENTATIONS[selectedClient].general} />
-          <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
+          <OSCards
+            selectedOS={selectedOS}
+            handleOSCardClick={handleOSCardClick}
+          />
           <Stack onPress={() => copyCommands()}>
-            <Markdown children={DOCUMENTATIONS[selectedClient].documentation[selectedOS]} />
+            <Markdown
+              children={
+                DOCUMENTATIONS[selectedClient].documentation[selectedOS]
+              }
+            />
           </Stack>
         </Stack>
       </YStack>