From f90eed6338ff979a49ad5bd411a6c049c0bcb8a0 Mon Sep 17 00:00:00 2001
From: Xiaoming Wang <dawnseeker8@gmail.com>
Date: Mon, 24 Jun 2024 21:35:14 +0100
Subject: [PATCH] fix: 25457 firefox extension not work for trezor connect
 (#25487)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#25457 Because firefox doesn't support usb api, which cause the
`window.navigator.usb` is undefined in firefox, which break the trezor
connection.

This PR will check whether window.navigator.usb is undefined or not. if
yes, then select-hardware will fall back to use trezor bridge to
connect.

## **Description**

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

## **Related issues**

Fixes: #25457

## **Manual testing steps**

1. Open `metamask` in firefox
2. select `account drop down` in home page and then select `Add Account
and hardware wallet`
3. select `trezor` in hardware select screen.
4. approve at trezor screen
5. you should be able to select `accounts` from trezor.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

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

### **After**



https://github.com/MetaMask/metamask-extension/assets/7315988/980c6c78-2765-4f97-8781-8250eeec1f9b


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

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.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-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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: Dan J Miller <danjm.com@gmail.com>
---
 .../connect-hardware/select-hardware.js               | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui/pages/create-account/connect-hardware/select-hardware.js b/ui/pages/create-account/connect-hardware/select-hardware.js
index 24ea2bcbebdb..8f2e3b8569e3 100644
--- a/ui/pages/create-account/connect-hardware/select-hardware.js
+++ b/ui/pages/create-account/connect-hardware/select-hardware.js
@@ -56,7 +56,16 @@ export default class SelectHardware extends Component {
 
   connect = async () => {
     if (this.state.selectedDevice) {
-      if (this.state.selectedDevice === 'trezor') {
+      // 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 {
           await window.navigator.usb.requestDevice({