From 90a26a2d8537be4829f06d8f5d788741aa61013c Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 30 Aug 2023 11:40:10 +0300
Subject: [PATCH] Rows for client setup

---
 .../ClientSetup/SetupRow.tsx                  | 41 +++++++++++++++++++
 .../ClientSetup/WithdrawalAddress.tsx         | 33 +++++++++++++++
 2 files changed, 74 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx
 create mode 100644 src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx

diff --git a/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx
new file mode 100644
index 00000000..f2f89663
--- /dev/null
+++ b/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
diff --git a/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx b/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx
new file mode 100644
index 00000000..ca1e7430
--- /dev/null
+++ b/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