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

Update content dynamically

This commit is contained in:
Hristo Nedelkov 2023-08-25 11:42:25 +03:00
parent b8cc418ab5
commit ea6cfcb3a0
3 changed files with 52 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,27 +4,36 @@ import { Stack, XStack, YStack } from 'tamagui'
import AdvisoriesContent from './AdvisoriesContent' import AdvisoriesContent from './AdvisoriesContent'
type AdvisoryTopicsType = { type AdvisoryTopicsType = {
[key: string]: string [key: string]: string[]
} }
const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅'] const unicodeNumbers = ['➀', '➁', '➂', '➃', '➄', '➅']
const advisoryTopics: AdvisoryTopicsType = { const advisoryTopics: AdvisoryTopicsType = {
'Proof of Stake': 'This is content for Proof of Stake...', 'Proof of Stake': ['This is content for Proof of Stake...'],
Deposit: 'This is content for Deposit...', Deposit: ['This is content for Deposit...'],
'Key Management': 'This is content for Key Management...', 'Key Management': ['This is content for Key Management...'],
'Bad Behaviour': 'Bad Behaviour': [
'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing*. Running your validator keys simultaneously on two or more machines will result in slashing.* Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.', 'If you try to cheat the system, or act contrary to the specification, you will be liable to incur a penalty known as slashing.',
Requirements: 'This is content for Requirements...', 'Running your validator keys simultaneously on two or more machines will result in slashing.',
Risks: 'This is content for Risks...', 'Simply being offline with an otherwise healthy network does not result in slashing, but will result in small inactivity penalties.',
],
Requirements: ['This is content for Requirements...'],
Risks: ['This is content for Risks...'],
} }
const Advicsories = () => { const Advicsories = () => {
const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour') const [selectedTitle, setSelectedTitle] = useState('Bad Behaviour')
return ( return (
<XStack justifyContent={'space-between'} space={'$10'} style={{ padding: '16px 32px' }}> <XStack
<YStack justifyContent={'space-between'} space={'$2'}> className={'layout-left'}
space={'$10'}
style={{ padding: '16px 32px' }}
marginBottom={'$20'}
width={'100%'}
>
<YStack space={'$2'}>
<Stack marginBottom="$6"> <Stack marginBottom="$6">
<Text size={27} weight={'semibold'}> <Text size={27} weight={'semibold'}>
Advisories Advisories

51
src/pages/ValidatorOnboarding/Advicsories/AdvisoriesContent.tsx
View File

@ -1,31 +1,40 @@
import { Text } from '@status-im/components' import { Text } from '@status-im/components'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { YStack } from 'tamagui' import { Stack, YStack } from 'tamagui'
type AdvisoriesContentProps = { type AdvisoriesContentProps = {
title: string title: string
content: string content: string[]
} }
const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => { const AdvisoriesContent = ({ title, content }: AdvisoriesContentProps) => {
return ( return (
<YStack justifyContent={'space-between'} space={'$2'}> <YStack space={'$3'}>
<Text size={27}>{title}</Text> <Stack style={{ marginBottom: '5%' }}>
<Text size={13}>{content}</Text> <Text size={27} weight={400}>
<Text size={13}> {title}
<Link </Text>
to={'https://github.com/ethereum/consensus-specs'} </Stack>
style={{ textDecorationLine: 'underline', color: '#484848' }} <YStack space={'$6'}>
> {content.length &&
The Ethereum consensus layer specification content.map(row => {
</Link> return <Text size={15}>{row}</Text>
</Text> })}
<Text size={13} weight={'semibold'}> <Text size={15}>
<Link <Link
to={'https://github.com/ethereum/consensus-specs'} to={'https://github.com/ethereum/consensus-specs'}
style={{ textDecorationLine: 'underline', color: '#2A4CF4', fontWeight: 'bold' }} style={{ textDecorationLine: 'underline', color: '#484848' }}
> >
More on slashing risks The Ethereum consensus layer specification
</Link> </Link>
</Text> </Text>
<Text size={15} weight={'semibold'}>
<Link
to={'https://github.com/ethereum/consensus-specs'}
style={{ textDecorationLine: 'underline', color: '#2A4CF4', fontWeight: 'bold' }}
>
More on slashing risks
</Link>
</Text>
</YStack>
</YStack> </YStack>
) )
} }

6
src/pages/ValidatorOnboarding/KeyGeneration/KeyGenerationHeader.tsx
View File

@ -1,6 +1,6 @@
import { Text } from '@status-im/components' import { Text } from '@status-im/components'
import { XStack } from 'tamagui' import { XStack } from 'tamagui'
import SyncCard from './SyncCard' // import SyncCard from './SyncCard'
const KeyGenerationHeader = () => { const KeyGenerationHeader = () => {
return ( return (
@ -9,8 +9,8 @@ const KeyGenerationHeader = () => {
Key Generation Key Generation
</Text> </Text>
<XStack space={'$2'}> <XStack space={'$2'}>
<SyncCard synced={123.524} total={172.503} /> {/* <SyncCard synced={123.524} total={172.503} />
<SyncCard synced={123.524} total={172.503} /> <SyncCard synced={123.524} total={172.503} /> */}
</XStack> </XStack>
</XStack> </XStack>
) )