refactor: listen to qr update on hardware connect

MetaMask · Sep 7, 2023 · 0071617 · 0071617
1 parent 65ec342
commit 0071617
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 9 deletions.
diff --git a/app/scripts/controllers/app-state.js b/app/scripts/controllers/app-state.js
@@ -53,7 +53,7 @@ export default class AppStateController extends EventEmitter {
       // multiple networks.
       hadAdvancedGasFeesSetPriorToMigration92_3: false,
       ...initState,
-      qrHardware: {},
+      qrHardwarePopoverState: {},
       nftsDropdownState: {},
       usedNetworks: {
         '0x1': true,
@@ -374,6 +374,18 @@ export default class AppStateController extends EventEmitter {
     });
   }
 
+  /**
+   * Update the state of the QR hardware popover
+   *
+   * @param qrHardwarePopoverState
+   * @returns {void}
+   */
+  updateQRHardwarePopoverState(qrHardwarePopoverState) {
+    this.store.updateState({
+      qrHardwarePopoverState,
+    });
+  }
+
   /**
    * Updates the array of the first time used networks
    *

diff --git a/app/scripts/lib/setupSentry.js b/app/scripts/lib/setupSentry.js
@@ -66,7 +66,7 @@ export const SENTRY_BACKGROUND_STATE = {
     notificationGasPollTokens: true,
     outdatedBrowserWarningLastShown: true,
     popupGasPollTokens: true,
-    qrHardware: true,
+    qrHardwarePopoverState: true,
     recoveryPhraseReminderHasBeenShown: true,
     recoveryPhraseReminderLastShown: true,
     serviceWorkerLastActiveTime: true,

diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
@@ -3279,7 +3279,7 @@ export default class MetamaskController extends EventEmitter {
   }
 
   /**
-   * Fetch account list from a trezor device.
+   * Fetch account list from an hardware device.
    *
    * @param deviceName
    * @param page
@@ -3288,6 +3288,17 @@ export default class MetamaskController extends EventEmitter {
    */
   async connectHardware(deviceName, page, hdPath) {
     const keyring = await this.getKeyringForDevice(deviceName, hdPath);
+
+    if (deviceName === HardwareDeviceNames.qr) {
+      keyring
+        .getMemStore()
+        .subscribe(
+          this.appStateController.updateQRHardwarePopoverState.bind(
+            this.appStateController,
+          ),
+        );
+    }
+
     let accounts = [];
     switch (page) {
       case -1:

diff --git a/test/e2e/fixture-builder.js b/test/e2e/fixture-builder.js
@@ -166,6 +166,7 @@ function defaultFixture() {
         fullScreenGasPollTokens: [],
         notificationGasPollTokens: [],
         popupGasPollTokens: [],
+        qrHardwarePopoverState: {},
         recoveryPhraseReminderHasBeenShown: true,
         recoveryPhraseReminderLastShown:
           '__FIXTURE_SUBSTITUTION__currentDateInMilliseconds',
@@ -331,6 +332,7 @@ function onboardingFixture() {
         fullScreenGasPollTokens: [],
         notificationGasPollTokens: [],
         popupGasPollTokens: [],
+        qrHardwarePopoverState: {},
         recoveryPhraseReminderHasBeenShown: false,
         recoveryPhraseReminderLastShown:
           '__FIXTURE_SUBSTITUTION__currentDateInMilliseconds',

diff --git a/test/e2e/tests/state-snapshots/errors-after-init-opt-in-background-state.json b/test/e2e/tests/state-snapshots/errors-after-init-opt-in-background-state.json
@@ -30,6 +30,7 @@
     "trezorModel": null,
     "nftsDropdownState": {},
     "termsOfUseLastAgreed": "number",
+    "qrHardwarePopoverState": {},
     "usedNetworks": { "0x1": true, "0x5": true, "0x539": true },
     "snapsInstallPrivacyWarningShown": true,
     "hadAdvancedGasFeesSetPriorToMigration92_3": false,

diff --git a/test/e2e/tests/state-snapshots/errors-after-init-opt-in-ui-state.json b/test/e2e/tests/state-snapshots/errors-after-init-opt-in-ui-state.json
@@ -52,6 +52,7 @@
     "trezorModel": null,
     "nftsDropdownState": {},
     "termsOfUseLastAgreed": "number",
+    "qrHardwarePopoverState": {},
     "usedNetworks": { "0x1": true, "0x5": true, "0x539": true },
     "snapsInstallPrivacyWarningShown": true,
     "hadAdvancedGasFeesSetPriorToMigration92_3": false,

diff --git a/test/e2e/tests/state-snapshots/errors-before-init-opt-in-background-state.json b/test/e2e/tests/state-snapshots/errors-before-init-opt-in-background-state.json
@@ -15,6 +15,7 @@
       "fullScreenGasPollTokens": [],
       "notificationGasPollTokens": [],
       "popupGasPollTokens": [],
+      "qrHardwarePopoverState": {},
       "recoveryPhraseReminderHasBeenShown": true,
       "recoveryPhraseReminderLastShown": "number",
       "showTestnetMessageInDropdown": true,

diff --git a/test/e2e/tests/state-snapshots/errors-before-init-opt-in-ui-state.json b/test/e2e/tests/state-snapshots/errors-before-init-opt-in-ui-state.json
@@ -15,6 +15,7 @@
       "fullScreenGasPollTokens": [],
       "notificationGasPollTokens": [],
       "popupGasPollTokens": [],
+      "qrHardwarePopoverState": {},
       "recoveryPhraseReminderHasBeenShown": true,
       "recoveryPhraseReminderLastShown": "number",
       "showTestnetMessageInDropdown": true,

diff --git a/ui/components/app/qr-hardware-popover/qr-hardware-popover.js b/ui/components/app/qr-hardware-popover/qr-hardware-popover.js
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { ethErrors, serializeError } from 'eth-rpc-errors';
-import { getCurrentQRHardwareState } from '../../../selectors';
+import { getCurrentQRHardwarePopoverState } from '../../../selectors';
 import Popover from '../../ui/popover';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
@@ -16,8 +16,7 @@ import QRHardwareSignRequest from './qr-hardware-sign-request';
 const QRHardwarePopover = () => {
   const t = useI18nContext();
 
-  const qrHardware = useSelector(getCurrentQRHardwareState);
-  const { sync, sign } = qrHardware;
+  const { sync, sign } = useSelector(getCurrentQRHardwarePopoverState);
   const showWalletImporter = sync?.reading;
   const showSignRequest = sign?.request;
   const showPopover = showWalletImporter || showSignRequest;

diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
@@ -146,9 +146,9 @@ export function isCurrentProviderCustom(state) {
   );
 }
 
-export function getCurrentQRHardwareState(state) {
-  const { qrHardware } = state.metamask;
-  return qrHardware || {};
+export function getCurrentQRHardwarePopoverState(state) {
+  const { qrHardwarePopoverState } = state.metamask;
+  return qrHardwarePopoverState || {};
 }
 
 export function hasUnsignedQRHardwareTransaction(state) {