status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add state and show only active step

This commit is contained in:
RadoslavDimchev 2023-08-24 10:51:47 +03:00
parent f0da1baa19
commit 0ba80804df
1 changed files with 53 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
View File

@ -3,8 +3,15 @@ import { Button, Shadow, Text } from '@status-im/components'
import FormStepper from './FormStepper' import FormStepper from './FormStepper'
import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient' import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient'
import Titles from '../../components/General/Titles' import Titles from '../../components/General/Titles'
import { useState } from 'react'
const ValidatorOnboarding = () => { const ValidatorOnboarding = () => {
const [activeStep, setActiveStep] = useState(0)
const changeActiveStep = (step: number) => {
setActiveStep(step)
}
return ( return (
<PageWrapperGradient> <PageWrapperGradient>
<YStack <YStack
@ -21,49 +28,53 @@ const ValidatorOnboarding = () => {
titleSize={19} titleSize={19}
subtitle="Earn Rewards for securing the Ethereum Network" subtitle="Earn Rewards for securing the Ethereum Network"
/> />
<FormStepper /> <FormStepper activeStep={activeStep} changeActiveStep={changeActiveStep} />
<Shadow {activeStep === 0 && (
variant="$2" <>
style={{ <Shadow
borderRadius: '16px', variant="$2"
border: 'none', style={{
flexDirection: 'row', borderRadius: '16px',
backgroundColor: '#fff', border: 'none',
}} flexDirection: 'row',
className="content" backgroundColor: '#fff',
> }}
<YStack className="layout-left" space={10} style={{ padding: '16px 32px' }}> className="content"
<TextTam fontSize={27} fontWeight={'700'} style={{ marginBottom: '20px' }}> >
Overview <YStack className="layout-left" space={10} style={{ padding: '16px 32px' }}>
</TextTam> <TextTam fontSize={27} fontWeight={'700'} style={{ marginBottom: '20px' }}>
Overview
</TextTam>
<Text size={27}> <Text size={27}>
Becoming a validator is a big responsibility with important preparation steps. Only Becoming a validator is a big responsibility with important preparation steps.
start the deposit process when youre ready. Only start the deposit process when youre ready.
</Text> </Text>
<Text size={15} color="#939BA1"> <Text size={15} color="#939BA1">
By running a validator, you'll be responsible for securing the network and receive By running a validator, you'll be responsible for securing the network and receive
continuous payouts for actions that help the network reach consensus. continuous payouts for actions that help the network reach consensus.
</Text> </Text>
<Text size={15} color="#939BA1"> <Text size={15} color="#939BA1">
Since the successful transition to proof-of-stake via The Merge, Ethereum is fully 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 secured by proof-of-stake validators. By running a validator, you'll be helping to
secure the Ethereum network. secure the Ethereum network.
</Text> </Text>
</YStack> </YStack>
<section className="layout-right"> <section className="layout-right">
<div className="image-container"> <div className="image-container">
<img <img
src="./background-images/sync-status-background.png" src="./background-images/sync-status-background.png"
alt="background" alt="background"
className="background-img" className="background-img"
/> />
</div> </div>
</section> </section>
</Shadow> </Shadow>
<Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}> <Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
<Button>Continue</Button> <Button>Continue</Button>
</Stack> </Stack>
</>
)}
</YStack> </YStack>
</PageWrapperGradient> </PageWrapperGradient>
) )