From 0a2344e6ee6c83a879c6abc52ecb24d2ac3b2b76 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 14 Sep 2023 13:30:54 +0300
Subject: [PATCH 1/2] feat: add wrapper to sync card

---
 .../Dashboard/SyncStatusCard/SyncStatusCard.tsx     | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx b/src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx
index 01b86c5d..4dc6b956 100644
--- a/src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx
+++ b/src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx
@@ -1,14 +1,17 @@
 import { YStack } from 'tamagui'
 
 import SyncCardContent from './SyncCardContent'
+import DashboardCardWrapper from '../DashboardCardWrapper'
 
 const SyncStatusCard = () => {
   return (
-    <YStack space={'$2'}>
-      Sync Status
-      <SyncCardContent />
-      <SyncCardContent />
-    </YStack>
+    <DashboardCardWrapper padding="0">
+      <YStack space={'$2'}>
+        Sync Status
+        <SyncCardContent />
+        <SyncCardContent />
+      </YStack>
+    </DashboardCardWrapper>
   )
 }
 

From 244c024ef6d8635fcf05201c8416b1fdf8a9899e Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 14 Sep 2023 14:01:56 +0300
Subject: [PATCH 2/2] feat: add real props for sync card content

---
 .../Dashboard/SyncStatusCard/SyncCardContent.tsx  | 15 +++++++++++++--
 .../Dashboard/SyncStatusCard/SyncStatusCard.tsx   |  4 ++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/pages/Dashboard/SyncStatusCard/SyncCardContent.tsx b/src/pages/Dashboard/SyncStatusCard/SyncCardContent.tsx
index bd5deeae..37f1cfed 100644
--- a/src/pages/Dashboard/SyncStatusCard/SyncCardContent.tsx
+++ b/src/pages/Dashboard/SyncStatusCard/SyncCardContent.tsx
@@ -1,7 +1,18 @@
 import { YStack } from 'tamagui'
+import { formatNumberForGauge } from '../../../utilities'
 
-const SyncCardContent = () => {
-  return <YStack>Client</YStack>
+type SyncCardContentProps = {
+  title: string
+  value: number
+  total: number
+}
+
+const SyncCardContent = ({ title, value, total }: SyncCardContentProps) => {
+  return (
+    <YStack>
+      {title} {formatNumberForGauge(value)} / {formatNumberForGauge(total)}
+    </YStack>
+  )
 }
 
 export default SyncCardContent
diff --git a/src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx b/src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx
index 4dc6b956..143f6dbb 100644
--- a/src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx
+++ b/src/pages/Dashboard/SyncStatusCard/SyncStatusCard.tsx
@@ -8,8 +8,8 @@ const SyncStatusCard = () => {
     <DashboardCardWrapper padding="0">
       <YStack space={'$2'}>
         Sync Status
-        <SyncCardContent />
-        <SyncCardContent />
+        <SyncCardContent title={'Execution Client'} value={123.424} total={170.0} />
+        <SyncCardContent title={'Consensus Client'} value={123.424} total={170.0} />
       </YStack>
     </DashboardCardWrapper>
   )