diff --git a/app/scripts/controllers/app-state.js b/app/scripts/controllers/app-state.js index 4ad2520484b7..441d9b1dd074 100644 --- 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 index edc7925e2220..13eaac1daae4 100644 --- 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 index 68cddf9dbd4b..085652c75d6a 100644 --- 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 index dc80b31fb5ec..c6badb4cef49 100644 --- 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 index c4f7b4596b53..27e4436a6013 100644 --- 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 index 184150c5e643..c4242358b452 100644 --- 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 index 6444c96e15f0..3537e81fea14 100644 --- 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 index 85dbe85fe3ca..de73b09165e6 100644 --- 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 index 40d577380f49..c610b9c4de01 100644 --- 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 index 4d77bcec8858..978ce8f854ae 100644 --- 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) {