status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-12 19:36:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: tests and format code

Browse Source
This commit is contained in:
RadoslavDimchev 2023-09-11 09:12:10 +03:00
parent eca2cca5da
commit 57290f18fa
3 changed files with 83 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/ValidatorOnboarding/ContinueButton.stories.ts
View File

@ -21,6 +21,7 @@ export const Default: Story = {
continueHandler: () => {},
activeStep: 0,
isConfirmPhraseStage: false,
subStepValidatorSetup: 0,
},
}
@ -29,5 +30,6 @@ export const Disabled: Story = {
continueHandler: () => {},
activeStep: 0,
isConfirmPhraseStage: true,
subStepValidatorSetup: 0,
},
}

22
src/pages/ValidatorOnboarding/ContinueButton.tsx
View File

@ -15,8 +15,12 @@ type ContinueButton = {
subStepValidatorSetup: number
}
const ContinueButton = ({ continueHandler, activeStep, isConfirmPhraseStage, subStepValidatorSetup }: ContinueButton) => {
console.log(activeStep)
const ContinueButton = ({
continueHandler,
activeStep,
isConfirmPhraseStage,
subStepValidatorSetup,
}: ContinueButton) => {
const { isCopyPastedPhrase, isRightPhrase, words, validWords } = useSelector(
(state: RootState) => state.keyGeneration,
)
@ -36,8 +40,8 @@ const ContinueButton = ({ continueHandler, activeStep, isConfirmPhraseStage, sub
return false
}
const isActivationScreen = activeStep === 3 && subStepValidatorSetup === 3
console.log(isActivationScreen)
const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3
return (
<XStack style={{ width: '100%', marginTop: '16px', zIndex: 999, alignItems: 'center' }}>
{isCopyPastedPhrase && (
@ -53,25 +57,23 @@ const ContinueButton = ({ continueHandler, activeStep, isConfirmPhraseStage, sub
style={{
width: '100%',
zIndex: 999,
justifyContent: isActivationScreen ? 'space-between' : 'end',
justifyContent: isActivationValScreen ? 'space-between' : 'end',
marginTop: isCopyPastedPhrase ? '0px' : '40px',
}}
>
{isActivationScreen &&
{isActivationValScreen && (
<LinkWithArrow
text="Skip to Dashboard"
to="/"
arrowRight={true}
style={{ fontWeight: 'bold' }}
/>
}
)}
<Button onPress={continueHandler} size={40} disabled={isDisabled()}>
{activeStep < 5 ? 'Continue' : 'Continue to Dashboard'}
</Button>
</XStack>
</XStack >
</XStack>
)
}

138
src/pages/ValidatorOnboarding/ValidatorSetup/ActivationValidatorSetup.tsx
View File

@ -2,81 +2,81 @@ import { useState, useEffect } from 'react'
import { XStack, Stack, YStack } from 'tamagui'
import { Text } from '@status-im/components'
import Confetti from 'react-confetti'
import LinkWithArrow from '../../../components/General/LinkWithArrow'
import ActivationCard from '../Activation/ActivationCard'
const styles = {
confettiContainer: {
position: 'relative' as const,
width: '100%',
height: '100%',
justifyContent: 'fit-content'
},
confettiCanvas: {
position: 'absolute' as const,
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 0,
},
}
const ActivationValidatorSetup = () => {
const [showConfetti, setShowConfetti] = useState(true)
const [showConfetti, setShowConfetti] = useState(true)
useEffect(() => {
const timer = setTimeout(() => {
setShowConfetti(false)
}, 10000)
useEffect(() => {
const timer = setTimeout(() => {
setShowConfetti(false)
}, 10000)
return () => {
clearTimeout(timer)
}
}, [])
return () => {
clearTimeout(timer)
}
}, [])
return (
<Stack style={styles.confettiContainer} width={'100%'} >
{showConfetti && <Confetti style={styles.confettiCanvas} />}
<YStack style={{ padding: '16px 32px' }}>
<YStack space={'$3'}>
<Text size={27} weight={'semibold'}>
Activation
</Text>
<Stack >
<Text size={27}>
Congratulations! You have successfully setup your Execution and Consensus clients and are currently syncing your nodes. You need to be sufficiently synced prior to setting up your validators and making a deposit.
</Text>
</Stack>
<YStack space={'$3'} marginTop={'10px'} width={'33%'} >
<XStack width={'151%'} space={'$3'} >
<ActivationCard
text="Execution Sync Status"
isGaugeIncluded={true}
gaugeColor={'#2a4af5'}
gaugeSynced={123.524}
gaugeTotal={172.503}
/>
<ActivationCard
text="Execution Sync Status"
isGaugeIncluded={true}
gaugeColor={'#EB5757'}
gaugeSynced={123.524}
gaugeTotal={172.503}
/>
</XStack>
<XStack space={'$3'}>
<ActivationCard text="Validator Queue" value="92603" />
<ActivationCard text="Estimated Activation Time" value="32 Days" />
<ActivationCard text="Current APR" value="4.40%" />
</XStack>
</YStack>
</YStack>
</YStack>
</Stack>
)
return (
<Stack style={styles.confettiContainer} width={'100%'}>
{showConfetti && <Confetti style={styles.confettiCanvas} />}
<YStack style={{ padding: '16px 32px' }}>
<YStack space={'$3'}>
<Text size={27} weight={'semibold'}>
Activation
</Text>
<Stack>
<Text size={27}>
Congratulations! You have successfully setup your Execution and Consensus clients and
are currently syncing your nodes. You need to be sufficiently synced prior to setting
up your validators and making a deposit.
</Text>
</Stack>
<YStack space={'$3'} marginTop={'10px'} width={'33%'}>
<XStack width={'151%'} space={'$3'}>
<ActivationCard
text="Execution Sync Status"
isGaugeIncluded={true}
gaugeColor={'#2a4af5'}
gaugeSynced={123.524}
gaugeTotal={172.503}
/>
<ActivationCard
text="Execution Sync Status"
isGaugeIncluded={true}
gaugeColor={'#EB5757'}
gaugeSynced={123.524}
gaugeTotal={172.503}
/>
</XStack>
<XStack space={'$3'}>
<ActivationCard text="Validator Queue" value="92603" />
<ActivationCard text="Estimated Activation Time" value="32 Days" />
<ActivationCard text="Current APR" value="4.40%" />
</XStack>
</YStack>
</YStack>
</YStack>
</Stack>
)
}
export default ActivationValidatorSetup
const styles = {
confettiContainer: {
position: 'relative' as const,
width: '100%',
height: '100%',
justifyContent: 'fit-content',
},
confettiCanvas: {
position: 'absolute' as const,
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 0,
},
}