diff --git a/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx b/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx new file mode 100644 index 00000000..ba7ef61e --- /dev/null +++ b/src/pages/ValidatorOnboarding/ClientSetup/ClientSetup.tsx @@ -0,0 +1,27 @@ +import { Separator, Stack, XStack, YStack } from 'tamagui' +import SetupRow from './SetupRow' +import WithdrawalAddress from './WithdrawalAddress' +import { Text } from '@status-im/components' +import { ArrowLeftIcon } from '@status-im/icons' +import { Link } from 'react-router-dom' + +const ClientSetup = () => { + return ( + + + + + + + + + + Edit Validators + + + + + + ) +} +export default ClientSetup diff --git a/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx new file mode 100644 index 00000000..f2f89663 --- /dev/null +++ b/src/pages/ValidatorOnboarding/ClientSetup/SetupRow.tsx @@ -0,0 +1,41 @@ +import { Stack, XStack, YStack } from 'tamagui' +import { Input as StatusInput, Text } from '@status-im/components' +import { AddIcon } from '@status-im/icons' + +type SetupRowProps = { + title: string +} +const SetupRow = ({ title }: SetupRowProps) => { + return ( + + + {title} + + + + + How many Validators would you like to run? + + } /> + + + + ETH + + + 64 + + + + + USD + + + $4,273 USD + + + + + ) +} +export default SetupRow diff --git a/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx b/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx new file mode 100644 index 00000000..ca1e7430 --- /dev/null +++ b/src/pages/ValidatorOnboarding/ClientSetup/WithdrawalAddress.tsx @@ -0,0 +1,33 @@ +import { Stack, YStack } from 'tamagui' +import { InformationBox, Input as StatusInput, Text } from '@status-im/components' +import { ClearIcon, CloseCircleIcon } from '@status-im/icons' +type WithdrawalAddressProps = { + title: string +} +const WithdrawalAddress = ({ title }: WithdrawalAddressProps) => { + return ( + + + {title} + + + + Ethereum Address + + + } + /> + + } + /> + + + ) +} +export default WithdrawalAddress diff --git a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx index 97e07ef6..cb74d96b 100644 --- a/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx +++ b/src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx @@ -32,26 +32,34 @@ const FormStepper = ({ activeStep, changeActiveStep }: FormStepperProps) => { data-step="Advicsories" /> changeActiveStep(2)} completed={activeStep > 1} + data-subtitle="Execution & Consensus" + data-step="Advicsories" + /> + changeActiveStep(3)} + completed={activeStep > 2} data-subtitle="Clients, Nodes & Validators" data-step="Validator Setup" /> changeActiveStep(3)} - completed={activeStep > 2} + onClick={() => changeActiveStep(4)} + completed={activeStep > 3} data-subtitle="Secure your Keypairs" data-step="Key Generation" /> changeActiveStep(4)} - completed={activeStep > 3} + onClick={() => changeActiveStep(5)} + completed={activeStep > 4} data-subtitle="Complete Setup" data-step="Activation" /> diff --git a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx index 9c7f1eca..295b278b 100644 --- a/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx +++ b/src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx @@ -11,6 +11,7 @@ import ValidatorBoxWrapper from './ValidatorBoxWrapper/ValidatorBoxWrapper' import { Button } from '@status-im/components' import { useNavigate } from 'react-router-dom' import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall' +import ClientSetup from './ClientSetup/ClientSetup' const ValidatorOnboarding = () => { const [activeStep, setActiveStep] = useState(0) @@ -51,9 +52,10 @@ const ValidatorOnboarding = () => { {activeStep === 0 && } {activeStep === 1 && } - {activeStep === 2 && } - {activeStep === 3 && } - {activeStep === 4 && } + {activeStep === 2 && } + {activeStep === 3 && } + {activeStep === 4 && } + {activeStep === 5 && }