fix: flaky test `Import flow @no-mmi Import wallet using Secret Recov…

…ery Phrase with pasting word by word` (#26049)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
The test `Import flow @no-mmi Import wallet using Secret Recovery Phrase
with pasting word by word` fails because after opting out from
metametrics, we land into the Home page again instead of going to the
Import SRP page, causing the test to fail as the srp element cannot be
located ([ci
failure](https://app.circleci.com/pipelines/github/MetaMask/metamask-extension/92953/workflows/ee7ae0a5-2afd-4718-83b9-b5b335f69f82/jobs/3462015/tests)).

This is a race condition on the wallet level, and not on the test level:
iinstead of going inside the `ONBOARDING_IMPORT_WITH_SRP_ROUTE`
condition, we fallback to the DEFAULT_ROUTE which directs you to home
(see screenshot of the failure):

```
export function getFirstTimeFlowTypeRouteAfterMetaMetricsOptIn(state) {
  const { firstTimeFlowType } = state.metamask;

  if (firstTimeFlowType === FirstTimeFlowType.create) {
    return ONBOARDING_CREATE_PASSWORD_ROUTE;
  } else if (firstTimeFlowType === FirstTimeFlowType.import) {
    return ONBOARDING_IMPORT_WITH_SRP_ROUTE;
  } else if (firstTimeFlowType === FirstTimeFlowType.restore) {
    return ONBOARDING_SECURE_YOUR_WALLET_ROUTE;
  }
  return DEFAULT_ROUTE;
}
```

I am able to consistently reproduce it locally if I add a timeout in the
onImportClick function:

```
  const onImportClick = async () => {
    setTimeout(async () => {
    dispatch(setFirstTimeFlowType(FirstTimeFlowType.import));
    }, 200);
```

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26049?quickstart=1)

## **Related issues**

Fixes: #26053

## **Manual testing steps**

1. Check ci hasn''t failed anymore with the `Import flow @no-mmi Import
wallet using Secret Recovery Phrase with pasting word by word`

## **Screenshots/Recordings**
Race condition which lands me back to HOME page:


https://github.com/user-attachments/assets/514c3340-6bc8-41a2-add2-712e19549737





## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

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

@@ -112,7 +112,7 @@ export default function OnboardingWelcome() {
   ]);
 
   const onImportClick = async () => {
-    dispatch(setFirstTimeFlowType(FirstTimeFlowType.import));
+    await dispatch(setFirstTimeFlowType(FirstTimeFlowType.import));
     trackEvent({
       category: MetaMetricsEventCategory.Onboarding,
       event: MetaMetricsEventName.OnboardingWalletImportStarted,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, screen } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import initializedMockState from '../../../../test/data/mock-state.json';
@@ -108,17 +108,19 @@ describe('Onboarding Welcome Component', () => {
       );
     });
 
-    it('should set first time flow to import and route to metametrics', () => {
+    it('should set first time flow to import and route to metametrics', async () => {
       renderWithProvider(<OnboardingWelcome />, mockStore);
       const termsCheckbox = screen.getByTestId('onboarding-terms-checkbox');
       fireEvent.click(termsCheckbox);
 
       const createWallet = screen.getByTestId('onboarding-import-wallet');
       fireEvent.click(createWallet);
 
-      expect(setTermsOfUseLastAgreed).toHaveBeenCalled();
-      expect(setFirstTimeFlowType).toHaveBeenCalledWith('import');
-      expect(mockHistoryPush).toHaveBeenCalledWith(ONBOARDING_METAMETRICS);
+      await waitFor(() => {
+        expect(setTermsOfUseLastAgreed).toHaveBeenCalled();
+        expect(setFirstTimeFlowType).toHaveBeenCalledWith('import');
+        expect(mockHistoryPush).toHaveBeenCalledWith(ONBOARDING_METAMETRICS);
+      });
     });
   });
 });

ui/store/actions.ts

@@ -4084,18 +4084,18 @@ export function rejectAllMessages(
 
 export function setFirstTimeFlowType(
   type: FirstTimeFlowType,
-): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
-  return (dispatch: MetaMaskReduxDispatch) => {
-    log.debug(`background.setFirstTimeFlowType`);
-    callBackgroundMethod('setFirstTimeFlowType', [type], (err) => {
-      if (err) {
-        dispatch(displayWarning(err));
-      }
-    });
-    dispatch({
-      type: actionConstants.SET_FIRST_TIME_FLOW_TYPE,
-      value: type,
-    });
+): ThunkAction<Promise<void>, MetaMaskReduxState, unknown, AnyAction> {
+  return async (dispatch: MetaMaskReduxDispatch) => {
+    try {
+      log.debug(`background.setFirstTimeFlowType`);
+      await submitRequestToBackground('setFirstTimeFlowType', [type]);
+      dispatch({
+        type: actionConstants.SET_FIRST_TIME_FLOW_TYPE,
+        value: type,
+      });
+    } catch (err) {
+      dispatch(displayWarning(err));
+    }
   };
 }