From 1835c4e1008e70717883c737c1ab3aecdb00796e Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 30 Aug 2023 11:39:51 +0300
Subject: [PATCH] Create ClientSetup

---
 .../ClientSetup/ClientSetup.tsx               | 27 +++++++++++++++++++
 .../ValidatorOnboarding.tsx                   |  8 +++---
 2 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx

diff --git a/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx b/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx
new file mode 100644
index 00000000..ba7ef61e
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx
@@ -0,0 +1,27 @@
+import { Separator, Stack, XStack, YStack } from 'tamagui'
+import SetupRow from './SetupRow'
+import WithdrawalAddress from './WithdrawalAddress'
+import { Text } from '@status-im/components'
+import { ArrowLeftIcon  } from '@status-im/icons'
+import { Link } from 'react-router-dom'
+
+const ClientSetup = () => {
+  return (
+    <YStack padding={'26px'} width={'100%'} space={'$8'}>
+      <SetupRow title={'Setup up Validators'} />
+      <Separator borderColor={'#F0F2F5'} />
+      <WithdrawalAddress title={'Withdrawal address'} />
+      <Stack style={{ maxWidth: 'fit-content', marginTop: '50px' }}>
+        <Text size={15}>
+          <XStack space={'$1'} style={{ alignItems: 'center' }}>
+            <ArrowLeftIcon size={16} color="#2A4CF4" />
+            <Link style={{ color: '#2A4CF4' }} to={'/'}>
+              Edit Validators
+            </Link>
+          </XStack>
+        </Text>
+      </Stack>
+    </YStack>
+  )
+}
+export default ClientSetup
diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 9c7f1eca..295b278b 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -11,6 +11,7 @@ import ValidatorBoxWrapper from './ValidatorBoxWrapper/ValidatorBoxWrapper'
 import { Button } from '@status-im/components'
 import { useNavigate } from 'react-router-dom'
 import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall'
+import ClientSetup from './ClientSetup/ClientSetup'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
@@ -51,9 +52,10 @@ const ValidatorOnboarding = () => {
         <ValidatorBoxWrapper>
           {activeStep === 0 && <Overview />}
           {activeStep === 1 && <Advicsories />}
-          {activeStep === 2 && <ValidatorSetupInstall />}
-          {activeStep === 3 && <KeyGeneration isConfirmPhraseStage={isConfirmPhraseStage} />}
-          {activeStep === 4 && <Activation />}
+          {activeStep === 2 && <ClientSetup />}
+          {activeStep === 3 && <ValidatorSetupInstall />}
+          {activeStep === 4 && <KeyGeneration isConfirmPhraseStage={isConfirmPhraseStage} />}
+          {activeStep === 5 && <Activation />}
         </ValidatorBoxWrapper>
         <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px', zIndex: 999 }}>
           <Button onPress={continueHandler}>