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

Merge pull request #22 from nimbus-gui/rd.fix-recovery-phrase-ui 

Fix recovery phrase UI
This commit is contained in:
Radoslav Dimchev 2023-10-13 18:28:45 +03:00 committed by GitHub
parent 6b08f7ec85 77d6a07645
commit 9ce057949c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,10 @@
import { Stack, XStack, YStack } from 'tamagui' import { Stack, XStack, YStack } from 'tamagui'
import { Button, InformationBox, Text } from '@status-im/components' import { Button, InformationBox, Text } from '@status-im/components'
import { CloseCircleIcon } from '@status-im/icons' import { CloseCircleIcon, CopyIcon, CheckIcon } from '@status-im/icons'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { generateMnemonic } from 'web-bip39' import { generateMnemonic } from 'web-bip39'
import wordlist from 'web-bip39/wordlists/english'
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
import wordlist from 'web-bip39/wordlists/english'
import { RootState } from '../../../redux/store' import { RootState } from '../../../redux/store'
import { setGeneratedMnemonic } from '../../../redux/ValidatorOnboarding/KeyGeneration/slice' import { setGeneratedMnemonic } from '../../../redux/ValidatorOnboarding/KeyGeneration/slice'
@ -15,6 +15,7 @@ type RecoveryPhraseProps = {
const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => { const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
const [isReveal, setIsReveal] = useState(false) const [isReveal, setIsReveal] = useState(false)
const [isCopied, setIsCopied] = useState(false)
const { generatedMnemonic } = useSelector((state: RootState) => state.keyGeneration) const { generatedMnemonic } = useSelector((state: RootState) => state.keyGeneration)
const dispatch = useDispatch() const dispatch = useDispatch()
@ -32,45 +33,52 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
} }
const copyRecoveryPhraseHandler = () => { const copyRecoveryPhraseHandler = () => {
if (isKeystoreFiles) {
return
}
const text = generatedMnemonic.join(' ') const text = generatedMnemonic.join(' ')
navigator.clipboard.writeText(text) navigator.clipboard.writeText(text)
setIsCopied(true)
} }
return ( return (
<YStack space={'$4'} style={{ width: '100%', marginTop: isKeystoreFiles ? '20px' : '0px' }}> <YStack space={'$4'} style={{ width: '100%', marginTop: isKeystoreFiles ? '20px' : '0px' }}>
<Stack <YStack
style={{ style={{
border: `1px solid #2A4AF566`, border: `1px solid #2A4AF566`,
borderRadius: '16px', borderRadius: '16px',
padding: '28px 18px',
backgroundColor: '#f4f6fe', backgroundColor: '#f4f6fe',
width: '100%', width: '100%',
alignItems: 'end',
cursor: 'pointer',
paddingBottom: '8px',
paddingRight: '18px',
}} }}
onClick={copyRecoveryPhraseHandler}
> >
<YStack <Stack
space={'$2'} style={{
style={{ filter: `blur(${isReveal ? '0px' : '4px'})`, cursor: 'pointer' }} display: 'grid',
onClick={copyRecoveryPhraseHandler} gridTemplateColumns: 'repeat(6, 1fr)',
gap: '5px 3px',
width: '100%',
filter: `blur(${isReveal ? '0px' : '4px'})`,
padding: '28px 0px 0px 18px',
}}
> >
<XStack {generatedMnemonic.map((word, index) => (
style={{ <XStack style={{ width: '100%' }}>
display: 'grid', <Stack style={{ width: '25%' }}>
gridTemplateColumns: 'repeat(6, 1fr)', <Text key={index} size={19} weight={'semibold'} color="#0d162566">
gap: '5px 0px', {index + 1}.
}} </Text>
> </Stack>
{generatedMnemonic.map((word, index) => (
<Text key={index} size={19} weight={'semibold'}> <Text key={index} size={19} weight={'semibold'}>
{word} {word}
</Text> </Text>
))} </XStack>
</XStack> ))}
</YStack> </Stack>
</Stack> {isCopied ? <CheckIcon size={20} /> : <CopyIcon size={20} />}
</YStack>
<Stack style={{ width: 'fit-content', marginBottom: '12px' }}> <Stack style={{ width: 'fit-content', marginBottom: '12px' }}>
<Button onPress={revealHandler}> <Button onPress={revealHandler}>
{isReveal ? 'Hide Recovery Phrase' : 'Reveal Recovery Phrase'} {isReveal ? 'Hide Recovery Phrase' : 'Reveal Recovery Phrase'}