Extension throws LedgerNoDeviceSelected

[lukaw3d]

Trying to use ledger in extension always throws LedgerNoDeviceSelected. The reason seems to be that background page can't ask user to give permission to selected USB device; and we run saga in background page.

One potential solution is to ask user for USB permission in the popup, before dispatching to saga:

onClick={async () => {
  if (await TransportWebUSB.isSupported()) await TransportWebUSB.create()
  dispatch(importAccountsActions.enumerateAccountsFromLedger())
}}

But that actually doesn't work, because default popup ALSO can't ask for permission. It does work in the other kind of popup tho:

chrome.windows.create({
  url: location.href,
  type: 'popup',
  width: 500,
  height: 600,
})

https://github.com/oasisprotocol/oasis-wallet-ext/blob/990a8c78999a2c594d2f0a11991a73a5ca214f9f/src/utils/ledger.js#L28 does this

Note: I only checked this in Chrome, with manifest v2

Debugging note: after granting USB permission you can remove it from extension in chrome://settings/content/usbDevices?search=usb

[buberdds]

UI options:

• popup/tab way

In new extension we can show a button to enable connection first	Connect button opens a new popup (or tab) which can access WebUSB
User grants USB permission to Ledger device	Flow now looks the same as in web wallet

• Onboarding way. Most extensions introduce some kind of onboarding flow. When user does not have any wallet instead of opening a popup, extension would open a new tab ("extended view") where user can configure wallet. This way we can avoid opening multiple popups later.

Dev notes:

• Web USB permissions cannot be granted from popup or background so we need to open a new window. It can be a new popup window or tab
• We will end up using webextension-polyfill to call browser.windows.create etc, but this can be used only in extension
• We might need to redo routing so we can handle different views for extension and web. We will need it anyway to support dapps routes

const router = createHashRouter([ // createBrowserRouter  for web wallet
  {
    path: '/*',
    element: <App />,
    children: [
      ...commonRoutes,
      {
        path: 'open-wallet/*',
        element: <OpenWalletPageWebExtension />, //  <OpenWalletPage />, for web wallet
      },
    ],
  },
])

and use RouterProvider instead of BrowserRouter or HashRouter

• We might need to create some webextension helpers / utils to keep usage of webextension-polyfill in one place
• We will have to refactor some components so they render different stuff for web and extension (does not apply for onboarding)