Combining and 80 and 90 completion stages.

_locales/en/messages.json

@@ -427,10 +427,8 @@
   "dialogClearAllDataDeletionQuestion": "Would you like to clear only this device, or delete your entire account?",
   "deviceOnly": "Device Only",
   "entireAccount": "Entire Account",
-  "recoveryPhraseSecureMessage": "Secure your account by saving your recovery phrase",
   "recoveryPhraseSecureTitle": "You're almost finished!",
-  "recoveryPhraseSecureButtonText": "Secure your account",
+  "recoveryPhraseRevealMessage": "Secure your account by saving your recovery phrase. Reveal your recovery phrase then store it safely to secure it",
-  "recoveryPhraseRevealMessage": "Reveal your recovery phrase then store it safely to secure it",
   "recoveryPhraseRevealButtonText": "Reveal Recovery Phrase",
   "recoveryPhraseInfoMessage": "Meet your recovery phrase Your recovery phrase is the master key to your session ID - you can use it to restore your Session ID if you lose access to your device, Store your recovery phrase in a safe place, and don't give it to anyone.",
   "recoveryPhraseCompleteTitle": "Account secured!"

ts/components/session/LeftPaneSectionHeader.tsx

@@ -8,6 +8,7 @@ import { UserUtils } from '../../session/utils';
 import { useDispatch, useSelector } from 'react-redux';
 import { disableRecoveryPhrasePrompt } from '../../state/ducks/userConfig';
 import { getShowRecoveryPhrasePrompt } from '../../state/selectors/userConfig';
+import { recoveryPhraseModal } from '../../state/ducks/modalDialog';
 
 const Tab = ({
   isSelected,
@@ -69,9 +70,9 @@ export const LeftPaneSectionHeader = (props: Props) => {
 };
 
 export const LeftPaneBanner = () => {
-  const [completion, setCompletion] = useState(80);
+  const [completion, setCompletion] = useState(90);
-  const [bodyText, setBodyText] = useState(window.i18n('recoveryPhraseSecureMessage'));
+  const [bodyText, setBodyText] = useState(window.i18n('recoveryPhraseRevealMessage'));
-  const [buttonText, setButtonText] = useState(window.i18n('recoveryPhraseSecureButtonText'));
+  const [buttonText, setButtonText] = useState(window.i18n('recoveryPhraseRevealButtonText'));
   const [recoveryPhraseHidden, setRecoveryPhraseHidden] = useState(true);
   const [isCompleted, setIsCompleted] = useState(false);
   const [bannerTitle, setBannerTitle] = useState(window.i18n('recoveryPhraseSecureTitle'));
@@ -79,20 +80,18 @@ export const LeftPaneBanner = () => {
   const secondsBeforeRemoval = 2 * 1000;
   const completionText = `${completion}%`;
 
+  const dispatch = useDispatch();
+
   const handleShowRecoveryClick = () => {
-    setRecoveryPhraseHidden(false);
+    // setRecoveryPhraseHidden(false);
-    setBodyText(window.i18n('recoveryPhraseInfoMessage'));
+    // setBodyText(window.i18n('recoveryPhraseInfoMessage'));
-    setButtonText(window.i18n('copy'));
+    // setButtonText(window.i18n('copy'));
-  };
 
-  const handleSecureClick = () => {
+    // show a modal
-    if (completion === 80) {
+    dispatch(recoveryPhraseModal({}))
-      setCompletion(90);
-      setBodyText(window.i18n('recoveryPhraseRevealMessage'));
-      setButtonText(window.i18n('recoveryPhraseRevealButtonText'));
-    }
   };
 
+
   const BannerInner = (props: any) => {
     const dispatch = useDispatch();
 
@@ -111,9 +110,7 @@ export const LeftPaneBanner = () => {
     };
 
     const onClick =
-      completion === 80
+      completion === 90
-        ? handleSecureClick
-        : completion === 90
         ? recoveryPhraseHidden
           ? handleShowRecoveryClick
           : handleCopyPhraseClick