Merge pull request #425 from blocknative/develop

Release 1.12.0

Author: lnbc1QWFyb24

.gitignore

@@ -3,4 +3,5 @@ node_modules
 dist/
 package-lock.json
 .rpt2_cache
-.vscode
+.vscode
+*.patch

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "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",
@@ -47,6 +47,7 @@
   "dependencies": {
     "@ledgerhq/hw-app-eth": "^5.21.0",
     "@ledgerhq/hw-transport-u2f": "^5.21.0",
+    "@ledgerhq/hw-transport-webusb": "^5.22.0",
     "@portis/web3": "^2.0.0-beta.57",
     "@toruslabs/torus-embed": "^1.8.2",
     "@unilogin/provider": "^0.6.1",

rollup.config.js

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

src/@types/index.d.ts

@@ -12,6 +12,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 '*.png'
 declare module '*.svg'

src/interfaces.ts

@@ -135,6 +135,8 @@ export interface Helpers {
     disconnected: boolean
     walletName: string
   }) => void
+  browser: Browser
+  os: OS
 }
 
 export interface WalletInterface {
@@ -429,12 +431,24 @@ export interface BalanceStore {
   get: () => any
 }
 
+export type Browser = {
+  name: string
+  version: string
+}
+
+export type OS = {
+  name: string
+  version: string
+  versionName: string
+}
+
 export interface AppState {
   dappId: string
   networkId: number
   version: string
   mobileDevice: boolean
-  os: string
+  os: OS
+  browser: Browser
   darkMode: boolean
   autoSelectWallet: string
   walletSelectInProgress: boolean

src/modules/select/index.ts

@@ -94,6 +94,8 @@ function getModule(name: string): Promise<any> | undefined {
       return import('./wallets/unilogin')
     case 'mykey':
       return import('./wallets/mykey')
+    case 'huobiwallet':
+      return import('./wallets/huobiwallet')
     default:
       return
   }

src/modules/select/wallet-icons/icon-huobiwallet.ts

@@ -0,0 +1,13 @@
+const huobiwalletIcon = `
+    <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 1024 1024">
+        <defs>
+            <style>.cls-1{fill:#2d65f8;}.cls-1,.cls-2{fill-rule:evenodd;}.cls-2{fill:#173fff;}.cls-3{fill:#fcfcff;}.cls-4{fill:#fff;}</style>
+        </defs>
+        <title>huobi wallet icon</title>
+        <path class="cls-1" d="M292.28,0H552Q742.79,27,858.24,122.88T1024,392V731.72c0,101.63-10.58,138.48-30.45,175.64a207.13,207.13,0,0,1-86.19,86.19c-37.16,19.87-74,30.45-175.64,30.45H292.28c-101.63,0-138.48-10.58-175.64-30.45a207.13,207.13,0,0,1-86.19-86.19C10.58,870.2,0,833.35,0,731.72V292.28C0,190.65,10.58,153.8,30.45,116.64a207.13,207.13,0,0,1,86.19-86.19C153.8,10.58,190.65,0,292.28,0Z"/>
+        <path class="cls-2" d="M993.55,116.64a207.13,207.13,0,0,0-86.19-86.19C870.21,10.58,833.35,0,731.72,0H552Q742.79,27,858.24,122.88T1024,392V292.28C1024,190.65,1013.42,153.8,993.55,116.64Z"/>
+        <path class="cls-3" d="M591.8,382.71c0-97.43-48-181.13-84.48-208.41,0,0-2.78-1.53-2.59,2.3-3,188-100.19,239-153.65,307.63-123.27,158.45-8.6,332.23,108.14,364.18,65.35,18-15.06-31.95-25.4-136.86C421.21,584.73,591.8,487.81,591.8,382.71Z"/>
+        <path class="cls-4" d="M643.64,445.69c-.78-.51-1.81-.9-2.53.32-2.07,23.74-26.56,74.42-57.67,121C478.07,725,538.08,801.1,571.91,842.18c19.44,23.74,0,0,49-24.25,60.52-36.26,99.8-98.95,105.62-168.62A242.5,242.5,0,0,0,643.64,445.69Z"/>
+    </svg>`
+
+export default huobiwalletIcon

src/modules/select/wallets/huobiwallet.ts

@@ -0,0 +1,75 @@
+import { mobileWalletInstallMessage } from '../content'
+import {
+  WalletModule,
+  Helpers,
+  InjectedWithBalanceOptions
+} from '../../../interfaces'
+
+import huobiwalletIcon from '../wallet-icons/icon-huobiwallet'
+
+function huobiwallet(options: InjectedWithBalanceOptions): WalletModule {
+  const { preferred, label, svg, rpcUrl } = options
+
+  return {
+    name: label || 'Huobi Wallet',
+    svg: svg || huobiwalletIcon,
+    wallet: async (helpers: Helpers) => {
+      const { getProviderName, getAddress, getNetwork, getBalance } = helpers
+      const huobiwalletProvider =
+        (window as any).ethereum ||
+        ((window as any).web3 && (window as any).web3.currentProvider)
+
+      const isHuobiWallet =
+        getProviderName(huobiwalletProvider) === 'huobiwallet'
+      let createProvider
+
+      if (isHuobiWallet && rpcUrl) {
+        createProvider = (await import('./providerEngine')).default
+      }
+
+      const provider = createProvider ? createProvider({ rpcUrl }) : null
+
+      let warned = false
+
+      return {
+        provider: huobiwalletProvider,
+        interface: isHuobiWallet
+          ? {
+              address: {
+                get: () => getAddress(huobiwalletProvider)
+              },
+              network: {
+                get: () => getNetwork(huobiwalletProvider)
+              },
+              balance: {
+                get: async () => {
+                  if (!provider) {
+                    if (!warned) {
+                      console.warn(
+                        'The Huobi Wallet provider does not allow rpc calls preventing Onboard.js from getting the balance. You can pass in a "rpcUrl" to the Huobi Wallet initialization object to get the balance.'
+                      )
+                      warned = true
+                    }
+
+                    return null
+                  }
+
+                  const address = await getAddress(huobiwalletProvider)
+
+                  return getBalance(provider, address)
+                }
+              },
+              name: getProviderName(huobiwalletProvider)
+            }
+          : null
+      }
+    },
+    type: 'injected',
+    link: 'https://www.huobiwallet.com',
+    installMessage: mobileWalletInstallMessage,
+    mobile: true,
+    preferred
+  }
+}
+
+export default huobiwallet

src/modules/select/wallets/ledger.ts

@@ -1,4 +1,10 @@
-import { LedgerOptions, WalletModule, Helpers } from '../../../interfaces'
+import {
+  LedgerOptions,
+  WalletModule,
+  Helpers,
+  Browser,
+  OS
+} from '../../../interfaces'
 
 import ledgerIcon from '../wallet-icons/icon-ledger'
 
@@ -21,15 +27,17 @@ function ledger(options: LedgerOptions & { networkId: number }): WalletModule {
     svg: svg || ledgerIcon,
     iconSrc,
     wallet: async (helpers: Helpers) => {
-      const { BigNumber, networkName, resetWalletState } = helpers
+      const { BigNumber, networkName, resetWalletState, browser, os } = helpers
 
       const provider = await ledgerProvider({
         rpcUrl,
         networkId,
-        LedgerTransport,
+        CustomLedgerTransport: LedgerTransport,
         BigNumber,
         networkName,
-        resetWalletState
+        resetWalletState,
+        browser,
+        os
       })
 
       return {
@@ -64,17 +72,18 @@ function ledger(options: LedgerOptions & { networkId: number }): WalletModule {
 async function ledgerProvider(options: {
   networkId: number
   rpcUrl: string
-  LedgerTransport: any
+  CustomLedgerTransport: any
   BigNumber: any
   networkName: (id: number) => string
   resetWalletState: (options?: {
     disconnected: boolean
     walletName: string
   }) => void
+  browser: Browser
+  os: OS
 }) {
   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')
@@ -84,10 +93,12 @@ async function ledgerProvider(options: {
   const {
     networkId,
     rpcUrl,
-    LedgerTransport,
+    CustomLedgerTransport,
     BigNumber,
     networkName,
-    resetWalletState
+    resetWalletState,
+    browser,
+    os
   } = options
 
   let dPath = ''
@@ -147,10 +158,14 @@ async function ledgerProvider(options: {
   provider.isCustomPath = isCustomPath
 
   let transport: any
+  let transportSubscription: any
   let eth: any
 
   function disconnect() {
     transport && transport.close()
+    transportSubscription &&
+      transportSubscription.unsubscribe &&
+      transportSubscription.unsubscribe()
     provider.stop()
     resetWalletState({ disconnected: true, walletName: 'Ledger' })
   }
@@ -185,27 +200,54 @@ 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') {
             disconnect()
           }
         },
-        error: () => {},
+        error: (error: any) => {
+          throw new Error(error)
+        },
         complete: () => {}
       }
 
-      LedgerTransport
-        ? LedgerTransport.listen(observer)
-        : TransportU2F.listen(observer)
+      if (CustomLedgerTransport) {
+        transport = await CustomLedgerTransport.create()
+        transportSubscription = CustomLedgerTransport.listen(observer)
+      } else {
+        if (
+          os.name === 'Windows' &&
+          parseInt(os.versionName) >= 11 &&
+          (browser.name === 'Internet Explorer' || browser.name === 'Firefox')
+        ) {
+          throw new Error(
+            `OS: ${os.name} ${os.versionName} and Browser: ${browser.name} are not compatible with Ledger wallets, please switch to Chrome browser to continue.`
+          )
+        } else if (
+          (os.name === 'macOS' || os.name === 'Linux') &&
+          (browser.name === 'Firefox' || browser.name === 'Safari')
+        ) {
+          const { default: TransportU2F } = await import(
+            '@ledgerhq/hw-transport-u2f'
+          )
+
+          transport = await TransportU2F.create()
+        } else {
+          const { default: TransportWebUsb } = await import(
+            '@ledgerhq/hw-transport-webusb'
+          )
+
+          transport = await TransportWebUsb.create()
+          transportSubscription = TransportWebUsb.listen(observer)
+        }
+      }
+
+      eth = new Eth(transport)
     } catch (error) {
-      throw new Error('Error connecting to Ledger wallet')
+      throw new Error(
+        'An error occurred when trying to connect to your Ledger wallet'
+      )
     }
   }
 

src/onboard.ts

@@ -52,7 +52,7 @@ function init(initialization: Initialization): API {
     hideBranding
   } = initialization
 
-  const { os, isMobile } = getDeviceInfo()
+  const { os, browser, isMobile } = getDeviceInfo()
 
   const initializedModules = initializeModules(
     networkId,
@@ -83,6 +83,7 @@ function init(initialization: Initialization): API {
     version,
     mobileDevice: isMobile,
     os,
+    browser,
     darkMode,
     displayBranding,
     checkModules: initializedModules.walletCheck

src/utilities.ts

@@ -215,19 +215,26 @@ export function getProviderName(provider: any): string | undefined {
     return 'MYKEY'
   }
 
+  if (provider.isHbWallet) {
+    return 'huobiwallet'
+  }
+
+
   if (provider.host && provider.host.indexOf('localhost') !== -1) {
     return 'localhost'
   }
 }
 
 export function getDeviceInfo() {
-  const browser = bowser.getParser(window.navigator.userAgent)
-  const { name } = browser.getOS()
-  const { type } = browser.getPlatform()
+  const parsed = bowser.getParser(window.navigator.userAgent)
+  const os = parsed.getOS()
+  const browser = parsed.getBrowser()
+  const { type } = parsed.getPlatform()
 
   return {
     isMobile: type ? type !== 'desktop' : window.innerWidth < 600,
-    os: name
+    os,
+    browser
   }
 }