Add gauge card

This commit is contained in:
Hristo Nedelkov 2023-08-30 20:32:42 +03:00
parent c01de7f9ac
commit 383279b5aa
1 changed files with 13 additions and 4 deletions

View File

@ -3,6 +3,7 @@ import PairedDeviceCard from './PairedDeviceCard'
import { Text } from '@status-im/components' import { Text } from '@status-im/components'
import ExecClientCard from './ExecClientCard' import ExecClientCard from './ExecClientCard'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import ConsensusGaugeCard from './ConsensusSelectionCard'
const ConsensusSelection = () => { const ConsensusSelection = () => {
return ( return (
@ -11,13 +12,21 @@ const ConsensusSelection = () => {
<Text size={27} weight={'semibold'}> <Text size={27} weight={'semibold'}>
Validator Setup Validator Setup
</Text> </Text>
<PairedDeviceCard /> <XStack space={'$2'}>
<ConsensusGaugeCard
color="blue"
synced={134879}
title="Execution Sync Status"
total={150000}
/>
<PairedDeviceCard />
</XStack>
</XStack> </XStack>
<YStack> <YStack>
<Stack style={{ marginBottom: '4px' }}> <Stack style={{ marginBottom: '4px' }}>
<Text size={13} color="#647084"> <Text size={13} color="#647084">
Execution Client Detection Consensus Client Detection
</Text> </Text>
</Stack> </Stack>
<Text size={15} weight={'regular'}> <Text size={15} weight={'regular'}>
@ -29,8 +38,8 @@ const ConsensusSelection = () => {
</Text> </Text>
</YStack> </YStack>
<TextTam fontSize={27} style={{ margin: '5px', marginLeft: 0 }}> <TextTam fontSize={27} style={{ margin: '5px', marginLeft: 0, marginTop: '50px' }}>
Select Execution client Install Consensus client
</TextTam> </TextTam>
<Stack marginTop={'10%'}> <Stack marginTop={'10%'}>