From 41cef6ffbf7cb5c647af7b909a1147ba79f226c4 Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 30 Aug 2023 20:32:46 +0300
Subject: [PATCH] Create ConsensusSelectionCard.tsx

---
 .../ValidatorSetup/ConsensusSelectionCard.tsx | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelectionCard.tsx

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelectionCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelectionCard.tsx
new file mode 100644
index 00000000..27bdaac3
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelectionCard.tsx
@@ -0,0 +1,56 @@
+import { Stack, XStack, YStack } from 'tamagui'
+import { ClearIcon } from '@status-im/icons'
+import { Text } from '@status-im/components'
+import StandardGauge from '../../../components/Charts/StandardGauge'
+import BorderBox from '../../../components/General/BorderBox'
+import { formatNumberForGauge } from '../../../utilities'
+
+type ConsensusGaugeCardProps = {
+  synced: number
+  total: number
+  title: string
+  color: string
+}
+
+const ConsensusGaugeCard = ({ synced, total, title, color }: ConsensusGaugeCardProps) => {
+  return (
+    <BorderBox style={{ borderRadius: '10.1px', borderWidth: '0.5px' }}>
+      <XStack space={'$2'} alignItems="center">
+        <Stack
+          style={{
+            height: '35px',
+            width: '35px',
+          }}
+        >
+          <StandardGauge
+            data={[
+              {
+                id: title,
+                label: title,
+                value: synced,
+                color: color,
+              },
+              {
+                id: 'free',
+                label: 'free',
+                value: total - synced || 1,
+                color: '#E7EAEE',
+              },
+            ]}
+          />
+        </Stack>
+        <YStack>
+          <Text size={11} color="#84888e" weight={'semibold'}>
+            {title}
+          </Text>
+          <Text size={15} weight={'semibold'}>
+            {formatNumberForGauge(synced)} / {formatNumberForGauge(total)}
+          </Text>
+        </YStack>
+        <ClearIcon size={20} color="#A1ABBD" />
+      </XStack>
+    </BorderBox>
+  )
+}
+
+export default ConsensusGaugeCard