refactor: Align add/switch chain logic with Extension (Fix addEthereumChain unneeded switch approval) (#20649)

<!--
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**

* Fixes bug where `wallet_addEthereumChain` calls that result in a
prompt to the user to approve the add was also prompting the user to
permit the chain right afterwards
* Changes `wallet_addEthereumChain` to not switch to a specific rpc
endpoint in the scenario it already exists in the wallet. See Changelog
below
* Refactors add/switchEthereumChain and helper logic to align closer to
Extension's as prerequisite work before a larger refactor to bring this
shared logic into a core package

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Fixes a bug where the user is unnecessarily prompted to
approve access to a network that they have just approved to add to their
wallet.

## **Related issues**

Fixes:
https://consensyssoftware.atlassian.net/jira/software/c/projects/WAPI/boards/2015?selectedIssue=WAPI-721

## **Manual testing steps**

1. In the In-App Browser, visit chainlist.org
2. Add a rpc for a chain you do not have in your wallet yet
3. Accept the Add Chain approval, you should NOT get a Permit chain
approval afterwards
4. Check your permissions and see that the chain is now permitted for
chainlist.org as well

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**


https://github.com/user-attachments/assets/19016412-872d-4edb-9947-267e9563c254


### **After**


https://github.com/user-attachments/assets/76d050eb-ce7b-4bc3-a037-d99643d9d734


## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.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-mobile/blob/main/.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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Refactors add/switch chain logic to use incremental CAIP‑25
permissions with metadata, updates approval routing/UI, and revises
WalletConnect and tests accordingly.
> 
> - **RPC/Core**:
> - **Hooks/Metadata**: Change `getRpcMethodMiddlewareHooks` to accept
context object; propagate `pageMeta` in incremental permission requests.
> - **Switch Logic**: Redesign `switchToNetwork` to use
`networkClientId`, `nativeCurrency`, and `rpcUrl`; request CAIP‑25
permissions incrementally (with metadata) instead of extra approvals;
set active network by client id; tweak analytics symbol.
> - **wallet_addEthereumChain**: Validate/update or add networks; avoid
unnecessary RPC endpoint switch when already present; call new
`switchToNetwork`; emit metrics; update tests.
> - **wallet_switchEthereumChain**: Resolve network config by `chainId`,
error if unknown; call new `switchToNetwork` with derived
`rpcUrl`/`networkClientId`; remove explicit approval flow; update tests.
> - **WalletConnect**: Use new hooks API; clear pending approvals before
prompting; pass WC metadata; call new `switchToNetwork`.
> - **Approvals UI**:
> - **PermissionApproval**: Skip navigation when
`requestData.diff.permissionDiffMap[Caip25EndowmentPermissionName]`
exists; fallback to `metadata.pageMeta`.
> - **SwitchChainApproval**: Handle CAIP‑25 permission diffs; derive
`chainId` via `getPermittedEthChainIds` and show `chainName` from store;
use `metadata.rpcUrl`; update snapshots/tests.
> - **Misc**:
> - **useApprovalRequest**: Add fallback to
`requestData.metadata.pageMeta`.
> - **Tests**: Broad updates across RPC, WalletConnect, and Approvals to
reflect new flow and APIs.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
30c3ce9. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Alex Donesky <[email protected]>

Author: jiexi

app/components/Approvals/PermissionApproval/PermissionApproval.test.tsx

@@ -210,6 +210,30 @@ describe('PermissionApproval', () => {
     expect(navigationMock.navigate).toHaveBeenCalledTimes(0);
   });
 
+  it(`does not navigate if there is a permission diff for the ${Caip25EndowmentPermissionName} permission`, async () => {
+    const navigationMock = {
+      navigate: jest.fn(),
+    };
+
+    mockApprovalRequest({
+      type: ApprovalTypes.REQUEST_PERMISSIONS,
+      requestData: {
+        ...HOST_INFO_MOCK,
+        diff: {
+          permissionDiffMap: {
+            [Caip25EndowmentPermissionName]: {},
+          },
+        },
+      },
+      // TODO: Replace "any" with type
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any);
+
+    render(<PermissionApproval navigation={navigationMock} />);
+
+    expect(navigationMock.navigate).toHaveBeenCalledTimes(0);
+  });
+
   it(`does not navigate if no ${Caip25EndowmentPermissionName} permission`, async () => {
     const navigationMock = {
       navigate: jest.fn(),

app/components/Approvals/PermissionApproval/PermissionApproval.tsx

@@ -47,6 +47,11 @@ const PermissionApproval = (props: PermissionApprovalProps) => {
       metadata: { id },
     } = requestData;
 
+    if (requestData?.diff?.permissionDiffMap?.[Caip25EndowmentPermissionName]) {
+      // Use the SwitchChainApproval component to handle this request instead
+      return;
+    }
+
     if (isProcessing.current) return;
 
     isProcessing.current = true;

app/components/Approvals/SwitchChainApproval/SwitchChainApproval.test.tsx

@@ -2,11 +2,23 @@ import React from 'react';
 import useApprovalRequest from '../../Views/confirmations/hooks/useApprovalRequest';
 import { shallow } from 'enzyme';
 import { ApprovalTypes } from '../../../core/RPCMethods/RPCMethodMiddleware';
-import { ApprovalRequest } from '@metamask/approval-controller';
 import SwitchChainApproval from './SwitchChainApproval';
 import { networkSwitched } from '../../../actions/onboardNetwork';
 // eslint-disable-next-line import/no-namespace
 import * as networks from '../../../util/networks';
+import {
+  Caip25CaveatType,
+  Caip25EndowmentPermissionName,
+} from '@metamask/chain-agnostic-permission';
+
+jest.mock('../../../selectors/networkController', () => ({
+  ...jest.requireActual('../../../selectors/networkController'),
+  selectEvmNetworkConfigurationsByChainId: () => ({
+    '0x1': {
+      name: 'Ethereum Mainnet',
+    },
+  }),
+}));
 
 jest.mock('../../hooks/useNetworksByNamespace/useNetworksByNamespace', () => ({
   useNetworksByNamespace: () => ({
@@ -54,11 +66,7 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn((selector) => selector()),
 }));
 
-const URL_MOCK = 'test.com';
-
-// TODO: Replace "any" with type
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const mockApprovalRequest = (approvalRequest?: ApprovalRequest<any>) => {
+const mockApprovalRequest = (approvalRequest?: unknown) => {
   (
     useApprovalRequest as jest.MockedFn<typeof useApprovalRequest>
   ).mockReturnValue({
@@ -69,9 +77,31 @@ const mockApprovalRequest = (approvalRequest?: ApprovalRequest<any>) => {
   } as any);
 };
 
+const URL_MOCK = 'test.com';
+
+const mockApprovalRequestData = {
+  metadata: {
+    rpcUrl: URL_MOCK,
+  },
+  diff: {
+    permissionDiffMap: {
+      [Caip25EndowmentPermissionName]: {
+        [Caip25CaveatType]: {
+          requiredScopes: {
+            'eip155:1': {
+              accounts: [],
+            },
+          },
+          optionalScopes: {},
+        },
+      },
+    },
+  },
+};
+
 describe('SwitchChainApproval', () => {
   beforeEach(() => {
-    jest.resetAllMocks();
+    jest.clearAllMocks();
     jest.spyOn(networks, 'isPortfolioViewEnabled').mockReturnValue(false);
     jest
       .spyOn(networks, 'isRemoveGlobalNetworkSelectorEnabled')
@@ -81,9 +111,8 @@ describe('SwitchChainApproval', () => {
   it('renders', () => {
     mockApprovalRequest({
       type: ApprovalTypes.SWITCH_ETHEREUM_CHAIN,
-      // TODO: Replace "any" with type
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } as any);
+      requestData: mockApprovalRequestData,
+    });
 
     const wrapper = shallow(<SwitchChainApproval />);
 
@@ -109,12 +138,8 @@ describe('SwitchChainApproval', () => {
   it('calls networkSwitched action when confirm is pressed', () => {
     mockApprovalRequest({
       type: ApprovalTypes.SWITCH_ETHEREUM_CHAIN,
-      requestData: {
-        rpcUrl: URL_MOCK,
-      },
-      // TODO: Replace "any" with type
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } as any);
+      requestData: mockApprovalRequestData,
+    });
 
     const wrapper = shallow(<SwitchChainApproval />);
     wrapper.find('SwitchCustomNetwork').simulate('confirm');
@@ -130,12 +155,8 @@ describe('SwitchChainApproval', () => {
     jest.spyOn(networks, 'isPortfolioViewEnabled').mockReturnValue(true);
     mockApprovalRequest({
       type: ApprovalTypes.SWITCH_ETHEREUM_CHAIN,
-      requestData: {
-        rpcUrl: URL_MOCK,
-      },
-    } as ApprovalRequest<{
-      rpcUrl: string;
-    }>);
+      requestData: mockApprovalRequestData,
+    });
 
     const wrapper = shallow(<SwitchChainApproval />);
     wrapper.find('SwitchCustomNetwork').simulate('confirm');
@@ -155,14 +176,8 @@ describe('SwitchChainApproval', () => {
 
     mockApprovalRequest({
       type: ApprovalTypes.SWITCH_ETHEREUM_CHAIN,
-      requestData: {
-        rpcUrl: URL_MOCK,
-        chainId: '0x1',
-      },
-    } as ApprovalRequest<{
-      rpcUrl: string;
-      chainId: string;
-    }>);
+      requestData: mockApprovalRequestData,
+    });
 
     const wrapper = shallow(<SwitchChainApproval />);
     wrapper.find('SwitchCustomNetwork').simulate('confirm');
@@ -184,14 +199,8 @@ describe('SwitchChainApproval', () => {
 
     mockApprovalRequest({
       type: ApprovalTypes.SWITCH_ETHEREUM_CHAIN,
-      requestData: {
-        rpcUrl: URL_MOCK,
-        chainId: '0x1',
-      },
-    } as ApprovalRequest<{
-      rpcUrl: string;
-      chainId: string;
-    }>);
+      requestData: mockApprovalRequestData,
+    });
 
     const wrapper = shallow(<SwitchChainApproval />);
     wrapper.find('SwitchCustomNetwork').simulate('confirm');

app/components/Approvals/SwitchChainApproval/SwitchChainApproval.tsx

@@ -4,7 +4,7 @@ import { ApprovalTypes } from '../../../core/RPCMethods/RPCMethodMiddleware';
 import ApprovalModal from '../ApprovalModal';
 import SwitchCustomNetwork from '../../UI/SwitchCustomNetwork';
 import { networkSwitched } from '../../../actions/onboardNetwork';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   isPortfolioViewEnabled,
   isRemoveGlobalNetworkSelectorEnabled,
@@ -14,6 +14,12 @@ import {
   useNetworksByNamespace,
 } from '../../hooks/useNetworksByNamespace/useNetworksByNamespace';
 import { useNetworkSelection } from '../../hooks/useNetworkSelection/useNetworkSelection';
+import {
+  Caip25CaveatType,
+  Caip25EndowmentPermissionName,
+  getPermittedEthChainIds,
+} from '@metamask/chain-agnostic-permission';
+import { selectEvmNetworkConfigurationsByChainId } from '../../../selectors/networkController';
 
 const SwitchChainApproval = () => {
   const {
@@ -31,37 +37,64 @@ const SwitchChainApproval = () => {
     networks,
   });
 
+  const evmNetworkConfigurations = useSelector(
+    selectEvmNetworkConfigurationsByChainId,
+  );
+
+  const caip25CaveatValue =
+    approvalRequest?.requestData?.diff?.permissionDiffMap?.[
+      Caip25EndowmentPermissionName
+    ]?.[Caip25CaveatType];
+
+  const permittedEthChainIds = caip25CaveatValue
+    ? getPermittedEthChainIds(caip25CaveatValue)
+    : [];
+
+  // This approval view only handles one chainId added to permissions at a time, and the permissionDiffMap should only contain one chainId
+  const chainId = permittedEthChainIds[0];
+
   const onConfirm = useCallback(() => {
     defaultOnConfirm();
 
     // If portfolio view is enabled should set network filter
     if (isPortfolioViewEnabled()) {
       if (isRemoveGlobalNetworkSelectorEnabled()) {
-        selectNetwork(approvalRequest?.requestData?.chainId);
+        selectNetwork(chainId);
       }
     }
 
     dispatch(
       networkSwitched({
-        networkUrl: approvalRequest?.requestData?.rpcUrl,
+        networkUrl: approvalRequest?.requestData?.metadata?.rpcUrl,
         networkStatus: true,
       }),
     );
-  }, [approvalRequest, defaultOnConfirm, dispatch, selectNetwork]);
+  }, [approvalRequest, defaultOnConfirm, dispatch, selectNetwork, chainId]);
 
-  if (approvalRequest?.type !== ApprovalTypes.SWITCH_ETHEREUM_CHAIN)
-    return null;
+  if (
+    approvalRequest?.requestData?.diff?.permissionDiffMap?.[
+      Caip25EndowmentPermissionName
+    ] ||
+    // TODO: Revisit removing this when we DRY the addEthereumChain and switchEthereumChain handlers into core
+    approvalRequest?.type === ApprovalTypes.SWITCH_ETHEREUM_CHAIN
+  ) {
+    const customNetworkInformation = {
+      chainId,
+      chainName: evmNetworkConfigurations[chainId]?.name,
+    };
 
-  return (
-    <ApprovalModal isVisible onCancel={onReject}>
-      <SwitchCustomNetwork
-        onCancel={onReject}
-        onConfirm={onConfirm}
-        currentPageInformation={pageMeta}
-        customNetworkInformation={approvalRequest?.requestData}
-      />
-    </ApprovalModal>
-  );
+    return (
+      <ApprovalModal isVisible onCancel={onReject}>
+        <SwitchCustomNetwork
+          onCancel={onReject}
+          onConfirm={onConfirm}
+          currentPageInformation={pageMeta}
+          customNetworkInformation={customNetworkInformation}
+        />
+      </ApprovalModal>
+    );
+  }
+  return null;
 };
 
 export default SwitchChainApproval;

app/components/Approvals/SwitchChainApproval/__snapshots__/SwitchChainApproval.test.tsx.snap

@@ -5,6 +5,12 @@ exports[`SwitchChainApproval renders 1`] = `
   isVisible={true}
 >
   <SwitchCustomNetwork
+    customNetworkInformation={
+      {
+        "chainId": "0x1",
+        "chainName": "Ethereum Mainnet",
+      }
+    }
     onConfirm={[Function]}
   />
 </ApprovalModal>

app/components/Views/confirmations/hooks/useApprovalRequest.ts

@@ -51,7 +51,10 @@ const useApprovalRequest = () => {
   );
 
   const pageMeta = useMemo(
-    () => approvalRequest?.requestData?.pageMeta ?? {},
+    () =>
+      approvalRequest?.requestData?.pageMeta ??
+      approvalRequest?.requestData?.metadata?.pageMeta ??
+      {},
     [approvalRequest],
   );
 

app/core/RPCMethods/RPCMethodMiddleware.test.ts

@@ -1725,7 +1725,21 @@ describe('getRpcMethodMiddleware', () => {
 
 describe('getRpcMethodMiddlewareHooks', () => {
   const testOrigin = 'https://test.com';
-  const hooks = getRpcMethodMiddlewareHooks(testOrigin);
+  const mockUrl = { current: 'https://test.com' };
+  const mockTitle = { current: 'Test Site' };
+  const mockIcon = { current: undefined };
+  const mockAnalytics = { test: true };
+  const mockGetSource = jest.fn(() => 'test-source');
+
+  const hooks = getRpcMethodMiddlewareHooks({
+    origin: testOrigin,
+    url: mockUrl,
+    title: mockTitle,
+    icon: mockIcon,
+    analytics: mockAnalytics,
+    channelId: 'test-channel',
+    getSource: mockGetSource,
+  });
 
   beforeEach(() => {
     jest.clearAllMocks();