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

feat: visualize generated mnemonic

Browse Source
This commit is contained in:
RadoslavDimchev 2023-10-05 00:01:02 +03:00
parent f296becfc8
commit f2ef848b2f
1 changed files with 11 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
View File

@ -14,12 +14,13 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
const [generatedMnemonic, setGeneratedMnemonic] = useState('') const [generatedMnemonic, setGeneratedMnemonic] = useState('')
useEffect(() => { useEffect(() => {
getMnemonic()
}, [])
const getMnemonic = async () => { const getMnemonic = async () => {
const mnemonic = await generateMnemonic(wordlist, 256) const mnemonic = await generateMnemonic(wordlist, 256)
setGeneratedMnemonic(mnemonic) setGeneratedMnemonic(mnemonic)
} }
getMnemonic()
}, [])
const revealHandler = () => { const revealHandler = () => {
setIsReveal(state => !state) setIsReveal(state => !state)
@ -38,21 +39,12 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
}} }}
> >
<YStack space={'$2'} style={{ filter: `blur(${isReveal ? '0px' : '4px'})` }}> <YStack space={'$2'} style={{ filter: `blur(${isReveal ? '0px' : '4px'})` }}>
<XStack space={'$6'}> <XStack space={'$1'}>
<Text size={19} weight={'semibold'}> {generatedMnemonic.split(' ').map((word, index) => (
this is your secret recovery phrase for the validator <Text key={index} size={19} weight={'semibold'}>
</Text> {word}
<Text size={19} weight={'semibold'}>
this is your secret recovery phrase for the validator
</Text>
</XStack>
<XStack space={'$6'}>
<Text size={19} weight={'semibold'}>
this is your secret recovery phrase for the validator
</Text>
<Text size={19} weight={'semibold'}>
this is your secret recovery phrase for the validator
</Text> </Text>
))}
</XStack> </XStack>
</YStack> </YStack>
</Stack> </Stack>