Write down your SRP page fixes (#13729)

* Fixed few things in 'Write down srp page' flow * Applied requested changes * Modified messages Co-authored-by: Alex Donesky <adonesky@gmail.com>
MetaMask · Mar 8, 2022 · ac9f263 · ac9f263
1 parent 4a6585f
commit ac9f263
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 32 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git 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
@@ -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,
 };
diff --git 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 (
     <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"