feat: add warning message for Ledger connection issues on Firefox cp-12.23.0

test/e2e/page-objects/pages/hardware-wallet/connect-hardware-wallet-page.ts

@@ -46,9 +46,13 @@ class ConnectHardwareWalletPage {
     await this.driver.clickElement(this.continueButton);
   }
 
-  async openConnectLedgerPage(): Promise<void> {
-    console.log(`Open connect trezor page`);
+  async clickConnectLedgerButton(): Promise<void> {
+    console.log(`Click connect Ledger button`);
     await this.driver.clickElement(this.connectLedgerButton);
+  }
+
+  async clickContinueButton(): Promise<void> {
+    console.log(`Click continue button`);
     await this.driver.clickElement(this.continueButton);
   }
 
@@ -57,6 +61,23 @@ class ConnectHardwareWalletPage {
     await this.driver.clickElement(this.connectTrezorButton);
     await this.driver.clickElement(this.continueButton);
   }
+
+  async checkFirefoxNotSupportedIsDisplayed(): Promise<void> {
+    console.log('Check "Firefox Not Supported" message is displayed');
+    await this.driver.waitForSelector({
+      text: 'Firefox Not Supported',
+    });
+
+    // Continue button should be disabled
+    const continueButton = await this.driver.findElement({
+      text: 'Continue',
+      tag: 'button',
+    });
+    const isDisabled = (await continueButton.getAttribute('disabled')) !== null;
+    if (!isDisabled) {
+      throw new Error('Continue button should be disabled in Firefox');
+    }
+  }
 }
 
 export default ConnectHardwareWalletPage;

test/e2e/tests/hardware-wallets/ledger-account.spec.ts

@@ -1,3 +1,4 @@
+import { Browser } from 'selenium-webdriver';
 import FixtureBuilder from '../../fixture-builder';
 import { withFixtures } from '../../helpers';
 import { shortenAddress } from '../../../../ui/helpers/utils/util';
@@ -29,8 +30,21 @@ describe('Ledger Hardware', function () {
 
         const connectHardwareWalletPage = new ConnectHardwareWalletPage(driver);
         await connectHardwareWalletPage.check_pageIsLoaded();
-        await connectHardwareWalletPage.openConnectLedgerPage();
+        await connectHardwareWalletPage.clickConnectLedgerButton();
 
+        // Check if browser is Firefox
+        const isFirefox = process.env.SELENIUM_BROWSER === Browser.FIREFOX;
+
+        if (isFirefox) {
+          // In Firefox, we expect to see "Firefox Not Supported" message
+          await connectHardwareWalletPage.checkFirefoxNotSupportedIsDisplayed();
+          return; // Exit early for Firefox
+        }
+
+        // Click continue button when browser is not Firefox
+        await connectHardwareWalletPage.clickContinueButton();
+
+        // For non-Firefox browsers, continue with the existing test flow
         const selectLedgerAccountPage = new SelectHardwareWalletAccountPage(
           driver,
         );
@@ -79,8 +93,21 @@ describe('Ledger Hardware', function () {
 
         const connectHardwareWalletPage = new ConnectHardwareWalletPage(driver);
         await connectHardwareWalletPage.check_pageIsLoaded();
-        await connectHardwareWalletPage.openConnectLedgerPage();
+        await connectHardwareWalletPage.clickConnectLedgerButton();
+
+        // Check if browser is Firefox
+        const isFirefox = process.env.SELENIUM_BROWSER === Browser.FIREFOX;
+
+        if (isFirefox) {
+          // In Firefox, we expect to see "Firefox Not Supported" message
+          await connectHardwareWalletPage.checkFirefoxNotSupportedIsDisplayed();
+          return; // Exit early for Firefox
+        }
+
+        // Click continue button when browser is not Firefox
+        await connectHardwareWalletPage.clickContinueButton();
 
+        // For non-Firefox browsers, continue with the existing test flow
         // Unlock 5 Ledger accounts
         const selectLedgerAccountPage = new SelectHardwareWalletAccountPage(
           driver,

ui/pages/create-account/connect-hardware/index.scss

@@ -114,6 +114,12 @@
     margin-bottom: 15px;
   }
 
+  &__href-link {
+    text-align: center;
+    color: var(--color-primary-default);
+    background: unset;
+  }
+
   &__msg {
     &-link {
       @include design-system.H6;

ui/pages/create-account/connect-hardware/select-hardware.js

@@ -26,6 +26,7 @@ import {
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
 import { openWindow } from '../../../helpers/utils/window';
+import { getBrowserName } from '../../../../shared/modules/browser-runtime.utils';
 import {
   AlignItems,
   Display,
@@ -36,6 +37,7 @@ import {
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
+import { PLATFORM_FIREFOX } from '../../../../shared/constants/app';
 
 // Not all browsers have usb support. In particular, Firefox does
 // not support usb. More information on that can be found here:
@@ -48,6 +50,11 @@ import {
 // the case of Firefox, this will depend on the Trezor bridge software
 const isUSBSupported = !process.env.IN_TEST && window.navigator.usb;
 
+const isFirefox = getBrowserName() === PLATFORM_FIREFOX;
+
+const LEDGER_FIREFOX_NOT_SUPPORTED_URL =
+  'https://support.metamask.io/more-web3/wallets/how-to-connect-a-trezor-or-ledger-hardware-wallet/';
+
 export default class SelectHardware extends Component {
   static contextTypes = {
     t: PropTypes.func,
@@ -185,7 +192,10 @@ export default class SelectHardware extends Component {
         className="hw-connect__connect-btn"
         onClick={this.connect}
         disabled={
-          !this.state.selectedDevice || this.state.trezorRequestDevicePending
+          !this.state.selectedDevice ||
+          this.state.trezorRequestDevicePending ||
+          (this.state.selectedDevice === HardwareDeviceNames.ledger &&
+            isFirefox)
         }
       >
         {this.context.t('continue')}
@@ -266,20 +276,44 @@ export default class SelectHardware extends Component {
         flexDirection={FlexDirection.Column}
         alignItems={AlignItems.center}
       >
-        {this.state.selectedDevice === HardwareDeviceNames.ledger && (
-          <Box>
-            <BannerAlert
-              marginTop={6}
-              title={this.context.t(
-                'ledgerMultipleDevicesUnsupportedInfoTitle',
-              )}
-            >
-              {this.context.t(
-                'ledgerMultipleDevicesUnsupportedInfoDescription',
-              )}
-            </BannerAlert>
-          </Box>
-        )}
+        {this.state.selectedDevice === HardwareDeviceNames.ledger &&
+          !isFirefox && (
+            <Box>
+              <BannerAlert
+                marginTop={6}
+                title={this.context.t(
+                  'ledgerMultipleDevicesUnsupportedInfoTitle',
+                )}
+              >
+                {this.context.t(
+                  'ledgerMultipleDevicesUnsupportedInfoDescription',
+                )}
+              </BannerAlert>
+            </Box>
+          )}
+        {this.state.selectedDevice === HardwareDeviceNames.ledger &&
+          isFirefox && (
+            <Box>
+              <BannerAlert
+                marginTop={6}
+                severity="warning"
+                title={this.context.t('ledgerFirefoxNotSupportedTitle')}
+              >
+                {this.context.t('ledgerFirefoxNotSupportedDescription1')}
+                <a
+                  className="hw-connect__href-link"
+                  href={LEDGER_FIREFOX_NOT_SUPPORTED_URL}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {this.context.t('ledgerFirefoxNotSupportedLink')}
+                </a>
+                {this.context.t('ledgerFirefoxNotSupportedDescription2')}
+                <br />
+                {this.context.t('ledgerFirefoxNotSupportedDescription3')}
+              </BannerAlert>
+            </Box>
+          )}
 
         <Box
           display={Display.Flex}