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)"
},
"seedPhraseIntroSidebarBulletFour": {
"message": "Write down and store in multiple secret places."
"message": "Write down and store in multiple secret places"
},
"seedPhraseIntroSidebarBulletOne": {
"message": "Save in a password manager"
},
"seedPhraseIntroSidebarBulletThree": {
"message": "Store in a safe-deposit box."
"message": "Store in a safe deposit box"
},
"seedPhraseIntroSidebarBulletTwo": {
"message": "Store in a bank vault."
"message": "Store in a bank vault"
},
"seedPhraseIntroSidebarCopyOne": {
"message": "Your Secret Recovery Phrase is a 12-word phrase that is the “master key” to your wallet and your funds"
},
"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": {
"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 {
max-width: 550px;
padding-inline-end: 10px;
}
&__actions {

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

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