Merge pull request #355 from blocknative/develop

Release 1.9.1

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "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",

src/components/Modal.svelte

@@ -52,7 +52,7 @@
   div {
     height: 0.66em;
     position: absolute;
-    padding: 0.8em;
+    padding: 0.25em;
     top: 1.33em;
     right: 1.33em;
     font-size: inherit;

src/elements/Button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { app } from '../stores'
   export let onclick: () => void = () => {}
+  export let position: string
 </script>
 
 <style>
@@ -24,11 +25,22 @@
   button:hover {
     background: #ecf3fc;
   }
+
+  .bn-onboard-prepare-button-right {
+    position: absolute;
+    right: 0;
+  }
+
+  .bn-onboard-prepare-button-left {
+    position: absolute;
+    left: 0;
+  }
 </style>
 
 <button
   on:click={onclick}
-  class="bn-onboard-custom bn-onboard-button"
+  class:bn-onboard-prepare-button-right={position === 'right'}
+  class:bn-onboard-prepare-button-left={position === 'left'}
   class:bn-onboard-dark-mode-link={$app.darkMode}
   class:bn-onboard-dark-mode-background-hover={$app.darkMode}>
   <slot />

src/interfaces.ts

@@ -249,9 +249,20 @@ export type AllWalletInitOptions = CommonWalletOptions &
   ImTokenOptions &
   TrustWalletOptions & { networkId: number }
 
-export interface WalletCheckInit {
-  checkName: string
+export interface WalletCheckCustomOptions {
+  heading?: string
+  description?: string
   minimumBalance?: string
+  icon?: string
+  button?: {
+    text: string
+    onclick: () => void
+  }
+  html?: string
+}
+
+export interface WalletCheckInit extends WalletCheckCustomOptions {
+  checkName: string
 }
 
 export interface WalletSelectFunction {

src/modules/check/balance.ts

@@ -1,24 +1,16 @@
-import { WalletCheckModal, StateAndHelpers } from '../../interfaces'
-import { validateType } from '../../validation'
+import {
+  WalletCheckModal,
+  StateAndHelpers,
+  WalletCheckCustomOptions
+} from '../../interfaces'
 import { balanceIcon } from './icons'
 
 function balance(
-  options: {
-    minimumBalance: string
-    heading?: string
-    description?: string
-    icon?: string
-  } = { minimumBalance: '0' }
+  options: WalletCheckCustomOptions & { minimumBalance: string } = {
+    minimumBalance: '0'
+  }
 ): (currentState: StateAndHelpers) => Promise<WalletCheckModal | undefined> {
-  validateType({ name: 'balance options', value: options, type: 'object' })
-
-  const { minimumBalance, heading, description, icon } = options
-
-  validateType({
-    name: 'minimumBalance',
-    value: minimumBalance,
-    type: 'string'
-  })
+  const { minimumBalance, heading, description, icon, html, button } = options
 
   return async (StateAndHelpers: StateAndHelpers) => {
     const { balance, BigNumber, stateSyncStatus, stateStore } = StateAndHelpers
@@ -44,7 +36,9 @@ function balance(
             .div(BigNumber('1000000000000000000'))
             .toString(10)} ETH.`,
         eventCode: 'nsfFail',
-        icon: icon || balanceIcon
+        icon: icon || balanceIcon,
+        html,
+        button
       }
     }
   }

src/modules/check/connect.ts

@@ -1,18 +1,13 @@
 import {
   WalletCheckModal,
   StateAndHelpers,
-  WalletCheckModule
+  WalletCheckModule,
+  WalletCheckCustomOptions
 } from '../../interfaces'
 import { connectIcon } from './icons'
 
-function connect(
-  options: {
-    heading?: string
-    description?: string
-    icon?: string
-  } = {}
-): WalletCheckModule {
-  const { heading, description, icon } = options
+function connect(options: WalletCheckCustomOptions = {}): WalletCheckModule {
+  const { heading, description, icon, html, button } = options
 
   return async (
     stateAndHelpers: StateAndHelpers
@@ -42,7 +37,9 @@ function connect(
           `This dapp requires access to your wallet, please login and authorize access to your ${wallet.name} accounts to continue.`,
         eventCode: 'loginFail',
         action: wallet.connect,
-        icon: icon || connectIcon
+        icon: icon || connectIcon,
+        html,
+        button
       }
     }
   }

src/modules/check/network.ts

@@ -1,15 +1,15 @@
 import { networkName } from '../../utilities'
-import { WalletCheckModal, StateAndHelpers } from '../../interfaces'
+import {
+  WalletCheckModal,
+  StateAndHelpers,
+  WalletCheckCustomOptions
+} from '../../interfaces'
 import { networkIcon } from './icons'
 
 function network(
-  options: {
-    heading?: string
-    description?: string
-    icon?: string
-  } = {}
+  options: WalletCheckCustomOptions = {}
 ): (currentState: StateAndHelpers) => Promise<WalletCheckModal | undefined> {
-  const { heading, description, icon } = options
+  const { heading, description, icon, html, button } = options
 
   return async (stateAndHelpers: StateAndHelpers) => {
     const {
@@ -48,13 +48,14 @@ function network(
             appNetworkId
           )} network</b> for this Dapp. <br><br> <i style="font-size: inherit; font-family: inherit;">*Some wallets may not support changing networks. If you can not change networks in your wallet you may consider switching to a different wallet.</i>`,
         eventCode: 'networkFail',
-        button: {
+        button: button || {
           onclick: () => {
             exit()
             walletSelect()
           },
           text: 'Switch Wallet'
         },
+        html,
         icon: icon || networkIcon
       }
     }

src/modules/select/wallets/ledger.ts

@@ -137,18 +137,8 @@ async function ledgerProvider(options: {
   let transport: any
   let eth: any
 
-  try {
-    transport = LedgerTransport
-      ? await LedgerTransport.create()
-      : await TransportU2F.create()
-
-    eth = new Eth(transport)
-  } catch (error) {
-    throw new Error('Error connecting to Ledger wallet')
-  }
-
   function disconnect() {
-    transport.close()
+    transport && transport.close()
     dPath = ''
     addressToPath = new Map()
     enabled = false
@@ -183,6 +173,32 @@ async function ledgerProvider(options: {
     return customPath
   }
 
+  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: () => {},
+        complete: () => {}
+      }
+
+      LedgerTransport
+        ? LedgerTransport.listen(observer)
+        : TransportU2F.listen(observer)
+    } catch (error) {
+      throw new Error('Error connecting to Ledger wallet')
+    }
+  }
+
   function enable() {
     enabled = true
     return getAccounts()
@@ -205,6 +221,10 @@ async function ledgerProvider(options: {
   }
 
   async function getAddress(path: string) {
+    if (!eth) {
+      await createTransport()
+    }
+
     try {
       const result = await eth.getAddress(path)
       return result.address
@@ -216,6 +236,10 @@ async function ledgerProvider(options: {
       throw new Error('a derivation path is needed to get the public key')
     }
 
+    if (!eth) {
+      await createTransport()
+    }
+
     try {
       const result = await eth.getAddress(dPath, false, true)
       const { publicKey, chainCode } = result

src/validation.ts

@@ -337,13 +337,68 @@ function validateWalletCheck(
       validateWalletCheckModule(check)
     } else {
       validateType({ name: 'walletCheck item', value: check, type: 'object' })
-      const { checkName, minimumBalance, ...otherParams } = check
+      const {
+        checkName,
+        heading,
+        description,
+        minimumBalance,
+        html,
+        icon,
+        button,
+        ...otherParams
+      } = check
+
       invalidParams(
         otherParams,
-        ['checkName', 'minimumBalance'],
+        [
+          'checkName',
+          'heading',
+          'description',
+          'html',
+          'icon',
+          'button',
+          'minimumBalance'
+        ],
         'walletCheck item'
       )
+
       validateType({ name: 'checkName', value: checkName, type: 'string' })
+
+      validateType({
+        name: 'heading',
+        value: heading,
+        type: 'string',
+        optional: true
+      })
+
+      validateType({
+        name: 'description',
+        value: description,
+        type: 'string',
+        optional: true
+      })
+
+      validateType({
+        name: 'html',
+        value: html,
+        type: 'string',
+        optional: true
+      })
+
+      validateType({
+        name: 'icon',
+        value: icon,
+        type: 'string',
+        optional: true
+      })
+
+      validateType({
+        name: 'button',
+        value: button,
+        type: 'object',
+        optional: true
+      })
+
       validateType({
         name: 'minimumBalance',
         value: minimumBalance,
@@ -520,33 +575,6 @@ export function validateWalletInterface(
   })
 }
 
-export function validateWalletCheckInit(
-  walletCheckInit: WalletCheckInit[]
-): void | never {
-  validateType({
-    name: 'walletCheckInit',
-    value: walletCheckInit,
-    type: 'array'
-  })
-
-  walletCheckInit.forEach(init => {
-    validateType({ name: 'walletCheckInit', value: init, type: 'object' })
-
-    validateType({
-      name: 'walletCheckInit.checkName',
-      value: init.checkName,
-      type: 'string'
-    })
-
-    validateType({
-      name: 'walletCheckInit.minimumBalance',
-      value: init.minimumBalance,
-      type: 'string',
-      optional: true
-    })
-  })
-}
-
 export function validateWalletInit(
   walletInit: WalletInitOptions
 ): void | never {