Merge pull request #323 from blocknative/develop

Release 1.7.7

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "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",
@@ -44,7 +44,7 @@
     "@portis/web3": "^2.0.0-beta.42",
     "@toruslabs/torus-embed": "^1.3.0",
     "@unilogin/provider": "^0.5.21",
-    "@walletconnect/web3-provider": "^1.0.0-beta.75",
+    "@walletconnect/web3-provider": "^1.0.0-beta.47",
     "authereum": "^0.0.4-beta.131",
     "bignumber.js": "^9.0.0",
     "bnc-sdk": "2.0.0",

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

@@ -1,6 +1,8 @@
 import HDKey from 'hdkey'
-import { publicToAddress, toChecksumAddress } from 'ethereumjs-util'
-import buffer from 'buffer'
+import * as ethUtil from 'ethereumjs-util'
+import * as buffer from 'buffer'
+
+const { publicToAddress, toChecksumAddress } = ethUtil
 
 const numberToGet = 5
 

src/modules/select/wallets/ledger.ts

@@ -4,17 +4,8 @@ import {
   Helpers,
   CommonWalletOptions
 } from '../../../interfaces'
-import ledgerIcon from '../wallet-icons/icon-ledger'
-
-import createProvider from './providerEngine'
-import { generateAddresses, isValidPath } from './hd-wallet'
-
-import TransportU2F from '@ledgerhq/hw-transport-u2f'
-import Eth from '@ledgerhq/hw-app-eth'
-import * as EthereumTx from 'ethereumjs-tx'
-import * as ethUtil from 'ethereumjs-util'
 
-import buffer from 'buffer'
+import ledgerIcon from '../wallet-icons/icon-ledger'
 
 const LEDGER_LIVE_PATH = `m/44'/60'`
 const ACCOUNTS_TO_GET = 5
@@ -81,6 +72,15 @@ async function ledgerProvider(options: {
   BigNumber: any
   networkName: (id: number) => string
 }) {
+  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')
+  const ethUtil = await import('ethereumjs-util')
+  const buffer = await import('buffer')
+
   const { networkId, rpcUrl, LedgerTransport, BigNumber, networkName } = options
 
   let dPath = ''

src/modules/select/wallets/trezor.ts

@@ -9,12 +9,6 @@ import trezorIcon from '../wallet-icons/icon-trezor'
 import createProvider from './providerEngine'
 import { generateAddresses, isValidPath } from './hd-wallet'
 
-import * as TrezorConnectLibrary from 'trezor-connect'
-import * as EthereumTx from 'ethereumjs-tx'
-import * as ethUtil from 'ethereumjs-util'
-
-const { default: TrezorConnect, DEVICE_EVENT, DEVICE } = TrezorConnectLibrary
-
 const TREZOR_DEFAULT_PATH = "m/44'/60'/0'/0"
 
 function trezor(options: TrezorOptions & CommonWalletOptions): WalletModule {
@@ -82,6 +76,12 @@ async function trezorProvider(options: {
   BigNumber: any
   networkName: (id: number) => string
 }) {
+  const TrezorConnectLibrary = await import('trezor-connect')
+  const EthereumTx = await import('ethereumjs-tx')
+  const ethUtil = await import('ethereumjs-util')
+
+  const { default: TrezorConnect, DEVICE_EVENT, DEVICE } = TrezorConnectLibrary
+
   const { networkId, email, appUrl, rpcUrl, BigNumber, networkName } = options
   let dPath: string = ''
 

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

@@ -10,19 +10,44 @@ import walletConnectIcon from '../wallet-icons/icon-wallet-connect'
 function walletConnect(
   options: WalletConnectOptions & CommonWalletOptions
 ): WalletModule {
-  const { infuraKey, rpc, bridge, preferred, label, iconSrc, svg } = options
+  const {
+    infuraKey,
+    rpc,
+    bridge,
+    preferred,
+    label,
+    iconSrc,
+    svg,
+    networkId
+  } = options
+
+  if (!infuraKey) {
+    if (!rpc || !rpc[networkId]) {
+      throw new Error(
+        `A "infuraKey" or a "rpc" object with a parameter of ${networkId} must be included in the WalletConnect initialization object`
+      )
+    }
+  }
 
   return {
     name: label || 'WalletConnect',
     svg: svg || walletConnectIcon,
     iconSrc,
     wallet: async (helpers: Helpers) => {
-      const { resetWalletState } = helpers
-
+      const createProvider = (await import('./providerEngine')).default
       const { default: WalletConnectProvider } = await import(
         '@walletconnect/web3-provider'
       )
 
+      const { resetWalletState, networkName, getBalance } = helpers
+
+      const rpcUrl =
+        rpc && rpc[networkId]
+          ? rpc[networkId]
+          : `https://${networkName(networkId)}.infura.io/v3/${infuraKey}`
+
+      const balanceProvider = createProvider({ rpcUrl })
+
       const provider = new WalletConnectProvider({
         infuraId: infuraKey,
         rpc,
@@ -68,18 +93,13 @@ function walletConnect(
             }
           },
           balance: {
-            get: () =>
-              new Promise(resolve => {
-                if (!provider.wc._accounts[0]) {
-                  resolve(null)
-                  return
-                }
+            get: async () => {
+              if (!provider.wc._accounts[0]) {
+                return null
+              }
 
-                provider.send('eth_getBalance', [
-                  provider.wc._accounts[0],
-                  'latest'
-                ])
-              })
+              return getBalance(balanceProvider, provider.wc._accounts[0])
+            }
           },
           disconnect: () => {
             provider.wc.killSession()

src/stores.ts

@@ -125,11 +125,12 @@ export function resetWalletState(options?: {
     // no options object, so do a full reset by disconnecting and setting interface to null
     if (!options) {
       wallet.update(() => ({
-        name: null,
-        provider: null,
-        connect: null,
-        instance: null,
-        dashboard: null
+        name: undefined,
+        provider: undefined,
+        connect: undefined,
+        instance: undefined,
+        dashboard: undefined,
+        type: undefined
       }))
 
       currentInterface.disconnect && currentInterface.disconnect()

src/views/WalletSelect.svelte

@@ -98,14 +98,6 @@
         deviceWallets.length > 4 ? deviceWallets.slice(4) : undefined
     }
 
-    modalData = {
-      heading,
-      description,
-      explanation,
-      primaryWallets,
-      secondaryWallets
-    }
-
     if (appState.autoSelectWallet) {
       const module = deviceWallets.find(
         (m: WalletModule) => m.name === appState.autoSelectWallet
@@ -114,15 +106,23 @@
       app.update(store => ({ ...store, autoSelectWallet: '' }))
 
       if (module) {
-        handleWalletSelect(module)
+        handleWalletSelect(module, true)
         return
       }
     }
 
+    modalData = {
+      heading,
+      description,
+      explanation,
+      primaryWallets,
+      secondaryWallets
+    }
+
     app.update(store => ({ ...store, walletSelectDisplayedUI: true }))
   }
 
-  async function handleWalletSelect(module: WalletModule) {
+  async function handleWalletSelect(module: WalletModule, autoSelected?: boolean) {
     const currentWalletInterface = get(walletInterface)
 
     if (currentWalletInterface && currentWalletInterface.name === module.name) {
@@ -163,7 +163,18 @@
           selectedWallet: selectedWalletModule.name
         })
 
-      app.update(store => ({ ...store, walletSelectDisplayedUI: true }))
+      // if it was autoSelected then we need to add modalData to show the modal
+      if (autoSelected) {
+        modalData = {
+          heading,
+          description,
+          explanation,
+          primaryWallets,
+          secondaryWallets
+        }
+
+        app.update(store => ({ ...store, walletSelectDisplayedUI: true }))
+      }
 
       return
     }