Use avtivation sync card and style
This commit is contained in:
parent
be3c194986
commit
13b4d9a8c7
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue