From 79ab1f893d66199f9b33aab3113b6e4e22f4e0c2 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 13 Mar 2024 23:58:47 +0200
Subject: [PATCH] feat(active validator card): create active validators card

---
 .../ActiveValidators/ActiveValidators.tsx     | 44 +++++++++++++++++++
 src/pages/Dashboard/DashboardContent.tsx      |  7 +--
 2 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx

diff --git a/src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx b/src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx
new file mode 100644
index 00000000..dc4f4186
--- /dev/null
+++ b/src/pages/Dashboard/ActiveValidators/ActiveValidators.tsx
@@ -0,0 +1,44 @@
+import { Text } from '@status-im/components'
+import { Separator, Stack, XStack, YStack } from 'tamagui'
+import DashboardCardWrapper from '../DashboardCardWrapper'
+
+const ActiveValidators = () => {
+  return (
+    <DashboardCardWrapper padding="0" height="156px" minWidth="200px">
+      <img
+        src="/images/validators-count.png"
+        alt=""
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          width: '100px',
+          height: '100px',
+        }}
+      />
+
+      <YStack height="100%">
+        <Stack
+          style={{ minHeight: '90px', padding: '12px 16px', flex: 1 }}
+          justifyContent="space-between"
+        >
+          <Text size={19} weight={'semibold'}>
+            Active Validators
+          </Text>
+
+          <Text size={27} weight={'semibold'}>
+            6
+          </Text>
+        </Stack>
+        <Separator borderColor={'#e3e3e3'} />
+        <XStack style={{ padding: '12px 16px' }}>
+          <Text size={13} weight={'semibold'} color="#09101C">
+            Manage Validator
+          </Text>
+        </XStack>
+      </YStack>
+    </DashboardCardWrapper>
+  )
+}
+
+export default ActiveValidators
diff --git a/src/pages/Dashboard/DashboardContent.tsx b/src/pages/Dashboard/DashboardContent.tsx
index 725abcf7..862a8cf2 100644
--- a/src/pages/Dashboard/DashboardContent.tsx
+++ b/src/pages/Dashboard/DashboardContent.tsx
@@ -13,6 +13,7 @@ import NetworkCard from './NetworkCard/NetworkCard'
 import SyncStatusCards from './SyncStatusCards/SyncStatusCards'
 import MemoryCard from './MemoryCard/MemoryCard'
 import { useWindowSize } from '../../hooks/useWindowSize'
+import ActiveValidators from './ActiveValidators/ActiveValidators'
 
 const DashboardContent = () => {
   const { width } = useWindowSize()
@@ -40,10 +41,10 @@ const DashboardContent = () => {
           width: '100%',
         }}
       >
-        <SyncStatusCards />
-        <AddCardsContainer cardsAmount={2} />
-
         <BalanceChartCard />
+        <SyncStatusCards />
+        {/* <AddCardsContainer cardsAmount={2} /> */}
+        <ActiveValidators></ActiveValidators>
       </Stack>
       <BasicInfoCards />