m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Secure your wallet page (#13571)

Browse Source 
* Secure you wallet page

* Remove seedPhraseIntroSidebarBulletThree from messages.json

* Change the second bullet from Figma design

* Requested review changes
This commit is contained in:
VSaric 2022-02-23 17:36:58 +01:00 committed by GitHub
parent 7ddd8cfede
commit 6b996a7979
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/_locales/en/messages.json generated
View File

@ -2590,22 +2590,22 @@
"message": "Secure my wallet (recommended)" "message": "Secure my wallet (recommended)"
}, },
"seedPhraseIntroSidebarBulletFour": { "seedPhraseIntroSidebarBulletFour": {
"message": "Write down and store in multiple secret places." "message": "Write down and store in multiple secret places"
}, },
"seedPhraseIntroSidebarBulletOne": { "seedPhraseIntroSidebarBulletOne": {
"message": "Save in a password manager" "message": "Save in a password manager"
}, },
"seedPhraseIntroSidebarBulletThree": { "seedPhraseIntroSidebarBulletThree": {
"message": "Store in a safe-deposit box." "message": "Store in a safe deposit box"
}, },
"seedPhraseIntroSidebarBulletTwo": { "seedPhraseIntroSidebarBulletTwo": {
"message": "Store in a bank vault." "message": "Store in a bank vault"
}, },
"seedPhraseIntroSidebarCopyOne": { "seedPhraseIntroSidebarCopyOne": {
"message": "Your Secret Recovery Phrase is a 12-word phrase that is the “master key” to your wallet and your funds" "message": "Your Secret Recovery Phrase is a 12-word phrase that is the “master key” to your wallet and your funds"
}, },
"seedPhraseIntroSidebarCopyThree": { "seedPhraseIntroSidebarCopyThree": {
"message": "If someone asks for your recovery phrase they are likely trying to scam you and steal your wallet funds" "message": "If someone asks for your recovery phrase they are likely trying to scam you and steal your wallet funds."
}, },
"seedPhraseIntroSidebarCopyTwo": { "seedPhraseIntroSidebarCopyTwo": {
"message": "Never, ever share your Secret Recovery Phrase, not even with MetaMask!" "message": "Never, ever share your Secret Recovery Phrase, not even with MetaMask!"

1
ui/pages/onboarding-flow/secure-your-wallet/index.scss
View File

@ -8,6 +8,7 @@
&__details { &__details {
max-width: 550px; max-width: 550px;
padding-inline-end: 10px;
} }
&__actions { &__actions {

105
ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js
View File

@ -9,6 +9,7 @@ import {
TYPOGRAPHY, TYPOGRAPHY,
JUSTIFY_CONTENT, JUSTIFY_CONTENT,
FONT_WEIGHT, FONT_WEIGHT,
DISPLAY,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { import {
ThreeStepProgressBar, ThreeStepProgressBar,
@ -59,16 +60,13 @@ export default function SecureYourWallet() {
justifyContent={JUSTIFY_CONTENT.CENTER} justifyContent={JUSTIFY_CONTENT.CENTER}
textAlign={TEXT_ALIGN.CENTER} textAlign={TEXT_ALIGN.CENTER}
marginBottom={4} marginBottom={4}
marginTop={8}
> >
<Typography variant={TYPOGRAPHY.H2} fontWeight={FONT_WEIGHT.BOLD}> <Typography variant={TYPOGRAPHY.H2} fontWeight={FONT_WEIGHT.BOLD}>
{t('seedPhraseIntroTitle')} {t('seedPhraseIntroTitle')}
</Typography> </Typography>
</Box> </Box>
<Box <Box justifyContent={JUSTIFY_CONTENT.CENTER} marginBottom={6}>
justifyContent={JUSTIFY_CONTENT.CENTER}
textAlign={TEXT_ALIGN.CENTER}
marginBottom={6}
>
<Typography <Typography
variant={TYPOGRAPHY.H4} variant={TYPOGRAPHY.H4}
className="secure-your-wallet__details" className="secure-your-wallet__details"
@ -121,56 +119,53 @@ export default function SecureYourWallet() {
{t('seedPhraseIntroRecommendedButtonCopy')} {t('seedPhraseIntroRecommendedButtonCopy')}
</Button> </Button>
</Box> </Box>
<Box marginBottom={4} textAlign={TEXT_ALIGN.CENTER}> <Box>
<Typography <Box marginBottom={4}>
tag="span" <Typography
variant={TYPOGRAPHY.H4} tag="p"
fontWeight={FONT_WEIGHT.BOLD} variant={TYPOGRAPHY.H4}
boxProps={{ display: 'block' }} fontWeight={FONT_WEIGHT.BOLD}
> boxProps={{ display: DISPLAY.BLOCK }}
{t('seedPhraseIntroSidebarTitleOne')} >
</Typography> {t('seedPhraseIntroSidebarTitleOne')}
<Typography tag="span" variant={TYPOGRAPHY.H4}> </Typography>
{t('seedPhraseIntroSidebarCopyOne')} <Typography tag="p" variant={TYPOGRAPHY.H4}>
</Typography> {t('seedPhraseIntroSidebarCopyOne')}
</Box> </Typography>
<Box marginBottom={4} textAlign={TEXT_ALIGN.CENTER}> </Box>
<Typography <Box marginBottom={4}>
tag="span" <Typography
variant={TYPOGRAPHY.H4} tag="p"
fontWeight={FONT_WEIGHT.BOLD} variant={TYPOGRAPHY.H4}
boxProps={{ display: 'block' }} fontWeight={FONT_WEIGHT.BOLD}
> boxProps={{ display: DISPLAY.BLOCK }}
{t('seedPhraseIntroSidebarTitleTwo')} >
</Typography> {t('seedPhraseIntroSidebarTitleTwo')}
<ul className="secure-your-wallet__list"> </Typography>
<li>{t('seedPhraseIntroSidebarBulletOne')}</li> <ul className="secure-your-wallet__list">
<li>{t('seedPhraseIntroSidebarBulletTwo')}</li> <li>{t('seedPhraseIntroSidebarBulletOne')}</li>
<li>{t('seedPhraseIntroSidebarBulletThree')}</li> <li>{t('seedPhraseIntroSidebarBulletThree')}</li>
<li>{t('seedPhraseIntroSidebarBulletFour')}</li> <li>{t('seedPhraseIntroSidebarBulletFour')}</li>
</ul> </ul>
</Box> </Box>
<Box marginBottom={6} textAlign={TEXT_ALIGN.CENTER}> <Box marginBottom={6}>
<Typography <Typography
tag="span" tag="p"
variant={TYPOGRAPHY.H4} variant={TYPOGRAPHY.H4}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FONT_WEIGHT.BOLD}
boxProps={{ display: 'block' }} boxProps={{ display: DISPLAY.BLOCK }}
> >
{t('seedPhraseIntroSidebarTitleThree')} {t('seedPhraseIntroSidebarTitleThree')}
</Typography> </Typography>
<Typography tag="span" variant={TYPOGRAPHY.H4}> <Typography tag="p" variant={TYPOGRAPHY.H4}>
{t('seedPhraseIntroSidebarCopyTwo')} {t('seedPhraseIntroSidebarCopyTwo')}
</Typography> </Typography>
</Box> </Box>
<Box <Box className="secure-your-wallet__highlighted" marginBottom={2}>
className="secure-your-wallet__highlighted" <Typography tag="p" variant={TYPOGRAPHY.H4}>
marginBottom={2} {t('seedPhraseIntroSidebarCopyThree')}
textAlign={TEXT_ALIGN.CENTER} </Typography>
> </Box>
<Typography tag="span" variant={TYPOGRAPHY.H4}>
{t('seedPhraseIntroSidebarCopyThree')}
</Typography>
</Box> </Box>
</div> </div>
); );