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({