From 1b748326429eb42f6d3fc1be0d177c0768e6c59d Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 24 Aug 2023 11:41:58 +0300
Subject: [PATCH 1/7] feat: create story for overview

---
 ...per.stories.tsx => FormStepper.stories.ts} |  0
 .../ValidatorOnboarding/Overview.stories.ts   | 22 +++++++++++++++++++
 2 files changed, 22 insertions(+)
 rename src/pages/ValidatorOnboarding/{FormStepper.stories.tsx => FormStepper.stories.ts} (100%)
 create mode 100644 src/pages/ValidatorOnboarding/Overview.stories.ts

diff --git a/src/pages/ValidatorOnboarding/FormStepper.stories.tsx b/src/pages/ValidatorOnboarding/FormStepper.stories.ts
similarity index 100%
rename from src/pages/ValidatorOnboarding/FormStepper.stories.tsx
rename to src/pages/ValidatorOnboarding/FormStepper.stories.ts
diff --git a/src/pages/ValidatorOnboarding/Overview.stories.ts b/src/pages/ValidatorOnboarding/Overview.stories.ts
new file mode 100644
index 00000000..5ce2f43c
--- /dev/null
+++ b/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: {},
+}

From 228d7a2932a0c7b72fde65c05e9da5545782ba7b Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 24 Aug 2023 11:53:01 +0300
Subject: [PATCH 2/7] feat: create component for key generation page

---
 .../ValidatorOnboarding/KeyGeneration.tsx     | 23 +++++++++++++++++++
 .../ValidatorOnboarding.tsx                   |  2 ++
 2 files changed, 25 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/KeyGeneration.tsx

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration.tsx
new file mode 100644
index 00000000..fe88cae0
--- /dev/null
+++ b/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
diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 9b1c3e60..98f831f6 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -4,6 +4,7 @@ import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradie
 import Titles from '../../components/General/Titles'
 import { useState } from 'react'
 import Overview from './Overview'
+import KeyGeneration from './KeyGeneration'
 
 const ValidatorOnboarding = () => {
   const [activeStep, setActiveStep] = useState(0)
@@ -30,6 +31,7 @@ const ValidatorOnboarding = () => {
         />
         <FormStepper activeStep={activeStep} changeActiveStep={changeActiveStep} />
         {activeStep === 0 && <Overview />}
+        {activeStep === 3 && <KeyGeneration />}
       </YStack>
     </PageWrapperGradient>
   )

From 1298aff2d2b2637f2e9fdd9765279f0be64df913 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 24 Aug 2023 11:55:50 +0300
Subject: [PATCH 3/7] feat: create story for key generation

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

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration.stories.ts
new file mode 100644
index 00000000..44da7606
--- /dev/null
+++ b/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: {},
+}

From 61ce9240514969aba50043f09d26c7c8dea330d0 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 24 Aug 2023 11:59:45 +0300
Subject: [PATCH 4/7] feat: create component for Advicsories

---
 src/pages/ValidatorOnboarding/Advicsories.tsx | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/Advicsories.tsx

diff --git a/src/pages/ValidatorOnboarding/Advicsories.tsx b/src/pages/ValidatorOnboarding/Advicsories.tsx
new file mode 100644
index 00000000..43d86f2b
--- /dev/null
+++ b/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

From e9385279620e9636f55d2017a9d2a60ddca0cf2c Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 24 Aug 2023 11:59:55 +0300
Subject: [PATCH 5/7] feat: create component for Activation

---
 src/pages/ValidatorOnboarding/Activation.tsx | 23 ++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/Activation.tsx

diff --git a/src/pages/ValidatorOnboarding/Activation.tsx b/src/pages/ValidatorOnboarding/Activation.tsx
new file mode 100644
index 00000000..39175d93
--- /dev/null
+++ b/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

From e319761b3f8236936c29c927621934139e5b9985 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 24 Aug 2023 12:00:55 +0300
Subject: [PATCH 6/7] feat: create component for ValidatorSetup

---
 .../ValidatorOnboarding/ValidatorSetup.tsx    | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup.tsx

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup.tsx
new file mode 100644
index 00000000..167c62b8
--- /dev/null
+++ b/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

From b8221903709c626da793318ff40207d0f5bd2ee2 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 24 Aug 2023 12:03:32 +0300
Subject: [PATCH 7/7] feat: add new steps components

---
 src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 98f831f6..f603b414 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -5,6 +5,9 @@ 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)
@@ -31,7 +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>
   )