From 92f5b84d65d9676aa484dd6c049dfdfa0ac90a6e Mon Sep 17 00:00:00 2001
From: Ivana Andersson <ivana.p.kostova@gmail.com>
Date: Tue, 26 Sep 2023 13:42:30 +0300
Subject: [PATCH] add validator list item component

---
 .../RightSideBar/ValidatorListItem.tsx        | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx

diff --git a/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx b/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx
new file mode 100644
index 00000000..2534307d
--- /dev/null
+++ b/src/pages/Dashboard/RightSideBar/ValidatorListItem.tsx
@@ -0,0 +1,44 @@
+import { XStack, YStack } from 'tamagui'
+import { Avatar, Checkbox, Text } from '@status-im/components'
+import { VerifiedIcon, ContactIcon } from '@status-im/icons'
+
+const ValidatorListItem = () => {
+  return (
+    <XStack
+      justifyContent="space-between"
+      alignItems="center"
+      style={{
+        padding: '6px 8px',
+        borderRadius: '12px',
+        backgroundColor: 'rgba(42, 74, 245, 0.05);',
+      }}
+    >
+      <XStack alignItems="center">
+        <Avatar
+          type="user"
+          size={32}
+          name="1"
+          backgroundColor="$red-50"
+          colorHash={[
+            [3, 30],
+            [2, 10],
+            [4, 0],
+            [5, 28],
+            [4, 13],
+            [4, 15],
+          ]}
+        />
+        <YStack pl="8px">
+          <Text size={13} weight={'semibold'}>
+            Validator 1
+            <VerifiedIcon size={20} /> <ContactIcon size={20} />
+          </Text>
+          <Text size={13}>Validator 1</Text>
+        </YStack>
+      </XStack>
+      <Checkbox id="" variant="outline" size={20} selected />
+    </XStack>
+  )
+}
+
+export default ValidatorListItem