diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx
new file mode 100644
index 00000000..5ac92f8d
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx
@@ -0,0 +1,29 @@
+import { Stack, XStack } from 'tamagui'
+import { Button, InformationBox } from '@status-im/components'
+import { CloseCircleIcon } from '@status-im/icons'
+
+type ContinueButton = {
+ continueHandler: () => void
+ activeStep: number
+}
+
+const ContinueButton = ({ continueHandler, activeStep }: ContinueButton) => {
+ return (
+
+
+ }
+ />
+
+
+
+
+
+ )
+}
+
+export default ContinueButton
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.stories.ts
new file mode 100644
index 00000000..6fa80be9
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.stories.ts
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import AutocompleteInput from './AutocompleteInput'
+
+const meta = {
+ title: 'ValidatorOnboarding/AutocompleteInput',
+ component: AutocompleteInput,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {
+ index: 0,
+ },
+}
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.stories.ts
new file mode 100644
index 00000000..98ff0424
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.stories.ts
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ConfirmRecoveryPhrase from './ConfirmRecoveryPhrase'
+
+const meta = {
+ title: 'ValidatorOnboarding/ConfirmRecoveryPhrase',
+ component: ConfirmRecoveryPhrase,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {},
+}
diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
index 33bc225d..5a448318 100644
--- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
@@ -1,7 +1,6 @@
-import { Stack, YStack } from 'tamagui'
+import { YStack } from 'tamagui'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
-import { Button } from '@status-im/components'
import FormStepper from './FormStepper/FormStepper'
import Titles from '../../components/General/Titles'
@@ -14,13 +13,13 @@ import ConsensusSelection from './ValidatorSetup/ConsensusSelection'
import Advisories from './Advisories/Advisories'
import ValidatorSetup from './ValidatorSetup/ValidatorSetup'
import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall'
+import ContinueButton from './ContinueButton'
import './layoutGradient.css'
const ValidatorOnboarding = () => {
const [activeStep, setActiveStep] = useState(0)
const [isConfirmPhraseStage, setIsConfirmPhraseStage] = useState(false)
const [subStepValidatorSetup, setSubStepValidatorSetup] = useState(0)
-
const navigate = useNavigate()
const changeActiveStep = (step: number) => {
@@ -71,11 +70,7 @@ const ValidatorOnboarding = () => {
{activeStep === 4 && }
{activeStep === 5 && }
-
-
-
+
)
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx
index 077ffd29..ebed5d68 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx
@@ -1,22 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { action } from '@storybook/addon-actions';
-
-// This is just a mock action for demonstration.
-const myMockAction = () => ({ type: 'MY_ACTION_TYPE', payload: {} });
-
-export const Default: Story = (args) => {
- const dispatch = useDispatch();
-
- // Dispatch an action when the component mounts, for example.
- useEffect(() => {
- dispatch(myMockAction());
- }, [dispatch]);
-
- return ;
-};
+import { withRouter } from 'storybook-addon-react-router-v6'
import ConsensusSelection from './ConsensusSelection'
-import { withRouter } from 'storybook-addon-react-router-v6'
+import { StoryObj } from '@storybook/react'
const meta = {
title: 'ValidatorOnboarding/ConsensusSelection',
@@ -26,13 +11,10 @@ const meta = {
},
tags: ['autodocs'],
decorators: [withRouter()],
-} satisfies Meta
-
+}
export default meta
type Story = StoryObj
export const Default: Story = {
- args: {
-
- },
+ args: {},
}
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.stories.tsx
new file mode 100644
index 00000000..fc88456b
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ExecClientCard from './ExecClientCard'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+const meta = {
+ title: 'ValidatorOnboarding/ExecClientCard',
+ component: ExecClientCard,
+
+ tags: ['autodocs'],
+ decorators: [withRouter()],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ args: { name: 'Erigon', icon: '/icons/erigon-circle.png' },
+}
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx
index fe2b32e0..1507c05e 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.tsx
@@ -6,6 +6,7 @@ import { Avatar, Text } from '@status-im/components'
type PairedDeviceCardProps = {
isVisibleState: boolean
}
+
const PairedDeviceCard = ({ isVisibleState }: PairedDeviceCardProps) => {
const [isVisible, setIsVisible] = useState(true)
diff --git a/src/redux/ValidatorOnboarding/ValidatorSetup/slice.ts b/src/redux/ValidatorOnboarding/ValidatorSetup/slice.ts
index 253776d2..18ce5ac2 100644
--- a/src/redux/ValidatorOnboarding/ValidatorSetup/slice.ts
+++ b/src/redux/ValidatorOnboarding/ValidatorSetup/slice.ts
@@ -5,7 +5,7 @@ interface ExecClientState {
}
const initialState: ExecClientState = {
- selectedClient: '',
+ selectedClient: 'Erigon',
}
const execClientSlice = createSlice({