status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-18 06:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: make validator setup activation responsive

Browse Source
This commit is contained in:
Hristo Nedelkov 2024-01-27 08:22:26 +02:00
parent 26ab5e977c
commit 5651b2d9fd
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorActivation/ActivationValidatorSetup.tsx
View File

@ -4,10 +4,11 @@ import { Text } from '@status-im/components'
import Confetti from 'react-confetti'
import ActivationCard from '../../Activation/ActivationCard'
import { useWindowSize } from '../../../../hooks/useWindowSize'
const ActivationValidatorSetup = () => {
const [showConfetti, setShowConfetti] = useState(true)
const windowSize = useWindowSize()
useEffect(() => {
const timer = setTimeout(() => {
setShowConfetti(false)
@ -19,7 +20,7 @@ const ActivationValidatorSetup = () => {
}, [])
return (
<Stack style={styles.confettiContainer} width={'100%'} minHeight={'65vh'}>
<Stack style={styles.confettiContainer} minHeight={'65vh'}>
{showConfetti && <Confetti style={styles.confettiCanvas} />}
<YStack style={{ padding: '26px 32px' }}>
<YStack space={'$5'}>
@ -33,8 +34,8 @@ const ActivationValidatorSetup = () => {
up your validators and making a deposit.
</Text>
</Stack>
<YStack space={'$3'} marginTop={'25px'} width={'33%'}>
<XStack width={'151%'} space={'$3'}>
<YStack space={'$3'} marginTop={'25px'}>
<XStack space={'$3'} width="100%" flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'}>
<ActivationCard
text="Execution Sync Status"
isGaugeIncluded={true}
@ -50,7 +51,7 @@ const ActivationValidatorSetup = () => {
gaugeTotal={172.503}
/>
</XStack>
<XStack space={'$3'}>
<XStack space={'$3'} flexWrap={windowSize.width < 780 ? 'wrap' : 'nowrap'} width="100%">
<ActivationCard text="Validator Queue" value="92603" />
<ActivationCard text="Estimated Activation Time" value="32 Days" />
<ActivationCard text="Current APR" value="4.40%" />