From cf6aa02f8d227e951b458a90108aca671910494d Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 27 Sep 2023 18:11:00 +0300
Subject: [PATCH] feat: add components and state to the client setup

---
 .../ClientSetup/ClientSetup.tsx               | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx b/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx
index aa69ed88..c5ad87c4 100644
--- a/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx
+++ b/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx
@@ -1,13 +1,34 @@
+import { useState } from 'react'
 import { Separator, YStack } from 'tamagui'
+import { Text } from '@status-im/components'
 
-import SetupRow from './SetupRow'
 import WithdrawalAddress from './WithdrawalAddress'
 import LinkWithArrow from '../../../components/General/LinkWithArrow'
+import ValidatorsMenuWithPrice from '../../../components/General/ValidatorsMenuWithPrice'
+import { CLIENT_SETUP_SUBTITLE } from '../../../constants'
 
 const ClientSetup = () => {
+  const [validatorCount, setValidatorCount] = useState(0)
+
+  const changeValidatorCountHandler = (value: string) => {
+    const numberValue = Number(value)
+    if (!isNaN(numberValue)) {
+      setValidatorCount(numberValue)
+    }
+  }
+
   return (
-    <YStack space={'$8'} padding={'26px'} width={'100%'} minHeight={'65vh'}>
-      <SetupRow title={'Setup up Validators'} />
+    <YStack space={'$6'} padding={'26px'} width={'100%'} minHeight={'65vh'}>
+      <YStack space={'$4'}>
+        <Text size={19} weight={'semibold'}>
+          Setup up Validators
+        </Text>
+        <ValidatorsMenuWithPrice
+          validatorCount={validatorCount}
+          changeValidatorCountHandler={changeValidatorCountHandler}
+          label={CLIENT_SETUP_SUBTITLE}
+        />
+      </YStack>
       <Separator borderColor={'#F0F2F5'} />
       <WithdrawalAddress title={'Withdrawal address'} />
       <LinkWithArrow
@@ -19,4 +40,5 @@ const ClientSetup = () => {
     </YStack>
   )
 }
+
 export default ClientSetup