status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-03 07:03:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'hn.validator-onboarding' of https://github.com/nimbus-gui/nimbus-gui into hn.validator-onboarding

Browse Source
This commit is contained in:
Hristo Nedelkov 2023-08-25 11:15:29 +03:00
commit 037048af86
8 changed files with 106 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/PageWrappers/layout.css
View File

@ -40,7 +40,7 @@
/* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */
.layout-right {
flex: 0 0 44.6%;
flex: 0 0 45%;
max-width: 45%;
z-index: 0;
}

20
src/pages/ValidatorOnboarding/Activation/Activation.tsx
View File

@ -1,23 +1,7 @@
import { Button, Shadow } from '@status-im/components'
import { Stack } from 'tamagui'
import { YStack } from 'tamagui'
const Activation = () => {
return (
<>
<Shadow
variant="$1"
style={{
borderRadius: '16px',
border: 'none',
backgroundColor: '#fff',
padding: '16px 32px',
}}
></Shadow>
<Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
<Button>Continue</Button>
</Stack>
</>
)
return <YStack></YStack>
}
export default Activation

67
src/pages/ValidatorOnboarding/Advicsories/Advicsories.tsx
View File

@ -1,8 +1,7 @@
import { Button, Text } from '@status-im/components'
import { Text } from '@status-im/components'
import { useState } from 'react'
import { Stack, XStack, YStack } from 'tamagui'
import AdvisoriesContent from './AdvisoriesContent'
import ValidatorBoxWrapper from '../ValidatorBoxWrapper/ValidatorBoxWrapper'
type AdvisoryTopicsType = {
[key: string]: string
@ -24,41 +23,35 @@ const Advicsories = () => {
const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour')
return (
<>
<ValidatorBoxWrapper>
<XStack justifyContent={'space-between'} space={'$10'} style={{ padding: '16px 32px' }}>
<YStack justifyContent={'space-between'} space={'$2'}>
<Stack marginBottom="$6">
<Text size={27} weight={'semibold'}>
Advisories
</Text>
</Stack>
{Object.keys(advisoryTopics).map((title, index) => (
<Stack
key={title}
onPress={() => setSelectedTitle(title)}
style={{ cursor: 'pointer' }}
>
<Text
size={15}
weight={selectedTitle === title && 'semibold'}
color={selectedTitle === title ? 'blue' : undefined}
>
{unicodeNumbers[index]} {title}
</Text>
</Stack>
))}
</YStack>
<AdvisoriesContent
title={selectedTitle}
content={advisoryTopics[selectedTitle]}
></AdvisoriesContent>
</XStack>
</ValidatorBoxWrapper>
<Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
<Button>Continue</Button>
</Stack>
</>
<XStack
justifyContent={'space-between'}
className="layout-left"
space={10}
style={{ padding: '16px 32px' }}
>
<YStack>
<Stack>
<Text size={27}>Advisories</Text>
</Stack>
{Object.keys(advisoryTopics).map((title, index) => (
<Stack key={title} onPress={() => setSelectedTitle(title)} style={{ cursor: 'pointer' }}>
<Text
size={15}
weight={selectedTitle === title && 'semibold'}
color={selectedTitle === title ? 'blue' : undefined}
>
{unicodeNumbers[index]} {title}
</Text>
</Stack>
))}
</YStack>
<YStack>
<AdvisoriesContent
title={selectedTitle}
content={advisoryTopics[selectedTitle]}
></AdvisoriesContent>
</YStack>
</XStack>
)
}

20
src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
View File

@ -1,23 +1,7 @@
import { Button, Shadow } from '@status-im/components'
import { Stack } from 'tamagui'
import { YStack } from 'tamagui'
const KeyGeneration = () => {
return (
<>
<Shadow
variant="$1"
style={{
borderRadius: '16px',
border: 'none',
backgroundColor: '#fff',
padding: '16px 32px',
}}
></Shadow>
<Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
<Button>Continue</Button>
</Stack>
</>
)
return <YStack space={'$2'}></YStack>
}
export default KeyGeneration

100
src/pages/ValidatorOnboarding/Overview/Overview.tsx
View File

@ -1,5 +1,5 @@
import { Stack, Text as TextTam, XStack, YStack } from 'tamagui'
import { Button, Shadow, Text } from '@status-im/components'
import { Text } from '@status-im/components'
import { Link } from 'react-router-dom'
import OverviewCard from './OverviewCard'
import { ArrowRightIcon } from '@status-im/icons'
@ -7,63 +7,49 @@ import { ArrowRightIcon } from '@status-im/icons'
const Overview = () => {
return (
<>
<Shadow
variant="$2"
style={{
borderRadius: '16px',
border: 'none',
flexDirection: 'row',
backgroundColor: '#fff',
zIndex: 999,
}}
>
<YStack className="layout-left" space={'$5'} style={{ padding: '16px 32px' }}>
<TextTam fontSize={27} fontWeight={'600'} style={{ marginBottom: '5px' }}>
Overview
</TextTam>
<Text size={27}>
Becoming a validator is a big responsibility with important preparation steps. Only
start the deposit process when youre ready.
<YStack className="layout-left" space={'$5'}>
<TextTam fontSize={27} fontWeight={'600'} style={{ marginBottom: '5px' }}>
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>
<Stack style={{ margin: '2% 0 4%', maxWidth: 'fit-content' }}>
<Text size={15}>
<XStack space={'$1'} style={{ alignItems: 'center' }}>
<Link style={{ color: '#2A4CF4' }} to={'/'}>
Learn more
</Link>
<ArrowRightIcon size={16} color="#2A4CF4" />
</XStack>
</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>
<Stack style={{ margin: '2% 0 4%', maxWidth: 'fit-content' }}>
<Text size={15}>
<XStack space={'$1'} style={{ alignItems: 'center' }}>
<Link style={{ color: '#2A4CF4' }} to={'/'}>
Learn more
</Link>
<ArrowRightIcon size={16} color="#2A4CF4" />
</XStack>
</Text>
</Stack>
<XStack space={'$5'}>
<OverviewCard text={'Current APR'} value={'4.40%'} />
<OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />
<OverviewCard text={'Estimated Activation Time'} value={'32 Days'} />
<OverviewCard text={'Validator Queue'} value={'92603'} />
</XStack>
</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 style={{ alignItems: 'end', width: '100%', marginTop: '16px', zIndex: 999 }}>
<Button>Continue</Button>
</Stack>
</Stack>
<XStack space={'$5'}>
<OverviewCard text={'Current APR'} value={'4.40%'} />
<OverviewCard text={'Total ETH Staked'} value={'9,451,123'} />
<OverviewCard text={'Estimated Activation Time'} value={'32 Days'} />
<OverviewCard text={'Validator Queue'} value={'92603'} />
</XStack>
</YStack>
<section className="layout-right">
<div className="image-container">
<img
src="./background-images/sync-status-background.png"
alt="background"
className="background-img"
/>
</div>
</section>
</>
)
}

1
src/pages/ValidatorOnboarding/ValidatorBoxWrapper/ValidatorBoxWrapper.tsx
View File

@ -15,6 +15,7 @@ const ValidatorBoxWrapper = ({ children }: ValidatorBoxWrapperProps) => {
flexDirection: 'row',
backgroundColor: '#fff',
zIndex: 999,
padding: '16px 32px',
}}
>
{children}

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

@ -1,4 +1,4 @@
import { YStack } from 'tamagui'
import { Stack, YStack } from 'tamagui'
import FormStepper from './FormStepper/FormStepper'
import Titles from '../../components/General/Titles'
import { useState } from 'react'
@ -8,14 +8,26 @@ import Advicsories from './Advicsories/Advicsories'
import ValidatorSetup from './ValidatorSetup/ValidatorSetup'
import Activation from './Activation/Activation'
import './layoutGradient.css'
import ValidatorBoxWrapper from './ValidatorBoxWrapper/ValidatorBoxWrapper'
import { Button } from '@status-im/components'
import { useNavigate } from 'react-router-dom'
const ValidatorOnboarding = () => {
const [activeStep, setActiveStep] = useState(0)
const navigate = useNavigate()
const changeActiveStep = (step: number) => {
setActiveStep(step)
}
const continueHandler = () => {
if (activeStep < 4) {
setActiveStep(activeStep + 1)
} else {
navigate('/')
}
}
return (
<div className="gradient-wrapper">
<YStack
@ -33,11 +45,18 @@ const ValidatorOnboarding = () => {
subtitle="Earn Rewards for securing the Ethereum Network"
/>
<FormStepper activeStep={activeStep} changeActiveStep={changeActiveStep} />
{activeStep === 0 && <Overview />}
{activeStep === 1 && <Advicsories />}
{activeStep === 2 && <ValidatorSetup />}
{activeStep === 3 && <KeyGeneration />}
{activeStep === 4 && <Activation />}
<ValidatorBoxWrapper>
{activeStep === 0 && <Overview />}
{activeStep === 1 && <Advicsories />}
{activeStep === 2 && <ValidatorSetup />}
{activeStep === 3 && <KeyGeneration />}
{activeStep === 4 && <Activation />}
</ValidatorBoxWrapper>
<Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px', zIndex: 999 }}>
<Button onPress={continueHandler}>
{activeStep < 4 ? 'Continue' : 'Continue to Dashboard'}
</Button>
</Stack>
</YStack>
</div>
)

20
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup.tsx
View File

@ -1,23 +1,7 @@
import { Button, Shadow } from '@status-im/components'
import { Stack } from 'tamagui'
import { YStack } from 'tamagui'
const ValidatorSetup = () => {
return (
<>
<Shadow
variant="$1"
style={{
borderRadius: '16px',
border: 'none',
backgroundColor: '#fff',
padding: '16px 32px',
}}
></Shadow>
<Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px' }}>
<Button>Continue</Button>
</Stack>
</>
)
return <YStack></YStack>
}
export default ValidatorSetup