diff --git a/src/constants.ts b/src/constants.ts
index 0967460f..caf61c22 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -9,3 +9,9 @@ export const BAD_STORAGE_TEXT =
export const BAD_CPU_CLOCK_RATE_TEXT = 'Your CPU clock rate is below the recommended 2.4GHz.'
export const BAD_RAM_MEMORY_TEXT = 'There is insufficient RAM required for selected services.'
export const BAD_NETWORK_TEXT = 'Network Latency is high.'
+
+/* Validator Onboarding */
+
+export const KEYSTORE_FILES = 'KeystoreFiles'
+export const RECOVERY_PHRASE = 'Recovery Phrase'
+export const BOTH_KEY_AND_RECOVERY = 'Both KeystoreFiles & Recovery Phrase'
diff --git a/src/main.tsx b/src/main.tsx
index 0634b7c8..c18ef195 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'
import { Provider as ReduxProvider } from 'react-redux'
import App from './App.tsx'
import './index.css'
-import store from './redux/store.tsx'
+import store from './redux/store.ts'
ReactDOM.createRoot(document.getElementById('root')!).render(
diff --git a/src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts b/src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts
index 5793f322..b9e2b668 100644
--- a/src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts
+++ b/src/pages/ConnectDevicePage/ConnectDevicePage.stories.ts
@@ -10,7 +10,6 @@ const meta = {
layout: 'centered',
},
tags: ['autodocs'],
- argTypes: {},
decorators: [withRouter],
} satisfies Meta
diff --git a/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts b/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts
index 8b61dea8..4405c851 100644
--- a/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts
+++ b/src/pages/CreateLocalNodePage/CreateLocalNodePage.stories.ts
@@ -10,7 +10,6 @@ const meta = {
layout: 'centered',
},
tags: ['autodocs'],
- argTypes: {},
decorators: [withRouter],
} satisfies Meta
diff --git a/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx b/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx
index 29d09abc..46841e19 100644
--- a/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx
+++ b/src/pages/DeviceHealthCheck/DeviceHealthCheck.stories.tsx
@@ -1,18 +1,11 @@
import type { Meta, StoryObj } from '@storybook/react'
-import { Provider as ReduxProvider } from 'react-redux'
-import store from '../../redux/store'
+
import DeviceHealthCheck from './DeviceHealthCheck'
const meta: Meta = {
title: 'Pages/DeviceHealthCheck',
component: DeviceHealthCheck,
- decorators: [
- StoryObj => (
-
-
-
- ),
- ],
+ decorators: [],
tags: ['autodocs'],
}
diff --git a/src/pages/DeviceSyncStatus/DeviceSync.stories.tsx b/src/pages/DeviceSyncStatus/DeviceSync.stories.tsx
index 2be8f0c1..cf482d8a 100644
--- a/src/pages/DeviceSyncStatus/DeviceSync.stories.tsx
+++ b/src/pages/DeviceSyncStatus/DeviceSync.stories.tsx
@@ -1,7 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react'
-import { Provider as ReduxProvider } from 'react-redux'
-import store from '../../redux/store'
-
+
import DeviceSyncStatus from './DeviceSyncStatus'
const meta = {
@@ -13,11 +11,9 @@ const meta = {
tags: ['autodocs'],
decorators: [
Story => (
-
-
-
-
-
+
+
+
),
],
} satisfies Meta
diff --git a/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx b/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx
index 91be8038..e9c9b5c9 100644
--- a/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx
+++ b/src/pages/DeviceSyncStatus/DeviceSyncStatus.tsx
@@ -13,6 +13,7 @@ import { useEffect } from 'react'
const DeviceSyncStatus = () => {
const dispatch = useDispatch()
+
useEffect(() => {
dispatch(
setPinnedMessage({
@@ -22,6 +23,7 @@ const DeviceSyncStatus = () => {
}),
)
}, [dispatch])
+
return (
{
subtitle="Monitor your Validator Client and Beacon Node syncing progression."
/>
-
-
+
+
diff --git a/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx b/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx
index 57987f10..ab4594ee 100644
--- a/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx
+++ b/src/pages/DeviceSyncStatus/SyncStatusCardConsensus.tsx
@@ -5,33 +5,31 @@ import Icon from '../../components/General/Icon'
import StandardGauge from '../../components/Charts/StandardGauge'
import IconText from '../../components/General/IconText'
import { TokenIcon } from '@status-im/icons'
+import { formatNumberForGauge } from '../../utilities'
interface DeviceStorageHealthProps {
synced: number
total: number
}
+
const SyncStatusCardConsensus: React.FC = ({ synced, total }) => {
const message = synced === total ? 'Synced all data' : 'Syncing'
- const data = () => {
- return [
- {
- id: 'storage',
- label: 'Used',
- value: synced,
- color: '#ff6161',
- },
- {
- id: 'storage',
- label: 'Free',
- value: total - synced || 1,
- color: '#E7EAEE',
- },
- ]
- }
- const formatNumber = (n: number): string => {
- return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
- }
+ const data = [
+ {
+ id: 'storage',
+ label: 'Used',
+ value: synced,
+ color: '#ff6161',
+ },
+ {
+ id: 'storage',
+ label: 'Free',
+ value: total - synced || 1,
+ color: '#E7EAEE',
+ },
+ ]
+
return (
= ({ synced, t
width: '115px',
}}
>
-
+
@@ -74,7 +72,7 @@ const SyncStatusCardConsensus: React.FC = ({ synced, t
}>{message}
- {formatNumber(synced)} / {formatNumber(total)}
+ {formatNumberForGauge(synced)} / {formatNumberForGauge(total)}
diff --git a/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx b/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx
index 8604a122..9a514964 100644
--- a/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx
+++ b/src/pages/DeviceSyncStatus/SyncStatusCardExecution.tsx
@@ -3,6 +3,7 @@ import { Shadow, Text } from '@status-im/components'
import StandardGauge from '../../components/Charts/StandardGauge'
import IconText from '../../components/General/IconText'
import { TokenIcon } from '@status-im/icons'
+import { formatNumberForGauge } from '../../utilities'
interface DeviceStorageHealthProps {
synced: number
@@ -27,9 +28,6 @@ const SyncStatusCardExecution: React.FC = ({ synced, t
},
]
}
- const formatNumber = (n: number): string => {
- return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
- }
return (
= ({ synced, t
}>{message}
- {' '}
- {formatNumber(synced)} / {formatNumber(total)}
+ {formatNumberForGauge(synced)} / {formatNumberForGauge(total)}
diff --git a/src/pages/LandingPage/LandingPage.stories.ts b/src/pages/LandingPage/LandingPage.stories.ts
index cd135e43..e44d9337 100644
--- a/src/pages/LandingPage/LandingPage.stories.ts
+++ b/src/pages/LandingPage/LandingPage.stories.ts
@@ -10,7 +10,6 @@ const meta = {
layout: 'centered',
},
tags: ['autodocs'],
- argTypes: {},
decorators: [withRouter],
} satisfies Meta
diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx
index bc91fd84..73432231 100644
--- a/src/pages/LandingPage/LandingPage.tsx
+++ b/src/pages/LandingPage/LandingPage.tsx
@@ -1,7 +1,6 @@
import './LandingPage.css'
import { XStack, YStack } from 'tamagui'
import PageWrapperShadow from '../../components/PageWrappers/PageWrapperShadow'
-import Title from '../../components/General/Title'
import NimbusLogo from '../../components/Logos/NimbusLogo'
import { NodeIcon } from '@status-im/icons'
import { Button as StatusButton, Text } from '@status-im/components'
@@ -23,10 +22,10 @@ const LandingPage = () => {
-
+ <Text size={27} weight={'semibold'}>
Light and performant clients, for all Ethereum validators.
-
-
+
+
Nimbus Nodes allows you to take control and ownership of the services
you wish to run in a completely trustless and decentralized manner.
diff --git a/src/pages/PairDevice/GenerateId.stories.tsx b/src/pages/PairDevice/GenerateId.stories.tsx
index 01b6c72a..18a17f0d 100644
--- a/src/pages/PairDevice/GenerateId.stories.tsx
+++ b/src/pages/PairDevice/GenerateId.stories.tsx
@@ -10,7 +10,6 @@ const meta = {
layout: 'centered',
},
tags: ['autodocs'],
- argTypes: {},
decorators: [withRouter],
} satisfies Meta
diff --git a/src/pages/PairDevice/PairDevice.stories.ts b/src/pages/PairDevice/PairDevice.stories.ts
index e48c9e60..1bb8e39a 100644
--- a/src/pages/PairDevice/PairDevice.stories.ts
+++ b/src/pages/PairDevice/PairDevice.stories.ts
@@ -10,7 +10,6 @@ const meta = {
layout: 'centered',
},
tags: ['autodocs'],
- argTypes: {},
decorators: [withRouter],
} satisfies Meta
diff --git a/src/pages/PairDevice/PairedSuccessfully.stories.tsx b/src/pages/PairDevice/PairedSuccessfully.stories.tsx
index 3744ed5d..fa72b815 100644
--- a/src/pages/PairDevice/PairedSuccessfully.stories.tsx
+++ b/src/pages/PairDevice/PairedSuccessfully.stories.tsx
@@ -9,7 +9,6 @@ const meta = {
layout: 'centered',
},
tags: ['autodocs'],
- argTypes: {},
} satisfies Meta
export default meta
diff --git a/src/pages/PairDevice/SyncStatus.stories.tsx b/src/pages/PairDevice/SyncStatus.stories.tsx
index dba77b31..d6d7d3f6 100644
--- a/src/pages/PairDevice/SyncStatus.stories.tsx
+++ b/src/pages/PairDevice/SyncStatus.stories.tsx
@@ -10,14 +10,13 @@ const meta = {
layout: 'centered',
},
tags: ['autodocs'],
- argTypes: {},
decorators: [withRouter],
} satisfies Meta
export default meta
type Story = StoryObj
-export const Page: Story = {
+export const Default: Story = {
args: {
isPairing: true,
},
diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.stories.ts b/src/pages/ValidatorOnboarding/Activation/Activation.stories.ts
new file mode 100644
index 00000000..0d4c0f35
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Activation/Activation.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Activation from './Activation'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+const meta = {
+ title: 'ValidatorOnboarding/Activation',
+ component: Activation,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ decorators: [withRouter],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {
+ validatorsValue: '4',
+ executionSyncStatus1: {
+ text: "Execution Sync Status",
+ isGaugeIncluded: true,
+ gaugeColor: "$blue",
+ gaugeSynced: 123.524,
+ gaugeTotal: 172.503,
+
+ },
+ executionSyncStatus2: {
+ text: "Execution Sync Status",
+ isGaugeIncluded: true,
+ gaugeColor: "$red",
+ gaugeSynced: 123.524,
+ gaugeTotal: 172.503,
+ },
+ currentAPRValue: "4.40%",
+ estimatedActivationTimeValue: "32 Days",
+ validatorQueueValue: "92603",
+ },
+}
diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx
new file mode 100644
index 00000000..4e8b8948
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx
@@ -0,0 +1,107 @@
+import { useState, useEffect } from 'react'
+import { XStack, Stack, YStack } from 'tamagui'
+import { Text } from '@status-im/components'
+import Confetti from 'react-confetti'
+
+import ActivationCard from './ActivationCard'
+import LinkWithArrow from '../../../components/General/LinkWithArrow'
+
+type ActivationProps = {
+ validatorsValue: string
+ executionSyncStatus1: {
+ text: string
+ isGaugeIncluded: boolean
+ gaugeColor: string
+ gaugeSynced: number
+ gaugeTotal: number
+ }
+ executionSyncStatus2: {
+ text: string
+ isGaugeIncluded: boolean
+ gaugeColor: string
+ gaugeSynced: number
+ gaugeTotal: number
+ }
+ currentAPRValue: string
+ estimatedActivationTimeValue: string
+ validatorQueueValue: string
+}
+
+const Activation = ({
+ validatorsValue,
+ executionSyncStatus1,
+ executionSyncStatus2,
+ currentAPRValue,
+ estimatedActivationTimeValue,
+ validatorQueueValue,
+}: ActivationProps) => {
+ const [showConfetti, setShowConfetti] = useState(true)
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setShowConfetti(false)
+ }, 10000)
+
+ return () => {
+ clearTimeout(timer)
+ }
+ }, [])
+
+ return (
+
+ {showConfetti && }
+
+
+
+ Activation
+
+
+
+ Congratulations! You have successfully setup your Nimbus Validators and are currently
+ syncing your nodes.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Activation
+
+const styles = {
+ confettiContainer: {
+ position: 'relative' as const,
+ width: '100%',
+ height: '100%',
+ },
+ confettiCanvas: {
+ position: 'absolute' as const,
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ zIndex: 0,
+ },
+}
diff --git a/src/pages/ValidatorOnboarding/Activation/ActivationCard.stories.ts b/src/pages/ValidatorOnboarding/Activation/ActivationCard.stories.ts
new file mode 100644
index 00000000..c70a48b1
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Activation/ActivationCard.stories.ts
@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import ActivationCard from './ActivationCard'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+const meta = {
+ title: 'ValidatorOnboarding/ActivationCard',
+ component: ActivationCard,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ decorators: [withRouter],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Validators: Story = {
+ args: {
+ text: 'Validators',
+ value: '4',
+ },
+}
+
+export const ExecutionSyncStatus: Story = {
+ args: {
+ text: 'Execution Sync Status',
+ value: '',
+ isGaugeIncluded: true,
+ gaugeColor: '#2a4af5',
+ gaugeSynced: 123.524,
+ gaugeTotal: 172.503,
+ },
+}
+
+export const ExecutionSyncStatusRed: Story = {
+ args: {
+ text: 'Execution Sync Status',
+ value: '',
+ isGaugeIncluded: true,
+ gaugeColor: '#EB5757',
+ gaugeSynced: 123.524,
+ gaugeTotal: 172.503,
+ },
+}
+
+export const CurrentAPR: Story = {
+ args: {
+ text: 'Current APR',
+ value: '4.40%',
+ },
+}
+
+export const EstimatedActivationTime: Story = {
+ args: {
+ text: 'Estimated Activation Time',
+ value: '32 Days',
+ },
+}
+
+export const ValidatorQueue: Story = {
+ args: {
+ text: 'Validator Queue',
+ value: '92603',
+ },
+}
+
+export const WithoutTitle: Story = {
+ args: {
+ text: '',
+ value: '1',
+ },
+}
+
+export const WithoutValue: Story = {
+ args: {
+ text: 'Title',
+ },
+}
diff --git a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx
new file mode 100644
index 00000000..befba796
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx
@@ -0,0 +1,58 @@
+import { Stack, YStack } from 'tamagui'
+import { Text } from '@status-im/components'
+import ActivationSyncCard from './ActivationSyncCard'
+
+type ActivationCardProps = {
+ text: string
+ value?: string
+ isGaugeIncluded?: boolean
+ gaugeColor?: string
+ gaugeSynced?: number
+ gaugeTotal?: number
+}
+
+const ActivationCard = ({
+ text,
+ value,
+ isGaugeIncluded,
+ gaugeColor,
+ gaugeSynced,
+ gaugeTotal,
+}: ActivationCardProps) => {
+ return (
+
+ {!isGaugeIncluded && (
+
+
+ {text}
+
+
+ {value}
+
+
+ )}
+ {isGaugeIncluded && (
+
+
+ {text}
+
+
+
+ )}
+
+ )
+}
+
+export default ActivationCard
diff --git a/src/pages/ValidatorOnboarding/Activation/ActivationSyncCard.stories.ts b/src/pages/ValidatorOnboarding/Activation/ActivationSyncCard.stories.ts
new file mode 100644
index 00000000..5c9c2696
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Activation/ActivationSyncCard.stories.ts
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+import ActivationSyncCard from './ActivationSyncCard'
+
+const meta = {
+ title: 'ValidatorOnboarding/ActivationSyncCard',
+ component: ActivationSyncCard,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ decorators: [withRouter],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Blue: Story = {
+ args: {
+ gaugeColor: '#2a4af5',
+ gaugeSynced: 123.524,
+ gaugeTotal: 172.503,
+ },
+}
+
+export const Red: Story = {
+ args: {
+ gaugeColor: '#EB5757',
+ gaugeSynced: 123.524,
+ gaugeTotal: 172.503,
+ },
+}
+
+export const MaxValue: Story = {
+ args: {
+ gaugeColor: '#2a4af5',
+ gaugeSynced: 172.503,
+ gaugeTotal: 172.503,
+ },
+}
+
+export const OverMaxValue: Story = {
+ args: {
+ gaugeColor: '#2a4af5',
+ gaugeSynced: 200,
+ gaugeTotal: 172.503,
+ },
+}
+
+export const MinValue: Story = {
+ args: {
+ gaugeColor: '#2a4af5',
+ gaugeSynced: 0,
+ gaugeTotal: 172.503,
+ },
+}
+
+export const UnderMinValue: Story = {
+ args: {
+ gaugeColor: '#2a4af5',
+ gaugeSynced: -100,
+ gaugeTotal: 172.503,
+ },
+}
diff --git a/src/pages/ValidatorOnboarding/Activation/ActivationSyncCard.tsx b/src/pages/ValidatorOnboarding/Activation/ActivationSyncCard.tsx
new file mode 100644
index 00000000..0a548ba1
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Activation/ActivationSyncCard.tsx
@@ -0,0 +1,47 @@
+import { Stack, XStack, YStack } from 'tamagui'
+import StandardGauge from '../../../components/Charts/StandardGauge'
+import { Text } from '@status-im/components'
+import { formatNumberForGauge } from '../../../utilities'
+
+type ActivationSyncCardProps = {
+ gaugeColor: string
+ gaugeSynced: number
+ gaugeTotal: number
+}
+
+const ActivationSyncCard = ({ gaugeColor, gaugeSynced, gaugeTotal }: ActivationSyncCardProps) => {
+ return (
+
+
+
+
+
+
+ {formatNumberForGauge(gaugeSynced)} / {formatNumberForGauge(gaugeTotal)}
+
+
+
+ )
+}
+
+export default ActivationSyncCard
diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.stories.ts b/src/pages/ValidatorOnboarding/Advisories/Advisories.stories.ts
new file mode 100644
index 00000000..9c01f413
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.stories.ts
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+import Advisories from './Advisories'
+
+const meta = {
+ title: 'ValidatorOnboarding/Advisories',
+ component: Advisories,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ decorators: [withRouter],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {},
+}
diff --git a/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
new file mode 100644
index 00000000..2bd608cb
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Advisories/Advisories.tsx
@@ -0,0 +1,92 @@
+import { Text } from '@status-im/components'
+import { useState } from 'react'
+import { Stack, XStack, YStack } from 'tamagui'
+
+import AdvisoriesContent from './AdvisoriesContent'
+
+type AdvisoryTopicsType = {
+ [key: string]: string[]
+}
+
+const Advisories = () => {
+ const [selectedTitle, setSelectedTitle] = useState(Object.keys(advisoryTopics)[3])
+
+ const isSameTitle = (title: string) => selectedTitle === title
+
+ return (
+
+
+
+
+ Advisories
+
+
+ {Object.keys(advisoryTopics).map((title, index) => (
+ setSelectedTitle(title)}
+ style={{ cursor: 'pointer', alignItems: 'center' }}
+ space={'$2'}
+ >
+
+ {unicodeNumbers[index]}
+
+
+ {title}
+
+
+ ))}
+
+
+
+ )
+}
+
+export default Advisories
+
+const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅']
+
+export const advisoryTopics: AdvisoryTopicsType = {
+ 'Proof of Stake': [
+ 'Proof of Stake systems require validators to hold and lock up a certain amount of cryptocurrency to participate.',
+ 'In Proof of Stake, the chances of creating a block is proportional to the amount of cryptocurrency held.',
+ 'Unlike Proof of Work, Proof of Stake aims to achieve consensus without intensive computational work.',
+ ],
+ Deposit: [
+ 'Deposits are often irreversible, so ensure to double-check transaction details before confirming.',
+ 'Delay in deposit acknowledgment might be due to network congestion or node synchronization.',
+ 'Always keep transaction IDs or hashes for records and future references in case of disputes.',
+ ],
+ 'Key Management': [
+ 'Storing your private keys on a device connected to the internet is susceptible to hacks and malware.',
+ 'Hardware wallets provide an added layer of security by keeping private keys isolated from online systems.',
+ 'Regularly back up and encrypt your key management solutions to prevent potential losses.',
+ ],
+ 'Bad Behaviour': [
+ 'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing.',
+ 'Running your validator keys simultaneously on two or more machines will result in slashing.*',
+ 'Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.',
+ ],
+ Requirements: [
+ 'Ensure your system meets the minimum software and hardware requirements before initiating any operations.',
+ 'Staying updated with the latest versions is vital to maintain system integrity and performance.',
+ 'Failure to meet requirements might result in operational inefficiencies or security vulnerabilities.',
+ ],
+ Risks: [
+ 'Cryptocurrency investments are subject to high volatility and can result in both significant gains and losses.',
+ 'Always do thorough research before making investment decisions or engaging in transactions.',
+ 'Be wary of phishing scams, malicious software, and too-good-to-be-true offers.',
+ ],
+}
diff --git a/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts b/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts
new file mode 100644
index 00000000..09088d7f
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.stories.ts
@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+import AdvisoriesContent from './AdvisoriesContent'
+import { advisoryTopics } from './Advisories'
+
+const meta = {
+ title: 'ValidatorOnboarding/AdvisoriesContent',
+ component: AdvisoriesContent,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ decorators: [withRouter],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const advisoryTopicsKeys = Object.keys(advisoryTopics)
+const advisoryTopicsValues = Object.values(advisoryTopics)
+
+export const ProofOfStake: Story = {
+ args: {
+ title: advisoryTopicsKeys[0],
+ content: advisoryTopicsValues[0],
+ },
+}
+
+export const Deposit: Story = {
+ args: {
+ title: advisoryTopicsKeys[1],
+ content: advisoryTopicsValues[1],
+ },
+}
+
+export const KeyManagement: Story = {
+ args: {
+ title: advisoryTopicsKeys[2],
+ content: advisoryTopicsValues[2],
+ },
+}
+
+export const BadBehaviour: Story = {
+ args: {
+ title: advisoryTopicsKeys[3],
+ content: advisoryTopicsValues[3],
+ },
+}
+
+export const Requirements: Story = {
+ args: {
+ title: advisoryTopicsKeys[4],
+ content: advisoryTopicsValues[4],
+ },
+}
+
+export const Risks: Story = {
+ args: {
+ title: advisoryTopicsKeys[5],
+ content: advisoryTopicsValues[5],
+ },
+}
diff --git a/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.tsx b/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.tsx
new file mode 100644
index 00000000..8b5a97ba
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Advisories/AdvisoriesContent.tsx
@@ -0,0 +1,45 @@
+import { Text } from '@status-im/components'
+import { Link } from 'react-router-dom'
+import { Stack, YStack } from 'tamagui'
+
+type AdvisoriesContentProps = {
+ title: string
+ content: string[]
+}
+
+const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => {
+ return (
+
+
+
+ {title}
+
+
+
+ {content.map(row => (
+
+ {row}
+
+ ))}
+
+
+ The Ethereum consensus layer specification
+
+
+
+
+ More on slashing risks
+
+
+
+
+ )
+}
+
+export default AdvisoriesContent
diff --git a/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.stories.ts b/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.stories.ts
new file mode 100644
index 00000000..8885baaf
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.stories.ts
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+import ClientSetup from './ClientSetup'
+
+const meta = {
+ title: 'ValidatorOnboarding/ClientSetup',
+ component: ClientSetup,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ decorators: [withRouter],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {},
+}
diff --git a/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx b/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx
new file mode 100644
index 00000000..9593ad66
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx
@@ -0,0 +1,22 @@
+import { Separator, YStack } from 'tamagui'
+
+import SetupRow from './SetupRow'
+import WithdrawalAddress from './WithdrawalAddress'
+import LinkWithArrow from '../../../components/General/LinkWithArrow'
+
+const ClientSetup = () => {
+ return (
+
+
+
+
+
+
+ )
+}
+export default ClientSetup
diff --git a/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.stories.ts b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.stories.ts
new file mode 100644
index 00000000..38299ecc
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.stories.ts
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+import SetupRow from './SetupRow'
+
+const meta = {
+ title: 'ValidatorOnboarding/SetupRow',
+ component: SetupRow,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ decorators: [withRouter],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {
+ title: 'Setup up Validators',
+ },
+}
+
+export const WithoutTitle: Story = {
+ args: {
+ title: '',
+ },
+}
diff --git a/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx
new file mode 100644
index 00000000..33803306
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx
@@ -0,0 +1,63 @@
+import { Stack, XStack, YStack } from 'tamagui'
+import { Input as StatusInput, Text } from '@status-im/components'
+import { AddIcon, ChevronDownIcon } from '@status-im/icons'
+import { useState } from 'react'
+
+type SetupRowProps = {
+ title: string
+}
+
+const SetupRow = ({ title }: SetupRowProps) => {
+ const [validatorCount, setValidatorCount] = useState(0)
+
+ const addValidatorHandler = () => {
+ setValidatorCount((state: number) => state + 1)
+ }
+
+ const changeValidatorCountHandler = (e: any) => {
+ if (!isNaN(e.target.value)) {
+ setValidatorCount(Number(e.target.value))
+ }
+ }
+
+ return (
+
+
+ {title}
+
+
+
+
+ How many Validators would you like to run?
+
+ }
+ value={validatorCount.toString()}
+ onChange={changeValidatorCountHandler}
+ style={{ fontWeight: 'bold' }}
+ />
+
+
+
+ ETH
+
+
+ 64
+
+
+
+
+
+ USD
+
+
+
+
+ $4,273 USD
+
+
+
+
+ )
+}
+export default SetupRow
diff --git a/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.stories.ts b/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.stories.ts
new file mode 100644
index 00000000..9f94f911
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.stories.ts
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+import WithdrawalAddress from './WithdrawalAddress'
+
+const meta = {
+ title: 'ValidatorOnboarding/WithdrawalAddress',
+ component: WithdrawalAddress,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ decorators: [withRouter],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {
+ title: 'Withdrawal Address',
+ },
+}
+
+export const WithoutTitle: Story = {
+ args: {
+ title: '',
+ },
+}
diff --git a/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx b/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx
new file mode 100644
index 00000000..9732637d
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx
@@ -0,0 +1,55 @@
+import { Stack, YStack } from 'tamagui'
+import { InformationBox, Input as StatusInput, Text } from '@status-im/components'
+import { ClearIcon, CloseCircleIcon } from '@status-im/icons'
+import { useState } from 'react'
+
+type WithdrawalAddressProps = {
+ title: string
+}
+
+const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => {
+ const [withdrawalAddress, setWithdrawalAddress] = useState('')
+
+ const changeWithdrawalAddressHandler = (e: any) => {
+ setWithdrawalAddress(e.target.value)
+ }
+
+ const removeWithdrawalAddressHandler = () => {
+ setWithdrawalAddress('')
+ }
+
+ return (
+
+
+ {title}
+
+
+
+ Ethereum Address
+
+
+
+ }
+ value={withdrawalAddress}
+ onChange={changeWithdrawalAddressHandler}
+ />
+
+ }
+ />
+
+
+ )
+}
+
+export default WithdrawalAddress
diff --git a/src/pages/ValidatorOnboarding/ContinueButton.stories.ts b/src/pages/ValidatorOnboarding/ContinueButton.stories.ts
new file mode 100644
index 00000000..549e8c04
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ContinueButton.stories.ts
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { withRouter } from 'storybook-addon-react-router-v6'
+
+import ContinueButton from './ContinueButton'
+
+const meta = {
+ title: 'ValidatorOnboarding/ContinueButton',
+ component: ContinueButton,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ decorators: [withRouter],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {
+ continueHandler: () => {},
+ activeStep: 0,
+ isConfirmPhraseStage: false,
+ subStepValidatorSetup: 0,
+ },
+}
+
+export const Disabled: Story = {
+ args: {
+ continueHandler: () => {},
+ activeStep: 0,
+ isConfirmPhraseStage: true,
+ subStepValidatorSetup: 0,
+ },
+}
diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx
new file mode 100644
index 00000000..5671d569
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx
@@ -0,0 +1,80 @@
+import { Stack, XStack } from 'tamagui'
+import { Button, InformationBox } from '@status-im/components'
+import { CloseCircleIcon } from '@status-im/icons'
+import { useDispatch, useSelector } from 'react-redux'
+import { useEffect } from 'react'
+
+import { RootState } from '../../redux/store'
+import { setIsRightPhrase } from '../../redux/ValidatorOnboarding/KeyGeneration/slice'
+import LinkWithArrow from '../../components/General/LinkWithArrow'
+
+type ContinueButton = {
+ continueHandler: () => void
+ activeStep: number
+ isConfirmPhraseStage: boolean
+ subStepValidatorSetup: number
+}
+
+const ContinueButton = ({
+ continueHandler,
+ activeStep,
+ isConfirmPhraseStage,
+ subStepValidatorSetup,
+}: ContinueButton) => {
+ const { isCopyPastedPhrase, isRightPhrase, words, validWords } = useSelector(
+ (state: RootState) => state.keyGeneration,
+ )
+ const dispatch = useDispatch()
+
+ useEffect(() => {
+ dispatch(setIsRightPhrase(words.every(word => word !== '')))
+ }, [words])
+
+ const isDisabled = () => {
+ if (
+ (isConfirmPhraseStage && !isRightPhrase) ||
+ (isConfirmPhraseStage && validWords.some(w => w === false))
+ ) {
+ return true
+ }
+ return false
+ }
+
+ const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3
+
+ return (
+
+
+ {isCopyPastedPhrase && (
+ }
+ />
+ )}
+ {isActivationValScreen && (
+
+ )}
+
+
+
+
+
+ )
+}
+
+export default ContinueButton
diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
new file mode 100644
index 00000000..5828631c
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.css
@@ -0,0 +1,68 @@
+.custom-step {
+ background-color: #ffffff;
+}
+
+.custom-step.StepMain--active,
+.custom-step.StepMain--completed {
+ background-color: #2a4cf4;
+}
+
+.custom-step::before {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ border: 2px solid #e0e0e0;
+ border-radius: 50%;
+}
+
+.custom-step.StepMain--active::before,
+.custom-step.StepMain--completed::before {
+ border-color: #2a4cf4;
+}
+
+.custom-step.StepMain--active::after {
+ content: '';
+ display: block;
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ background-color: #2a4cf4;
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.custom-step::after {
+ content: attr(data-subtitle);
+ position: absolute;
+ top: calc(100% + 4px);
+ font-size: 12px;
+ color: #A2A9B0;
+ background: transparent;
+ border: none;
+}
+
+[data-step="Overview"]::after {
+ left: 35%;
+}
+
+[data-step="Advisories"]::after {
+ left: 30%;
+}
+
+[data-step="Client Setup"]::after {
+ left: 32%;
+}
+
+[data-step="Validator Setup"]::after {
+ left: 25%;
+}
+
+[data-step="Key Generation"]::after {
+ left: 24.5%;
+}
+
+[data-step="Activation"]::after {
+ left: 33%;
+}
\ No newline at end of file
diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.stories.ts b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.stories.ts
new file mode 100644
index 00000000..1db421b1
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.stories.ts
@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import FormStepper from './FormStepper'
+
+const meta = {
+ title: 'ValidatorOnboarding/FormStepper',
+ component: FormStepper,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const OverviewActive: Story = {
+ args: {
+ activeStep: 0,
+ changeActiveStep: () => {},
+ },
+}
+
+export const AdvisoriesActive: Story = {
+ args: {
+ activeStep: 1,
+ changeActiveStep: () => {},
+ },
+}
+
+export const ClientSetupActive: Story = {
+ args: {
+ activeStep: 2,
+ changeActiveStep: () => {},
+ },
+}
+
+export const ValidatorSetupActive: Story = {
+ args: {
+ activeStep: 3,
+ changeActiveStep: () => {},
+ },
+}
+
+export const KeyGenerationActive: Story = {
+ args: {
+ activeStep: 4,
+ changeActiveStep: () => {},
+ },
+}
+
+export const ActivationActive: Story = {
+ args: {
+ activeStep: 5,
+ changeActiveStep: () => {},
+ },
+}
+
+export const NoActiveStep: Story = {
+ args: {
+ activeStep: -1,
+ changeActiveStep: () => {},
+ },
+}
diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
new file mode 100644
index 00000000..8aa130ce
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
@@ -0,0 +1,70 @@
+import { Stepper, Step } from 'react-form-stepper'
+import './FormStepper.css'
+
+type FormStepperProps = {
+ activeStep: number
+ changeActiveStep: (step: number) => void
+}
+
+const steps = [
+ { label: 'Overview', subtitle: 'Get Started' },
+ { label: 'Advisories', subtitle: 'Understand your Duties' },
+ { label: 'Client Setup', subtitle: 'Execution & Consensus' },
+ { label: 'Validator Setup', subtitle: 'Validators & Withdrawal' },
+ { label: 'Key Generation', subtitle: 'Secure your Keypairs' },
+ { label: 'Activation', subtitle: 'Complete Setup' },
+]
+
+const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => {
+ return (
+
+ {steps.map((step, index) => (
+ changeActiveStep(index)}
+ completed={activeStep > index - 1}
+ data-subtitle={step.subtitle}
+ data-step={step.label}
+ />
+ ))}
+
+ )
+}
+const stepStyle = {
+ // For default dots:
+ inactiveBgColor: '#FFFFFF',
+ inactiveBorderColor: '#E0E0E0',
+ inactiveBorderWidth: '2px',
+ // For active dots:
+ activeBgColor: '#FFFFFF',
+ activeBorderColor: '#2A4CF4',
+ activeBorderWidth: '2px',
+ // For completed dots:
+ completedBgColor: '#2A4CF4',
+ activeTextColor: '#ffffff',
+ completedTextColor: '#ffffff',
+ inactiveTextColor: '#000000',
+ size: '20px',
+ circleFontSize: '10px',
+ labelFontSize: '14px',
+ borderRadius: '50%',
+ fontWeight: 700,
+}
+
+const customConnectorStyle = {
+ size: '2px',
+ activeColor: '#2A4CF4',
+ disabledColor: '#bdbdbd',
+ completedColor: '#a10308',
+ style: 'solid',
+}
+
+export default FormStepper
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.module.css b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.module.css
new file mode 100644
index 00000000..cf9f46f3
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.module.css
@@ -0,0 +1,79 @@
+.autocomplete-container {
+ position: relative;
+ width: 100%;
+ background-color: #f9fafa;
+ border: 2px solid #f9fafa;
+}
+
+.suggestion-list {
+ box-sizing: border-box;
+ overflow-y: scroll;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ background-color: #f9fafa;
+ padding: 10px;
+ scrollbar-width: thin;
+ scrollbar-color: #f9fafa transparent;
+ border: '2px solid #f9fafa';
+ max-height: 250px;
+ position: absolute;
+ z-index: 1000;
+ width: 100%;
+ border-bottom-left-radius: 24px;
+ border-bottom-right-radius: 24px;
+}
+
+.autocomplete-input {
+ box-sizing: border-box;
+ border: 2px solid #f7f8f9;
+ border-radius: 24px;
+ padding: 12px;
+ background-color: #f7f8f9;
+ width: 100%;
+ font-size: 16px;
+}
+
+.input-wrapper {
+ position: relative;
+}
+
+.input-number {
+ position: absolute;
+ left: 15px;
+ transform: translateY(-50%);
+ pointer-events: none;
+ z-index: 2;
+ color: #0D162566;
+ top: 48%;
+}
+
+.suggestion-item {
+ padding: 12px 16px;
+ cursor: pointer;
+ border-radius: 24px;
+ font-weight: 500;
+}
+
+.suggestion-item:hover {
+ background-color: #f1f2f4;
+}
+
+.suggestion-list::-webkit-scrollbar {
+ width: 1px;
+}
+
+.suggestion-list::-webkit-scrollbar-thumb {
+ background-color: #f1f2f4;
+ border-radius: 2px;
+}
+
+.suggestion-list::-webkit-scrollbar-track {
+ background-color: transparent;
+}
+
+.suggestion-list::-webkit-scrollbar-thumb {
+ background-color: transparent;
+}
+
+.suggestion-list::-webkit-scrollbar-thumb:hover {
+ background-color: transparent;
+}
\ No newline at end of file
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..4780bc4b
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.stories.ts
@@ -0,0 +1,27 @@
+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,
+ },
+}
+
+export const OtherWord: Story = {
+ args: {
+ index: 2,
+ },
+}
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.tsx
new file mode 100644
index 00000000..d655b6dc
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/AutocompleteInput.tsx
@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import wordlist from 'web-bip39/wordlists/english'
+
+import { RootState } from '../../../../redux/store'
+import {
+ setIsCopyPastedPhrase,
+ setMnemonic,
+ setValidWords,
+ setWord,
+} from '../../../../redux/ValidatorOnboarding/KeyGeneration/slice'
+import styles from './AutocompleteInput.module.css'
+
+type AutocompleteInputProps = {
+ index: number
+}
+
+const AutocompleteInput = ({ index }: AutocompleteInputProps) => {
+ const [suggestions, setSuggestions] = useState([])
+ const [isFocused, setIsFocused] = useState(false)
+ const word = useSelector((state: RootState) => state.keyGeneration.words[index])
+ const isValidWord = useSelector((state: RootState) => state.keyGeneration.validWords[index])
+ const validWords = useSelector((state: RootState) => state.keyGeneration.validWords)
+ const dispatch = useDispatch()
+
+ useEffect(() => {
+ setSuggestions(getNewSuggestions(word))
+ }, [word])
+
+ const getNewSuggestions = (word: string) => {
+ return wordlist.filter(w => w.startsWith(word.toLowerCase()))
+ }
+
+ const handleInputChange = (e: React.ChangeEvent) => {
+ if (!isFocused) {
+ handleInputFocus()
+ }
+
+ const value = e.target.value
+ const mnemonic = value.trim().split(' ').slice(0, 24)
+ const mnemonicLength = mnemonic.length
+ let newValidWords = [...validWords]
+
+ if (mnemonicLength === 1) {
+ dispatch(setWord({ index, word: value }))
+
+ newValidWords[index] = wordlist.includes(value) || getNewSuggestions(value).length > 0
+ } else if (mnemonicLength === 24) {
+ dispatch(setMnemonic(mnemonic))
+ dispatch(setIsCopyPastedPhrase(true))
+
+ mnemonic.forEach((m, i) => {
+ newValidWords[i] = wordlist.includes(m)
+ })
+ } else {
+ for (let i = index; i < mnemonicLength + index; i++) {
+ const mnemonicWord = mnemonic.shift() || ''
+ dispatch(setWord({ index: i, word: mnemonicWord }))
+ newValidWords[i] = wordlist.includes(mnemonicWord)
+ }
+
+ dispatch(setIsCopyPastedPhrase(true))
+ }
+
+ dispatch(setValidWords(newValidWords))
+ }
+
+ const handleSuggestionClick = (e: React.MouseEvent, suggestion: string) => {
+ e.preventDefault()
+
+ setIsFocused(false)
+ dispatch(setWord({ index, word: suggestion }))
+
+ let newValidWords = [...validWords]
+ newValidWords[index] = wordlist.includes(suggestion)
+ dispatch(setValidWords(newValidWords))
+ }
+
+ const handleInputFocus = () => {
+ setIsFocused(true)
+ }
+
+ const handleInputBlur = () => {
+ setIsFocused(false)
+
+ let newValidWords = [...validWords]
+ newValidWords[index] = wordlist.includes(word)
+ dispatch(setValidWords(newValidWords))
+ }
+
+ return (
+
+
+ {index + 1}.
+
+
+
+ {isFocused &&
+ suggestions.map(suggestion => (
+
handleSuggestionClick(e, suggestion)}
+ >
+ {suggestion}
+
+ ))}
+
+
handleRecMechanismChange(value)}
+ >
+
+ {value}
+
+
+ )
+}
+
+export default RecoveryMechanismCard
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.stories.ts b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.stories.ts
new file mode 100644
index 00000000..6ca38858
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.stories.ts
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import RecoveryPhrase from './RecoveryPhrase'
+
+const meta = {
+ title: 'ValidatorOnboarding/RecoveryPhrase',
+ component: RecoveryPhrase,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {
+ isKeystoreFiles: false,
+ },
+}
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
new file mode 100644
index 00000000..10e0a84f
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -0,0 +1,60 @@
+import { Stack, XStack, YStack } from 'tamagui'
+import { Button, InformationBox, Text } from '@status-im/components'
+import { CloseCircleIcon } from '@status-im/icons'
+import { useState } from 'react'
+
+type RecoveryPhraseProps = {
+ isKeystoreFiles: boolean
+}
+
+const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
+ const [isReveal, setIsReveal] = useState(false)
+
+ const revealHandler = () => {
+ setIsReveal(state => !state)
+ }
+
+ return (
+
+
+
+
+
+ this is your secret recovery phrase for the validator
+
+
+ this is your secret recovery phrase for the validator
+
+
+
+
+ this is your secret recovery phrase for the validator
+
+
+ this is your secret recovery phrase for the validator
+
+
+
+
+
+
+
+ }
+ />
+
+ )
+}
+
+export default RecoveryPhrase
diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.stories.ts b/src/pages/ValidatorOnboarding/Overview/Overview.stories.ts
new file mode 100644
index 00000000..54d0e9c2
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.stories.ts
@@ -0,0 +1,21 @@
+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'],
+ decorators: [withRouter],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+ args: {},
+}
diff --git a/src/pages/ValidatorOnboarding/Overview/Overview.tsx b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
new file mode 100644
index 00000000..eb0b10e8
--- /dev/null
+++ b/src/pages/ValidatorOnboarding/Overview/Overview.tsx
@@ -0,0 +1,53 @@
+import { Text as TextTam, XStack, YStack } from 'tamagui'
+import { Text } from '@status-im/components'
+
+import OverviewCard from './OverviewCard'
+import LinkWithArrow from '../../../components/General/LinkWithArrow'
+
+const Overview = () => {
+ return (
+ <>
+
+
+ Overview
+
+
+ Becoming a validator is a big responsibility with important preparation steps. Only start
+ the deposit process when youre ready.
+
+
+ By running a validator, you'll be responsible for securing the network and receive
+ continuous payouts for actions that help the network reach consensus.
+
+
+ Since the successful transition to proof-of-stake via The Merge, Ethereum is fully secured
+ by proof-of-stake validators. By running a validator, you'll be helping to secure the
+ Ethereum network.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {activeStep === 0 && }
+ {activeStep === 1 && }
+ {activeStep === 2 && }
+
+ {activeStep === 3 && subStepValidatorSetup === 0 && }
+ {activeStep === 3 && subStepValidatorSetup === 1 && }
+ {activeStep === 3 && subStepValidatorSetup === 2 && }
+ {activeStep === 3 && subStepValidatorSetup === 3 && }
+
+ {activeStep === 4 && }
+ {activeStep === 5 && }
+
+
+
+