Revert "refactor: approvalFlow remove"

This reverts commit 76f29aa.

Author: ffmcgee725

app/core/RPCMethods/RPCMethodMiddleware.ts

@@ -3,7 +3,11 @@ import { Alert, ImageSourcePropType } from 'react-native';
 import { getVersion } from 'react-native-device-info';
 import { createAsyncMiddleware } from '@metamask/json-rpc-engine';
 import { providerErrors, rpcErrors } from '@metamask/rpc-errors';
-import { SetFlowLoadingTextOptions } from '@metamask/approval-controller';
+import {
+  EndFlowOptions,
+  StartFlowOptions,
+  SetFlowLoadingTextOptions,
+} from '@metamask/approval-controller';
 import { recoverPersonalSignature } from '@metamask/eth-sig-util';
 import RPCMethods from './index.js';
 import { RPC } from '../../constants/network';
@@ -426,6 +430,19 @@ export const getRpcMethodMiddleware = ({
       return AppConstants.REQUEST_SOURCES.IN_APP_BROWSER;
     };
 
+    const startApprovalFlow = (opts: StartFlowOptions) => {
+      checkTabActive();
+      Engine.context.ApprovalController.clear(
+        providerErrors.userRejectedRequest(),
+      );
+
+      return Engine.context.ApprovalController.startFlow(opts);
+    };
+
+    const endApprovalFlow = (opts: EndFlowOptions) => {
+      Engine.context.ApprovalController.endFlow(opts);
+    };
+
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const setApprovalFlowLoadingText = (opts: SetFlowLoadingTextOptions) => {
       Engine.context.ApprovalController.setFlowLoadingText(opts);
@@ -990,6 +1007,8 @@ export const getRpcMethodMiddleware = ({
             request_source: getSource(),
             request_platform: analytics?.platform,
           },
+          startApprovalFlow,
+          endApprovalFlow,
           hooks,
         });
       },

app/core/RPCMethods/utils.ts

@@ -6,6 +6,7 @@ import { JsonRpcMiddleware } from '@metamask/json-rpc-engine';
 import { PermittedHandlerExport } from '@metamask/permission-controller';
 import { Json, JsonRpcParams, hasProperty } from '@metamask/utils';
 import EthQuery from '@metamask/eth-query';
+import Logger from '../../util/Logger';
 
 export const UNSUPPORTED_RPC_METHODS = new Set([
   // This is implemented later in our middleware stack – specifically, in

app/core/RPCMethods/wallet_addEthereumChain.js

@@ -46,14 +46,18 @@ const addOrUpdateIndex = (array, value, comparator) => {
  * @param params.res - The JsonRpcEngine result object.
  * @param params.requestUserApproval - The callback to trigger user approval flow.
  * @param params.analytics - Analytics parameters to be passed when tracking event via `MetaMetrics`.
+ * @param params.startApprovalFlow - Flow to trigger at approval start.
+ * @param params.endApprovalFlow - Flow to trigger at approval end.
  * @param params.hooks - Method hooks passed to the method implementation.
- * @returns {Nothing}.
+ * @returns {void}.
  */
 export const wallet_addEthereumChain = async ({
   req,
   res,
   requestUserApproval,
   analytics,
+  startApprovalFlow,
+  endApprovalFlow,
   hooks,
 }) => {
   const {
@@ -195,97 +199,102 @@ export const wallet_addEthereumChain = async ({
   // If existing approval request was an add network request, wait for
   // it to be rejected and for the corresponding approval flow to be ended.
   await waitForInteraction();
+  const { id: approvalFlowId } = startApprovalFlow();
 
   try {
-    await requestUserApproval({
-      type: 'ADD_ETHEREUM_CHAIN',
-      requestData,
-    });
-  } catch (error) {
-    MetaMetrics.getInstance().trackEvent(
-      MetricsEventBuilder.createEventBuilder(
-        MetaMetricsEvents.NETWORK_REQUEST_REJECTED,
-      )
-        .addProperties({
-          chain_id: getDecimalChainId(chainId),
-          source: 'Custom Network API',
-          symbol: ticker,
-          ...analytics,
-        })
-        .build(),
-    );
-    throw providerErrors.userRejectedRequest();
-  }
-
-  let newNetworkConfiguration;
-  if (existingNetworkConfiguration) {
-    const currentChainId = selectEvmChainId(store.getState());
-
-    const rpcResult = addOrUpdateIndex(
-      existingNetworkConfiguration.rpcEndpoints,
-      {
-        url: firstValidRPCUrl,
-        failoverUrls: [],
-        type: RpcEndpointType.Custom,
-        name: chainName,
-      },
-      (endpoint) => endpoint.url === firstValidRPCUrl,
-    );
-
-    const blockExplorerResult = addOrUpdateIndex(
-      existingNetworkConfiguration.blockExplorerUrls,
-      firstValidBlockExplorerUrl,
-      (url) => url === firstValidBlockExplorerUrl,
-    );
+    try {
+      await requestUserApproval({
+        type: 'ADD_ETHEREUM_CHAIN',
+        requestData,
+      });
+    } catch (error) {
+      MetaMetrics.getInstance().trackEvent(
+        MetricsEventBuilder.createEventBuilder(
+          MetaMetricsEvents.NETWORK_REQUEST_REJECTED,
+        )
+          .addProperties({
+            chain_id: getDecimalChainId(chainId),
+            source: 'Custom Network API',
+            symbol: ticker,
+            ...analytics,
+          })
+          .build(),
+      );
+      throw providerErrors.userRejectedRequest();
+    }
 
-    const updatedNetworkConfiguration = {
-      ...existingNetworkConfiguration,
-      rpcEndpoints: rpcResult.updatedArray,
-      defaultRpcEndpointIndex: rpcResult.index,
-      blockExplorerUrls: blockExplorerResult.updatedArray,
-      defaultBlockExplorerUrlIndex: blockExplorerResult.index,
-    };
+    let newNetworkConfiguration;
+    if (existingNetworkConfiguration) {
+      const currentChainId = selectEvmChainId(store.getState());
 
-    newNetworkConfiguration = await NetworkController.updateNetwork(
-      chainId,
-      updatedNetworkConfiguration,
-      currentChainId === chainId
-        ? {
-            replacementSelectedRpcEndpointIndex:
-              updatedNetworkConfiguration.defaultRpcEndpointIndex,
-          }
-        : undefined,
-    );
-  } else {
-    newNetworkConfiguration = NetworkController.addNetwork({
-      chainId,
-      blockExplorerUrls: [firstValidBlockExplorerUrl],
-      defaultRpcEndpointIndex: 0,
-      defaultBlockExplorerUrlIndex: 0,
-      name: chainName,
-      nativeCurrency: ticker,
-      rpcEndpoints: [
+      const rpcResult = addOrUpdateIndex(
+        existingNetworkConfiguration.rpcEndpoints,
         {
           url: firstValidRPCUrl,
           failoverUrls: [],
-          name: chainName,
           type: RpcEndpointType.Custom,
+          name: chainName,
         },
-      ],
-    });
+        (endpoint) => endpoint.url === firstValidRPCUrl,
+      );
 
-    MetaMetrics.getInstance().trackEvent(
-      MetricsEventBuilder.createEventBuilder(MetaMetricsEvents.NETWORK_ADDED)
-        .addProperties({
-          chain_id: getDecimalChainId(chainId),
-          source: 'Custom Network API',
-          symbol: ticker,
-          ...analytics,
-        })
-        .build(),
-    );
+      const blockExplorerResult = addOrUpdateIndex(
+        existingNetworkConfiguration.blockExplorerUrls,
+        firstValidBlockExplorerUrl,
+        (url) => url === firstValidBlockExplorerUrl,
+      );
+
+      const updatedNetworkConfiguration = {
+        ...existingNetworkConfiguration,
+        rpcEndpoints: rpcResult.updatedArray,
+        defaultRpcEndpointIndex: rpcResult.index,
+        blockExplorerUrls: blockExplorerResult.updatedArray,
+        defaultBlockExplorerUrlIndex: blockExplorerResult.index,
+      };
+
+      newNetworkConfiguration = await NetworkController.updateNetwork(
+        chainId,
+        updatedNetworkConfiguration,
+        currentChainId === chainId
+          ? {
+              replacementSelectedRpcEndpointIndex:
+                updatedNetworkConfiguration.defaultRpcEndpointIndex,
+            }
+          : undefined,
+      );
+    } else {
+      newNetworkConfiguration = NetworkController.addNetwork({
+        chainId,
+        blockExplorerUrls: [firstValidBlockExplorerUrl],
+        defaultRpcEndpointIndex: 0,
+        defaultBlockExplorerUrlIndex: 0,
+        name: chainName,
+        nativeCurrency: ticker,
+        rpcEndpoints: [
+          {
+            url: firstValidRPCUrl,
+            failoverUrls: [],
+            name: chainName,
+            type: RpcEndpointType.Custom,
+          },
+        ],
+      });
+
+      MetaMetrics.getInstance().trackEvent(
+        MetricsEventBuilder.createEventBuilder(MetaMetricsEvents.NETWORK_ADDED)
+          .addProperties({
+            chain_id: getDecimalChainId(chainId),
+            source: 'Custom Network API',
+            symbol: ticker,
+            ...analytics,
+          })
+          .build(),
+      );
+    }
+    switchToNetworkAndMetrics(newNetworkConfiguration, true);
+  } finally {
+    endApprovalFlow({ id: approvalFlowId });
   }
-  switchToNetworkAndMetrics(newNetworkConfiguration, true);
 
   res.result = null;
 };

app/core/RPCMethods/wallet_addEthereumChain.test.js

@@ -113,6 +113,8 @@ describe('RPC Method - wallet_addEthereumChain', () => {
       addCustomNetworkRequest: {},
       switchCustomNetworkRequest: {},
       requestUserApproval: jest.fn(() => Promise.resolve()),
+      startApprovalFlow: jest.fn(() => ({ id: '1', loadingText: null })),
+      endApprovalFlow: jest.fn(),
       hooks: {
         getCurrentChainIdForDomain: jest.fn(),
         getNetworkConfigurationByChainId: jest.fn(),
@@ -359,6 +361,37 @@ describe('RPC Method - wallet_addEthereumChain', () => {
   });
 
   describe('Approval Flow', () => {
+    it('should start and end a new approval flow if chain does not already exist', async () => {
+      jest
+        .spyOn(Engine.context.NetworkController, 'addNetwork')
+        .mockReturnValue(networkConfigurationResult);
+
+      await wallet_addEthereumChain({
+        req: {
+          params: [correctParams],
+        },
+        ...otherOptions,
+      });
+
+      expect(otherOptions.startApprovalFlow).toBeCalledTimes(1);
+      expect(otherOptions.endApprovalFlow).toBeCalledTimes(1);
+    });
+
+    it('should end approval flow even if the approval process fails', async () => {
+      await expect(
+        wallet_addEthereumChain({
+          req: {
+            params: [correctParams],
+          },
+          ...otherOptions,
+          requestUserApproval: jest.fn(() => Promise.reject()),
+        }),
+      ).rejects.toThrow(providerErrors.userRejectedRequest());
+
+      expect(otherOptions.startApprovalFlow).toBeCalledTimes(1);
+      expect(otherOptions.endApprovalFlow).toBeCalledTimes(1);
+    });
+
     it('clears existing approval requests', async () => {
       Engine.context.ApprovalController.clear.mockClear();