diff --git a/.changelog/2094.bugfix.md b/.changelog/2094.bugfix.md new file mode 100644 index 0000000000..65c2a90cdc --- /dev/null +++ b/.changelog/2094.bugfix.md @@ -0,0 +1 @@ +Refactor how extension requests ledger access (don't rely on state sync) diff --git a/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx b/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx index d4606e6143..01f0ee48e2 100644 --- a/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx +++ b/extension/src/ExtLedgerAccessPopup/ExtLedgerAccessPopup.tsx @@ -1,6 +1,5 @@ -import React, { useState } from 'react' +import { useState } from 'react' import { useTranslation } from 'react-i18next' -import { useDispatch } from 'react-redux' import { Box } from 'grommet/es6/components/Box' import { Button } from 'grommet/es6/components/Button' import { Spinner } from 'grommet/es6/components/Spinner' @@ -11,10 +10,9 @@ import { Header } from 'app/components/Header' import { ErrorFormatter } from 'app/components/ErrorFormatter' import { AlertBox } from 'app/components/AlertBox' import { WalletErrors } from 'types/errors' -import { importAccountsActions } from 'app/state/importaccounts' import { requestDevice } from 'app/lib/ledger' -import { WalletType } from '../../../src/app/state/wallet/types' import logotype from '../../../public/Icon Blue 192.png' +import { MessageTypes } from '../../../src/utils/constants' type ConnectionStatus = 'connected' | 'disconnected' | 'connecting' | 'error' type ConnectionStatusIconPros = { @@ -44,9 +42,10 @@ function ConnectionStatusIcon({ success = true, label, withMargin = false }: Con ) } +const chrome = (window as any).chrome + export function ExtLedgerAccessPopup() { const { t } = useTranslation() - const dispatch = useDispatch() const [connection, setConnection] = useState('disconnected') const handleConnect = async () => { setConnection('connecting') @@ -54,7 +53,7 @@ export function ExtLedgerAccessPopup() { const device = await requestDevice() if (device) { setConnection('connected') - dispatch(importAccountsActions.enumerateAccountsFromLedger(WalletType.UsbLedger)) + chrome?.runtime?.sendMessage({ type: MessageTypes.USB_LEDGER_PERMISSION_GRANTED }) } } catch { setConnection('error') diff --git a/extension/src/ExtLedgerAccessPopup/__tests__/index.test.tsx b/extension/src/ExtLedgerAccessPopup/__tests__/index.test.tsx index 8bfc8908d9..563f92b1cd 100644 --- a/extension/src/ExtLedgerAccessPopup/__tests__/index.test.tsx +++ b/extension/src/ExtLedgerAccessPopup/__tests__/index.test.tsx @@ -1,10 +1,7 @@ -import React from 'react' import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { requestDevice } from 'app/lib/ledger' -import { importAccountsActions } from 'app/state/importaccounts' import { ExtLedgerAccessPopup } from '../ExtLedgerAccessPopup' -import { WalletType } from '../../../../src/app/state/wallet/types' jest.mock('app/lib/ledger') @@ -31,10 +28,6 @@ describe('', () => { expect(await screen.findByText('ledger.extension.succeed')).toBeInTheDocument() expect(screen.getByLabelText('Status is okay')).toBeInTheDocument() expect(screen.queryByRole('button')).not.toBeInTheDocument() - expect(mockDispatch).toHaveBeenCalledWith({ - payload: WalletType.UsbLedger, - type: importAccountsActions.enumerateAccountsFromLedger.type, - }) }) it('should render error state', async () => { diff --git a/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx b/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx index 3faa0a1a03..19d32e75b4 100644 --- a/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx +++ b/src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx @@ -9,10 +9,10 @@ import { useTranslation } from 'react-i18next' import { Capacitor } from '@capacitor/core' type SelectOpenMethodProps = { - webExtensionUSBLedgerAccess?: () => void + openLedgerAccessPopup?: () => void } -export function FromLedger({ webExtensionUSBLedgerAccess }: SelectOpenMethodProps) { +export function FromLedger({ openLedgerAccessPopup }: SelectOpenMethodProps) { const { t } = useTranslation() const [supportsUsbLedger, setSupportsUsbLedger] = React.useState(true) const [supportsBleLedger, setSupportsBleLedger] = React.useState(true) @@ -46,11 +46,11 @@ export function FromLedger({ webExtensionUSBLedgerAccess }: SelectOpenMethodProp
- {webExtensionUSBLedgerAccess ? ( + {openLedgerAccessPopup ? (