From 41221a7a84f92764a86741a95bbd4aa5dc73afce Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 7 Sep 2023 11:50:33 +0300 Subject: [PATCH 01/12] feat: add state and handlers to validator count --- .../ClientSetup/SetupRow.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx index ecd792ea..d958a09b 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,11 @@ const SetupRow = ({ title }: SetupRowProps) => { How many Validators would you like to run? - } /> + } + value={validatorCount.toString()} + onChange={changeValidatorCountHandler} + /> From e77a129f715f87e5dcf1c35fe8ac2115e9ec81a6 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 7 Sep 2023 11:53:54 +0300 Subject: [PATCH 02/12] feat: add state to withdrawal address --- .../ClientSetup/SetupRow.tsx | 1 + .../ClientSetup/WithdrawalAddress.tsx | 21 ++++++++++++++++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx index d958a09b..33803306 100644 --- a/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx +++ b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx @@ -34,6 +34,7 @@ const SetupRow = ({ title }: SetupRowProps) => { icon={} 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 10a8a340..9732637d 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} /> Date: Thu, 7 Sep 2023 11:54:29 +0300 Subject: [PATCH 03/12] Create ConsensusClientCard.stories.tsx --- .../ConsensusClientCard.stories.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClientCard.stories.tsx 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' }, +} From 7129e9678f7ac7a051d63e9b6c15aa12df21c967 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 7 Sep 2023 11:54:31 +0300 Subject: [PATCH 04/12] Create SyntaxHighlighter.stories.tsx --- .../SyntaxHighlighter.stories.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/SyntaxHighlighter.stories.tsx 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'] }, +} From 070d2317361e9b97e436ce8dc7c51a213215b80e Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 7 Sep 2023 11:54:33 +0300 Subject: [PATCH 05/12] Create ConsensusGaugeCard.stories.tsx --- .../ConsensusGaugeCard.stories.tsx | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusGaugeCard.stories.tsx 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' + }, +} From ab44c83b12ab3c86b12cc5d5839052a73a4882a4 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 7 Sep 2023 12:05:30 +0300 Subject: [PATCH 06/12] fix: story decorators --- .../ValidatorSetup/ConsensusSelection.stories.tsx | 2 +- .../ValidatorSetup/ExecClientCard.stories.tsx | 3 +-- .../ValidatorSetup/PairedDeviceCard.stories.tsx | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) 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 From 53987a8ba4f639dc919fc9c1bbc21ab3f1d5f915 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 7 Sep 2023 12:55:16 +0300 Subject: [PATCH 07/12] Create ActivationValidatorSetup.tsx --- .../ValidatorSetup/ActivationValidatorSetup.tsx | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx new file mode 100644 index 00000000..70487877 --- /dev/null +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx @@ -0,0 +1,4 @@ + 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. + + + From 7130a513bdcbe0569cc9bac11f2138679edcd6f8 Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 7 Sep 2023 12:55:34 +0300 Subject: [PATCH 08/12] Update ActivationValidatorSetup.tsx --- .../ActivationValidatorSetup.tsx | 83 +++++++++++++++++++ 1 file changed, 83 insertions(+) diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx index 70487877..0a99698b 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx @@ -1,4 +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 From 8a16183a25aa1faed46c9a36129259f92f51981c Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 7 Sep 2023 12:56:00 +0300 Subject: [PATCH 09/12] Add subStepValidatorSetup for Activation --- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 48bb2dda..b3148b7f 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) @@ -78,9 +79,10 @@ const ValidatorOnboarding = () => { {activeStep === 1 && } {activeStep === 2 && } - {activeStep === 3 && subStepValidatorSetup === 0 && } + {activeStep === 3 && subStepValidatorSetup === 0 && } {activeStep === 3 && subStepValidatorSetup === 1 && } {activeStep === 3 && subStepValidatorSetup === 2 && } + {activeStep === 3 && subStepValidatorSetup === 3 && } {activeStep === 4 && } {activeStep === 5 && } From f6f9c07155a08e1a95a61173d209ba5480ebac3c Mon Sep 17 00:00:00 2001 From: Hristo Nedelkov Date: Thu, 7 Sep 2023 12:58:11 +0300 Subject: [PATCH 10/12] Fix texts and cards order --- src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx | 2 +- .../ValidatorSetup/ActivationValidatorSetup.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index b3148b7f..302870c5 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -79,7 +79,7 @@ const ValidatorOnboarding = () => { {activeStep === 1 && } {activeStep === 2 && } - {activeStep === 3 && subStepValidatorSetup === 0 && } + {activeStep === 3 && subStepValidatorSetup === 0 && } {activeStep === 3 && subStepValidatorSetup === 1 && } {activeStep === 3 && subStepValidatorSetup === 2 && } {activeStep === 3 && subStepValidatorSetup === 3 && } diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx index 0a99698b..4e547b17 100644 --- a/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx @@ -67,14 +67,14 @@ const ActivationValidatorSetup = () => { /> - - + + Date: Thu, 7 Sep 2023 13:04:08 +0300 Subject: [PATCH 11/12] Create ActivationValidatorSetup.stories.tsx --- .../ActivationValidatorSetup.stories.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.stories.tsx 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: {}, +} From 1c5209735016eabdb372e8305cdd6692e124ea80 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Thu, 7 Sep 2023 13:30:19 +0300 Subject: [PATCH 12/12] feat: disable continue button --- src/pages/ValidatorOnboarding/ContinueButton.tsx | 16 ++++++++++++---- .../ValidatorOnboarding/ValidatorOnboarding.tsx | 6 +++++- .../ValidatorOnboarding/KeyGeneration/slice.ts | 12 +++++++----- 3 files changed, 24 insertions(+), 10 deletions(-) diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx index 592e3a2b..a06b4ac3 100644 --- a/src/pages/ValidatorOnboarding/ContinueButton.tsx +++ b/src/pages/ValidatorOnboarding/ContinueButton.tsx @@ -8,13 +8,21 @@ import { RootState } from '../../redux/store' type ContinueButton = { continueHandler: () => 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 302870c5..0c41651d 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -87,7 +87,11 @@ const ValidatorOnboarding = () => { {activeStep === 4 && } {activeStep === 5 && } - + ) 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