status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: create flow for confirming recovery phrase

This commit is contained in:
RadoslavDimchev 2023-08-29 11:08:44 +03:00
parent 0916161e3c
commit 092d70ea47
2 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
View File

@ -7,33 +7,43 @@ import RecoveryMechanism from './RecoveryMechanism'
import KeyFiles from './KeyFiles'
import RecoveryPhrase from './RecoveryPhrase'
import { BOTH_KEY_AND_RECOVERY, KEY_FILES, RECOVERY_PHRASE } from '../../../constants'
import ConfirmRecoveryPhrase from './ConfirmRecoveryPhrase'
const KeyGeneration = () => {
type KeyGenerationProps = {
isConfirmPhraseStage: boolean
}
const KeyGeneration = ({ isConfirmPhraseStage }: KeyGenerationProps) => {
const [recoveryMechanism, setRecoveryMechanism] = useState(KEY_FILES)
const handleRecMechanismChange = (value: string) => {
setRecoveryMechanism(value)
}
const isKeyFiles = recoveryMechanism === KEY_FILES || recoveryMechanism === BOTH_KEY_AND_RECOVERY
const isRecoveryPhrase =
recoveryMechanism === RECOVERY_PHRASE || recoveryMechanism === BOTH_KEY_AND_RECOVERY
const handleRecMechanismChange = (value: string) => {
setRecoveryMechanism(value)
}
return (
<YStack space={'$2'} style={{ width: '100%', padding: '16px 32px', alignItems: 'start' }}>
<KeyGenerationHeader />
<RecoveryMechanism
recoveryMechanism={recoveryMechanism}
handleRecMechanismChange={handleRecMechanismChange}
/>
<Stack style={{ margin: '30px 0' }}>
<Text size={27} weight={'semibold'}>
4 Validators
</Text>
</Stack>
{isKeyFiles && <KeyFiles />}
{isRecoveryPhrase && <RecoveryPhrase isKeyFiles={isKeyFiles} />}
{isConfirmPhraseStage && <ConfirmRecoveryPhrase />}
{isConfirmPhraseStage === false && (
<>
<KeyGenerationHeader />
<RecoveryMechanism
recoveryMechanism={recoveryMechanism}
handleRecMechanismChange={handleRecMechanismChange}
/>
<Stack style={{ margin: '30px 0' }}>
<Text size={27} weight={'semibold'}>
4 Validators
</Text>
</Stack>
{isKeyFiles && <KeyFiles />}
{isRecoveryPhrase && <RecoveryPhrase isKeyFiles={isKeyFiles} />}
</>
)}
</YStack>
)
}

7
src/pages/ValidatorOnboarding/ValidatorOnboarding.tsx
View File

@ -14,6 +14,7 @@ import ValidatorSetupInstall from './ValidatorSetup/ValidatorInstall'
const ValidatorOnboarding = () => {
const [activeStep, setActiveStep] = useState(0)
const [isConfirmPhraseStage, setIsConfirmPhraseStage] = useState(false)
const navigate = useNavigate()
const changeActiveStep = (step: number) => {
@ -21,7 +22,9 @@ const ValidatorOnboarding = () => {
}
const continueHandler = () => {
if (activeStep < 4) {
if (activeStep === 3 && isConfirmPhraseStage === false) {
setIsConfirmPhraseStage(true)
} else if (activeStep < 4) {
setActiveStep(activeStep + 1)
} else {
navigate('/')
@ -49,7 +52,7 @@ const ValidatorOnboarding = () => {
{activeStep === 0 && <Overview />}
{activeStep === 1 && <Advicsories />}
{activeStep === 2 && <ValidatorSetupInstall />}
{activeStep === 3 && <KeyGeneration />}
{activeStep === 3 && <KeyGeneration isConfirmPhraseStage={isConfirmPhraseStage} />}
{activeStep === 4 && <Activation />}
</ValidatorBoxWrapper>
<Stack style={{ alignItems: 'end', width: '100%', marginTop: '16px', zIndex: 999 }}>