diff --git a/src/pages/Dashboard/SyncStatusCards/ConsensusClientCard.tsx b/src/pages/Dashboard/SyncStatusCards/ConsensusClientCard.tsx
new file mode 100644
index 00000000..e61968e2
--- /dev/null
+++ b/src/pages/Dashboard/SyncStatusCards/ConsensusClientCard.tsx
@@ -0,0 +1,63 @@
+import { Separator, Stack, XStack, YStack } from 'tamagui'
+import { Shadow, Text } from '@status-im/components'
+import { SwapIcon } from '@status-im/icons'
+import { CSSProperties } from 'react'
+
+import { formatNumberWithComa } from '../../../utilities'
+import IconText from '../../../components/General/IconText'
+import Icon from '../../../components/General/Icon'
+import StandardGauge from '../../../components/Charts/StandardGauge'
+
+type ConsensusCardProps = {
+ title: string
+ value: number
+ total: number
+ isTop?: boolean
+}
+const data = [
+ {
+ id: 'storage',
+ label: 'Used',
+ value: 132156,
+ color: '#ff6161',
+ },
+ {
+ id: 'storage',
+ label: 'Free',
+ value: 200000,
+ color: '#E7EAEE',
+ },
+]
+const ConsensusCard = ({ title, value, total, isTop }: ConsensusCardProps) => {
+ const style: CSSProperties = {}
+
+ if (isTop === true) {
+ style.borderTopLeftRadius = '16px'
+ style.borderTopRightRadius = '16px'
+ } else if (isTop === false) {
+ style.borderBottomLeftRadius = '16px'
+ style.borderBottomRightRadius = '16px'
+ }
+
+ return (
+
+
+
+
+ {title}
+
+
+
+
+
+ }>Syncing
+
+ {formatNumberWithComa(value)} / {formatNumberWithComa(total)}
+
+
+
+
+ )
+}
+
+export default ConsensusCard
diff --git a/src/pages/Dashboard/SyncStatusCards/SyncCardContent.tsx b/src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.tsx
similarity index 92%
rename from src/pages/Dashboard/SyncStatusCards/SyncCardContent.tsx
rename to src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.tsx
index 04c11cf9..b2819e99 100644
--- a/src/pages/Dashboard/SyncStatusCards/SyncCardContent.tsx
+++ b/src/pages/Dashboard/SyncStatusCards/ExecutionClientCard.tsx
@@ -8,7 +8,7 @@ import IconText from '../../../components/General/IconText'
import Icon from '../../../components/General/Icon'
import StandardGauge from '../../../components/Charts/StandardGauge'
-type SyncCardContentProps = {
+type ExecutionClientCardProps = {
title: string
value: number
total: number
@@ -28,7 +28,7 @@ const data = [
color: '#E7EAEE',
},
]
-const SyncCardContent = ({ title, value, total, isTop }: SyncCardContentProps) => {
+const ExecutionClientCard = ({ title, value, total, isTop }: ExecutionClientCardProps) => {
const style: CSSProperties = {}
if (isTop === true) {
@@ -70,4 +70,4 @@ const SyncCardContent = ({ title, value, total, isTop }: SyncCardContentProps) =
)
}
-export default SyncCardContent
+export default ExecutionClientCard
diff --git a/src/pages/Dashboard/SyncStatusCards/SyncCardContent.stories.ts b/src/pages/Dashboard/SyncStatusCards/SyncCardContent.stories.ts
index 4fc26b5d..045d2054 100644
--- a/src/pages/Dashboard/SyncStatusCards/SyncCardContent.stories.ts
+++ b/src/pages/Dashboard/SyncStatusCards/SyncCardContent.stories.ts
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/react'
-import SyncCardContent from './SyncCardContent'
+import SyncCardContent from './ExecutionClientCard'
const meta = {
title: 'Dashboard/SyncCardContent',
diff --git a/src/pages/Dashboard/SyncStatusCards/SyncStatusCard.tsx b/src/pages/Dashboard/SyncStatusCards/SyncStatusCard.tsx
index 7cb2efa5..72db87da 100644
--- a/src/pages/Dashboard/SyncStatusCards/SyncStatusCard.tsx
+++ b/src/pages/Dashboard/SyncStatusCards/SyncStatusCard.tsx
@@ -1,8 +1,9 @@
import { Separator, Stack, YStack } from 'tamagui'
import { Text } from '@status-im/components'
-import SyncCardContent from './SyncCardContent'
import DashboardCardWrapper from '../DashboardCardWrapper'
+import ExecutionClientCard from './ExecutionClientCard'
+import ConsensusCard from './ConsensusClientCard'
const SyncStatusCard = () => {
return (
@@ -14,9 +15,9 @@ const SyncStatusCard = () => {
-
+
-
+