feat: Track when RPC update from network banner is completed (#37751)

## **Description**

### Track RPC Update Completion from Network Banner

### Summary

Adds `NetworkConnectionBannerRpcUpdated` event to track when users
**complete** the RPC update flow initiated from the network connection
banner.

### Changes

- **New MetaMetrics event**: `NetworkConnectionBannerRpcUpdated`
- **Tracked on**: Network form submission when
`trackRpcUpdateFromBanner` flag is set
- **Properties**:
  - `chain_id_caip`: CAIP-2 format (e.g., `eip155:1`)
- `from_rpc_domain`: Original RPC domain being switched from (hostname
for public RPCs, `'custom'` for private)
- `to_rpc_domain`: New RPC domain being switched to (hostname for public
RPCs, `'custom'` for private)

### Why

Currently we track when users **click** "Update RPC"
(`NetworkConnectionBannerUpdateRpcClicked`), but not when they
**complete** the update.

```mermaid
sequenceDiagram
    participant User
    participant Banner as Network Banner
    participant Form as Network Form
    participant Analytics

    Note over Banner: Network issue detected
    Banner->>User: Show "degraded" or "unavailable" banner
    Note over Analytics: 📊 NetworkConnectionBannerShown

    User->>Banner: Click "Update RPC"
    Banner->>Analytics: 📊 NetworkConnectionBannerUpdateRpcClicked
    Note right of Analytics: Existing event<br/>Tracks user INTENT

    Banner->>Form: Navigate to network settings
    User->>Form: Edit RPC endpoint
    User->>Form: Click "Save"

    Form->>Analytics: 📊 NetworkConnectionBannerRpcUpdated
    Note right of Analytics: NEW event (this PR)<br/>Tracks COMPLETION

    Form->>User: Network updated ✅
```

### Related

- Segment schema PR:
Consensys/segment-schema#366,
Consensys/segment-schema#381

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

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

## **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: null

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/WPC-172

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **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/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-extension/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]
> Adds `NetworkConnectionBannerRpcUpdated` event and wires a
banner->form flag to track completed RPC updates with CAIP chain ID and
RPC domain metadata.
> 
> - **Analytics (MetaMetrics)**:
>   - Add `MetaMetricsEventName.NetworkConnectionBannerRpcUpdated`.
> - **State & Actions**:
> - Extend `setEditedNetwork`/`editedNetwork` with
`trackRpcUpdateFromBanner`.
>   - Update `getEditedNetwork` selector types accordingly.
> - **UI Flow**:
> - `network-connection-banner`: on "Update RPC", dispatch
`setEditedNetwork({ chainId, trackRpcUpdateFromBanner: true })` and
navigate to `NETWORKS_ROUTE`.
> - `network-list-menu`: pass `trackRpcUpdateFromBanner` to
`NetworksForm`.
> - `NetworksForm`: on Save (when editing) and flag is set, track
`Network Connection Banner RPC Updated` with:
>     - `chain_id_caip` (`eip155:<decimal>`),
> - `from_rpc_domain`/`to_rpc_domain` (public host or
`custom`/`unknown`).
> - Utilize `hexToNumber`, `isPublicEndpointUrl`, `onlyKeepHost` for
payload.
> - **Tests**:
>   - Update banner tests to assert the new flag in `setEditedNetwork`.
> - Add form tests covering event emission, absence when flag not set,
custom endpoints, and missing `rpcEndpoints` handling.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
0704976. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: cryptodev-2s

shared/constants/metametrics.ts

@@ -764,6 +764,7 @@ export enum MetaMetricsEventName {
   NavPermissionsOpened = 'Permissions Opened',
   NetworkConnectionBannerShown = 'Network Connection Banner Shown',
   NetworkConnectionBannerUpdateRpcClicked = 'Network Connection Banner Update RPC Clicked',
+  NetworkConnectionBannerRpcUpdated = 'Network Connection Banner RPC Updated',
   UpdatePermissionedNetworks = 'Update Permissioned Networks',
   UpdatePermissionedAccounts = 'Update Permissioned Accounts',
   ViewPermissionedNetworks = 'View Permissioned Networks',

ui/components/app/network-connection-banner/network-connection-banner.test.tsx

@@ -105,7 +105,10 @@ describe('NetworkConnectionBanner', () => {
         );
         fireEvent.click(getByText('Update RPC'));
 
-        expect(mockSetEditedNetwork).toHaveBeenCalledWith({ chainId: '0x1' });
+        expect(mockSetEditedNetwork).toHaveBeenCalledWith({
+          chainId: '0x1',
+          trackRpcUpdateFromBanner: true,
+        });
         expect(navigateMock).toHaveBeenCalledWith('/settings/networks');
       });
 
@@ -212,7 +215,10 @@ describe('NetworkConnectionBanner', () => {
         );
         fireEvent.click(getByText('update RPC'));
 
-        expect(mockSetEditedNetwork).toHaveBeenCalledWith({ chainId: '0x1' });
+        expect(mockSetEditedNetwork).toHaveBeenCalledWith({
+          chainId: '0x1',
+          trackRpcUpdateFromBanner: true,
+        });
         expect(navigateMock).toHaveBeenCalledWith('/settings/networks');
       });
 

ui/components/app/network-connection-banner/network-connection-banner.tsx

@@ -190,7 +190,12 @@ export const NetworkConnectionBanner = () => {
         networkClientId: networkConnectionBanner.networkClientId,
       });
 
-      dispatch(setEditedNetwork({ chainId: networkConnectionBanner.chainId }));
+      dispatch(
+        setEditedNetwork({
+          chainId: networkConnectionBanner.chainId,
+          trackRpcUpdateFromBanner: true,
+        }),
+      );
       navigate(NETWORKS_ROUTE);
     }
   }, [networkConnectionBanner, dispatch, navigate]);

ui/components/multichain/network-list-menu/network-list-menu.tsx

@@ -184,8 +184,11 @@ export const NetworkListMenu = ({ onClose }: NetworkListMenuProps) => {
     getMultichainNetworkConfigurationsByChainId,
   );
   const currentChainId = useSelector(getSelectedMultichainNetworkChainId);
-  const { chainId: editingChainId, editCompleted } =
-    useSelector(getEditedNetwork) ?? {};
+  const {
+    chainId: editingChainId,
+    editCompleted,
+    trackRpcUpdateFromBanner,
+  } = useSelector(getEditedNetwork) ?? {};
   const permittedChainIds = useSelector((state) =>
     getPermittedEVMChainsForSelectedTab(state, selectedTabOrigin),
   );
@@ -735,6 +738,7 @@ export const NetworkListMenu = ({ onClose }: NetworkListMenuProps) => {
         <NetworksForm
           networkFormState={networkFormState}
           existingNetwork={editedNetwork}
+          trackRpcUpdateFromBanner={trackRpcUpdateFromBanner}
           onRpcAdd={() => setActionMode(ACTION_MODE.ADD_RPC)}
           onBlockExplorerAdd={() => setActionMode(ACTION_MODE.ADD_EXPLORER_URL)}
         />

ui/ducks/app/app.ts

@@ -112,6 +112,7 @@ type AppState = {
         nickname?: string;
         editCompleted?: boolean;
         newNetwork?: boolean;
+        trackRpcUpdateFromBanner?: boolean;
       }
     | undefined;
   newNetworkAddedConfigurationId: string;

ui/pages/settings/networks-tab/networks-form/networks-form.test.js

@@ -18,6 +18,7 @@ import {
   setTokenNetworkFilter,
   updateNetwork,
 } from '../../../../store/actions';
+import { MetaMetricsContext } from '../../../../contexts/metametrics';
 import { NetworksForm } from './networks-form';
 
 jest.mock('../../../../../ui/store/actions', () => ({
@@ -87,6 +88,8 @@ describe('NetworkForm Component', () => {
   });
 
   beforeEach(() => {
+    jest.clearAllMocks();
+
     nock('https://chainid.network:443', { encodedQueryParams: true })
       .get('/chains.json')
       .reply(200, [
@@ -457,4 +460,252 @@ describe('NetworkForm Component', () => {
       expect(setTokenNetworkFilter).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('should track RPC update event when trackRpcUpdateFromBanner is true', async () => {
+    const mockTrackEvent = jest.fn();
+    const store = configureMockStore([thunk])({
+      metamask: {
+        ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
+        useSafeChainsListValidation: true,
+        orderedNetworkList: {
+          networkId: '0x1',
+          networkRpcUrl: 'https://mainnet.infura.io/v3/',
+        },
+        multichainNetworkConfigurationsByChainId:
+          AVAILABLE_MULTICHAIN_NETWORK_CONFIGURATIONS,
+        selectedMultichainNetworkChainId: 'eip155:1',
+        isEvmSelected: true,
+      },
+    });
+
+    const { getByText } = renderWithProvider(
+      <MetaMetricsContext.Provider value={mockTrackEvent}>
+        <NetworksForm
+          {...propNetworkDisplay}
+          networkFormState={{
+            ...propNetworkDisplay.networkFormState,
+            rpcUrls: {
+              defaultRpcEndpointIndex: 0,
+              rpcEndpoints: [
+                {
+                  url: 'https://monad-mainnet.infura.io/v3/',
+                  type: 'custom',
+                },
+              ],
+            },
+          }}
+          existingNetwork={{
+            chainId: '0x64',
+            name: 'Ethereum',
+            nativeCurrency: 'ETH',
+            rpcEndpoints: [
+              {
+                url: 'https://mainnet.infura.io/v3/',
+              },
+            ],
+            defaultRpcEndpointIndex: 0,
+          }}
+          trackRpcUpdateFromBanner
+        />
+      </MetaMetricsContext.Provider>,
+      store,
+    );
+
+    const saveButton = getByText('Save');
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(updateNetwork).toHaveBeenCalled();
+      expect(mockTrackEvent).toHaveBeenCalledWith({
+        category: 'Network',
+        event: 'Network Connection Banner RPC Updated',
+        properties: {
+          chain_id_caip: 'eip155:100',
+          from_rpc_domain: 'mainnet.infura.io',
+          to_rpc_domain: 'monad-mainnet.infura.io',
+        },
+      });
+    });
+  });
+
+  it('should not track RPC update event when trackRpcUpdateFromBanner is not set', async () => {
+    const mockTrackEvent = jest.fn();
+    const store = configureMockStore([thunk])({
+      metamask: {
+        ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
+        useSafeChainsListValidation: true,
+        orderedNetworkList: {
+          networkId: '0x1',
+          networkRpcUrl: 'https://mainnet.infura.io/v3/',
+        },
+        multichainNetworkConfigurationsByChainId:
+          AVAILABLE_MULTICHAIN_NETWORK_CONFIGURATIONS,
+        selectedMultichainNetworkChainId: 'eip155:1',
+        isEvmSelected: true,
+      },
+    });
+
+    const { getByText } = renderWithProvider(
+      <MetaMetricsContext.Provider value={mockTrackEvent}>
+        <NetworksForm
+          {...propNetworkDisplay}
+          existingNetwork={{
+            chainId: '0x64',
+            name: 'Ethereum',
+            nativeCurrency: 'ETH',
+            rpcEndpoints: [
+              {
+                url: 'https://mainnet.infura.io/v3/',
+              },
+            ],
+            defaultRpcEndpointIndex: 0,
+          }}
+          // trackRpcUpdateFromBanner not set
+        />
+      </MetaMetricsContext.Provider>,
+      store,
+    );
+
+    const saveButton = getByText('Save');
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(updateNetwork).toHaveBeenCalled();
+      // Should not have called the banner tracking event
+      expect(mockTrackEvent).not.toHaveBeenCalledWith(
+        expect.objectContaining({
+          event: 'Network Connection Banner RPC Updated',
+        }),
+      );
+    });
+  });
+
+  it('should track custom RPC URL when endpoint is not public', async () => {
+    const mockTrackEvent = jest.fn();
+    const store = configureMockStore([thunk])({
+      metamask: {
+        ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
+        useSafeChainsListValidation: true,
+        orderedNetworkList: {
+          networkId: '0x1',
+          networkRpcUrl: 'https://mainnet.infura.io/v3/',
+        },
+        multichainNetworkConfigurationsByChainId:
+          AVAILABLE_MULTICHAIN_NETWORK_CONFIGURATIONS,
+        selectedMultichainNetworkChainId: 'eip155:1',
+        isEvmSelected: true,
+      },
+    });
+
+    const { getByText } = renderWithProvider(
+      <MetaMetricsContext.Provider value={mockTrackEvent}>
+        <NetworksForm
+          {...propNetworkDisplay}
+          networkFormState={{
+            ...propNetworkDisplay.networkFormState,
+            rpcUrls: {
+              defaultRpcEndpointIndex: 0,
+              rpcEndpoints: [
+                {
+                  url: 'https://custom-rpc.example.com',
+                  type: 'custom',
+                },
+              ],
+            },
+          }}
+          existingNetwork={{
+            chainId: '0x64',
+            name: 'Ethereum',
+            nativeCurrency: 'ETH',
+            rpcEndpoints: [
+              {
+                url: 'https://custom-rpc.example.com',
+              },
+            ],
+            defaultRpcEndpointIndex: 0,
+          }}
+          trackRpcUpdateFromBanner
+        />
+      </MetaMetricsContext.Provider>,
+      store,
+    );
+
+    const saveButton = getByText('Save');
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(updateNetwork).toHaveBeenCalled();
+      expect(mockTrackEvent).toHaveBeenCalledWith({
+        category: 'Network',
+        event: 'Network Connection Banner RPC Updated',
+        properties: {
+          chain_id_caip: 'eip155:100',
+          from_rpc_domain: 'custom',
+          to_rpc_domain: 'custom',
+        },
+      });
+    });
+  });
+
+  it('should handle corrupted state with missing rpcEndpoints gracefully', async () => {
+    const mockTrackEvent = jest.fn();
+    const store = configureMockStore([thunk])({
+      metamask: {
+        ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
+        useSafeChainsListValidation: true,
+        orderedNetworkList: {
+          networkId: '0x1',
+          networkRpcUrl: 'https://mainnet.infura.io/v3/',
+        },
+        multichainNetworkConfigurationsByChainId:
+          AVAILABLE_MULTICHAIN_NETWORK_CONFIGURATIONS,
+        selectedMultichainNetworkChainId: 'eip155:1',
+        isEvmSelected: true,
+      },
+    });
+
+    const { getByText } = renderWithProvider(
+      <MetaMetricsContext.Provider value={mockTrackEvent}>
+        <NetworksForm
+          {...propNetworkDisplay}
+          networkFormState={{
+            ...propNetworkDisplay.networkFormState,
+            rpcUrls: {
+              defaultRpcEndpointIndex: 0,
+              rpcEndpoints: [
+                {
+                  url: 'https://monad-mainnet.infura.io/v3/',
+                  type: 'custom',
+                },
+              ],
+            },
+          }}
+          existingNetwork={{
+            chainId: '0x64',
+            name: 'Ethereum',
+            nativeCurrency: 'ETH',
+            // rpcEndpoints is undefined (corrupted state)
+          }}
+          trackRpcUpdateFromBanner
+        />
+      </MetaMetricsContext.Provider>,
+      store,
+    );
+
+    const saveButton = getByText('Save');
+    fireEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(updateNetwork).toHaveBeenCalled();
+      expect(mockTrackEvent).toHaveBeenCalledWith({
+        category: 'Network',
+        event: 'Network Connection Banner RPC Updated',
+        properties: {
+          chain_id_caip: 'eip155:100',
+          from_rpc_domain: 'unknown', // Corrupted state handled gracefully
+          to_rpc_domain: 'monad-mainnet.infura.io',
+        },
+      });
+    });
+  });
 });