From 7b028aebf4bc8ba2f606026447962de27f8ebbd6 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 22 Sep 2023 16:48:38 +0300
Subject: [PATCH] feat: add main components of validator request

---
 .../Deposit/ValidatorRequest.tsx              | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest.tsx b/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest.tsx
index 718ea42b..03b5b85a 100644
--- a/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest.tsx
+++ b/src/pages/ValidatorOnboarding/Deposit/ValidatorRequest.tsx
@@ -1,10 +1,34 @@
-import { DividerLine, Text } from '@status-im/components'
+import { Avatar, DividerLine, Text } from '@status-im/components'
 import { XStack, YStack } from 'tamagui'
 
-const ValidatorRequest = () => {
+type ValidatorRequestProps = {
+  validator: {
+    name: string
+    address: string
+  }
+}
+
+const ValidatorRequest = ({ validator }: ValidatorRequestProps) => {
   return (
     <YStack space={'$3'} style={{ width: '100%' }}>
-      <XStack style={{ justifyContent: 'space-between' }}>
+      <XStack style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+        <XStack space={'$2'}>
+          <Avatar
+            type="user"
+            size={32}
+            src="/icons/validator-request.svg"
+            name={validator.name}
+            indicator="online"
+          />
+          <YStack>
+            <Text size={13} weight={'semibold'}>
+              Validator {validator.name}
+            </Text>
+            <Text size={13} color="#647084">
+              {validator.address}
+            </Text>
+          </YStack>
+        </XStack>
         <Text size={13} color="#647084" weight={'semibold'}>
           Keys Generated
         </Text>