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

Use avtivation sync card and style

This commit is contained in:
Hristo Nedelkov 2023-08-29 12:08:06 +03:00
parent be3c194986
commit 13b4d9a8c7
2 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,15 +10,15 @@ const Activation = () => {
useEffect(() => { useEffect(() => {
const timer = setTimeout(() => { const timer = setTimeout(() => {
setShowConfetti(false) setShowConfetti(false)
}, 5000) }, 5000)
return () => { return () => {
clearTimeout(timer) clearTimeout(timer)
} }
}, []) }, [])
return ( return (
<Stack> <Stack width={'100%'}>
{showConfetti && <Confetti width={1000} height={800} style={{ zIndex: 0 }} />} {showConfetti && <Confetti width={1000} height={800} style={{ zIndex: 0 }} />}
<YStack style={{ padding: '16px 32px' }}> <YStack style={{ padding: '16px 32px' }}>
<YStack space={'$5'}> <YStack space={'$5'}>
@ -32,13 +32,13 @@ const Activation = () => {
<YStack space={'$2'} marginTop={'10px'} width={'33%'}> <YStack space={'$2'} marginTop={'10px'} width={'33%'}>
<XStack space={'$2'} justifyContent={'space-between'}> <XStack space={'$2'} justifyContent={'space-between'}>
<ActivationCard text="Validators" value="4" /> <ActivationCard text="Validators" value="4" />
<ActivationCard text="Execution Sync Status" value="fasfasf af sa" /> <ActivationCard text="Execution Sync Status" value="" isGaugeIncluded={true} />
<ActivationCard text="Execution Sync Status" value="fasfasf af sa" /> <ActivationCard text="Execution Sync Status" value="" isGaugeIncluded={true} gaugeColor={'#EB5757'} />
</XStack> </XStack>
<XStack space={'$2'}> <XStack space={'$2'}>
<ActivationCard text="Current APR" value="4.40%" /> <ActivationCard text="Current APR" value="4.40%" />
<ActivationCard text="Estimated Activation Time" value="32 Days" /> <ActivationCard text="Estimated Activation Time" value="32 Days" />
<ActivationCard text="Estimated Activation Time" value="fasfasf af sa" /> <ActivationCard text="Estimated Activation Time" value="" />
</XStack> </XStack>
</YStack> </YStack>
</YStack> </YStack>

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

@ -1,12 +1,15 @@
import { YStack } from 'tamagui' import { Stack, XStack, YStack } from 'tamagui'
import { Text } from '@status-im/components' import { Text } from '@status-im/components'
import ActivationSyncCard from './ActivationSyncCard'
type ActivationCardProps = { type ActivationCardProps = {
text: string text: string
value: string value: string
isGaugeIncluded?: boolean
gaugeColor?: string
} }
const ActivationCard = ({ text, value }: ActivationCardProps) => { const ActivationCard = ({ text, value, isGaugeIncluded, gaugeColor }: ActivationCardProps) => {
return ( return (
<YStack <YStack
style={{ style={{
@ -17,12 +20,24 @@ const ActivationCard = ({ text, value }: ActivationCardProps) => {
width: '100%', width: '100%',
}} }}
> >
<Text size={13} weight={'semibold'}> {!isGaugeIncluded && (
{text} <Stack>
</Text> <Text size={13} weight={'semibold'}>
<Text size={19} color="blue" weight={'semibold'}> {text}
{value} </Text>
</Text> <Text size={19} color="blue" weight={'semibold'}>
{value}
</Text>
</Stack>
)}
{isGaugeIncluded && (
<Stack>
<Text size={13} weight={'semibold'}>
{text}
</Text>
<ActivationSyncCard color={gaugeColor} synced={132123} total={200000} />
</Stack>
)}
</YStack> </YStack>
) )
} }