fix: srp backup navigation and quiz cp-12.22.0 (#33922)

Author: HowardBraham

ui/pages/onboarding-flow/create-password/create-password.js

@@ -15,8 +15,10 @@ import {
 } from '../../../helpers/constants/design-system';
 import {
   ONBOARDING_COMPLETION_ROUTE,
+  ONBOARDING_IMPORT_WITH_SRP_ROUTE,
   ONBOARDING_METAMETRICS,
   ONBOARDING_SECURE_YOUR_WALLET_ROUTE,
+  ONBOARDING_WELCOME_ROUTE,
 } from '../../../helpers/constants/routes';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
 import {
@@ -86,12 +88,18 @@ export default function CreatePassword({
       } else {
         history.replace(ONBOARDING_SECURE_YOUR_WALLET_ROUTE);
       }
+    } else if (
+      firstTimeFlowType === FirstTimeFlowType.import &&
+      !secretRecoveryPhrase
+    ) {
+      history.replace(ONBOARDING_IMPORT_WITH_SRP_ROUTE);
     }
   }, [
     currentKeyring,
     history,
     firstTimeFlowType,
     newAccountCreationInProgress,
+    secretRecoveryPhrase,
   ]);
 
   const handleLearnMoreClick = (event) => {
@@ -134,9 +142,9 @@ export default function CreatePassword({
     });
 
     if (getBrowserName() === PLATFORM_FIREFOX) {
-      history.push(ONBOARDING_COMPLETION_ROUTE);
+      history.replace(ONBOARDING_COMPLETION_ROUTE);
     } else {
-      history.push(ONBOARDING_METAMETRICS);
+      history.replace(ONBOARDING_METAMETRICS);
     }
   };
 
@@ -164,7 +172,7 @@ export default function CreatePassword({
       },
     });
 
-    history.push(ONBOARDING_SECURE_YOUR_WALLET_ROUTE);
+    history.replace(ONBOARDING_SECURE_YOUR_WALLET_ROUTE);
   };
 
   const handleCreatePassword = async (event) => {
@@ -231,7 +239,11 @@ export default function CreatePassword({
             size={ButtonIconSize.Md}
             data-testid="create-password-back-button"
             type="button"
-            onClick={() => history.goBack()}
+            onClick={() =>
+              firstTimeFlowType === FirstTimeFlowType.import
+                ? history.replace(ONBOARDING_IMPORT_WITH_SRP_ROUTE)
+                : history.replace(ONBOARDING_WELCOME_ROUTE)
+            }
             ariaLabel={t('back')}
           />
         </Box>

ui/pages/onboarding-flow/create-password/create-password.test.js

@@ -10,13 +10,11 @@ import {
 import { FirstTimeFlowType } from '../../../../shared/constants/onboarding';
 import CreatePassword from './create-password';
 
-const mockHistoryPush = jest.fn();
 const mockHistoryReplace = jest.fn();
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useHistory: () => ({
-    push: mockHistoryPush,
     replace: mockHistoryReplace,
   }),
 }));
@@ -333,7 +331,7 @@ describe('Onboarding Create Password', () => {
       expect(mockCreateNewAccount).toHaveBeenCalledWith(password);
 
       await waitFor(() => {
-        expect(mockHistoryPush).toHaveBeenCalledWith(
+        expect(mockHistoryReplace).toHaveBeenCalledWith(
           ONBOARDING_SECURE_YOUR_WALLET_ROUTE,
         );
       });
@@ -395,7 +393,7 @@ describe('Onboarding Create Password', () => {
       );
 
       await waitFor(() => {
-        expect(mockHistoryPush).toHaveBeenCalledWith(ONBOARDING_METAMETRICS);
+        expect(mockHistoryReplace).toHaveBeenCalledWith(ONBOARDING_METAMETRICS);
       });
     });
   });

ui/pages/onboarding-flow/import-srp/import-srp.js

@@ -125,7 +125,9 @@ export default function ImportSRP({ submitSecretRecoveryPhrase }) {
             color={IconColor.iconDefault}
             size={ButtonIconSize.Md}
             data-testid="import-srp-back-button"
-            onClick={() => history.push(ONBOARDING_WELCOME_ROUTE)}
+            onClick={() => {
+              history.replace(ONBOARDING_WELCOME_ROUTE);
+            }}
             ariaLabel={t('back')}
           />
         </Box>

ui/pages/onboarding-flow/onboarding-flow.js

@@ -21,9 +21,11 @@ import {
   ONBOARDING_METAMETRICS,
   ONBOARDING_ACCOUNT_EXIST,
   ONBOARDING_ACCOUNT_NOT_FOUND,
+  SECURITY_ROUTE,
 } from '../../helpers/constants/routes';
 import {
   getCompletedOnboarding,
+  getIsPrimarySeedPhraseBackedUp,
   getIsUnlocked,
 } from '../../ducks/metamask/metamask';
 import {
@@ -91,9 +93,15 @@ export default function OnboardingFlow() {
   const completedOnboarding = useSelector(getCompletedOnboarding);
   const nextRoute = useSelector(getFirstTimeFlowTypeRouteAfterUnlock);
   const isFromReminder = new URLSearchParams(search).get('isFromReminder');
+  const isFromSettingsSecurity = new URLSearchParams(search).get(
+    'isFromSettingsSecurity',
+  );
   const trackEvent = useContext(MetaMetricsContext);
   const isUnlocked = useSelector(getIsUnlocked);
   const showTermsOfUse = useSelector(getShowTermsOfUse);
+  const isPrimarySeedPhraseBackedUp = useSelector(
+    getIsPrimarySeedPhraseBackedUp,
+  );
 
   const envType = getEnvironmentType();
   const isPopup = envType === ENVIRONMENT_TYPE_POPUP;
@@ -115,17 +123,26 @@ export default function OnboardingFlow() {
   }, [history, completedOnboarding, isFromReminder]);
 
   useEffect(() => {
-    if (isUnlocked && !completedOnboarding && !secretRecoveryPhrase) {
-      const needsSRP = [
-        ONBOARDING_SECURE_YOUR_WALLET_ROUTE,
-        ONBOARDING_REVIEW_SRP_ROUTE,
-        ONBOARDING_CONFIRM_SRP_ROUTE,
-      ].some((route) => pathname.startsWith(route));
+    const isSRPBackupRoute = [
+      ONBOARDING_SECURE_YOUR_WALLET_ROUTE,
+      ONBOARDING_REVIEW_SRP_ROUTE,
+      ONBOARDING_CONFIRM_SRP_ROUTE,
+    ].some((route) => pathname?.startsWith(route));
 
-      if (needsSRP) {
+    if (isUnlocked && !completedOnboarding && !secretRecoveryPhrase) {
+      if (isSRPBackupRoute) {
         history.push(ONBOARDING_UNLOCK_ROUTE);
       }
     }
+
+    if (
+      isPrimarySeedPhraseBackedUp &&
+      isSRPBackupRoute &&
+      completedOnboarding
+    ) {
+      history.replace(isFromSettingsSecurity ? SECURITY_ROUTE : DEFAULT_ROUTE);
+    }
+
     if (pathname === ONBOARDING_WELCOME_ROUTE) {
       setWelcomePageState(
         showTermsOfUse ? WelcomePageState.Banner : WelcomePageState.Login,
@@ -140,6 +157,8 @@ export default function OnboardingFlow() {
     pathname,
     history,
     showTermsOfUse,
+    isPrimarySeedPhraseBackedUp,
+    isFromSettingsSecurity,
   ]);
 
   const handleCreateNewAccount = async (password) => {

ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js

@@ -95,7 +95,7 @@ export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) {
 
   useEffect(() => {
     if (!secretRecoveryPhrase) {
-      history.push(`${ONBOARDING_REVIEW_SRP_ROUTE}${isFromReminderParam}`);
+      history.replace(`${ONBOARDING_REVIEW_SRP_ROUTE}${isFromReminderParam}`);
     }
   }, [history, secretRecoveryPhrase, isFromReminderParam]);
 
@@ -141,7 +141,7 @@ export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) {
         ? ONBOARDING_COMPLETION_ROUTE
         : ONBOARDING_METAMETRICS;
 
-    history.push(`${nextRoute}${isFromReminderParam}`);
+    history.replace(`${nextRoute}${isFromReminderParam}`);
   }, [dispatch, hdEntropyIndex, history, trackEvent, isFromReminderParam]);
 
   return (

ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.test.js

@@ -17,11 +17,12 @@ jest.mock('../../../store/actions.ts', () => ({
   setSeedPhraseBackedUp: jest.fn().mockReturnValue(jest.fn()),
 }));
 
-const mockHistoryPush = jest.fn();
+const mockHistoryReplace = jest.fn();
+
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useHistory: () => ({
-    push: mockHistoryPush,
+    replace: mockHistoryReplace,
   }),
 }));
 
@@ -192,7 +193,7 @@ describe('Confirm Recovery Phrase Component', () => {
     fireEvent.click(gotItButton);
 
     expect(setSeedPhraseBackedUp).toHaveBeenCalledWith(true);
-    expect(mockHistoryPush).toHaveBeenCalledWith(ONBOARDING_METAMETRICS);
+    expect(mockHistoryReplace).toHaveBeenCalledWith(ONBOARDING_METAMETRICS);
   });
 
   it('should go to Onboarding Completion page as a next step in firefox', async () => {
@@ -212,6 +213,8 @@ describe('Confirm Recovery Phrase Component', () => {
     // click and answer the srp quiz
     clickAndAnswerSrpQuiz(quizUnansweredChips);
 
+    console.log('quizUnansweredChips', quizUnansweredChips);
+
     const quizAnsweredChips = queryAllByTestId(
       /recovery-phrase-quiz-answered-/u,
     );
@@ -225,6 +228,8 @@ describe('Confirm Recovery Phrase Component', () => {
     fireEvent.click(getByText('Got it'));
 
     expect(setSeedPhraseBackedUp).toHaveBeenCalledWith(true);
-    expect(mockHistoryPush).toHaveBeenCalledWith(ONBOARDING_COMPLETION_ROUTE);
+    expect(mockHistoryReplace).toHaveBeenCalledWith(
+      ONBOARDING_COMPLETION_ROUTE,
+    );
   });
 });

ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js

@@ -95,7 +95,7 @@ export default function RecoveryPhraseChips({
       };
 
       setQuizAnswers(newQuizAnswers);
-      setIndexToFocus(setNextTargetIndex(newQuizAnswers));
+      setIndexToFocus(newQuizAnswers[targetIndex].index);
     },
     [quizAnswers],
   );

ui/pages/onboarding-flow/welcome/welcome.js

@@ -63,7 +63,7 @@ export default function OnboardingWelcome({
   const onCreateClick = useCallback(async () => {
     setIsLoggingIn(true);
     setNewAccountCreationInProgress(true);
-    dispatch(setFirstTimeFlowType(FirstTimeFlowType.create));
+    await dispatch(setFirstTimeFlowType(FirstTimeFlowType.create));
     trackEvent({
       category: MetaMetricsEventCategory.Onboarding,
       event: MetaMetricsEventName.WalletSetupStarted,