chore: Bump network-controller to v27 (+ deps) (#37966)

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

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

This PR bumps `@metamask/network-controller` to 27.0.0.

There are a few notable changes:

- JsonRpcEngine v2 is now being used internally by
`createWalletMiddleware`. In this PR we adjust to that and upgrade some
of the internal middleware to use it. One of the biggest changes is that
request objects cannot have arbitrary properties — that is now available
in _context_. You can read more about JsonRpcEngine v2 here:
https://github.com/MetaMask/core/blob/main/packages/json-rpc-engine/README.md#usage
- The provider type in `@metamask/eth-json-rpc-provider` changed and is
now called `InternalProvider` rather than `SafeEventEmitterProvider`.
- The connectivity/availability status of an RPC endpoint within
NetworkController state is now updated in a more live fashion, i.e., as
requests are made instead of being set when it becomes globally selected
or when `lookupNetwork` is manually called for the RPC endpoint. This
means that anything that is actively relying on network statuses will
have more up-to-date data to act on. In particular, this slightly
improves the banner shown when the user experiences issues connecting to
a network so that if a network becomes degraded or unavailable but then
recovers, the banner should disappear for that network more quickly.

Read the changelog for more:
https://github.com/MetaMask/core/blob/main/packages/network-controller/CHANGELOG.md

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/37966?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: Improve responsiveness of network connection banner to
connection issues

## **Related issues**

https://consensyssoftware.atlassian.net/browse/WPC-99

## **Manual testing steps**

1. Check out this branch, run `yarn`, run `yarn start`.
2. Load MetaMask, go through onboarding if necessary.
3. Start Ganache.
4. Add a Localhost network to MetaMask, and switch to it.
5. On the home screen, stop Ganache.
6. After about 10-20 seconds, you should see a "Still connecting" banner
appear.
7. Switch to Ethereum Mainnet.
8. After about a second, the banner should go away.
9. Switch back to Localhost.
10. Wait for the banner to appear.
11. Start Ganache.
12. After about 10-20 seconds, the banner should go away.

## **Screenshots/Recordings**

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

### **Before**

In this video, we have Ganache running and the Localhost network added.
We stop Ganache, but a connection banner does not appear, and we have to
switch to another screen and back to get it to do so. Then we start
Ganache again, and the banner does not disappear — again, we have to
switch away and the back to get it to do so.


https://github.com/user-attachments/assets/cee15501-b824-46dc-97bb-eb77c31dbd2e

### **After**

In this video, we have Ganache running and the Localhost network added.
We stop Ganache, and a connection banner appears after 10-20 seconds. We
start Ganache again, and the banner disappears after 10-20 seconds.


https://github.com/user-attachments/assets/5532d9bb-6f37-4c08-a915-b76f352539df

## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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]
> Upgrades network-controller and related deps, migrates MetaMask
middleware and pending/signature/tx flows to JsonRpcEngine v2 with
InternalProvider, and updates tests/policies accordingly.
> 
> - **Middleware/Core (JsonRpcEngine v2 migration)**:
> - Rewrite `app/scripts/lib/createMetamaskMiddleware` in TypeScript
using `JsonRpcEngineV2`, returning `asLegacyMiddleware`.
> - Add v2 middlewares `createPendingNonceMiddleware` and
`createPendingTxMiddleware` in `app/scripts/lib/middleware/pending.ts`
with new TS tests; remove JS versions.
> - Update signature utils to use v2 `JsonRpcRequest` and
`MiddlewareContext` (`app/scripts/lib/signature/util.ts`) and adjust
tests.
> - Update transaction utils to accept `JsonRpcRequest` and
`MiddlewareContext`; plumb `requestContext` through
`metamask-controller` and `addDappTransaction`.
> - **Provider type changes**:
> - Replace `SafeEventEmitterProvider` with `InternalProvider` across
code/tests (e.g., swaps tests, test provider stub, bridge page tests).
> - **Controller/init adjustments**:
> - Remove legacy type-mismatch suppressions; minor messenger/registry
access tweaks where needed.
> - **UI/Bridge**:
>   - Use `global.ethereumProvider` directly with new provider type.
> - **Policies/Configs/Tests**:
> - Update LavaMoat policies for new package paths and provider engine.
> - E2E metrics/state snapshots and helpers updated to handle
`networksMetadata` shape and ordering.
>   - CODEOWNERS updated for TS middleware path.
> - **Dependencies**:
> - Bump `@metamask/network-controller` to `^27.0.0`,
`@metamask/eth-json-rpc-middleware` to `^22`,
`@metamask/eth-json-rpc-provider` to `^6`, `@metamask/json-rpc-engine`
to `^10.2.0`, and `@metamask/controller-utils` to `^11.16.0`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
6e56977. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Erik Marks <[email protected]>
Co-authored-by: MetaMask Bot <[email protected]>
Co-authored-by: Salah-Eddine Saakoun <[email protected]>

Author: 4 people

.github/CODEOWNERS

@@ -185,7 +185,7 @@ test/e2e/playwright/benchmark                                         @MetaMask/
 test/e2e/flask/multichain-api                                         @MetaMask/wallet-integrations
 # TODO CONSOLIDATE THE MIDDLEWARE BELOW INTO THE RPC-METHOD-MIDDLEWARE FOLDER
 app/scripts/lib/createRPCMethodTrackingMiddleware.js                  @MetaMask/wallet-integrations
-app/scripts/lib/createMetamaskMiddleware.js                           @MetaMask/wallet-integrations
+app/scripts/lib/createMetamaskMiddleware.ts                           @MetaMask/wallet-integrations
 app/scripts/lib/createOnboardingMiddleware.js                         @MetaMask/wallet-integrations
 app/scripts/lib/createMetaRPCHandler.js                               @MetaMask/wallet-integrations
 app/scripts/lib/createEvmMethodsToNonEvmAccountReqFilterMiddleware.ts @MetaMask/wallet-integrations

app/scripts/controller-init/account-tracker-controller-init.ts

@@ -19,7 +19,6 @@ export const AccountTrackerControllerInit: ControllerInitFunction<
   // TODO: Fix AccountTrackerControllerMessenger type - add AccountTrackerControllerActions & AccountTrackerControllerEvents
   // TODO: Bump @metamask/network-controller, @metamask/accounts-controller to match assets-controllers
   const controller = new AccountTrackerController({
-    // @ts-expect-error - Messenger type mismatch due to missing controller actions/events and dependency version mismatch
     messenger: controllerMessenger,
     getStakedBalanceForChain: (
       addresses: string[],

app/scripts/controller-init/assets/assets-contract-controller-init.ts

@@ -22,7 +22,6 @@ export const AssetsContractControllerInit: ControllerInitFunction<
   // TODO: Fix AssetsContractControllerMessenger type - add AssetsContractControllerActions
   // TODO: Bump @metamask/network-controller to match assets-controllers
   const controller = new AssetsContractController({
-    // @ts-expect-error - Messenger type mismatch due to missing controller actions and dependency version mismatch
     messenger: controllerMessenger,
     chainId: getGlobalChainId(initMessenger),
   });

app/scripts/controller-init/bridge-controller-init.ts

@@ -41,7 +41,6 @@ export const BridgeControllerInit: ControllerInitFunction<
   }
 
   const controller = new BridgeController({
-    // @ts-expect-error - Messenger type mismatch due to missing controller actions and dependency version mismatch
     messenger: controllerMessenger,
     clientId: BridgeClientId.EXTENSION,
     clientVersion: process.env.METAMASK_VERSION,

app/scripts/controller-init/bridge-status-controller-init.ts

@@ -21,7 +21,6 @@ export const BridgeStatusControllerInit: ControllerInitFunction<
   const transactionController = getController('TransactionController');
 
   const controller = new BridgeStatusController({
-    // @ts-expect-error - Messenger type mismatch due to missing controller actions and dependency version mismatch
     messenger: controllerMessenger,
     state: persistedState.BridgeStatusController,
     fetchFn: async (url, requestOptions) => {

app/scripts/controller-init/confirmations/transaction-controller-init.ts

@@ -81,7 +81,6 @@ export const TransactionControllerInit: ControllerInitFunction<
     getGasFeeEstimates: (...args) =>
       gasFeeController().fetchGasFeeEstimates(...args),
     getNetworkClientRegistry: (...args) =>
-      // @ts-expect-error - NetworkController registry type mismatch between peer dependencies
       networkController().getNetworkClientRegistry(...args),
     getNetworkState: () => networkController().state,
     // @ts-expect-error Controller type does not support undefined return value

app/scripts/controller-init/currency-rate-controller-init.ts

@@ -27,7 +27,6 @@ export const CurrencyRateControllerInit: ControllerInitFunction<
   const controller = new CurrencyRateController({
     // @ts-expect-error - CurrencyRateController is persisted as 'CurrencyController' but init pattern expects 'CurrencyRateController'
     state: persistedState.CurrencyController,
-    // @ts-expect-error - Messenger type mismatch due to missing controller actions/events and dependency version mismatch
     messenger: controllerMessenger,
     includeUsdRate: true,
     useExternalServices: () =>

app/scripts/controller-init/token-list-controller-init.ts

@@ -35,7 +35,6 @@ export const TokenListControllerInit: ControllerInitFunction<
   // TODO: Fix TokenListControllerMessenger type - add TokenListControllerActions & TokenListControllerEvents
   // TODO: Bump @metamask/network-controller to match assets-controllers
   const controller = new TokenListController({
-    // @ts-expect-error - Messenger type mismatch due to missing controller actions/events and dependency version mismatch
     messenger: controllerMessenger,
     state: persistedState.TokenListController,
     preventPollingOnNetworkRestart: !isTokenListPollingRequired(

app/scripts/controller-init/tokens-controller-init.ts

@@ -19,10 +19,8 @@ export const TokensControllerInit: ControllerInitFunction<
   // TODO: Fix TokensControllerMessenger type - add TokensControllerActions & TokensControllerEvents
   // TODO: Bump @metamask/network-controller, @metamask/accounts-controller, @metamask/keyring-controller to match assets-controllers
   const controller = new TokensController({
-    // @ts-expect-error - Messenger type mismatch due to missing controller actions/events and dependency version mismatch
     messenger: controllerMessenger,
     state: persistedState.TokensController,
-    // @ts-expect-error - Provider type mismatch between SwappableProxy and InternalProvider due to network-controller version mismatch
     provider,
     chainId: getGlobalChainId(initMessenger),
   });

app/scripts/controllers/swaps/swaps.test.ts

@@ -5,7 +5,7 @@ import BigNumberjs from 'bignumber.js';
 import { mapValues } from 'lodash';
 import * as ethersProviders from '@ethersproject/providers';
 import { Hex } from '@metamask/utils';
-import { SafeEventEmitterProvider } from '@metamask/eth-json-rpc-provider';
+import { InternalProvider } from '@metamask/eth-json-rpc-provider';
 import { NetworkClientId } from '@metamask/network-controller';
 import { GasEstimateTypes } from '../../../../shared/constants/gas';
 import { CHAIN_IDS } from '../../../../shared/constants/network';
@@ -169,7 +169,7 @@ function mockNetworkControllerGetNetworkClientById(
   networkClientsById: Record<
     NetworkClientId,
     {
-      provider: SafeEventEmitterProvider;
+      provider: InternalProvider;
       configuration: {
         chainId: Hex;
       };