diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 195f13671..71ea87943 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -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" }, diff --git a/ui/pages/onboarding-flow/recovery-phrase/index.scss b/ui/pages/onboarding-flow/recovery-phrase/index.scss index 8bad463aa..3168e6f72 100644 --- a/ui/pages/onboarding-flow/recovery-phrase/index.scss +++ b/ui/pages/onboarding-flow/recovery-phrase/index.scss @@ -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; diff --git a/ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js b/ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js index 96ccc9379..97346245d 100644 --- a/ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js +++ b/ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js @@ -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 && (
- - - {t('makeSureNoOneWatching')} - + {!hiddenPhrase && ( + <> + + + {t('makeSureNoOneWatching')} + + + )}
)} @@ -104,4 +109,5 @@ RecoveryPhraseChips.propTypes = { setInputValue: PropTypes.func, inputValue: PropTypes.string, indicesToCheck: PropTypes.array, + hiddenPhrase: PropTypes.bool, }; diff --git a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js index e57ffb841..7012fe70d 100644 --- a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js +++ b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js @@ -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 (
@@ -58,12 +60,7 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
  • - {t('seedPhraseIntroSidebarBulletFour')} - -
  • -
  • - - {t('seedPhraseIntroSidebarBulletTwo')} + {t('seedPhraseIntroSidebarBulletOne')}
  • @@ -80,21 +77,39 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
    {phraseRevealed ? ( -
    - +
    +
    + + +