Merge branch 'hn.validator-onboarding' of https://github.com/nimbus-gui/nimbus-gui into hn.validator-onboarding
This commit is contained in:
Hristo Nedelkov
commit
1e99f3734b
|
|
@ -2,70 +2,60 @@ import { Stack, Text as TextTam, YStack } from 'tamagui'
|
||||||
import { Button, Shadow, Text } from '@status-im/components'
|
import { Button, Shadow, Text } from '@status-im/components'
|
||||||
import FormStepper from './Stepper'
|
import FormStepper from './Stepper'
|
||||||
import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient'
|
import PageWrapperGradient from '../../components/PageWrappers/PageWrapperGradient'
|
||||||
|
import Titles from '../../components/General/Titles'
|
||||||
|
|
||||||
Text
|
const ValidatorOnboarding = () => {
|
||||||
function ValidatorOnboarding() {
|
|
||||||
return (
|
return (
|
||||||
<>
|
<PageWrapperGradient>
|
||||||
<PageWrapperGradient>
|
<YStack style={{ width: '100%', margin: '0 auto', padding: '0 10%' }}>
|
||||||
<YStack style={{ maxWidth: '1052px', width: '100%', margin: '0 auto', maxHeight: '582px' }}>
|
<YStack style={{ width: '100%', margin: '64px 0 1vh' }}>
|
||||||
<YStack style={{ width: '100%', margin: '64px 0 1vh' }}>
|
<Titles
|
||||||
<Text size={19} weight={'semibold'}>
|
title="Create Nimbus Validator"
|
||||||
Create Nimbus Validator
|
subtitle="Earn Rewards for securing the Ethereum Network"
|
||||||
</Text>
|
/>
|
||||||
<Text size={15} weight="regular">
|
<FormStepper />
|
||||||
Earn Rewards for securing the Ethereum Network
|
|
||||||
</Text>
|
|
||||||
<FormStepper />
|
|
||||||
</YStack>
|
|
||||||
|
|
||||||
<Shadow
|
|
||||||
variant="$2"
|
|
||||||
style={{
|
|
||||||
borderRadius: '16px',
|
|
||||||
border: 'none',
|
|
||||||
flexDirection: 'row',
|
|
||||||
backgroundColor: '#fff',
|
|
||||||
}}
|
|
||||||
className="content"
|
|
||||||
>
|
|
||||||
<YStack className="layout-left" space={10} left={40} top={40}>
|
|
||||||
<TextTam fontSize={27} fontWeight={'700'} style={{ marginBottom: '30px' }}>
|
|
||||||
Overview
|
|
||||||
</TextTam>
|
|
||||||
|
|
||||||
<Text size={27}>
|
|
||||||
Becoming a validator is a big responsibility with important preparation steps. Only
|
|
||||||
start the deposit process when youre ready."
|
|
||||||
</Text>
|
|
||||||
<Text size={15} color="#939BA1">
|
|
||||||
By running a validator, you'll be responsible for securing the network and receive
|
|
||||||
continuous payouts for actions that help the network reach consensus.
|
|
||||||
</Text>
|
|
||||||
<Text size={15} color="#939BA1">
|
|
||||||
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
|
|
||||||
secure the Ethereum network.
|
|
||||||
</Text>
|
|
||||||
</YStack>
|
|
||||||
<section className="layout-right">
|
|
||||||
<div className="image-container">
|
|
||||||
<img
|
|
||||||
src="./background-images/sync-status-background.png"
|
|
||||||
alt="background"
|
|
||||||
className="background-img"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</Shadow>
|
|
||||||
<Stack marginTop="$4" alignItems='flex-end'>
|
|
||||||
<Button variant="blue" size={40} >
|
|
||||||
Continue
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</YStack>
|
</YStack>
|
||||||
</PageWrapperGradient>
|
<Shadow
|
||||||
</>
|
variant="$2"
|
||||||
|
style={{
|
||||||
|
borderRadius: '16px',
|
||||||
|
border: 'none',
|
||||||
|
flexDirection: 'row',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
}}
|
||||||
|
className="content"
|
||||||
|
>
|
||||||
|
<YStack className="layout-left" space={10} left={40} top={40}>
|
||||||
|
<TextTam fontSize={27} fontWeight={'700'} style={{ marginBottom: '30px' }}>
|
||||||
|
Overview
|
||||||
|
</TextTam>
|
||||||
|
|
||||||
|
<Text size={27}>
|
||||||
|
Becoming a validator is a big responsibility with important preparation steps. Only
|
||||||
|
start the deposit process when youre ready."
|
||||||
|
</Text>
|
||||||
|
<Text size={15} color="#939BA1">
|
||||||
|
By running a validator, you'll be responsible for securing the network and receive
|
||||||
|
continuous payouts for actions that help the network reach consensus.
|
||||||
|
</Text>
|
||||||
|
<Text size={15} color="#939BA1">
|
||||||
|
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
|
||||||
|
secure the Ethereum network.
|
||||||
|
</Text>
|
||||||
|
</YStack>
|
||||||
|
<section className="layout-right">
|
||||||
|
<div className="image-container">
|
||||||
|
<img
|
||||||
|
src="./background-images/sync-status-background.png"
|
||||||
|
alt="background"
|
||||||
|
className="background-img"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</Shadow>
|
||||||
|
</YStack>
|
||||||
|
</PageWrapperGradient>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue