Fix network nicknames (#2000)

## Explanation

<!--
Thanks for your contribution! Take a moment to answer these questions so
that reviewers have the information they need to properly understand
your changes:

* What is the current state of things and why does it need to change?
* What is the solution your changes offer and how does it work?
* Are there any changes whose purpose might not obvious to those
unfamiliar with the domain?
* If your primary goal was to update one package but you found you had
to update another one along the way, why did you do so?
* If you had to upgrade a dependency, why did you do so?
-->

NetworkClientConfiguration does not have the required information to
make switch ethereum chaini word properly. The details required are
actually inside of NetworkConfigurations, or if the network is an infura
one, we fall back to using the networkClientConfiguration.

## References

<!--
Are there any issues that this pull request is tied to? Are there other
links that reviewers should consult to understand these changes better?

For example:

* Fixes #12345
* Related to #67890
-->
Branch of extension using this preview:
https://github.com/MetaMask/metamask-extension/tree/queue-nickanme-fix-preview

## Changelog

<!--
If you're making any consumer-facing changes, list those changes here as
if you were updating a changelog, using the template below as a guide.

(CATEGORY is one of BREAKING, ADDED, CHANGED, DEPRECATED, REMOVED, or
FIXED. For security-related issues, follow the Security Advisory
process.)

Please take care to name the exact pieces of the API you've added or
changed (e.g. types, interfaces, functions, or methods).

If there are any breaking changes, make sure to offer a solution for
consumers to follow once they upgrade to the changes.

Finally, if you're only making changes to development scripts or tests,
you may replace the template below with "None".
-->

### `@metamask/queued-request-controller`

- **FIXED**: NetworkConfigurations wiill be used in place of
NetworkClientConfgurations when possible.


## Checklist

- [x] I've updated the test suite for new or updated code as appropriate
- [x] I've updated documentation (JSDoc, Markdown, etc.) for new or
updated code as appropriate
- [x] I've highlighted breaking changes using the "BREAKING" category
above as appropriate

packages/queued-request-controller/src/QueuedRequestMiddleware.test.ts

@@ -3,6 +3,7 @@ import type {
   ApprovalController,
 } from '@metamask/approval-controller';
 import { ControllerMessenger } from '@metamask/base-controller';
+import { NetworkType } from '@metamask/controller-utils';
 import { JsonRpcEngine } from '@metamask/json-rpc-engine';
 import type {
   NetworkClientId,
@@ -11,7 +12,9 @@ import type {
   NetworkControllerGetStateAction,
   NetworkControllerSetActiveNetworkAction,
   NetworkControllerSetProviderTypeAction,
+  ProviderConfig,
 } from '@metamask/network-controller';
+import { defaultState as networkControllerDefaultState } from '@metamask/network-controller';
 import { serializeError } from '@metamask/rpc-errors';
 import type { SelectedNetworkControllerSetNetworkClientIdForDomainAction } from '@metamask/selected-network-controller';
 import { SelectedNetworkControllerActionTypes } from '@metamask/selected-network-controller';
@@ -37,8 +40,12 @@ const buildMocks = (
   messenger: ReturnType<typeof buildMessenger>,
   mocks: {
     getNetworkClientById?: NetworkController['getNetworkClientById'];
-    getProviderConfig?: NetworkControllerGetStateAction['handler'];
+    getProviderConfig?: () => ProviderConfig;
     addRequest?: ApprovalController['add'];
+    // since NetworkConfigurations is not exported, we get it this way. Todo: export the type or expose a getter on NetworkController
+    getNetworkConfigurations?: () => ReturnType<
+      NetworkControllerGetStateAction['handler']
+    >['networkConfigurations'];
   } = {},
 ) => {
   const mockGetNetworkClientById =
@@ -53,16 +60,24 @@ const buildMocks = (
     mockGetNetworkClientById,
   );
 
+  const mockGetNetworkConfigurations =
+    mocks.getNetworkConfigurations ?? jest.fn(() => ({}));
   const mockGetProviderConfig =
-    mocks.getProviderConfig ||
-    jest.fn().mockReturnValue({
-      providerConfig: {
-        chainId: '0x1',
-      },
-    });
+    mocks.getProviderConfig ??
+    jest.fn<ProviderConfig, any[]>(() => ({
+      chainId: '0x1',
+      type: NetworkType.mainnet,
+      ticker: 'ETH',
+    }));
+  const mockGetNetworkControllerState = jest.fn(() => ({
+    ...networkControllerDefaultState,
+    networkConfigurations: mockGetNetworkConfigurations(),
+    providerConfig: mockGetProviderConfig(),
+  }));
+
   messenger.registerActionHandler(
     'NetworkController:getState',
-    mockGetProviderConfig,
+    mockGetNetworkControllerState,
   );
 
   const mockEnqueueRequest = jest.fn().mockImplementation((cb) => cb());
@@ -97,6 +112,8 @@ const buildMocks = (
 
   return {
     getProviderConfig: mockGetProviderConfig,
+    getNetworkConfigurations: mockGetNetworkConfigurations,
+    getNetworkControllerState: mockGetNetworkControllerState,
     getNetworkClientById: mockGetNetworkClientById,
     enqueueRequest: mockEnqueueRequest,
     addRequest: mockAddRequest,
@@ -220,11 +237,21 @@ describe('createQueuedRequestMiddleware', () => {
         messenger,
         useRequestQueue: () => true,
       });
-      const mocks = buildMocks(messenger);
+      const networkClientId = '12309-12039-12309';
+      const mocks = buildMocks(messenger, {
+        getNetworkConfigurations: jest.fn(() => ({
+          [networkClientId]: {
+            id: networkClientId,
+            rpcUrl: 'foo.com',
+            ticker: 'foo',
+            chainId: '0x123',
+          },
+        })),
+      });
 
       const req = {
         ...requestDefaults,
-        networkClientId: 'custom-rpc.com',
+        networkClientId,
         method: 'eth_sendTransaction',
       };
 
@@ -234,7 +261,7 @@ describe('createQueuedRequestMiddleware', () => {
 
       expect(mocks.enqueueRequest).toHaveBeenCalled();
       // custom networks use getNetworkClientyId
-      expect(mocks.getNetworkClientById).toHaveBeenCalledWith('custom-rpc.com');
+      expect(mocks.getNetworkClientById).toHaveBeenCalledWith(networkClientId);
     });
 
     it('switchEthereumChain calls get queued but we dont check the current network', async () => {
@@ -267,9 +294,7 @@ describe('createQueuedRequestMiddleware', () => {
           useRequestQueue: () => true,
         });
         const mockGetProviderConfig = jest.fn().mockReturnValue({
-          providerConfig: {
-            chainId: '0x5',
-          },
+          chainId: '0x5',
         });
         const mocks = buildMocks(messenger, {
           getProviderConfig: mockGetProviderConfig,
@@ -298,9 +323,7 @@ describe('createQueuedRequestMiddleware', () => {
         const rejected = new Error('big bad rejected');
         const mockAddRequest = jest.fn().mockRejectedValue(rejected);
         const mockGetProviderConfig = jest.fn().mockReturnValue({
-          providerConfig: {
-            chainId: '0x5',
-          },
+          chainId: '0x5',
         });
         const mocks = buildMocks(messenger, {
           addRequest: mockAddRequest,
@@ -331,9 +354,7 @@ describe('createQueuedRequestMiddleware', () => {
         });
         const mocks = buildMocks(messenger, {
           getProviderConfig: jest.fn().mockReturnValue({
-            providerConfig: {
-              chainId: '0x5',
-            },
+            chainId: '0x5',
           }),
         });
 
@@ -356,15 +377,22 @@ describe('createQueuedRequestMiddleware', () => {
           messenger,
           useRequestQueue: () => true,
         });
+        const networkClientId = '123123-123123-123123';
         const mocks = buildMocks(messenger, {
-          getProviderConfig: jest.fn().mockReturnValue({
-            providerConfig: {
-              chainId: '0x1',
+          getNetworkConfigurations: jest.fn(() => ({
+            [networkClientId]: {
+              id: networkClientId,
+              rpcUrl: 'foo.com',
+              ticker: 'foo',
+              chainId: '0x123',
             },
+          })),
+          getProviderConfig: jest.fn().mockReturnValue({
+            chainId: '0x1',
           }),
           getNetworkClientById: jest.fn().mockReturnValue({
             configuration: {
-              chainId: '0x1234',
+              chainId: '0x123',
             },
           }),
         });
@@ -373,7 +401,7 @@ describe('createQueuedRequestMiddleware', () => {
           ...requestDefaults,
           origin: 'example.com',
           method: 'eth_sendTransaction',
-          networkClientId: 'https://some-rpc-url.com',
+          networkClientId,
         };
 
         await new Promise((resolve, reject) =>
@@ -400,9 +428,7 @@ describe('createQueuedRequestMiddleware', () => {
         .mockResolvedValueOnce(true);
 
       const mockGetProviderConfig = jest.fn().mockReturnValue({
-        providerConfig: {
-          chainId: '0x5',
-        },
+        chainId: '0x5',
       });
 
       const mocks = buildMocks(messenger, {

packages/queued-request-controller/src/QueuedRequestMiddleware.ts

@@ -92,20 +92,38 @@ export const createQueuedRequestMiddleware = ({
       await messenger.call(
         QueuedRequestControllerActionTypes.enqueueRequest,
         async () => {
-          if (req.method === 'wallet_switchEthereumChain') {
+          if (
+            req.method === 'wallet_switchEthereumChain' ||
+            req.method === 'wallet_addEthereumChain'
+          ) {
             return next();
           }
 
-          const isBuiltIn = isNetworkType(networkClientIdForRequest);
-          const networkConfigurationForRequest = messenger.call(
+          const networkClientConfigurationForRequest = messenger.call(
             'NetworkController:getNetworkClientById',
             networkClientIdForRequest,
           ).configuration;
 
-          const currentProviderConfig = messenger.call(
+          const networkControllerState = messenger.call(
             'NetworkController:getState',
-          ).providerConfig;
+          );
+
+          const isBuiltIn = isNetworkType(networkClientIdForRequest);
+          let networkConfigurationForRequest;
+          if (!isBuiltIn) {
+            networkConfigurationForRequest =
+              networkControllerState.networkConfigurations[
+                networkClientIdForRequest
+              ];
+          } else {
+            // if its a built in
+            // Ideally we should be using only networkConfigurations, and networkClientIds &
+            // networkConfiguration.id should be the same thing.
+            networkConfigurationForRequest =
+              networkClientConfigurationForRequest;
+          }
 
+          const currentProviderConfig = networkControllerState.providerConfig;
           const currentChainId = currentProviderConfig.chainId;
 
           // if the 'globally selected network' is already on the correct chain for the request currently being processed