diff --git a/src/pages/ValidatorOnboarding/Activation/Activation.tsx b/src/pages/ValidatorOnboarding/Activation/Activation.tsx index 5a5aa96a..217c038d 100644 --- a/src/pages/ValidatorOnboarding/Activation/Activation.tsx +++ b/src/pages/ValidatorOnboarding/Activation/Activation.tsx @@ -10,15 +10,15 @@ const Activation = () => { useEffect(() => { const timer = setTimeout(() => { setShowConfetti(false) - }, 5000) + }, 5000) return () => { - clearTimeout(timer) + clearTimeout(timer) } - }, []) + }, []) return ( - + {showConfetti && } @@ -32,13 +32,13 @@ const Activation = () => { - - + + - + diff --git a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx index 1930c93d..69dc7b4e 100644 --- a/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx +++ b/src/pages/ValidatorOnboarding/Activation/ActivationCard.tsx @@ -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 ( { width: '100%', }} > - - {text} - - - {value} - + {!isGaugeIncluded && ( + + + {text} + + + {value} + + + )} + {isGaugeIncluded && ( + + + {text} + + + + )} ) }