Rows for client setup

src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx

@@ -0,0 +1,41 @@
+import { Stack, XStack, YStack } from 'tamagui'
+import { Input as StatusInput, Text } from '@status-im/components'
+import { AddIcon } from '@status-im/icons'
+
+type SetupRowProps = {
+  title: string
+}
+const SetupRow = ({ title }: SetupRowProps) => {
+  return (
+    <YStack space={'$4'}>
+      <Text size={27} weight={'semibold'}>
+        {title}
+      </Text>
+      <XStack justifyContent={'space-between'} width={'80%'}>
+        <Stack space={'$2'}>
+          <Text size={15} weight="regular" color={'#647084'}>
+            How many Validators would you like to run?
+          </Text>
+          <StatusInput icon={<AddIcon size={16} />} />
+        </Stack>
+        <YStack space={'$2'}>
+          <Text size={19} weight={'semibold'} color="#09101C">
+            ETH
+          </Text>
+          <Text size={27} weight={'semibold'} color="#09101C">
+            64
+          </Text>
+        </YStack>
+        <YStack space={'$2'}>
+          <Text size={19} weight={'semibold'} color="#09101C">
+            USD
+          </Text>
+          <Text size={27} weight={'semibold'} color="#09101C">
+            $4,273 USD
+          </Text>
+        </YStack>
+      </XStack>
+    </YStack>
+  )
+}
+export default SetupRow

src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx

@@ -0,0 +1,33 @@
+import { Stack, YStack } from 'tamagui'
+import { InformationBox, Input as StatusInput, Text } from '@status-im/components'
+import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
+type WithdrawalAddressProps = {
+  title: string
+}
+const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => {
+  return (
+    <YStack space={'$4'}>
+      <Text size={27} weight={'semibold'}>
+        {title}
+      </Text>
+      <YStack space={'$3'}>
+        <Text size={13} weight="regular" color={'#647084'}>
+          Ethereum Address
+        </Text>
+        <Stack width={'100%'}>
+          <StatusInput
+            placeholder={'******************'}
+            width={'100%'}
+            icon={<ClearIcon size={16} />}
+          />
+        </Stack>
+        <InformationBox
+          message="If withdrawal address is not provided at this step, your deposited funds will remain locked on the Beacon Chain until an address is provided. Unlocking will require signing a message with your withdrawal keys, generated from your mnemonic seed phrase (so keep it safe)."
+          variant="error"
+          icon={<CloseCircleIcon size={20} color="$red" />}
+        />
+      </YStack>
+    </YStack>
+  )
+}
+export default WithdrawalAddress