fix: replace legacy eth-json-rpc deps (#11952)

## **Description**

- This PR is a rebase of #10098, including:
    * #9925
    * #9930
- Bump `@metamask/eth-json-rpc-filters` to `^7.0.0`
- Bump `@metamask/json-rpc-engine` to `^10.0.0`
- Bump `@metamask/eth-json-rpc-middleware` to `^15.0.0`
- Migrate from `json-rpc-middleware-stream` to
`@metamask/json-rpc-middleware-stream`
- Upgrade `@metamask/providers` from v13 to v16
  - Also broken out separately as #12085 
- Revert `Internal JSON-RPC error` message change to accomodate for
`@metamask/rpc-errors` v7


## **Related issues**

Expected to fix the following issues:

- [x] #11163
- [x] #11129
- [ ] #11105
- [ ] #9715
- [ ] #8308
- [x] #7926
- [x] #4621
- [x] #4646
- [ ] #12634

#### Blocked by
- [x] #12085
- [x] #12047
  - [x] #12024
    - [x] #11980 
- [x] #12008
- [x] #11978 

## **Manual testing steps**

1. Go to in-app browser
2. Test connect with multiple dapps
3. Perform transaciton on test dapp
1. Go to this page...

## **Screenshots/Recordings**


https://github.com/MetaMask/metamask-mobile/assets/46944231/c608d957-6684-40e2-8963-67a11dc610df

### **Before**

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

### **After**

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

## **Pre-merge author checklist**

- [x] 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).
- [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-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.

---------

Co-authored-by: Aslau Mario-Daniel <marioaslau@gmail.com>
Co-authored-by: tommasini <tommasini15@gmail.com>
Co-authored-by: kylanhurt <kylan.hurt@gmail.com>
Co-authored-by: sethkfman <Seth.Kaufman@consensys.net>
Co-authored-by: Nicolas MASSART <nicolas.massart@consensys.net>
Co-authored-by: Nico MASSART <NicolasMassart@users.noreply.github.com>

Author: 6 people

app/core/BackgroundBridge/BackgroundBridge.js

@@ -1,11 +1,11 @@
 /* eslint-disable import/no-commonjs */
 import URL from 'url-parse';
-import { JsonRpcEngine } from 'json-rpc-engine';
 import {
   createSelectedNetworkMiddleware,
   METAMASK_DOMAIN,
 } from '@metamask/selected-network-controller';
 import EthQuery from '@metamask/eth-query';
+import { JsonRpcEngine } from '@metamask/json-rpc-engine';
 import MobilePortStream from '../MobilePortStream';
 import { setupMultiplex } from '../../util/streams';
 import {
@@ -25,10 +25,10 @@ import snapMethodMiddlewareBuilder from '../Snaps/SnapsMethodMiddleware';
 import { SubjectType } from '@metamask/permission-controller';
 ///: END:ONLY_INCLUDE_IF
 
+import { createEngineStream } from '@metamask/json-rpc-middleware-stream';
 const createFilterMiddleware = require('@metamask/eth-json-rpc-filters');
 const createSubscriptionManager = require('@metamask/eth-json-rpc-filters/subscriptionManager');
-const { providerAsMiddleware } = require('@metamask/eth-json-rpc-middleware');
-import { createEngineStream } from '@metamask/json-rpc-middleware-stream';
+import { providerAsMiddleware } from '@metamask/eth-json-rpc-middleware';
 const pump = require('pump');
 // eslint-disable-next-line import/no-nodejs-modules
 const EventEmitter = require('events').EventEmitter;
@@ -388,11 +388,7 @@ export class BackgroundBridge extends EventEmitter {
 
     pump(outStream, providerStream, outStream, (err) => {
       // handle any middleware cleanup
-      this.engine._middleware.forEach((mid) => {
-        if (mid.destroy && typeof mid.destroy === 'function') {
-          mid.destroy();
-        }
-      });
+      this.engine.destroy();
       if (err) Logger.log('Error with provider stream conn', err);
     });
   }

app/core/Encryptor/pbkdf2.test.ts

@@ -9,7 +9,7 @@ describe('pbkdf2', () => {
   afterEach(() => {
     jest.restoreAllMocks();
   });
-  
+
   it('uses the native implementation of pbkdf2 with main aes', async () => {
     NativeModules.Aes.pbkdf2 = jest
       .fn()

app/core/Engine/controllers/RemoteFeatureFlagController/index.ts

@@ -1,2 +1 @@
 export { createRemoteFeatureFlagController } from './utils';
-

app/core/Engine/controllers/RemoteFeatureFlagController/types.ts

@@ -2,7 +2,6 @@ import { RemoteFeatureFlagControllerMessenger, RemoteFeatureFlagControllerState
 
 export interface RemoteFeatureFlagInitParamTypes {
   state?: RemoteFeatureFlagControllerState;
-  messenger: RemoteFeatureFlagControllerMessenger,
-  disabled: boolean
+  messenger: RemoteFeatureFlagControllerMessenger;
+  disabled: boolean;
 }
-

app/core/Engine/controllers/RemoteFeatureFlagController/utils.test.ts

@@ -16,7 +16,6 @@ describe('RemoteFeatureFlagController utils', () => {
 
   describe('createRemoteFeatureFlagController', () => {
     it('creates controller with initial undefined state', () => {
-
       const controller = createRemoteFeatureFlagController({
         state: undefined,
         messenger,

app/core/Engine/controllers/RemoteFeatureFlagController/utils.ts

@@ -34,7 +34,6 @@ export const createRemoteFeatureFlagController = ({
   messenger,
   disabled,
 }: RemoteFeatureFlagInitParamTypes) => {
-
   const remoteFeatureFlagController = new RemoteFeatureFlagController({
     messenger,
     state,
@@ -58,4 +57,3 @@ export const createRemoteFeatureFlagController = ({
   }
   return remoteFeatureFlagController;
 };
-

app/core/Ledger/Ledger.ts

@@ -251,4 +251,3 @@ export const unlockLedgerWalletAccount = async (index: number) => {
   }
 };
 
-

app/core/RPCMethods/RPCMethodMiddleware.test.ts

@@ -1,13 +1,14 @@
-import {
-  JsonRpcEngine,
+import { JsonRpcEngine, JsonRpcMiddleware } from '@metamask/json-rpc-engine';
+import type {
+  Json,
   JsonRpcFailure,
-  JsonRpcMiddleware,
+  JsonRpcParams,
   JsonRpcRequest,
   JsonRpcResponse,
   JsonRpcSuccess,
-} from 'json-rpc-engine';
+} from '@metamask/utils';
+import { type JsonRpcError, providerErrors, rpcErrors } from '@metamask/rpc-errors';
 import type { TransactionParams } from '@metamask/transaction-controller';
-import { providerErrors, rpcErrors } from '@metamask/rpc-errors';
 import Engine from '../Engine';
 import { store } from '../../store';
 import { getPermittedAccounts } from '../Permissions';
@@ -106,8 +107,8 @@ const jsonrpc = '2.0' as const;
  * @throws If the given value is not a valid {@link JsonRpcSuccess} object.
  */
 function assertIsJsonRpcSuccess(
-  response: JsonRpcResponse<unknown>,
-): asserts response is JsonRpcSuccess<unknown> {
+  response: JsonRpcResponse<Json>,
+): asserts response is JsonRpcSuccess<Json> {
   if ('error' in response) {
     throw new Error(`Response failed with error '${JSON.stringify('error')}'`);
   } else if (!('result' in response)) {
@@ -208,8 +209,8 @@ async function callMiddleware({
   middleware,
   request,
 }: {
-  middleware: JsonRpcMiddleware<unknown, unknown>;
-  request: JsonRpcRequest<unknown>;
+  middleware: JsonRpcMiddleware<JsonRpcParams, Json>;
+  request: JsonRpcRequest<JsonRpcParams>;
 }) {
   const engine = new JsonRpcEngine();
   engine.push(middleware);
@@ -415,7 +416,6 @@ describe('getRpcMethodMiddleware', () => {
       permissionController.createPermissionMiddleware({
         origin: hostMock,
       });
-    // @ts-expect-error JsonRpcId (number | string | void) doesn't match PS middleware's id, which is (string | number | null)
     engine.push(permissionMiddleware);
     const middleware = getRpcMethodMiddleware(getMinimalOptions());
     engine.push(middleware);
@@ -1096,7 +1096,8 @@ describe('getRpcMethodMiddleware', () => {
     it('returns a JSON-RPC error if an error is thrown when adding this transaction', async () => {
       // Omit `from` and `chainId` here to skip validation for simplicity
       // Downcast needed here because `from` is required by this type
-      const mockTransactionParameters = {} as TransactionParams;
+      const mockTransactionParameters = {} as (TransactionParams &
+        JsonRpcParams)[];
       // Transaction fails before returning a result
       mockAddTransaction.mockImplementation(async () => {
         throw new Error('Failed to add transaction');
@@ -1119,12 +1120,17 @@ describe('getRpcMethodMiddleware', () => {
       expect((response as JsonRpcFailure).error.message).toBe(
         expectedError.message,
       );
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect(((response as JsonRpcFailure).error as JsonRpcError<any>).data.cause.message).toBe(
+        expectedError.message,
+      );
     });
 
     it('returns a JSON-RPC error if an error is thrown after approval', async () => {
       // Omit `from` and `chainId` here to skip validation for simplicity
       // Downcast needed here because `from` is required by this type
-      const mockTransactionParameters = {} as TransactionParams;
+      const mockTransactionParameters = {} as (TransactionParams &
+        JsonRpcParams)[];
       setupGlobalState({
         addTransactionResult: Promise.reject(
           new Error('Failed to process transaction'),
@@ -1233,7 +1239,7 @@ describe('getRpcMethodMiddleware', () => {
         jsonrpc,
         id: 1,
         method: 'personal_ecRecover',
-        params: [undefined, helloWorldSignature],
+        params: [undefined, helloWorldSignature] as JsonRpcParams,
       };
       const expectedError = rpcErrors.internal('Missing data parameter');
 

app/core/RPCMethods/RPCMethodMiddleware.ts

@@ -1,6 +1,6 @@
 import { Alert } from 'react-native';
 import { getVersion } from 'react-native-device-info';
-import { createAsyncMiddleware } from 'json-rpc-engine';
+import { createAsyncMiddleware } from '@metamask/json-rpc-engine';
 import { providerErrors, rpcErrors } from '@metamask/rpc-errors';
 import {
   EndFlowOptions,

app/core/RPCMethods/createLegacyMethodMiddleware/index.test.ts

@@ -2,7 +2,7 @@ import {
   JsonRpcEngine,
   JsonRpcEngineEndCallback,
   JsonRpcEngineNextCallback,
-} from 'json-rpc-engine';
+} from '@metamask/json-rpc-engine';
 import {
   Json,
   JsonRpcParams,
@@ -150,6 +150,10 @@ describe('createLegacyMethodMiddleware', () => {
     });
     assertIsJsonRpcFailure(response);
 
+    // Type assertion for the error not having cause object
+    const errorData = response.error.data as { cause?: Error };
+
+    expect(errorData.cause?.message).toBe('test error');
     expect(response.error.message).toBe('test error');
   });
 
@@ -166,6 +170,10 @@ describe('createLegacyMethodMiddleware', () => {
     });
     assertIsJsonRpcFailure(response);
 
+    // Type assertion for the error not having cause object
+    const errorData = response.error.data as { cause?: Error };
+
+    expect(errorData.cause?.message).toBe('test error');
     expect(response.error.message).toBe('test error');
   });