diff --git a/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx index c255cec9..effaf755 100644 --- a/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx +++ b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx @@ -1,12 +1,25 @@ 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 ( @@ -17,7 +30,12 @@ const SetupRow = ({ title }: SetupRowProps) => { How many Validators would you like to run? - } /> + } + value={validatorCount.toString()} + onChange={changeValidatorCountHandler} + style={{ fontWeight: 'bold' }} + /> diff --git a/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx b/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx index be9c7538..35727d4e 100644 --- a/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx +++ b/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx @@ -1,12 +1,23 @@ 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 ( @@ -20,7 +31,15 @@ const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => { } + icon={ + + } + value={withdrawalAddress} + onChange={changeWithdrawalAddressHandler} /> void activeStep: number + isConfirmPhraseStage: boolean } -const ContinueButton = ({ continueHandler, activeStep }: ContinueButton) => { - const isCopyPastedPhrase = useSelector( - (state: RootState) => state.keyGeneration.isCopyPastedPhrase, +const ContinueButton = ({ continueHandler, activeStep, isConfirmPhraseStage }: ContinueButton) => { + const { isCopyPastedPhrase, isRightPhrase } = useSelector( + (state: RootState) => state.keyGeneration, ) + const isDisabled = () => { + if (isConfirmPhraseStage && !isRightPhrase) { + return true + } + return false + } + return ( @@ -35,7 +43,7 @@ const ContinueButton = ({ continueHandler, activeStep }: ContinueButton) => { marginTop: isCopyPastedPhrase ? '0px' : '40px', }} > - diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 76d13354..99990edd 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -18,6 +18,7 @@ import ContinueButton from './ContinueButton' import { setIsCopyPastedPhrase } from '../../redux/ValidatorOnboarding/KeyGeneration/slice' import { RootState } from '../../redux/store' import './layoutGradient.css' +import ActivationValidatorSetup from './ValidatorSetup/ActivationValidatorSetup' const ValidatorOnboarding = () => { const [activeStep, setActiveStep] = useState(0) @@ -37,7 +38,7 @@ const ValidatorOnboarding = () => { const continueHandler = () => { if (activeStep === 4 && isConfirmPhraseStage === false) { setIsConfirmPhraseStage(true) - } else if (activeStep === 3 && subStepValidatorSetup < 2) { + } else if (activeStep === 3 && subStepValidatorSetup < 3) { setSubStepValidatorSetup(subStepValidatorSetup + 1) } else if (activeStep < 5) { setActiveStep(activeStep + 1) @@ -81,11 +82,16 @@ const ValidatorOnboarding = () => { {activeStep === 3 && subStepValidatorSetup === 0 && } {activeStep === 3 && subStepValidatorSetup === 1 && } {activeStep === 3 && subStepValidatorSetup === 2 && } + {activeStep === 3 && subStepValidatorSetup === 3 && } {activeStep === 4 && } {activeStep === 5 && } - + ) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.stories.tsx new file mode 100644 index 00000000..eb8376b1 --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ActivationValidatorSetup from './ActivationValidatorSetup' +import { withRouter } from 'storybook-addon-react-router-v6' + +const meta = { + title: 'ValidatorOnboarding/ActivationValidatorSetup', + component: ActivationValidatorSetup, + + tags: ['autodocs'], + decorators: [withRouter()], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: {}, +} diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx new file mode 100644 index 00000000..4e547b17 --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx @@ -0,0 +1,87 @@ +import { useState, useEffect } from 'react' +import { XStack, Stack, YStack } from 'tamagui' +import { Text } from '@status-im/components' +import Confetti from 'react-confetti' +import LinkWithArrow from '../../../components/General/LinkWithArrow' +import ActivationCard from '../Activation/ActivationCard' + +const styles = { + confettiContainer: { + position: 'relative' as const, + width: '100%', + height: '100%', + justifyContent: 'fit-content' + }, + confettiCanvas: { + position: 'absolute' as const, + top: 0, + left: 0, + width: '100%', + height: '100%', + zIndex: 0, + }, +} + +const ActivationValidatorSetup = () => { + const [showConfetti, setShowConfetti] = useState(true) + + useEffect(() => { + const timer = setTimeout(() => { + setShowConfetti(false) + }, 10000) + + return () => { + clearTimeout(timer) + } + }, []) + + return ( + + {showConfetti && } + + + + Activation + + + + Congratulations! You have successfully setup your Execution and Consensus clients and are currently syncing your nodes. You need to be sufficiently synced prior to setting up your validators and making a deposit. + + + + + + + + + + + + + + + + + + + ) +} + +export default ActivationValidatorSetup diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.stories.tsx new file mode 100644 index 00000000..89acfa17 --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ConsensusClientCard from './ConsensusClientCard' +import { withRouter } from 'storybook-addon-react-router-v6' + +const meta = { + title: 'ValidatorOnboarding/ConsensusClientCard', + component: ConsensusClientCard, + + 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/ConsensusGaugeCard.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusGaugeCard.stories.tsx new file mode 100644 index 00000000..77bd0a57 --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusGaugeCard.stories.tsx @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import ConsensusGaugeCard from './ConsensusGaugeCard' +import { withRouter } from 'storybook-addon-react-router-v6' + +const meta = { + title: 'ValidatorOnboarding/ConsensusGaugeCard', + component: ConsensusGaugeCard, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + decorators: [withRouter()], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + color:'orange', synced:140000, total:200000, title: 'Synced Files' + }, +} diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx index ebed5d68..bea26633 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusSelection.stories.tsx @@ -10,7 +10,7 @@ const meta = { layout: 'centered', }, tags: ['autodocs'], - decorators: [withRouter()], + decorators: [withRouter], } export default meta type Story = StoryObj diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.stories.tsx index fc88456b..687266bc 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.stories.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ExecClientCard.stories.tsx @@ -6,9 +6,8 @@ import { withRouter } from 'storybook-addon-react-router-v6' const meta = { title: 'ValidatorOnboarding/ExecClientCard', component: ExecClientCard, - tags: ['autodocs'], - decorators: [withRouter()], + decorators: [withRouter], } satisfies Meta export default meta diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.stories.tsx index df393196..53a5236e 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.stories.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/PairedDeviceCard.stories.tsx @@ -10,7 +10,7 @@ const meta = { layout: 'centered', }, tags: ['autodocs'], - decorators: [withRouter()], + decorators: [withRouter], } satisfies Meta export default meta diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/SyntaxHighlighter.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/SyntaxHighlighter.stories.tsx new file mode 100644 index 00000000..2faff748 --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/SyntaxHighlighter.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import SyntaxHighlighter from './SyntaxHighlighter' +import { withRouter } from 'storybook-addon-react-router-v6' + +const meta = { + title: 'ValidatorOnboarding/SyntaxHighlighter', + component: SyntaxHighlighter, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + decorators: [withRouter()], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { rows: ['yarn', 'yarn build', 'yarn dev', 'house'] }, +} diff --git a/src/redux/ValidatorOnboarding/KeyGeneration/slice.ts b/src/redux/ValidatorOnboarding/KeyGeneration/slice.ts index 3556df45..87be99a3 100644 --- a/src/redux/ValidatorOnboarding/KeyGeneration/slice.ts +++ b/src/redux/ValidatorOnboarding/KeyGeneration/slice.ts @@ -3,6 +3,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit' type KeyGenerationState = { words: string[] isCopyPastedPhrase: boolean + isRightPhrase: boolean } type wordProps = { @@ -13,6 +14,7 @@ type wordProps = { const initialState: KeyGenerationState = { words: Array(24).fill(''), isCopyPastedPhrase: false, + isRightPhrase: false, } const keyGenerationSlice = createSlice({ @@ -30,13 +32,13 @@ const keyGenerationSlice = createSlice({ setIsCopyPastedPhrase: (state, action: PayloadAction) => { state.isCopyPastedPhrase = action.payload }, + setIsRightPhrase: (state, action: PayloadAction) => { + state.isRightPhrase = action.payload + }, }, }) -export const { - setWord, - setMnemonic, - setIsCopyPastedPhrase, -} = keyGenerationSlice.actions +export const { setWord, setMnemonic, setIsCopyPastedPhrase, setIsRightPhrase } = + keyGenerationSlice.actions export default keyGenerationSlice.reducer