From 584554a1d59cbe04b494b4577294963d4e2d570f Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 15 Aug 2023 10:33:02 +0300
Subject: [PATCH] Implement cards

---
 public/icons/token.svg                        | 10 +++
 public/icons/vector.svg                       |  3 +
 src/components/SyncStatusCardConsensus.tsx    | 76 ++++++++++++++++++
 src/components/SyncStatusCardExecution.tsx    | 77 +++++++++++++++++++
 .../DeviceHealthCheck/DeviceSyncStatus.tsx    |  4 +
 5 files changed, 170 insertions(+)
 create mode 100644 public/icons/token.svg
 create mode 100644 public/icons/vector.svg
 create mode 100644 src/components/SyncStatusCardConsensus.tsx
 create mode 100644 src/components/SyncStatusCardExecution.tsx

diff --git a/public/icons/token.svg b/public/icons/token.svg
new file mode 100644
index 00000000..cf171b59
--- /dev/null
+++ b/public/icons/token.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="16/token" clip-path="url(#clip0_101_177067)">
+<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M2.0999 8.00002C2.0999 4.74154 4.74142 2.10002 7.9999 2.10002C11.2584 2.10002 13.8999 4.74154 13.8999 8.00002C13.8999 11.2585 11.2584 13.9 7.9999 13.9C4.74142 13.9 2.0999 11.2585 2.0999 8.00002ZM7.9999 0.900024C4.07868 0.900024 0.899902 4.0788 0.899902 8.00002C0.899902 11.9212 4.07868 15.1 7.9999 15.1C11.9211 15.1 15.0999 11.9212 15.0999 8.00002C15.0999 4.0788 11.9211 0.900024 7.9999 0.900024ZM7.31034 5.76572C7.64449 5.59963 8.00358 5.55901 8.34841 5.64132C8.69532 5.72413 9.03172 5.93274 9.30682 6.26287L10.2287 5.49464C9.80453 4.98565 9.25002 4.62282 8.62702 4.47411L8.59999 4.46781V3.50007H7.39999V4.46782C7.18648 4.5165 6.97733 4.59119 6.77622 4.69115C6.19937 4.97788 5.7242 5.45404 5.3971 6.04147C5.07015 6.62866 4.89999 7.30995 4.89999 8.00008C4.89999 8.6902 5.07015 9.37149 5.3971 9.95868C5.7242 10.5461 6.19937 11.0223 6.77622 11.309C6.97725 11.4089 7.18632 11.4836 7.39975 11.5323V12.5001H8.59975V11.5324C8.60884 11.5303 8.61793 11.5282 8.62702 11.526C9.25002 11.3773 9.80453 11.0145 10.2287 10.5055L9.30682 9.73728C9.03172 10.0674 8.69532 10.276 8.34841 10.3588C8.00358 10.4411 7.64449 10.4005 7.31034 10.2344C6.97357 10.067 6.66784 9.77415 6.44553 9.3749C6.22308 8.97539 6.09999 8.49664 6.09999 8.00008C6.09999 7.50351 6.22308 7.02476 6.44553 6.62525C6.66784 6.226 6.97357 5.93312 7.31034 5.76572Z" fill="#647084"/>
+</g>
+<defs>
+<clipPath id="clip0_101_177067">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icons/vector.svg b/public/icons/vector.svg
new file mode 100644
index 00000000..fb59ff83
--- /dev/null
+++ b/public/icons/vector.svg
@@ -0,0 +1,3 @@
+<svg width="93" height="46" viewBox="0 0 93 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M69.75 23.0001V46C56.9658 46 50.375 44.8503 42.625 34.5002C34.875 24.1502 29.8681 22.9999 23.25 22.9999V46H0V22.9999H23.25V9.06453e-09C35.1786 -1.88392e-08 42.625 1.53334 50.375 11.5001C58.125 21.4668 62.2115 23.0001 69.75 23.0001V0H93V23.0001H69.75Z" fill="#FF6161"/>
+</svg>
diff --git a/src/components/SyncStatusCardConsensus.tsx b/src/components/SyncStatusCardConsensus.tsx
new file mode 100644
index 00000000..056ae9bf
--- /dev/null
+++ b/src/components/SyncStatusCardConsensus.tsx
@@ -0,0 +1,76 @@
+import IconText from './IconText'
+import { Separator, XStack, YStack } from 'tamagui'
+import StandardGauge from './StandardGauge'
+import { Shadow, Text } from '@status-im/components'
+import Icon from './Icon'
+interface DeviceStorageHealthProps {
+  synced: number
+  total: number
+}
+const SyncStatusCardConsensus: React.FC<DeviceStorageHealthProps> = ({ synced, total }) => {
+  const message = synced === total ? 'Synced all data' : 'Syncing'
+
+  const data = () => {
+    return [
+      {
+        id: 'storage',
+        label: 'Used',
+        value: synced,
+        color: '#E95460',
+      },
+      {
+        id: 'storage',
+        label: 'Free',
+        value: total - synced,
+        color: '#E7EAEE',
+      },
+    ]
+  }
+
+  return (
+    <Shadow
+      variant="$2"
+      style={{
+        width: '632px',
+        height: '155px',
+        borderRadius: '16px',
+      }}
+    >
+      <YStack>
+        <XStack
+          justifyContent="space-between"
+          style={{
+            padding: '8px 16px',
+            position: 'relative',
+          }}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              right: '44px',
+              height: '181px',
+            }}
+          >
+            <StandardGauge data={data()} />
+          </div>
+          <YStack space={'$3'}>
+            <Text size={13} color="#09101C" weight={'semibold'}>
+              Execution Client
+            </Text>
+            <Icon src="/icons/vector.svg" height={46} width={93}></Icon>
+          </YStack>
+        </XStack>
+
+        <Separator borderColor={'#e3e3e3'} />
+
+        <XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
+          <IconText icon="/icons/token.svg">{message}</IconText>
+
+          <Text size={13}>123,424 / 170,000</Text>
+        </XStack>
+      </YStack>
+    </Shadow>
+  )
+}
+
+export default SyncStatusCardConsensus
diff --git a/src/components/SyncStatusCardExecution.tsx b/src/components/SyncStatusCardExecution.tsx
new file mode 100644
index 00000000..aa5eea80
--- /dev/null
+++ b/src/components/SyncStatusCardExecution.tsx
@@ -0,0 +1,77 @@
+import IconText from './IconText'
+import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+import StandardGauge from './StandardGauge'
+import { Shadow, Text } from '@status-im/components'
+interface DeviceStorageHealthProps {
+  synced: number
+  total: number
+}
+const SyncStatusCardExecution: React.FC<DeviceStorageHealthProps> = ({ synced, total }) => {
+  const message = synced === total ? 'Synced all data' : 'Syncing'
+
+  const data = () => {
+    return [
+      {
+        id: 'storage',
+        label: 'Used',
+        value: synced,
+        color: '#E95460',
+      },
+      {
+        id: 'storage',
+        label: 'Free',
+        value: total - synced,
+        color: '#E7EAEE',
+      },
+    ]
+  }
+
+  return (
+    <Shadow
+      variant="$2"
+      style={{
+        width: '632px',
+        height: '155px',
+        borderRadius: '16px',
+      }}
+    >
+      <YStack>
+        <XStack
+          justifyContent="space-between"
+          style={{
+            padding: '8px 16px',
+            position: 'relative',
+          }}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              right: '44px',
+              height: '181px',
+            }}
+          >
+            <StandardGauge data={data()} />
+          </div>
+          <YStack space={'$3'}>
+            <Text size={13} color="#09101C" weight={'semibold'}>
+              Execution Client
+            </Text>
+            <Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
+              Geth
+            </Paragraph>
+          </YStack>
+        </XStack>
+
+        <Separator borderColor={'#e3e3e3'} />
+
+        <XStack space={'$2'} style={{ padding: '10px 16px 10px 16px' }}>
+          <IconText icon="/icons/token.svg">{message}</IconText>
+
+          <Text size={13}>123,424 / 170,000</Text>
+        </XStack>
+      </YStack>
+    </Shadow>
+  )
+}
+
+export default SyncStatusCardExecution
diff --git a/src/pages/DeviceHealthCheck/DeviceSyncStatus.tsx b/src/pages/DeviceHealthCheck/DeviceSyncStatus.tsx
index 7b3fbc9b..e639b2b5 100644
--- a/src/pages/DeviceHealthCheck/DeviceSyncStatus.tsx
+++ b/src/pages/DeviceHealthCheck/DeviceSyncStatus.tsx
@@ -3,6 +3,8 @@ import LayoutComponent from '../../components/LayoutComponent'
 import NimbusLogo from '../../components/NimbusLogo'
 import Titles from '../../components/Titles'
 import { Button } from '@status-im/components'
+import SyncStatusCardExecution from '../../components/SyncStatusCardExecution'
+import SyncStatusCardConsensus from '../../components/SyncStatusCardConsensus'
 
 const DeviceSyncStatus = () => {
   return (
@@ -34,6 +36,8 @@ const DeviceSyncStatusContent = () => {
           isAdvancedSettings={true}
         />
 
+        <SyncStatusCardExecution synced={30} total={50} />
+        <SyncStatusCardConsensus synced={30} total={50} />
         <Stack style={{ marginTop: '1rem' }}>
           <Button>Continue</Button>
         </Stack>