From 6fb9fba7d5f42eb128122dec1207d07881379e07 Mon Sep 17 00:00:00 2001 From: Xiaoming Wang Date: Thu, 26 Jun 2025 15:18:12 +0800 Subject: [PATCH 01/15] feat: add support for Ledger connection issues on Firefox This commit introduces new messages and UI alerts to inform users about the lack of support for Ledger on Firefox. It updates the connection logic to display a warning when a user attempts to connect a Ledger device while using Firefox, guiding them to a support link for alternative solutions. --- app/_locales/en/messages.json | 15 +++++ .../connect-hardware/select-hardware.js | 57 ++++++++++++++----- 2 files changed, 58 insertions(+), 14 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 6eb05bb72c9..32ad2dcd3fa 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -3026,6 +3026,21 @@ "ledgerMultipleDevicesUnsupportedInfoDescription": { "message": "To connect a new device, disconnect the previous one." }, + "ledgerFirefoxNotSupportedTitle":{ + "message": "Firefox Not Supported" + }, + "ledgerFirefoxNotSupportedDescription1": { + "message": "We're having trouble connecting to Ledger. Check out our " + }, + "ledgerFirefoxNotSupportedLink": { + "message": "guide" + }, + "ledgerFirefoxNotSupportedDescription2": { + "message": " on how to connect a hardware wallet, then try again." + }, + "ledgerFirefoxNotSupportedDescription3": { + "message": " Ledger no longer supports Firefox, so you might need to use a different browser." + }, "ledgerMultipleDevicesUnsupportedInfoTitle": { "message": "You can only connect one Ledger at a time" }, diff --git a/ui/pages/create-account/connect-hardware/select-hardware.js b/ui/pages/create-account/connect-hardware/select-hardware.js index 98302d659a3..f742d56ebfe 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.js +++ b/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, @@ -48,6 +49,9 @@ import { // the case of Firefox, this will depend on the Trezor bridge software const isUSBSupported = !process.env.IN_TEST && window.navigator.usb; +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 +189,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 && + getBrowserName() === 'Firefox') } > {this.context.t('continue')} @@ -266,20 +273,42 @@ export default class SelectHardware extends Component { flexDirection={FlexDirection.Column} alignItems={AlignItems.center} > - {this.state.selectedDevice === HardwareDeviceNames.ledger && ( - - - {this.context.t( - 'ledgerMultipleDevicesUnsupportedInfoDescription', - )} + {this.state.selectedDevice === HardwareDeviceNames.ledger && + getBrowserName() !== 'Firefox' && ( + + + {this.context.t( + 'ledgerMultipleDevicesUnsupportedInfoDescription', + )} + + + )} + {this.state.selectedDevice === HardwareDeviceNames.ledger && + getBrowserName() === 'Firefox' && ( + + + {this.context.t('ledgerFirefoxNotSupportedDescription1')} + + {this.context.t('ledgerFirefoxNotSupportedLink')} + + {this.context.t('ledgerFirefoxNotSupportedDescription2')} +
+ {this.context.t('ledgerFirefoxNotSupportedDescription3')} - - )} + )} Date: Thu, 26 Jun 2025 15:23:38 +0800 Subject: [PATCH 02/15] fix syntax error in the select-hardware.js file. --- ui/pages/create-account/connect-hardware/select-hardware.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ui/pages/create-account/connect-hardware/select-hardware.js b/ui/pages/create-account/connect-hardware/select-hardware.js index f742d56ebfe..3648e8ce77a 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.js +++ b/ui/pages/create-account/connect-hardware/select-hardware.js @@ -306,8 +306,9 @@ export default class SelectHardware extends Component { {this.context.t('ledgerFirefoxNotSupportedDescription2')}
- {this.context.t('ledgerFirefoxNotSupportedDescription3')} - + {this.context.t('ledgerFirefoxNotSupportedDescription3')} + + )} Date: Thu, 26 Jun 2025 18:29:55 +0800 Subject: [PATCH 03/15] feat: add link styling for Ledger Firefox support message This commit adds a CSS class to the link in the Ledger Firefox support message, enhancing its visibility and user experience. The change aims to improve the overall UI by ensuring that users can easily identify and access the support link. --- ui/pages/create-account/connect-hardware/select-hardware.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/pages/create-account/connect-hardware/select-hardware.js b/ui/pages/create-account/connect-hardware/select-hardware.js index 3648e8ce77a..5928176c1ff 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.js +++ b/ui/pages/create-account/connect-hardware/select-hardware.js @@ -298,6 +298,7 @@ export default class SelectHardware extends Component { > {this.context.t('ledgerFirefoxNotSupportedDescription1')} Date: Thu, 26 Jun 2025 20:11:12 +0800 Subject: [PATCH 04/15] Change the styling to make the front same as another text. --- ui/pages/create-account/connect-hardware/index.scss | 6 ++++++ ui/pages/create-account/connect-hardware/select-hardware.js | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/ui/pages/create-account/connect-hardware/index.scss b/ui/pages/create-account/connect-hardware/index.scss index bb212ee5a8a..441288d4704 100644 --- a/ui/pages/create-account/connect-hardware/index.scss +++ b/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; diff --git a/ui/pages/create-account/connect-hardware/select-hardware.js b/ui/pages/create-account/connect-hardware/select-hardware.js index 5928176c1ff..c725e42b542 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.js +++ b/ui/pages/create-account/connect-hardware/select-hardware.js @@ -298,7 +298,7 @@ export default class SelectHardware extends Component { > {this.context.t('ledgerFirefoxNotSupportedDescription1')} Date: Thu, 26 Jun 2025 20:51:59 +0800 Subject: [PATCH 05/15] format the file to pass yarn lint --- app/_locales/en/messages.json | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 32ad2dcd3fa..82fcc082ec8 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -3017,30 +3017,30 @@ "ledgerErrorTransactionDataNotPadded": { "message": "Ethereum transaction's input data isn't sufficiently padded." }, - "ledgerLiveApp": { - "message": "Ledger Live App" - }, - "ledgerLocked": { - "message": "Cannot connect to Ledger device. Please make sure your device is unlocked and Ethereum app is opened." - }, - "ledgerMultipleDevicesUnsupportedInfoDescription": { - "message": "To connect a new device, disconnect the previous one." - }, - "ledgerFirefoxNotSupportedTitle":{ - "message": "Firefox Not Supported" - }, "ledgerFirefoxNotSupportedDescription1": { "message": "We're having trouble connecting to Ledger. Check out our " }, - "ledgerFirefoxNotSupportedLink": { - "message": "guide" - }, "ledgerFirefoxNotSupportedDescription2": { "message": " on how to connect a hardware wallet, then try again." }, "ledgerFirefoxNotSupportedDescription3": { "message": " Ledger no longer supports Firefox, so you might need to use a different browser." }, + "ledgerFirefoxNotSupportedLink": { + "message": "guide" + }, + "ledgerFirefoxNotSupportedTitle": { + "message": "Firefox Not Supported" + }, + "ledgerLiveApp": { + "message": "Ledger Live App" + }, + "ledgerLocked": { + "message": "Cannot connect to Ledger device. Please make sure your device is unlocked and Ethereum app is opened." + }, + "ledgerMultipleDevicesUnsupportedInfoDescription": { + "message": "To connect a new device, disconnect the previous one." + }, "ledgerMultipleDevicesUnsupportedInfoTitle": { "message": "You can only connect one Ledger at a time" }, From 9a8be5520c3d49eca918ce1e62fb2d24ab49b31f Mon Sep 17 00:00:00 2001 From: Xiaoming Wang Date: Wed, 2 Jul 2025 16:45:56 +0800 Subject: [PATCH 06/15] fix test lint locale pipeline --- app/_locales/en_GB/messages.json | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/app/_locales/en_GB/messages.json b/app/_locales/en_GB/messages.json index 3383e6e0e22..ba789947170 100644 --- a/app/_locales/en_GB/messages.json +++ b/app/_locales/en_GB/messages.json @@ -3056,6 +3056,21 @@ "ledgerErrorTransactionDataNotPadded": { "message": "Ethereum transaction's input data isn't sufficiently padded." }, + "ledgerFirefoxNotSupportedDescription1": { + "message": "We're having trouble connecting to Ledger. Check out our " + }, + "ledgerFirefoxNotSupportedDescription2": { + "message": " on how to connect a hardware wallet, then try again." + }, + "ledgerFirefoxNotSupportedDescription3": { + "message": " Ledger no longer supports Firefox, so you might need to use a different browser." + }, + "ledgerFirefoxNotSupportedLink": { + "message": "guide" + }, + "ledgerFirefoxNotSupportedTitle": { + "message": "Firefox Not Supported" + }, "ledgerLiveApp": { "message": "Ledger Live App" }, From 2d055b715654b1dc7609308e02e2e741323c32e7 Mon Sep 17 00:00:00 2001 From: Xiaoming Wang Date: Wed, 2 Jul 2025 17:04:13 +0800 Subject: [PATCH 07/15] Fix unit tests failure. --- ui/pages/create-account/connect-hardware/index.test.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/ui/pages/create-account/connect-hardware/index.test.tsx b/ui/pages/create-account/connect-hardware/index.test.tsx index 105a22554a8..85cb120157c 100644 --- a/ui/pages/create-account/connect-hardware/index.test.tsx +++ b/ui/pages/create-account/connect-hardware/index.test.tsx @@ -193,10 +193,7 @@ describe('ConnectHardwareForm', () => { await waitFor(() => { expect( - getByText( - "If you're on the latest version of Firefox, you might be experiencing an issue related to Firefox dropping U2F support. Learn how to fix this issue", - { exact: false }, - ), + getByText('Firefox Not Supported', { exact: false }), ).toBeInTheDocument(); }); }); From ba3d02de83e3562003305ffb6f7788741f9429c9 Mon Sep 17 00:00:00 2001 From: Xiaoming Wang Date: Wed, 2 Jul 2025 20:24:17 +0800 Subject: [PATCH 08/15] Enhance Ledger account tests to handle Firefox compatibility. Added checks for "Firefox Not Supported" message and refactored account selection logic for improved clarity and maintainability. --- .../hardware-wallets/ledger-account.spec.ts | 57 +++++++++++-------- 1 file changed, 34 insertions(+), 23 deletions(-) diff --git a/test/e2e/tests/hardware-wallets/ledger-account.spec.ts b/test/e2e/tests/hardware-wallets/ledger-account.spec.ts index fc11f4626b0..5cb04270910 100644 --- a/test/e2e/tests/hardware-wallets/ledger-account.spec.ts +++ b/test/e2e/tests/hardware-wallets/ledger-account.spec.ts @@ -1,3 +1,4 @@ +import { Browser, By } from 'selenium-webdriver'; import FixtureBuilder from '../../fixture-builder'; import { withFixtures } from '../../helpers'; import { shortenAddress } from '../../../../ui/helpers/utils/util'; @@ -9,6 +10,8 @@ import HomePage from '../../page-objects/pages/home/homepage'; import SelectHardwareWalletAccountPage from '../../page-objects/pages/hardware-wallet/select-hardware-wallet-account-page'; import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow'; +const IS_FIREFOX = process.env.SELENIUM_BROWSER === Browser.FIREFOX; + describe('Ledger Hardware', function () { it('derives the correct accounts and unlocks the first account', async function () { await withFixtures( @@ -31,32 +34,40 @@ describe('Ledger Hardware', function () { await connectHardwareWalletPage.check_pageIsLoaded(); await connectHardwareWalletPage.openConnectLedgerPage(); - const selectLedgerAccountPage = new SelectHardwareWalletAccountPage( - driver, - ); - await selectLedgerAccountPage.check_pageIsLoaded(); + if (IS_FIREFOX) { + // check Firefox Not Supported text exists and stop test + await driver.findElement( + By.xpath("//*[contains(text(), 'Firefox Not Supported')]"), + ); + } else { + const selectLedgerAccountPage = new SelectHardwareWalletAccountPage( + driver, + ); - // Check that the first page of accounts is correct - await selectLedgerAccountPage.check_accountNumber(); - for (const { address } of KNOWN_PUBLIC_KEY_ADDRESSES.slice(0, 4)) { - const shortenedAddress = `${address.slice(0, 4)}...${address.slice( - -4, - )}`; - await selectLedgerAccountPage.check_addressIsDisplayed( - shortenedAddress, + await selectLedgerAccountPage.check_pageIsLoaded(); + + // Check that the first page of accounts is correct + await selectLedgerAccountPage.check_accountNumber(); + for (const { address } of KNOWN_PUBLIC_KEY_ADDRESSES.slice(0, 4)) { + const shortenedAddress = `${address.slice(0, 4)}...${address.slice( + -4, + )}`; + await selectLedgerAccountPage.check_addressIsDisplayed( + shortenedAddress, + ); + } + + // Unlock first account of first page and check that the correct account has been added + await selectLedgerAccountPage.unlockAccount(1); + await headerNavbar.check_pageIsLoaded(); + await new HomePage(driver).check_expectedBalanceIsDisplayed('0'); + await headerNavbar.openAccountMenu(); + await accountListPage.check_pageIsLoaded(); + await accountListPage.check_accountDisplayedInAccountList('Ledger 1'); + await accountListPage.check_accountAddressDisplayedInAccountList( + shortenAddress(KNOWN_PUBLIC_KEY_ADDRESSES[0].address), ); } - - // Unlock first account of first page and check that the correct account has been added - await selectLedgerAccountPage.unlockAccount(1); - await headerNavbar.check_pageIsLoaded(); - await new HomePage(driver).check_expectedBalanceIsDisplayed('0'); - await headerNavbar.openAccountMenu(); - await accountListPage.check_pageIsLoaded(); - await accountListPage.check_accountDisplayedInAccountList('Ledger 1'); - await accountListPage.check_accountAddressDisplayedInAccountList( - shortenAddress(KNOWN_PUBLIC_KEY_ADDRESSES[0].address), - ); }, ); }); From 38b37b77f2c1098f0a66cc72dca45c1aaf3b9711 Mon Sep 17 00:00:00 2001 From: Xiaoming Wang Date: Wed, 2 Jul 2025 20:58:32 +0800 Subject: [PATCH 09/15] Revert the e2e tests --- .../hardware-wallets/ledger-account.spec.ts | 57 ++++++++----------- 1 file changed, 23 insertions(+), 34 deletions(-) diff --git a/test/e2e/tests/hardware-wallets/ledger-account.spec.ts b/test/e2e/tests/hardware-wallets/ledger-account.spec.ts index 5cb04270910..fc11f4626b0 100644 --- a/test/e2e/tests/hardware-wallets/ledger-account.spec.ts +++ b/test/e2e/tests/hardware-wallets/ledger-account.spec.ts @@ -1,4 +1,3 @@ -import { Browser, By } from 'selenium-webdriver'; import FixtureBuilder from '../../fixture-builder'; import { withFixtures } from '../../helpers'; import { shortenAddress } from '../../../../ui/helpers/utils/util'; @@ -10,8 +9,6 @@ import HomePage from '../../page-objects/pages/home/homepage'; import SelectHardwareWalletAccountPage from '../../page-objects/pages/hardware-wallet/select-hardware-wallet-account-page'; import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow'; -const IS_FIREFOX = process.env.SELENIUM_BROWSER === Browser.FIREFOX; - describe('Ledger Hardware', function () { it('derives the correct accounts and unlocks the first account', async function () { await withFixtures( @@ -34,40 +31,32 @@ describe('Ledger Hardware', function () { await connectHardwareWalletPage.check_pageIsLoaded(); await connectHardwareWalletPage.openConnectLedgerPage(); - if (IS_FIREFOX) { - // check Firefox Not Supported text exists and stop test - await driver.findElement( - By.xpath("//*[contains(text(), 'Firefox Not Supported')]"), - ); - } else { - const selectLedgerAccountPage = new SelectHardwareWalletAccountPage( - driver, - ); - - await selectLedgerAccountPage.check_pageIsLoaded(); - - // Check that the first page of accounts is correct - await selectLedgerAccountPage.check_accountNumber(); - for (const { address } of KNOWN_PUBLIC_KEY_ADDRESSES.slice(0, 4)) { - const shortenedAddress = `${address.slice(0, 4)}...${address.slice( - -4, - )}`; - await selectLedgerAccountPage.check_addressIsDisplayed( - shortenedAddress, - ); - } + const selectLedgerAccountPage = new SelectHardwareWalletAccountPage( + driver, + ); + await selectLedgerAccountPage.check_pageIsLoaded(); - // Unlock first account of first page and check that the correct account has been added - await selectLedgerAccountPage.unlockAccount(1); - await headerNavbar.check_pageIsLoaded(); - await new HomePage(driver).check_expectedBalanceIsDisplayed('0'); - await headerNavbar.openAccountMenu(); - await accountListPage.check_pageIsLoaded(); - await accountListPage.check_accountDisplayedInAccountList('Ledger 1'); - await accountListPage.check_accountAddressDisplayedInAccountList( - shortenAddress(KNOWN_PUBLIC_KEY_ADDRESSES[0].address), + // Check that the first page of accounts is correct + await selectLedgerAccountPage.check_accountNumber(); + for (const { address } of KNOWN_PUBLIC_KEY_ADDRESSES.slice(0, 4)) { + const shortenedAddress = `${address.slice(0, 4)}...${address.slice( + -4, + )}`; + await selectLedgerAccountPage.check_addressIsDisplayed( + shortenedAddress, ); } + + // Unlock first account of first page and check that the correct account has been added + await selectLedgerAccountPage.unlockAccount(1); + await headerNavbar.check_pageIsLoaded(); + await new HomePage(driver).check_expectedBalanceIsDisplayed('0'); + await headerNavbar.openAccountMenu(); + await accountListPage.check_pageIsLoaded(); + await accountListPage.check_accountDisplayedInAccountList('Ledger 1'); + await accountListPage.check_accountAddressDisplayedInAccountList( + shortenAddress(KNOWN_PUBLIC_KEY_ADDRESSES[0].address), + ); }, ); }); From 44eb354ad832e8e0d727f6a2beccba011d6f17fa Mon Sep 17 00:00:00 2001 From: Xiaoming Wang Date: Thu, 3 Jul 2025 16:57:22 +0800 Subject: [PATCH 10/15] Fix e2e tests for firefox to check Not support message appear. --- .../connect-hardware-wallet-page.ts | 25 +++++++++++++-- .../hardware-wallets/ledger-account.spec.ts | 31 +++++++++++++++++-- 2 files changed, 52 insertions(+), 4 deletions(-) diff --git a/test/e2e/page-objects/pages/hardware-wallet/connect-hardware-wallet-page.ts b/test/e2e/page-objects/pages/hardware-wallet/connect-hardware-wallet-page.ts index 53bd9f3a300..24acab00683 100644 --- a/test/e2e/page-objects/pages/hardware-wallet/connect-hardware-wallet-page.ts +++ b/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 { - console.log(`Open connect trezor page`); + async clickConnectLedgerButton(): Promise { + console.log(`Click connect ledger button`); await this.driver.clickElement(this.connectLedgerButton); + } + + async clickContinueButton(): Promise { + 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 { + 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'); + if (!isDisabled) { + throw new Error('Continue button should be disabled in Firefox'); + } + } } export default ConnectHardwareWalletPage; diff --git a/test/e2e/tests/hardware-wallets/ledger-account.spec.ts b/test/e2e/tests/hardware-wallets/ledger-account.spec.ts index fc11f4626b0..77cea8205e7 100644 --- a/test/e2e/tests/hardware-wallets/ledger-account.spec.ts +++ b/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, From 6b36b23231de0a98674509f34eba11781b90e7b9 Mon Sep 17 00:00:00 2001 From: Xiaoming Wang <7315988+dawnseeker8@users.noreply.github.com> Date: Thu, 10 Jul 2025 11:43:52 +0100 Subject: [PATCH 11/15] Apply suggestions from code review Co-authored-by: Charly Chevalier --- .../pages/hardware-wallet/connect-hardware-wallet-page.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/e2e/page-objects/pages/hardware-wallet/connect-hardware-wallet-page.ts b/test/e2e/page-objects/pages/hardware-wallet/connect-hardware-wallet-page.ts index 24acab00683..1f640ad9025 100644 --- a/test/e2e/page-objects/pages/hardware-wallet/connect-hardware-wallet-page.ts +++ b/test/e2e/page-objects/pages/hardware-wallet/connect-hardware-wallet-page.ts @@ -47,7 +47,7 @@ class ConnectHardwareWalletPage { } async clickConnectLedgerButton(): Promise { - console.log(`Click connect ledger button`); + console.log(`Click connect Ledger button`); await this.driver.clickElement(this.connectLedgerButton); } @@ -63,7 +63,7 @@ class ConnectHardwareWalletPage { } async checkFirefoxNotSupportedIsDisplayed(): Promise { - console.log(`Check firefox not supported message is displayed`); + console.log('Check "Firefox Not Supported" message is displayed'); await this.driver.waitForSelector({ text: 'Firefox Not Supported', }); From 0f437967de5b2faed72c04587ef09807634aa57d Mon Sep 17 00:00:00 2001 From: Xiaoming Wang Date: Thu, 10 Jul 2025 12:30:35 +0100 Subject: [PATCH 12/15] Update Firefox compatibility messages in hardware connection tests and logic. Changed test assertions to reflect new error messages and refactored browser detection for improved clarity. --- .../create-account/connect-hardware/index.test.tsx | 10 +++++++++- .../create-account/connect-hardware/select-hardware.js | 8 +++++--- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/ui/pages/create-account/connect-hardware/index.test.tsx b/ui/pages/create-account/connect-hardware/index.test.tsx index 85cb120157c..40e8bc14c15 100644 --- a/ui/pages/create-account/connect-hardware/index.test.tsx +++ b/ui/pages/create-account/connect-hardware/index.test.tsx @@ -193,7 +193,15 @@ describe('ConnectHardwareForm', () => { await waitFor(() => { expect( - getByText('Firefox Not Supported', { exact: false }), + getByText("We're having trouble connecting your Ledger", { + exact: false, + }), + ).toBeInTheDocument(); + expect( + getByText( + "If you're on the latest version of Firefox, you might be experiencing an issue related to Firefox dropping U2F support", + { exact: false }, + ), ).toBeInTheDocument(); }); }); diff --git a/ui/pages/create-account/connect-hardware/select-hardware.js b/ui/pages/create-account/connect-hardware/select-hardware.js index c725e42b542..8f259cacc66 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.js +++ b/ui/pages/create-account/connect-hardware/select-hardware.js @@ -49,6 +49,8 @@ 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() === 'Firefox'; + const LEDGER_FIREFOX_NOT_SUPPORTED_URL = 'https://support.metamask.io/more-web3/wallets/how-to-connect-a-trezor-or-ledger-hardware-wallet/'; @@ -192,7 +194,7 @@ export default class SelectHardware extends Component { !this.state.selectedDevice || this.state.trezorRequestDevicePending || (this.state.selectedDevice === HardwareDeviceNames.ledger && - getBrowserName() === 'Firefox') + isFirefox) } > {this.context.t('continue')} @@ -274,7 +276,7 @@ export default class SelectHardware extends Component { alignItems={AlignItems.center} > {this.state.selectedDevice === HardwareDeviceNames.ledger && - getBrowserName() !== 'Firefox' && ( + !isFirefox && ( )} {this.state.selectedDevice === HardwareDeviceNames.ledger && - getBrowserName() === 'Firefox' && ( + isFirefox && ( Date: Thu, 10 Jul 2025 12:34:23 +0100 Subject: [PATCH 13/15] Rever the version to main version. --- ui/pages/create-account/connect-hardware/index.test.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/ui/pages/create-account/connect-hardware/index.test.tsx b/ui/pages/create-account/connect-hardware/index.test.tsx index 40e8bc14c15..105a22554a8 100644 --- a/ui/pages/create-account/connect-hardware/index.test.tsx +++ b/ui/pages/create-account/connect-hardware/index.test.tsx @@ -192,14 +192,9 @@ describe('ConnectHardwareForm', () => { fireEvent.click(continueButton); await waitFor(() => { - expect( - getByText("We're having trouble connecting your Ledger", { - exact: false, - }), - ).toBeInTheDocument(); expect( getByText( - "If you're on the latest version of Firefox, you might be experiencing an issue related to Firefox dropping U2F support", + "If you're on the latest version of Firefox, you might be experiencing an issue related to Firefox dropping U2F support. Learn how to fix this issue", { exact: false }, ), ).toBeInTheDocument(); From 7291cabcf529ac3ccaf53ac3318d63bf612d7d69 Mon Sep 17 00:00:00 2001 From: Xiaoming Wang Date: Thu, 10 Jul 2025 12:57:04 +0100 Subject: [PATCH 14/15] Refactor browser detection for Firefox compatibility by using a constant for platform identification. This improves clarity and maintains consistency in the codebase. --- ui/pages/create-account/connect-hardware/select-hardware.js | 3 ++- 1 file changed, 2 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 8f259cacc66..bcfc90f3c33 100644 --- a/ui/pages/create-account/connect-hardware/select-hardware.js +++ b/ui/pages/create-account/connect-hardware/select-hardware.js @@ -37,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: @@ -49,7 +50,7 @@ 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() === 'Firefox'; +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/'; From 5f52aa0681b9e04b4ed19f0596c93c682a9351aa Mon Sep 17 00:00:00 2001 From: Xiaoming Wang Date: Thu, 10 Jul 2025 13:05:13 +0100 Subject: [PATCH 15/15] Cursor auto fix during pr. --- .../pages/hardware-wallet/connect-hardware-wallet-page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/page-objects/pages/hardware-wallet/connect-hardware-wallet-page.ts b/test/e2e/page-objects/pages/hardware-wallet/connect-hardware-wallet-page.ts index 1f640ad9025..a74ac4ec00f 100644 --- a/test/e2e/page-objects/pages/hardware-wallet/connect-hardware-wallet-page.ts +++ b/test/e2e/page-objects/pages/hardware-wallet/connect-hardware-wallet-page.ts @@ -73,7 +73,7 @@ class ConnectHardwareWalletPage { text: 'Continue', tag: 'button', }); - const isDisabled = await continueButton.getAttribute('disabled'); + const isDisabled = (await continueButton.getAttribute('disabled')) !== null; if (!isDisabled) { throw new Error('Continue button should be disabled in Firefox'); }