When switching network alert the user and get approval if there are pending requests from origin.

Author: jpuri

app/_locales/en/messages.json

@@ -186,6 +186,7 @@ async function addEthereumChainHandler(
     updatedNetwork.rpcEndpoints[updatedNetwork.defaultRpcEndpointIndex];
 
   return switchChain(res, end, chainId, networkClientId, {
+    isAddFlow: true,
     autoApprove: shouldAddOrUpdateNetwork,
     setActiveNetwork,
     getCaveat,

app/_locales/en_GB/messages.json

@@ -63,6 +63,7 @@ const createMockedHandler = () => {
   const next = jest.fn();
   const end = jest.fn();
   const mocks = {
+    isAddFlow: true,
     getCurrentChainIdForDomain: jest.fn().mockReturnValue(NON_INFURA_CHAIN_ID),
     setNetworkClientIdForDomain: jest.fn(),
     getNetworkConfigurationByChainId: jest.fn(),
@@ -186,6 +187,7 @@ describe('addEthereumChainHandler', () => {
       {
         autoApprove: true,
         getCaveat: mocks.getCaveat,
+        isAddFlow: true,
         setActiveNetwork: mocks.setActiveNetwork,
         requestPermittedChainsPermissionIncrementalForOrigin:
           mocks.requestPermittedChainsPermissionIncrementalForOrigin,
@@ -252,6 +254,7 @@ describe('addEthereumChainHandler', () => {
           {
             autoApprove: true,
             getCaveat: mocks.getCaveat,
+            isAddFlow: true,
             setActiveNetwork: mocks.setActiveNetwork,
             requestPermittedChainsPermissionIncrementalForOrigin:
               mocks.requestPermittedChainsPermissionIncrementalForOrigin,
@@ -299,6 +302,7 @@ describe('addEthereumChainHandler', () => {
           {
             autoApprove: false,
             getCaveat: mocks.getCaveat,
+            isAddFlow: true,
             setActiveNetwork: mocks.setActiveNetwork,
             requestPermittedChainsPermissionIncrementalForOrigin:
               mocks.requestPermittedChainsPermissionIncrementalForOrigin,

app/scripts/lib/rpc-method-middleware/handlers/add-ethereum-chain.js

@@ -1,3 +1,4 @@
+import { ApprovalType } from '@metamask/controller-utils';
 import { rpcErrors } from '@metamask/rpc-errors';
 import {
   Caip25CaveatType,
@@ -165,12 +166,18 @@ export function validateAddEthereumChainParams(params) {
  * @param {string} chainId - The chainId being switched to.
  * @param {string} networkClientId - The network client being switched to.
  * @param {object} hooks - The hooks object.
+ * @param {string} hooks.origin - The origin sending this request.
+ * @param {boolean} hooks.isAddFlow - Variable to check if its add flow.
  * @param {boolean} [hooks.autoApprove] - A boolean indicating whether the request should prompt the user or be automatically approved.
  * @param {Function} hooks.setActiveNetwork - The callback to change the current network for the origin.
  * @param {Function} hooks.getCaveat - The callback to get the CAIP-25 caveat for the origin.
  * @param {Function} hooks.requestPermittedChainsPermissionIncrementalForOrigin - The callback to add a new chain to the permittedChains-equivalent CAIP-25 permission.
  * @param {Function} hooks.setTokenNetworkFilter - The callback to set the token network filter.
  * @param {Function} hooks.rejectApprovalRequestsForOrigin - The callback to reject all pending approval requests for the origin.
+ * @param {Function} hooks.requestUserApproval - The callback to trigger user approval flow.
+ * @param {Function} hooks.hasApprovalRequestsForOrigin - Function to check if there are pending approval requests from the origin.
+ * @param {object} hooks.toNetworkConfiguration - Network configutation of network switching to.
+ * @param {object} hooks.fromNetworkConfiguration - Network configutation of network switching from.
  * @returns a null response on success or an error if user rejects an approval when autoApprove is false or on unexpected errors.
  */
 export async function switchChain(
@@ -179,12 +186,18 @@ export async function switchChain(
   chainId,
   networkClientId,
   {
+    origin,
+    isAddFlow,
     autoApprove,
     setActiveNetwork,
     getCaveat,
     requestPermittedChainsPermissionIncrementalForOrigin,
     setTokenNetworkFilter,
     rejectApprovalRequestsForOrigin,
+    requestUserApproval,
+    hasApprovalRequestsForOrigin,
+    toNetworkConfiguration,
+    fromNetworkConfiguration,
   },
 ) {
   try {
@@ -201,6 +214,15 @@ export async function switchChain(
           chainId,
           autoApprove,
         });
+      } else if (hasApprovalRequestsForOrigin?.() && !isAddFlow) {
+        await requestUserApproval({
+          origin,
+          type: ApprovalType.SwitchEthereumChain,
+          requestData: {
+            toNetworkConfiguration,
+            fromNetworkConfiguration,
+          },
+        });
       }
     } else {
       await requestPermittedChainsPermissionIncrementalForOrigin({

app/scripts/lib/rpc-method-middleware/handlers/add-ethereum-chain.test.js

@@ -1,3 +1,4 @@
+import * as Multichain from '@metamask/multichain';
 import { errorCodes, rpcErrors } from '@metamask/rpc-errors';
 import {
   Caip25CaveatType,
@@ -10,12 +11,18 @@ describe('Ethereum Chain Utils', () => {
   const createMockedSwitchChain = () => {
     const end = jest.fn();
     const mocks = {
+      origin: 'www.test.com',
+      isAddFlow: false,
       autoApprove: false,
       setActiveNetwork: jest.fn(),
       getCaveat: jest.fn(),
       requestPermittedChainsPermissionIncrementalForOrigin: jest.fn(),
       setTokenNetworkFilter: jest.fn(),
       rejectApprovalRequestsForOrigin: jest.fn(),
+      requestUserApproval: jest.fn(),
+      hasApprovalRequestsForOrigin: jest.fn(),
+      toNetworkConfiguration: {},
+      fromNetworkConfiguration: {},
     };
     const response: { result?: true } = {};
     const switchChain = (chainId: Hex, networkClientId: string) =>
@@ -125,6 +132,25 @@ describe('Ethereum Chain Utils', () => {
         expect(mocks.setTokenNetworkFilter).toHaveBeenCalledWith('0x1');
       });
 
+      it('check for user approval is user already has access on the chain', async () => {
+        jest
+          .spyOn(Multichain, 'getPermittedEthChainIds')
+          .mockReturnValue(['0x1']);
+        const { mocks, switchChain } = createMockedSwitchChain();
+        mocks.hasApprovalRequestsForOrigin.mockReturnValue(true);
+        mocks.autoApprove = false;
+        mocks.getCaveat.mockReturnValue({
+          value: {
+            requiredScopes: {},
+            optionalScopes: {},
+            isMultichainOrigin: false,
+          },
+        });
+        await switchChain('0x1', 'testnet');
+
+        expect(mocks.requestUserApproval).toHaveBeenCalledTimes(1);
+      });
+
       it('should throw errors if the permittedChains grant fails', async () => {
         const { mocks, end, switchChain } = createMockedSwitchChain();
         mocks.requestPermittedChainsPermissionIncrementalForOrigin.mockRejectedValueOnce(

app/scripts/lib/rpc-method-middleware/handlers/ethereum-chain-utils.js

@@ -1,4 +1,5 @@
 import { providerErrors } from '@metamask/rpc-errors';
+
 import { MESSAGE_TYPE } from '../../../../../shared/constants/app';
 import {
   validateSwitchEthereumChainParams,
@@ -11,10 +12,12 @@ const switchEthereumChain = {
   hookNames: {
     getNetworkConfigurationByChainId: true,
     setActiveNetwork: true,
+    requestUserApproval: true,
     getCaveat: true,
     getCurrentChainIdForDomain: true,
     requestPermittedChainsPermissionIncrementalForOrigin: true,
     setTokenNetworkFilter: true,
+    hasApprovalRequestsForOrigin: true,
   },
 };
 
@@ -28,10 +31,12 @@ async function switchEthereumChainHandler(
   {
     getNetworkConfigurationByChainId,
     setActiveNetwork,
+    requestUserApproval,
     getCaveat,
     getCurrentChainIdForDomain,
     requestPermittedChainsPermissionIncrementalForOrigin,
     setTokenNetworkFilter,
+    hasApprovalRequestsForOrigin,
   },
 ) {
   let chainId;
@@ -64,10 +69,21 @@ async function switchEthereumChainHandler(
     );
   }
 
+  const fromNetworkConfiguration = getNetworkConfigurationByChainId(
+    currentChainIdForOrigin,
+  );
+
+  const toNetworkConfiguration = getNetworkConfigurationByChainId(chainId);
+
   return switchChain(res, end, chainId, networkClientIdToSwitchTo, {
+    origin,
     setActiveNetwork,
     getCaveat,
     requestPermittedChainsPermissionIncrementalForOrigin,
     setTokenNetworkFilter,
+    requestUserApproval,
+    hasApprovalRequestsForOrigin,
+    toNetworkConfiguration,
+    fromNetworkConfiguration,
   });
 }

app/scripts/lib/rpc-method-middleware/handlers/ethereum-chain-utils.test.ts

@@ -39,6 +39,7 @@ const createMockedHandler = () => {
   const next = jest.fn();
   const end = jest.fn();
   const mocks = {
+    hasApprovalRequestsForOrigin: () => false,
     getNetworkConfigurationByChainId: jest
       .fn()
       .mockReturnValue(createMockMainnetConfiguration()),
@@ -47,6 +48,7 @@ const createMockedHandler = () => {
     getCurrentChainIdForDomain: jest.fn().mockReturnValue(NON_INFURA_CHAIN_ID),
     requestPermittedChainsPermissionIncrementalForOrigin: jest.fn(),
     setTokenNetworkFilter: jest.fn(),
+    requestUserApproval: jest.fn(),
   };
   const response = {};
   const handler = (request) =>
@@ -167,10 +169,31 @@ describe('switchEthereumChainHandler', () => {
       'mainnet',
       {
         setActiveNetwork: mocks.setActiveNetwork,
+        fromNetworkConfiguration: {
+          chainId: '0xe708',
+          defaultRpcEndpointIndex: 0,
+          rpcEndpoints: [
+            {
+              networkClientId: 'linea-mainnet',
+            },
+          ],
+        },
         getCaveat: mocks.getCaveat,
+        hasApprovalRequestsForOrigin: mocks.hasApprovalRequestsForOrigin,
+        origin: 'example.com',
         requestPermittedChainsPermissionIncrementalForOrigin:
           mocks.requestPermittedChainsPermissionIncrementalForOrigin,
+        requestUserApproval: mocks.requestUserApproval,
         setTokenNetworkFilter: mocks.setTokenNetworkFilter,
+        toNetworkConfiguration: {
+          chainId: '0x1',
+          defaultRpcEndpointIndex: 0,
+          rpcEndpoints: [
+            {
+              networkClientId: 'mainnet',
+            },
+          ],
+        },
       },
     );
   });

app/scripts/lib/rpc-method-middleware/handlers/switch-ethereum-chain.js

@@ -6197,6 +6197,8 @@ export default class MetamaskController extends EventEmitter {
           this.permissionController,
           origin,
         ),
+        hasApprovalRequestsForOrigin: () =>
+          this.approvalController.has({ origin }),
         rejectApprovalRequestsForOrigin: () =>
           this.rejectOriginPendingApprovals(origin),
 

app/scripts/lib/rpc-method-middleware/handlers/switch-ethereum-chain.test.js

@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 import mockState from '../../../../../test/data/mock-state.json';
 import { renderHookWithProvider } from '../../../../../test/lib/render-helpers';
 import * as AlertActions from '../../../../ducks/confirm-alerts/confirm-alerts';
-import * as AddEthereumChainAlerts from './useAddEthereumChainAlerts';
+import * as UpdateEthereumChainAlerts from './useUpdateEthereumChainAlerts';
 
 import { useTemplateConfirmationAlerts } from './useTemplateConfirmationAlerts';
 
@@ -34,7 +34,7 @@ describe('updateConfirmationAlerts', () => {
     const mockDispatch = jest.fn();
     (useDispatch as jest.Mock).mockReturnValue(mockDispatch);
     jest
-      .spyOn(AddEthereumChainAlerts, 'useAddEthereumChainAlerts')
+      .spyOn(UpdateEthereumChainAlerts, 'useUpdateEthereumChainAlerts')
       .mockReturnValue(MOCK_ADD_ETH_CHAIN_ALERT);
     const mockUpdateAlerts = jest.spyOn(AlertActions, 'updateAlerts');
 

app/scripts/metamask-controller.js

@@ -7,13 +7,14 @@ import {
   clearAlerts,
   updateAlerts,
 } from '../../../../ducks/confirm-alerts/confirm-alerts';
-import { useAddEthereumChainAlerts } from './useAddEthereumChainAlerts';
+import { useUpdateEthereumChainAlerts } from './useUpdateEthereumChainAlerts';
 
 export const useTemplateConfirmationAlerts = (
   pendingConfirmation: ApprovalRequest<{ id: string }>,
 ) => {
   const dispatch = useDispatch();
-  const addEthereumChainAlerts = useAddEthereumChainAlerts(pendingConfirmation);
+  const addEthereumChainAlerts =
+    useUpdateEthereumChainAlerts(pendingConfirmation);
   const alerts: Alert[] = useMemo(
     () => addEthereumChainAlerts,
     [addEthereumChainAlerts],

ui/pages/confirmations/confirmation/alerts/useTemplateConfirmationAlerts.test.ts

@@ -6,7 +6,7 @@ import { getMockPersonalSignConfirmState } from '../../../../../test/data/confir
 import { renderHookWithProvider } from '../../../../../test/lib/render-helpers';
 import * as AlertActions from '../../../../ducks/confirm-alerts/confirm-alerts';
 
-import { useAddEthereumChainAlerts } from './useAddEthereumChainAlerts';
+import { useUpdateEthereumChainAlerts } from './useUpdateEthereumChainAlerts';
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
@@ -35,11 +35,19 @@ const ADD_ETH_CHAIN_ALERT = [
   },
 ] as AlertActions.Alert[];
 
-describe('useAddEthereumChainAlerts', () => {
-  it('returns alert if there are pending confirmations', () => {
-    const state = getMockPersonalSignConfirmState();
+const SWITCH_ETH_CHAIN_ALERT = [
+  {
+    ...ADD_ETH_CHAIN_ALERT[0],
+    message:
+      'Switching network will cancel 1 pending transactions from this site.',
+  },
+] as AlertActions.Alert[];
+
+describe('useUpdateEthereumChainAlerts', () => {
+  const state = getMockPersonalSignConfirmState();
+  it('returns alert for approval type addEthereumChain if there are pending confirmations', () => {
     const { result } = renderHookWithProvider(
-      () => useAddEthereumChainAlerts(PENDING_APPROVAL_MOCK),
+      () => useUpdateEthereumChainAlerts(PENDING_APPROVAL_MOCK),
       {
         ...state,
         metamask: {
@@ -54,9 +62,42 @@ describe('useAddEthereumChainAlerts', () => {
     expect(result.current).toStrictEqual(ADD_ETH_CHAIN_ALERT);
   });
 
+  it('returns alert for approval type switchEthereumChain if there are pending confirmations', () => {
+    const { result } = renderHookWithProvider(
+      () =>
+        useUpdateEthereumChainAlerts({
+          ...PENDING_APPROVAL_MOCK,
+          type: ApprovalType.SwitchEthereumChain,
+        }),
+      {
+        ...state,
+        metamask: {
+          ...state.metamask,
+          pendingApprovals: {
+            ...state.metamask.pendingApprovals,
+            [PENDING_APPROVAL_MOCK.id]: PENDING_APPROVAL_MOCK,
+          },
+        },
+      },
+    );
+    expect(result.current).toStrictEqual(SWITCH_ETH_CHAIN_ALERT);
+  });
+
   it('does not returns alert if there are no pending confirmations', () => {
     const { result } = renderHookWithProvider(
-      () => useAddEthereumChainAlerts(PENDING_APPROVAL_MOCK),
+      () => useUpdateEthereumChainAlerts(PENDING_APPROVAL_MOCK),
+      mockState,
+    );
+    expect(result.current).toStrictEqual([]);
+  });
+
+  it('does not returns alert for un-supported pending confirmation type', () => {
+    const { result } = renderHookWithProvider(
+      () =>
+        useUpdateEthereumChainAlerts({
+          ...PENDING_APPROVAL_MOCK,
+          type: ApprovalType.PersonalSign,
+        }),
       mockState,
     );
     expect(result.current).toStrictEqual([]);