From ddf7db1227ddceabc4910a9b7e61725699fea676 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Wed, 18 Oct 2023 08:43:11 +0300
Subject: [PATCH] feat: separate diamond card

---
 .../General/RightSideBar/DiamondCard.tsx      | 36 +++++++++++++++++++
 .../General/RightSideBar/RightSidebar.tsx     | 29 ++-------------
 2 files changed, 38 insertions(+), 27 deletions(-)
 create mode 100644 src/components/General/RightSideBar/DiamondCard.tsx

diff --git a/src/components/General/RightSideBar/DiamondCard.tsx b/src/components/General/RightSideBar/DiamondCard.tsx
new file mode 100644
index 00000000..da5e43c0
--- /dev/null
+++ b/src/components/General/RightSideBar/DiamondCard.tsx
@@ -0,0 +1,36 @@
+import { Text } from '@status-im/components'
+import { XStack, YStack } from 'tamagui'
+
+const DiamondCard = () => {
+  return (
+    <YStack
+      backgroundColor={'#2A4AF5'}
+      style={{
+        padding: '8px 12px',
+        borderRadius: '16px',
+        flexGrow: '1',
+        height: 'max-fit',
+      }}
+    >
+      <Text size={15} weight={'semibold'} color={'#FFF'}>
+        💎 Diamond Hands
+      </Text>
+      <Text size={27} weight={'semibold'} color={'#FFF'}>
+        $0.00
+      </Text>
+      <XStack space={'$1.5'} alignItems={'center'}>
+        <Text size={13} color={'#bac7fb'}>
+          0%
+        </Text>
+        <Text size={13} color={'#bac7fb'}>
+          .
+        </Text>
+        <Text size={13} color={'#bac7fb'}>
+          $0
+        </Text>
+      </XStack>
+    </YStack>
+  )
+}
+
+export default DiamondCard
diff --git a/src/components/General/RightSideBar/RightSidebar.tsx b/src/components/General/RightSideBar/RightSidebar.tsx
index 55b07c9b..23f12a85 100644
--- a/src/components/General/RightSideBar/RightSidebar.tsx
+++ b/src/components/General/RightSideBar/RightSidebar.tsx
@@ -7,6 +7,7 @@ import ValidatorsList from './ValidatorsList'
 import AlertsList from './AlertsList'
 import LogsList from './LogsList'
 import { getFormattedWalletAddress } from '../../../utilities'
+import DiamondCard from './DiamondCard'
 
 const RightSidebar = () => {
   const countOfValidators = useSelector((state: any) => state.rightSidebar.countOfValidators)
@@ -33,33 +34,7 @@ const RightSidebar = () => {
         </YStack>
       </XStack>
       <XStack space={'$2'} alignItems="center" justifyContent="space-between">
-        <YStack
-          backgroundColor={'#2A4AF5'}
-          style={{
-            padding: '8px 12px',
-            borderRadius: '16px',
-            flexGrow: '1',
-            height: 'max-fit',
-          }}
-        >
-          <Text size={15} weight={'semibold'} color={'#FFF'}>
-            💎 Diamond Hands
-          </Text>
-          <Text size={27} weight={'semibold'} color={'#FFF'}>
-            $0.00
-          </Text>
-          <XStack space={'$1.5'} alignItems={'center'}>
-            <Text size={13} color={'#bac7fb'}>
-              0%
-            </Text>
-            <Text size={13} color={'#bac7fb'}>
-              .
-            </Text>
-            <Text size={13} color={'#bac7fb'}>
-              $0
-            </Text>
-          </XStack>
-        </YStack>
+        <DiamondCard />
         <AddCard style={{ padding: '0 2vw' }} />
       </XStack>
       <XStack justifyContent={'space-between'} width={'85%'}>