feat: add state and show only active step

src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx

@@ -3,8 +3,15 @@ import { Button, Shadow, Text } from '@status-im/components'
 import FormStepper from './FormStepper'
 import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient'
 import Titles from '../../components/General/Titles'
+import { useState } from 'react'
 
 const ValidatorOnboarding = () => {
+  const [activeStep, setActiveStep] = useState(0)
+
+  const changeActiveStep = (step: number) => {
+    setActiveStep(step)
+  }
+
   return (
     <PageWrapperGradient>
       <YStack
@@ -21,7 +28,9 @@ const ValidatorOnboarding = () => {
           titleSize={19}
           subtitle="Earn Rewards for securing the Ethereum Network"
         />
-        <FormStepper />
+        <FormStepper activeStep={activeStep} changeActiveStep={changeActiveStep} />
+        {activeStep === 0 && (
+          <>
             <Shadow
               variant="$2"
               style={{
@@ -38,8 +47,8 @@ const ValidatorOnboarding = () => {
                 </TextTam>
 
                 <Text size={27}>
-              Becoming a validator is a big responsibility with important preparation steps. Only
-              start the deposit process when youre ready.
+                  Becoming a validator is a big responsibility with important preparation steps.
+                  Only start the deposit process when youre ready.
                 </Text>
                 <Text size={15} color="#939BA1">
                   By running a validator, you'll be responsible for securing the network and receive
@@ -64,6 +73,8 @@ const ValidatorOnboarding = () => {
             <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
               <Button>Continue</Button>
             </Stack>
+          </>
+        )}
       </YStack>
     </PageWrapperGradient>
   )