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

src/pages/ValidatorOnboarding/Activation.tsx

@@ -0,0 +1,23 @@
+import { Button, Shadow } from '@status-im/components'
+import { Stack } from 'tamagui'
+
+const Activation = () => {
+  return (
+    <>
+      <Shadow
+        variant="$1"
+        style={{
+          borderRadius: '16px',
+          border: 'none',
+          backgroundColor: '#fff',
+          padding: '16px 32px',
+        }}
+      ></Shadow>
+      <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
+        <Button>Continue</Button>
+      </Stack>
+    </>
+  )
+}
+
+export default Activation

src/pages/ValidatorOnboarding/Advicsories.tsx

@@ -0,0 +1,23 @@
+import { Button, Shadow } from '@status-im/components'
+import { Stack } from 'tamagui'
+
+const Advicsories = () => {
+  return (
+    <>
+      <Shadow
+        variant="$1"
+        style={{
+          borderRadius: '16px',
+          border: 'none',
+          backgroundColor: '#fff',
+          padding: '16px 32px',
+        }}
+      ></Shadow>
+      <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
+        <Button>Continue</Button>
+      </Stack>
+    </>
+  )
+}
+
+export default Advicsories

src/pages/ValidatorOnboarding/KeyGeneration.stories.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import KeyGeneration from './KeyGeneration'
+
+const meta = {
+  title: 'ValidatorOnboarding/KeyGeneration',
+  component: KeyGeneration,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof KeyGeneration>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Page: Story = {
+  args: {},
+}

src/pages/ValidatorOnboarding/KeyGeneration.tsx

@@ -0,0 +1,23 @@
+import { Button, Shadow } from '@status-im/components'
+import { Stack } from 'tamagui'
+
+const KeyGeneration = () => {
+  return (
+    <>
+      <Shadow
+        variant="$1"
+        style={{
+          borderRadius: '16px',
+          border: 'none',
+          backgroundColor: '#fff',
+          padding: '16px 32px',
+        }}
+      ></Shadow>
+      <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
+        <Button>Continue</Button>
+      </Stack>
+    </>
+  )
+}
+
+export default KeyGeneration

src/pages/ValidatorOnboarding/Overview.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+import Overview from './Overview'
+
+const meta = {
+  title: 'ValidatorOnboarding/Overview',
+  component: Overview,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+  decorators: [withRouter],
+} satisfies Meta<typeof Overview>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Page: Story = {
+  args: {},
+}

src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx

@@ -4,6 +4,10 @@ import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradie
 import Titles from '../../components/General/Titles'
 import { useState } from 'react'
 import Overview from './Overview'
+import KeyGeneration from './KeyGeneration'
+import Advicsories from './Advicsories'
+import ValidatorSetup from './ValidatorSetup'
+import Activation from './Activation'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
@@ -30,6 +34,10 @@ const ValidatorOnboarding = () => {
         />
         <FormStepper activeStep={activeStep} changeActiveStep={changeActiveStep} />
         {activeStep === 0 && <Overview />}
+        {activeStep === 1 && <Advicsories />}
+        {activeStep === 2 && <ValidatorSetup />}
+        {activeStep === 3 && <KeyGeneration />}
+        {activeStep === 4 && <Activation />}
       </YStack>
     </PageWrapperGradient>
   )

src/pages/ValidatorOnboarding/ValidatorSetup.tsx

@@ -0,0 +1,23 @@
+import { Button, Shadow } from '@status-im/components'
+import { Stack } from 'tamagui'
+
+const ValidatorSetup = () => {
+  return (
+    <>
+      <Shadow
+        variant="$1"
+        style={{
+          borderRadius: '16px',
+          border: 'none',
+          backgroundColor: '#fff',
+          padding: '16px 32px',
+        }}
+      ></Shadow>
+      <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
+        <Button>Continue</Button>
+      </Stack>
+    </>
+  )
+}
+
+export default ValidatorSetup