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>

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"
   },

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;

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" />
+          {!hiddenPhrase && (
-          <Typography
+            <>
-            variant={TYPOGRAPHY.H6}
+              <i className="far fa-eye" color="white" />
-            color={COLORS.WHITE}
+              <Typography
-            className="recovery-phrase__secret-blocker--text"
+                variant={TYPOGRAPHY.H6}
-          >
+                color={COLORS.WHITE}
-            {t('makeSureNoOneWatching')}
+                className="recovery-phrase__secret-blocker--text"
-          </Typography>
+              >
+                {t('makeSureNoOneWatching')}
+              </Typography>
+            </>
+          )}
         </div>
       )}
     </Box>
@@ -104,4 +109,5 @@ RecoveryPhraseChips.propTypes = {
   setInputValue: PropTypes.func,
   inputValue: PropTypes.string,
   indicesToCheck: PropTypes.array,
+  hiddenPhrase: PropTypes.bool,
 };

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')}
+              {t('seedPhraseIntroSidebarBulletOne')}
-            </Typography>
-          </li>
-          <li>
-            <Typography variant={TYPOGRAPHY.H4}>
-              {t('seedPhraseIntroSidebarBulletTwo')}
             </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">
+          <div className="recovery-phrase__footer__copy-and-hide">
-            <Button
+            <div className="recovery-phrase__footer__copy-and-hide__area">
-              onClick={() => {
+              <Button
-                handleCopy(secretRecoveryPhrase);
+                type="link"
-              }}
+                icon={
-              icon={copied ? null : <Copy size={20} color="#3098DC" />}
+                  <i
-              className="recovery-phrase__footer--copy--button"
+                    className={`far fa-eye${hiddenPhrase ? '' : '-slash'}`}
-              type="link"
+                    color="#3098DC"
-            >
+                  />
-              {copied ? t('copiedExclamation') : t('copyToClipboard')}
+                }
-            </Button>
+                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"