From 167e5242ff6ca7c6fff1b73a274e500af321160b Mon Sep 17 00:00:00 2001 From: Xiaoming Wang Date: Mon, 24 Jun 2024 14:29:22 +0100 Subject: [PATCH 1/3] fix: Fix the issue of window.navigator.usb is undefined in firefox due to firefox not support USB api. if usb is undefined detected, system will fallback to use trezor bridge. --- .../connect-hardware/select-hardware.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/ui/pages/create-account/connect-hardware/select-hardware.js b/ui/pages/create-account/connect-hardware/select-hardware.js index 24ea2bcbebdb..855ecb2ee65f 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.js +++ b/ui/pages/create-account/connect-hardware/select-hardware.js @@ -2,14 +2,14 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { - Text, Box, - IconName, - ButtonIconSize, - ButtonIcon, Button, BUTTON_SIZES, BUTTON_VARIANT, + ButtonIcon, + ButtonIconSize, + IconName, + Text, } from '../../../components/component-library'; import LogoLedger from '../../../components/ui/logo/logo-ledger'; import LogoQRBased from '../../../components/ui/logo/logo-qr-based'; @@ -17,10 +17,10 @@ import LogoTrezor from '../../../components/ui/logo/logo-trezor'; import LogoLattice from '../../../components/ui/logo/logo-lattice'; import { - HardwareDeviceNames, - LedgerTransportTypes, HardwareAffiliateLinks, HardwareAffiliateTutorialLinks, + HardwareDeviceNames, + LedgerTransportTypes, } from '../../../../shared/constants/hardware-wallets'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics'; @@ -56,7 +56,7 @@ export default class SelectHardware extends Component { connect = async () => { if (this.state.selectedDevice) { - if (this.state.selectedDevice === 'trezor') { + if (this.state.selectedDevice === 'trezor' && window.navigator.usb) { this.setState({ trezorRequestDevicePending: true }); try { await window.navigator.usb.requestDevice({ From e0ee6aa4d18a270a6ac702f12dd22495043b1988 Mon Sep 17 00:00:00 2001 From: Xiaoming Wang Date: Mon, 24 Jun 2024 16:07:26 +0100 Subject: [PATCH 2/3] fix: revert the formatted file to match `develop` branch --- .../connect-hardware/select-hardware.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ui/pages/create-account/connect-hardware/select-hardware.js b/ui/pages/create-account/connect-hardware/select-hardware.js index 855ecb2ee65f..de0c67e50cb1 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.js +++ b/ui/pages/create-account/connect-hardware/select-hardware.js @@ -2,14 +2,14 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { + Text, Box, + IconName, + ButtonIconSize, + ButtonIcon, Button, BUTTON_SIZES, BUTTON_VARIANT, - ButtonIcon, - ButtonIconSize, - IconName, - Text, } from '../../../components/component-library'; import LogoLedger from '../../../components/ui/logo/logo-ledger'; import LogoQRBased from '../../../components/ui/logo/logo-qr-based'; @@ -17,10 +17,10 @@ import LogoTrezor from '../../../components/ui/logo/logo-trezor'; import LogoLattice from '../../../components/ui/logo/logo-lattice'; import { - HardwareAffiliateLinks, - HardwareAffiliateTutorialLinks, HardwareDeviceNames, LedgerTransportTypes, + HardwareAffiliateLinks, + HardwareAffiliateTutorialLinks, } from '../../../../shared/constants/hardware-wallets'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics'; From 93cfd69fdaaa58f2472ad701e5a16a174ee9da62 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 24 Jun 2024 16:23:39 -0230 Subject: [PATCH 3/3] Add comment explaining the window.navigator.usb in the connect method in select-hardware.js --- .../create-account/connect-hardware/select-hardware.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/ui/pages/create-account/connect-hardware/select-hardware.js b/ui/pages/create-account/connect-hardware/select-hardware.js index de0c67e50cb1..8f2e3b8569e3 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.js +++ b/ui/pages/create-account/connect-hardware/select-hardware.js @@ -56,6 +56,15 @@ export default class SelectHardware extends Component { connect = async () => { if (this.state.selectedDevice) { + // Not all browsers have usb support. In particular, Firefox does + // not support usb. More information on that can be found here: + // https://mozilla.github.io/standards-positions/#webusb + // + // The below `&& window.navigator.usb` condition ensures that we + // only attempt to connect Trezor via usb if we are in a browser + // that supports usb. If not, the connection of the hardware wallet + // to the browser will be handled by the Trezor connect screen. In + // the case of Firefox, this will depend on the Trezor bridge software if (this.state.selectedDevice === 'trezor' && window.navigator.usb) { this.setState({ trezorRequestDevicePending: true }); try {