diff --git a/extension/src/popup/routes.tsx b/extension/src/popup/routes.tsx index 8f296fe2d1..a4db770e0a 100644 --- a/extension/src/popup/routes.tsx +++ b/extension/src/popup/routes.tsx @@ -2,7 +2,7 @@ import React from 'react' import { RouteObject } from 'react-router-dom' import { App } from 'app' import { ConnectDevicePage } from 'app/pages/ConnectDevicePage' -import { OpenWalletPageWebExtension } from 'app/pages/OpenWalletPage/webextension' +import { FromLedgerWebExtension, OpenWalletPageWebExtension } from 'app/pages/OpenWalletPage/webextension' import { commonRoutes } from '../../../src/commonRoutes' export const routes: RouteObject[] = [ @@ -21,4 +21,8 @@ export const routes: RouteObject[] = [ path: 'open-wallet/connect-device', element: , }, + { + path: 'open-wallet/ledger', + element: , + }, ] diff --git a/playwright/tests/extension.spec.ts b/playwright/tests/extension.spec.ts index 17937e1f26..8e5812970f 100644 --- a/playwright/tests/extension.spec.ts +++ b/playwright/tests/extension.spec.ts @@ -64,6 +64,7 @@ test.describe('The extension popup should load', () => { test('ask for USB permissions in ledger popup', async ({ page, context, extensionId }) => { await page.goto(`chrome-extension://${extensionId}/${popupFile}#/open-wallet`) + await page.getByRole('button', { name: /Ledger/i }).click() const popupPromise = context.waitForEvent('page') await page.getByRole('button', { name: /Grant access to your Ledger/i }).click() const popup = await popupPromise diff --git a/playwright/tests/ledger.spec.ts b/playwright/tests/ledger.spec.ts index ed77b04b44..cc0f4d7926 100644 --- a/playwright/tests/ledger.spec.ts +++ b/playwright/tests/ledger.spec.ts @@ -6,7 +6,7 @@ test.describe('Ledger', () => { expect((await page.request.head('/')).headers()).toHaveProperty('permissions-policy') await expectNoErrorsInConsole(page) - await page.goto('/open-wallet/ledger') + await page.goto('/open-wallet/ledger/usb') await page.getByRole('button', { name: 'Select accounts to open' }).click() await expect(page.getByText('error').or(page.getByText('fail'))).toBeHidden() }) diff --git a/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx b/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx index 34b7170381..aa05c111dd 100644 --- a/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx +++ b/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx @@ -23,9 +23,9 @@ export function FromLedger({ webExtensionLedgerAccess }: SelectOpenMethodProps) const usbLedgerSupported = await canAccessNavigatorUsb() const bleLedgerSupported = await canAccessBle() - if (usbLedgerSupported && !bleLedgerSupported) { + if (usbLedgerSupported && !bleLedgerSupported && !webExtensionLedgerAccess) { navigate('usb') - } else if (bleLedgerSupported && !usbLedgerSupported) { + } else if (bleLedgerSupported && !usbLedgerSupported && !webExtensionLedgerAccess) { navigate('ble') } @@ -34,7 +34,7 @@ export function FromLedger({ webExtensionLedgerAccess }: SelectOpenMethodProps) } getLedgerSupport() - }, [navigate]) + }, [navigate, webExtensionLedgerAccess]) return ( ', () => { renderComponent(() => {}) - expect(mockNavigate).toHaveBeenCalledWith('/open-wallet/ledger') + expect(mockNavigate).toHaveBeenCalledWith('/open-wallet/ledger/usb') }) }) diff --git a/src/app/pages/OpenWalletPage/index.tsx b/src/app/pages/OpenWalletPage/index.tsx index 9d28db28e1..dbc6093e29 100644 --- a/src/app/pages/OpenWalletPage/index.tsx +++ b/src/app/pages/OpenWalletPage/index.tsx @@ -26,7 +26,7 @@ export function SelectOpenMethod({ webExtensionLedgerAccess }: SelectOpenMethodP useEffect(() => { if (webExtensionLedgerAccess && showAccountsSelectionModal) { - navigate('/open-wallet/ledger') + navigate('/open-wallet/ledger/usb') } }, [navigate, showAccountsSelectionModal, webExtensionLedgerAccess]) diff --git a/src/app/pages/OpenWalletPage/webextension.tsx b/src/app/pages/OpenWalletPage/webextension.tsx index 7a15e396b1..2077ab4b1b 100644 --- a/src/app/pages/OpenWalletPage/webextension.tsx +++ b/src/app/pages/OpenWalletPage/webextension.tsx @@ -2,9 +2,16 @@ import React from 'react' import { useHref } from 'react-router-dom' import { openLedgerAccessPopup } from 'utils/webextension' import { SelectOpenMethod } from './' +import { FromLedger } from './Features/FromLedger' export function OpenWalletPageWebExtension() { const href = useHref('connect-device') return openLedgerAccessPopup(href)} /> } + +export function FromLedgerWebExtension() { + const href = useHref('/open-wallet/connect-device') + + return openLedgerAccessPopup(href)} /> +}