From f63d9c5798114037f14e04aa276ae77202c3602c Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 25 Aug 2023 10:00:26 +0300
Subject: [PATCH] feat: move components to be abstract

---
 .../ValidatorOnboarding.tsx                   | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 882ed113..2d09761e 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -1,4 +1,4 @@
-import { YStack } from 'tamagui'
+import { Stack, YStack } from 'tamagui'
 import FormStepper from './FormStepper/FormStepper'
 import Titles from '../../components/General/Titles'
 import { useState } from 'react'
@@ -8,6 +8,8 @@ import Advicsories from './Advicsories/Advicsories'
 import ValidatorSetup from './ValidatorSetup/ValidatorSetup'
 import Activation from './Activation/Activation'
 import './layoutGradient.css'
+import ValidatorBoxWrapper from './ValidatorBoxWrapper/ValidatorBoxWrapper'
+import { Button } from '@status-im/components'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
@@ -33,11 +35,16 @@ const ValidatorOnboarding = () => {
           subtitle="Earn Rewards for securing the Ethereum Network"
         />
         <FormStepper activeStep={activeStep} changeActiveStep={changeActiveStep} />
-        {activeStep === 0 && <Overview />}
-        {activeStep === 1 && <Advicsories />}
-        {activeStep === 2 && <ValidatorSetup />}
-        {activeStep === 3 && <KeyGeneration />}
-        {activeStep === 4 && <Activation />}
+        <ValidatorBoxWrapper>
+          {activeStep === 0 && <Overview />}
+          {activeStep === 1 && <Advicsories />}
+          {activeStep === 2 && <ValidatorSetup />}
+          {activeStep === 3 && <KeyGeneration />}
+          {activeStep === 4 && <Activation />}
+        </ValidatorBoxWrapper>
+        <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px', zIndex: 999 }}>
+          <Button>Continue</Button>
+        </Stack>
       </YStack>
     </div>
   )