From 4a5159bb66910c284a1fbb0ac28c20d95ddcdb2f Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 25 Aug 2023 11:58:23 +0300
Subject: [PATCH 1/4] feat: create sync card for key generation header

---
 .../KeyGeneration/SyncCard.tsx                | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.tsx

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.tsx
new file mode 100644
index 00000000..ce399e64
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.tsx
@@ -0,0 +1,57 @@
+import { Stack, XStack, YStack } from 'tamagui'
+import StandardGauge from '../../../components/Charts/StandardGauge'
+import { ClearIcon } from '@status-im/icons'
+import { Text } from '@status-im/components'
+
+type SyncCardProps = {
+  synced: number
+  total: number
+  title: string
+}
+
+const SyncCard = ({ synced, total, title }: SyncCardProps) => {
+  const data = () => {
+    return [
+      {
+        id: 'storage',
+        label: 'Used',
+        value: synced,
+        color: '#2a4af5',
+      },
+      {
+        id: 'storage',
+        label: 'Free',
+        value: total - synced || 1,
+        color: '#E7EAEE',
+      },
+    ]
+  }
+
+  return (
+    <XStack
+      space={'$2'}
+      alignItems="center"
+      style={{ border: '1px solid #DCE0E5', borderRadius: '0.5rem', padding: '6px 12px' }}
+    >
+      <Stack
+        style={{
+          height: '35px',
+          width: '35px',
+        }}
+      >
+        <StandardGauge data={data()} />
+      </Stack>
+      <YStack>
+        <Text size={11} color="#84888e" weight={'semibold'}>
+          {title}
+        </Text>
+        <Text size={15} weight={'semibold'}>
+          {synced} / {total}
+        </Text>
+      </YStack>
+      <ClearIcon size={20} />
+    </XStack>
+  )
+}
+
+export default SyncCard

From 1ce402491d93ec5bed1a21f799f702772c1f8bf2 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 25 Aug 2023 12:24:43 +0300
Subject: [PATCH 2/4] feat: add cards and styling

---
 .../ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx   | 2 +-
 .../KeyGeneration/KeyGenerationHeader.tsx                 | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index 69416dd2..f13885a1 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -3,7 +3,7 @@ import KeyGenerationHeader from './KeyGenerationHeader'
 
 const KeyGeneration = () => {
   return (
-    <YStack space={'$2'}>
+    <YStack space={'$2'} style={{ width: '100%' }}>
       <KeyGenerationHeader />
     </YStack>
   )
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx
index 6e15f796..c38e5226 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx
@@ -1,16 +1,16 @@
 import { Text } from '@status-im/components'
 import { XStack } from 'tamagui'
-// import SyncCard from './SyncCard'
+import SyncCard from './SyncCard'
 
 const KeyGenerationHeader = () => {
   return (
-    <XStack justifyContent="space-between">
+    <XStack style={{ width: '100%', alignItems: 'center', justifyContent: 'space-between' }}>
       <Text size={27} weight={'semibold'}>
         Key Generation
       </Text>
       <XStack space={'$2'}>
-        {/* <SyncCard synced={123.524} total={172.503} />
-        <SyncCard synced={123.524} total={172.503} /> */}
+        <SyncCard synced={123.524} total={172.503} title="Execution Sync Status" />
+        <SyncCard synced={123.524} total={172.503} title="Consensus Sync Status" />
       </XStack>
     </XStack>
   )

From c43a28191dd82c21cf236639c2ac294fd4d768b6 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 25 Aug 2023 12:40:49 +0300
Subject: [PATCH 3/4] feat: create story for key generation header

---
 .../KeyGenerationHeader.stories.ts            | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.stories.ts

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.stories.ts
new file mode 100644
index 00000000..1cf1fe8e
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.stories.ts
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import KeyGenerationHeader from './KeyGenerationHeader'
+
+const meta = {
+  title: 'ValidatorOnboarding/KeyGenerationHeader',
+  component: KeyGenerationHeader,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof KeyGenerationHeader>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Page: Story = {
+  args: {},
+}

From 9b4fb7f1bb6833f208f7ee68159eb887042a9cc6 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 25 Aug 2023 12:49:00 +0300
Subject: [PATCH 4/4] feat: create story for sync card

---
 .../KeyGeneration/SyncCard.stories.ts         | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.stories.ts

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.stories.ts
new file mode 100644
index 00000000..0cfc8197
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/SyncCard.stories.ts
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import SyncCard from './SyncCard'
+
+const meta = {
+  title: 'ValidatorOnboarding/SyncCard',
+  component: SyncCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof SyncCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Page: Story = {
+  args: {
+    synced: 123.524,
+    total: 172.503,
+    title: 'Execution Sync Status',
+  },
+}