Merge branch 'hn.validator-onboarding' of https://github.com/nimbus-gui/nimbus-gui into hn.validator-onboarding

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>
   )

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: {},
+}

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>
   )

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',
+  },
+}

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