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: add same position for word number and style

This commit is contained in:
RadoslavDimchev 2023-10-13 16:40:10 +03:00
parent e9ce5627c5
commit 77d6a07645
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,10 @@
import { Stack, 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, CopyIcon, CheckIcon } 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'
@ -65,9 +65,16 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
}} }}
> >
{generatedMnemonic.map((word, index) => ( {generatedMnemonic.map((word, index) => (
<Text key={index} size={19} weight={'semibold'}> <XStack style={{ width: '100%' }}>
{index + 1}. {word} <Stack style={{ width: '25%' }}>
<Text key={index} size={19} weight={'semibold'} color="#0d162566">
{index + 1}.
</Text> </Text>
</Stack>
<Text key={index} size={19} weight={'semibold'}>
{word}
</Text>
</XStack>
))} ))}
</Stack> </Stack>
{isCopied ? <CheckIcon size={20} /> : <CopyIcon size={20} />} {isCopied ? <CheckIcon size={20} /> : <CopyIcon size={20} />}