refactor: use @metamask/eth-qr-keyring (#33893)

<!--
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.
-->
dependent on:
  - ~~MetaMask/accounts#60
  - ~~MetaMask/core#6031

## **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 uses the `@metamask/eth-qr-keyring` package to handle QR code
keyring functionality, replacing the previous implementation from
`@keystonehq/metamask-airgapped-keyring`.

The change should be transparent to users, as the package is a drop-in
replacement. Though, under the hood, it allows to greatly simplify code
related to QRKeyring-related scanning and signing, and should improve
the overall ergonomics of interactions with QRKeyring.

Moreover, this PR adds the first e2e tests for QR code hardware wallets,
covering:
  - Pairing a QR code hardware wallet
  - Adding multiple accounts from the QR code hardware wallet

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

## **Related issues**

Fixes:

## **Manual testing steps**

### **Does it work with new HW devices?**
1. Checkout to this branch, and run `yarn && yarn webpack` or `yarn &&
yarn start` to build the extension.
2. Install the extension in your browser, and pair a QR-based hardware
wallet (e.g. a Keystone device, or install AirGap Vault or imToken on an
iOS/Android device).
3. Add some (3) accounts to the QRKeyring, and ensure that you can see
them in the extension.
4. Go to `https://metamask.github.io/test-dapp/`, connect to the
extension.
5. Ensure that you can:
  - Sign transactions
  - Sign typed data
  - Sign personal messages
6. Remove one QR account
7. Forget the QR device

### **Does it work with HW devices already paired?**
1. Checkout to main, and run `yarn && yarn webpack` or `yarn && yarn
start` to build the extension.
2. Install the extension in your browser, and pair a QR-based hardware
wallet (e.g. a Keystone device, or install AirGap Vault on an
iOS/Android device).
3. Add some (3) accounts to the QRKeyring, and ensure that you can see
them in the extension.
4. Checkout to this branch, and run `yarn && yarn webpack` or `yarn &&
yarn start` to build the extension.
5. Go to `chrome://extensions/`, and reload the extension.
6. Login to the extension, and ensure that you can see the same accounts
as before.

## **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.

---------

Co-authored-by: MetaMask Bot <metamaskbot@users.noreply.github.com>

Author: mikesposito

.storybook/main.js

@@ -49,10 +49,6 @@ module.exports = {
     config.resolve.alias['../../../store/actions'] = require.resolve(
       '../ui/__mocks__/actions.js',
     );
-    // Import within controller-utils crashes storybook.
-    config.resolve.alias['@ethereumjs/util'] = require.resolve(
-      '../ui/__mocks__/ethereumjs-util.js',
-    );
     config.resolve.alias['./useNftCollectionsMetadata'] = require.resolve(
       '../ui/__mocks__/useNftCollectionsMetadata.js',
     );

.yarn/patches/@keystonehq-metamask-airgapped-keyring-npm-0.15.2-94dd4b40d7.patch

@@ -634,6 +634,9 @@ async function initialize(backup) {
           // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires, node/global-require
           ledgerBridge: require('../../test/stub/keyring-bridge')
             .FakeLedgerBridge,
+          // Use `require` to make it easier to exclude this test code from the Browserify build.
+          // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires, node/global-require
+          qrBridge: require('../../test/stub/keyring-bridge').FakeQrBridge,
         },
       }
     : {};

app/scripts/background.js

@@ -72,7 +72,7 @@ export const SENTRY_BACKGROUND_STATE = {
     notificationGasPollTokens: true,
     outdatedBrowserWarningLastShown: true,
     popupGasPollTokens: true,
-    qrHardware: true,
+    activeQrCodeScanRequest: true,
     recoveryPhraseReminderHasBeenShown: true,
     recoveryPhraseReminderLastShown: true,
     showBetaHeader: true,

app/scripts/constants/sentry-state.ts

@@ -3,7 +3,6 @@ import type {
   AcceptRequest,
   AddApprovalRequest,
 } from '@metamask/approval-controller';
-import { KeyringControllerQRKeyringStateChangeEvent } from '@metamask/keyring-controller';
 import { Browser } from 'webextension-polyfill';
 import {
   ENVIRONMENT_TYPE_POPUP,
@@ -696,9 +695,7 @@ type WithControllerCallback<ReturnValue> = ({
     | AddApprovalRequest
     | AcceptRequest
     | PreferencesControllerGetStateAction,
-    | AppStateControllerEvents
-    | PreferencesControllerStateChangeEvent
-    | KeyringControllerQRKeyringStateChangeEvent
+    AppStateControllerEvents | PreferencesControllerStateChangeEvent
   >;
 }) => ReturnValue;
 
@@ -717,9 +714,7 @@ async function withController<ReturnValue>(
     | AddApprovalRequest
     | AcceptRequest
     | PreferencesControllerGetStateAction,
-    | AppStateControllerEvents
-    | PreferencesControllerStateChangeEvent
-    | KeyringControllerQRKeyringStateChangeEvent
+    AppStateControllerEvents | PreferencesControllerStateChangeEvent
   >();
   const appStateMessenger = controllerMessenger.getRestricted({
     name: 'AppStateController',
@@ -728,10 +723,7 @@ async function withController<ReturnValue>(
       `ApprovalController:acceptRequest`,
       `PreferencesController:getState`,
     ],
-    allowedEvents: [
-      `PreferencesController:stateChange`,
-      `KeyringController:qrKeyringStateChange`,
-    ],
+    allowedEvents: [`PreferencesController:stateChange`],
   });
   controllerMessenger.registerActionHandler(
     'PreferencesController:getState',