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

Write down your SRP page fixes (#13729)

Browse Source 
* Fixed few things in 'Write down srp page' flow

* Applied requested changes

* Modified messages

Co-authored-by: Alex Donesky <adonesky@gmail.com>
This commit is contained in:
filipsekulic 2022-03-08 16:38:07 +01:00 committed by GitHub
parent 4a6585fc4a
commit ac9f263e1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 72 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1412,6 +1412,9 @@
"hide": {
"message": "Hide"
},
"hideSeedPhrase": {
"message": "Hide seed phrase"
},
"hideToken": {
"message": "Hide token"
},
@ -2555,6 +2558,9 @@
"revealSeedWordsWarningTitle": {
"message": "DO NOT share this phrase with anyone!"
},
"revealTheSeedPhrase": {
"message": "Reveal seed phrase"
},
"rinkeby": {
"message": "Rinkeby Test Network"
},

25
ui/pages/onboarding-flow/recovery-phrase/index.scss
View File

@ -66,26 +66,39 @@
&--button {
width: 50%;
padding: 20px;
align-self: center;
}
&--copy {
&__copy-and-hide {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&--button {
&__area {
display: flex;
flex-direction: row;
justify-content: space-between;
}
&__button {
@include H6;
background-color: transparent;
border: none;
display: flex;
justify-content: space-evenly;
width: 32%;
color: var(--primary-blue);
cursor: pointer;
margin-bottom: 24px;
padding-left: 0;
padding-right: 0;
&__hide-seed {
justify-content: flex-start;
}
&__copy-to-clipboard {
justify-content: flex-end;
}
svg {
width: 15px;

22
ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js
View File

@ -21,6 +21,7 @@ export default function RecoveryPhraseChips({
setInputValue,
inputValue,
indicesToCheck,
hiddenPhrase,
}) {
const t = useI18nContext();
const hideSeedPhrase = phraseRevealed === false;
@ -83,14 +84,18 @@ export default function RecoveryPhraseChips({
{hideSeedPhrase && (
<div className="recovery-phrase__secret-blocker">
<i className="far fa-eye-slash" color="white" />
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.WHITE}
className="recovery-phrase__secret-blocker--text"
>
{t('makeSureNoOneWatching')}
</Typography>
{!hiddenPhrase && (
<>
<i className="far fa-eye" color="white" />
<Typography
variant={TYPOGRAPHY.H6}
color={COLORS.WHITE}
className="recovery-phrase__secret-blocker--text"
>
{t('makeSureNoOneWatching')}
</Typography>
</>
)}
</div>
)}
</Box>
@ -104,4 +109,5 @@ RecoveryPhraseChips.propTypes = {
setInputValue: PropTypes.func,
inputValue: PropTypes.string,
indicesToCheck: PropTypes.array,
hiddenPhrase: PropTypes.bool,
};

51
ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
View File

@ -25,6 +25,8 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
const t = useI18nContext();
const [copied, handleCopy] = useCopyToClipboard();
const [phraseRevealed, setPhraseRevealed] = useState(false);
const [hiddenPhrase, setHiddenPhrase] = useState(false);
return (
<div className="recovery-phrase">
<ThreeStepProgressBar stage={threeStepStages.RECOVERY_PHRASE_REVIEW} />
@ -58,12 +60,7 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
<ul>
<li>
<Typography variant={TYPOGRAPHY.H4}>
{t('seedPhraseIntroSidebarBulletFour')}
</Typography>
</li>
<li>
<Typography variant={TYPOGRAPHY.H4}>
{t('seedPhraseIntroSidebarBulletTwo')}
{t('seedPhraseIntroSidebarBulletOne')}
</Typography>
</li>
<li>
@ -80,21 +77,39 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
</Box>
<RecoveryPhraseChips
secretRecoveryPhrase={secretRecoveryPhrase.split(' ')}
phraseRevealed={phraseRevealed}
phraseRevealed={phraseRevealed && !hiddenPhrase}
hiddenPhrase={hiddenPhrase}
/>
<div className="recovery-phrase__footer">
{phraseRevealed ? (
<div className="recovery-phrase__footer--copy">
<Button
onClick={() => {
handleCopy(secretRecoveryPhrase);
}}
icon={copied ? null : <Copy size={20} color="#3098DC" />}
className="recovery-phrase__footer--copy--button"
type="link"
>
{copied ? t('copiedExclamation') : t('copyToClipboard')}
</Button>
<div className="recovery-phrase__footer__copy-and-hide">
<div className="recovery-phrase__footer__copy-and-hide__area">
<Button
type="link"
icon={
<i
className={`far fa-eye${hiddenPhrase ? '' : '-slash'}`}
color="#3098DC"
/>
}
className="recovery-phrase__footer__copy-and-hide__button recovery-phrase__footer__copy-and-hide__button__hide-seed"
onClick={() => {
setHiddenPhrase(!hiddenPhrase);
}}
>
{hiddenPhrase ? t('revealTheSeedPhrase') : t('hideSeedPhrase')}
</Button>
<Button
onClick={() => {
handleCopy(secretRecoveryPhrase);
}}
icon={copied ? null : <Copy size={20} color="#3098DC" />}
className="recovery-phrase__footer__copy-and-hide__button recovery-phrase__footer__copy-and-hide__button__copy-to-clipboard"
type="link"
>
{copied ? t('copiedExclamation') : t('copyToClipboard')}
</Button>
</div>
<Button
data-testid="recovery-phrase-next"
type="primary"