1.27.0-0.0.2: [fix] ledger u2f chrome 91 (#580)

* 1.27.0-0.1.0: Fixes Ledger for Chrome 91

Author: taylorjdawson

.eslintrc.js

@@ -6,8 +6,7 @@ module.exports = {
   },
   extends: [
     'plugin:@typescript-eslint/recommended',
-    'prettier/@typescript-eslint',
-    'plugin:prettier/recommended'
+    'prettier'
   ],
 
   rules: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.27.0-0.0.1",
+  "version": "1.27.0-0.0.2",
   "description": "Onboard users to web3 by allowing them to select a wallet, get that wallet ready to transact and have access to synced wallet state.",
   "keywords": [
     "ethereum",
@@ -41,12 +41,11 @@
     "@typescript-eslint/parser": "^2.30.0",
     "babel-plugin-external-helpers": "^6.18.0",
     "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-config-prettier": "^8.3.0",
     "prettier": "^2.0.5",
     "rimraf": "^3.0.0",
     "rollup": "^1.27.5",
-    "rollup-plugin-svelte": "^5.0.3",
+    "rollup-plugin-svelte": "^6.1.1",
     "rollup-plugin-typescript2": "0.21.0",
     "svelte": "^3.12.1",
     "svelte-i18n": "^1.1.2-beta",
@@ -58,6 +57,7 @@
     "@gnosis.pm/safe-apps-sdk": "^3.0.0",
     "@ledgerhq/hw-app-eth": "^5.49.0",
     "@ledgerhq/hw-transport-u2f": "^5.21.0",
+    "@ledgerhq/hw-transport-webusb": "5.53.0",
     "@portis/web3": "^4.0.0",
     "@toruslabs/torus-embed": "^1.10.11",
     "@walletconnect/web3-provider": "^1.4.1",

rollup.config.js

@@ -73,6 +73,7 @@ export default {
     '@cvbb/eth-keyring',
     'hdkey',
     '@ledgerhq/hw-transport-u2f',
+    '@ledgerhq/hw-transport-webusb',
     '@ledgerhq/hw-app-eth',
     'util',
     'assert',

src/@types/index.d.ts

@@ -14,6 +14,7 @@ declare module 'ethereumjs-util'
 declare module 'hdkey'
 declare module '@ledgerhq/hw-app-eth'
 declare module '@ledgerhq/hw-transport-u2f'
+declare module '@ledgerhq/hw-transport-webusb'
 declare module 'eth-provider'
 
 declare module '*.png'

src/interfaces.ts

@@ -113,9 +113,7 @@ export interface WalletModule {
   iconSrc?: string
   iconSrcSet?: string
   svg?: string
-  wallet: (
-    helpers: Helpers
-  ) => Promise<{
+  wallet: (helpers: Helpers) => Promise<{
     provider: any | undefined
     interface: WalletInterface | null
     instance?: any

src/modules/check/accounts.ts

@@ -53,8 +53,9 @@ function accountSelect(
       }
 
       const accountSelect = () => {
-        const accountIndex = (document as any).getElementById('account-select')
-          .selectedIndex
+        const accountIndex = (document as any).getElementById(
+          'account-select'
+        ).selectedIndex
 
         provider.setPrimaryAccount(accountsAndBalances[accountIndex].address)
       }

src/modules/select/index.ts

@@ -68,9 +68,7 @@ function select(
   )
 }
 
-function getModule(
-  name: string
-): Promise<{
+function getModule(name: string): Promise<{
   default: (options: AllWalletInitOptions) => WalletModule
 }> {
   switch (name) {

src/modules/select/wallets/ledger.ts

@@ -5,15 +5,8 @@ const LEDGER_LIVE_PATH = `m/44'/60'`
 const ACCOUNTS_TO_GET = 5
 
 function ledger(options: LedgerOptions & { networkId: number }): WalletModule {
-  const {
-    rpcUrl,
-    LedgerTransport,
-    networkId,
-    preferred,
-    label,
-    iconSrc,
-    svg
-  } = options
+  const { rpcUrl, LedgerTransport, networkId, preferred, label, iconSrc, svg } =
+    options
 
   return {
     name: label || 'Ledger',
@@ -60,7 +53,7 @@ function ledger(options: LedgerOptions & { networkId: number }): WalletModule {
   }
 }
 
-async function ledgerProvider(options: {
+interface LedgerProviderOptions {
   networkId: number
   rpcUrl: string
   LedgerTransport: any
@@ -70,10 +63,11 @@ async function ledgerProvider(options: {
     disconnected: boolean
     walletName: string
   }) => void
-}) {
+}
+
+async function ledgerProvider(options: LedgerProviderOptions) {
   const { default: createProvider } = await import('./providerEngine')
   const { generateAddresses, isValidPath } = await import('./hd-wallet')
-  const { default: TransportU2F } = await import('@ledgerhq/hw-transport-u2f')
   const { default: Eth } = await import('@ledgerhq/hw-app-eth')
 
   const EthereumTx = await import('ethereumjs-tx')
@@ -169,10 +163,12 @@ async function ledgerProvider(options: {
   provider.isCustomPath = isCustomPath
 
   let transport: any
+  let transportSubscription: any
   let eth: any
 
   function disconnect() {
-    transport && transport.close()
+    transport?.close()
+    transportSubscription?.unsubscribe()
     provider.stop()
     resetWalletState({ disconnected: true, walletName: 'Ledger' })
   }
@@ -207,12 +203,6 @@ async function ledgerProvider(options: {
 
   async function createTransport() {
     try {
-      transport = LedgerTransport
-        ? await LedgerTransport.create()
-        : await TransportU2F.create()
-
-      eth = new Eth(transport)
-
       const observer = {
         next: (event: any) => {
           if (event.type === 'remove') {
@@ -223,9 +213,17 @@ async function ledgerProvider(options: {
         complete: () => {}
       }
 
-      LedgerTransport
-        ? LedgerTransport.listen(observer)
-        : TransportU2F.listen(observer)
+      // Get the Transport class
+      const Transport =
+        LedgerTransport || (await supportsWebUSB())
+          ? (await import('@ledgerhq/hw-transport-webusb')).default
+          : (await import('@ledgerhq/hw-transport-u2f')).default
+
+      transport = await Transport.create()
+
+      eth = new Eth(transport)
+
+      Transport.listen(observer)
     } catch (error) {
       throw new Error('Error connecting to Ledger wallet')
     }
@@ -453,5 +451,12 @@ async function ledgerProvider(options: {
 
   return provider
 }
+type Nav = Navigator & { usb: { getDevices(): void } }
+const supportsWebUSB = (): Promise<boolean> =>
+  Promise.resolve(
+    !!navigator &&
+      !!(navigator as Nav).usb &&
+      typeof (navigator as Nav).usb.getDevices === 'function'
+  )
 
 export default ledger

src/modules/select/wallets/trezor.ts

@@ -2,16 +2,8 @@ import { TrezorOptions, WalletModule, Helpers } from '../../../interfaces'
 import trezorIcon from '../wallet-icons/icon-trezor'
 
 function trezor(options: TrezorOptions & { networkId: number }): WalletModule {
-  const {
-    rpcUrl,
-    networkId,
-    email,
-    appUrl,
-    preferred,
-    label,
-    iconSrc,
-    svg
-  } = options
+  const { rpcUrl, networkId, email, appUrl, preferred, label, iconSrc, svg } =
+    options
 
   return {
     name: label || 'Trezor',

src/modules/select/wallets/wallet-connect.ts

@@ -13,16 +13,8 @@ import { app } from '../../../stores'
 function walletConnect(
   options: WalletConnectOptions & { networkId: number }
 ): WalletModule {
-  const {
-    infuraKey,
-    rpc,
-    bridge,
-    preferred,
-    label,
-    iconSrc,
-    svg,
-    networkId
-  } = options
+  const { infuraKey, rpc, bridge, preferred, label, iconSrc, svg, networkId } =
+    options
 
   const pollingInterval = get(app).blockPollingInterval