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

src/pages/ValidatorOnboarding/FormStepper/FormStepper.css

@@ -32,3 +32,14 @@
   border-radius: 50%;
   transform: translate(-50%, -50%);
 }
+
+.custom-step::after {
+  content: attr(data-subtitle);
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 30%; 
+  font-size: 12px;
+  color: #A2A9B0; 
+  background: transparent;
+  border: none;
+}

src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx

@@ -13,37 +13,47 @@ const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => {
       nonLinear={true}
       styleConfig={stepStyle}
       connectorStyleConfig={customConnectorStyle}
-      style={{ fontSize: '14px', zIndex: 999, width: '100%', padding: 0, marginBottom: '1rem' }}
+      style={{ fontSize: '14px', zIndex: 999, width: '100%', padding: 0, marginBottom: '2rem' }}
     >
       <Step
-        className="custom-step"
         label={'Overview'}
+        className="custom-step"
         onClick={() => changeActiveStep(0)}
         completed={activeStep >= 0}
+        data-subtitle="Get Started"
+        data-step="Overview"
       />
       <Step
-        className="custom-step"
         label="Advicsories"
+        className="custom-step"
         onClick={() => changeActiveStep(1)}
         completed={activeStep > 0}
+        data-subtitle="Understand your Duties"
+        data-step="Advicsories"
       />
       <Step
         label="Validator Setup"
         className="custom-step"
         onClick={() => changeActiveStep(2)}
         completed={activeStep > 1}
+        data-subtitle="Clients, Nodes & Validators"
+        data-step="Validator Setup"
       />
       <Step
         label="Key Generation"
         className="custom-step"
         onClick={() => changeActiveStep(3)}
         completed={activeStep > 2}
+        data-subtitle="Secure your Keypairs"
+        data-step="Key Generation"
       />
       <Step
         label="Activation"
         className="custom-step"
         onClick={() => changeActiveStep(4)}
         completed={activeStep > 3}
+        data-subtitle="Complete Setup"
+        data-step="Activation"
       />
     </Stepper>
   )

src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx

@@ -1,5 +1,5 @@
 import { XStack } from 'tamagui'
-import SyncCard from './SyncCard'
+import KeyGenerationSyncCard from './KeyGenerationSyncCard'
 import KeyGenerationTitle from './KeyGenerationTitle'
 
 const KeyGenerationHeader = () => {
@@ -7,8 +7,18 @@ const KeyGenerationHeader = () => {
     <XStack style={{ width: '100%', alignItems: 'center', justifyContent: 'space-between' }}>
       <KeyGenerationTitle />
       <XStack space={'$2'}>
-        <SyncCard synced={123.524} total={172.503} title="Execution Sync Status" />
-        <SyncCard synced={123.524} total={172.503} title="Consensus Sync Status" />
+        <KeyGenerationSyncCard
+          synced={123.524}
+          total={172.503}
+          title="Execution Sync Status"
+          color="#2a4af5"
+        />
+        <KeyGenerationSyncCard
+          synced={123.524}
+          total={172.503}
+          title="Consensus Sync Status"
+          color="#ff6161"
+        />
       </XStack>
     </XStack>
   )

src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.stories.ts

@@ -1,16 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import SyncCard from './SyncCard'
+import KeyGenerationSyncCard from './KeyGenerationSyncCard'
 
 const meta = {
-  title: 'ValidatorOnboarding/SyncCard',
-  component: SyncCard,
+  title: 'ValidatorOnboarding/KeyGenerationSyncCard',
+  component: KeyGenerationSyncCard,
   parameters: {
     layout: 'centered',
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof SyncCard>
+} satisfies Meta<typeof KeyGenerationSyncCard>
 
 export default meta
 type Story = StoryObj<typeof meta>
@@ -20,5 +20,6 @@ export const Page: Story = {
     synced: 123.524,
     total: 172.503,
     title: 'Execution Sync Status',
+    color: '#2a4af5',
   },
 }

src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationSyncCard.tsx

@@ -3,30 +3,14 @@ import StandardGauge from '../../../components/Charts/StandardGauge'
 import { ClearIcon } from '@status-im/icons'
 import { Text } from '@status-im/components'
 
-type SyncCardProps = {
+type KeyGenerationSyncCardProps = {
   synced: number
   total: number
   title: string
+  color: 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',
-      },
-    ]
-  }
-
+const KeyGenerationSyncCard = ({ synced, total, title, color }: KeyGenerationSyncCardProps) => {
   return (
     <XStack
       space={'$2'}
@@ -39,7 +23,22 @@ const SyncCard = ({ synced, total, title }: SyncCardProps) => {
           width: '35px',
         }}
       >
-        <StandardGauge data={data()} />
+        <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'}>
@@ -49,9 +48,9 @@ const SyncCard = ({ synced, total, title }: SyncCardProps) => {
           {synced} / {total}
         </Text>
       </YStack>
-      <ClearIcon size={20} />
+      <ClearIcon size={20} color="#A1ABBD" />
     </XStack>
   )
 }
 
-export default SyncCard
+export default KeyGenerationSyncCard