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

View File

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

View File

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