Merge pull request #262 from blocknative/develop

Release 1.4.0
blocknative · Mar 20, 2020 · bb7af45 · bb7af45
2 parents 2cac2af + 3d7d0a8
commit bb7af45
Show file tree

Hide file tree

Showing 24 changed files with 1,239 additions and 491 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.3.6",
+  "version": "1.4.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",
@@ -49,7 +49,10 @@
     "bnc-sdk": "1.1.0",
     "bowser": "^2.5.2",
     "ethereumjs-tx": "^2.1.2",
+    "ethereumjs-util": "^6.2.0",
+    "ethereumjs-wallet": "^0.6.3",
     "fortmatic": "^0.8.2",
+    "hdkey": "^1.1.1",
     "regenerator-runtime": "^0.13.3",
     "squarelink": "^1.1.4",
     "trezor-connect": "7.0.1",

diff --git a/rollup.config.js b/rollup.config.js
@@ -59,6 +59,8 @@ export default {
     'regenerator-runtime/runtime',
     'trezor-connect',
     'ethereumjs-tx',
+    'ethereumjs-util',
+    'hdkey',
     '@ledgerhq/hw-transport-u2f',
     '@ledgerhq/hw-app-eth',
     'util',

diff --git a/src/@types/index.d.ts b/src/@types/index.d.ts
@@ -8,6 +8,9 @@ declare module 'web3-provider-engine/subproviders/subscriptions'
 declare module 'web3-provider-engine/subproviders/filters'
 declare module 'trezor-connect'
 declare module 'ethereumjs-tx'
+declare module 'ethereumjs-util'
+declare module 'hdkey'
+// declare module 'ethereumjs-wallet/hdkey'
 declare module '@ledgerhq/hw-app-eth'
 declare module '@ledgerhq/hw-transport-u2f'
 

diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
@@ -80,10 +80,14 @@
   }
 </style>
 
-<aside transition:fade class="bn-onboard-custom bn-onboard-modal">
+<aside
+  transition:fade
+  class="bn-onboard-custom bn-onboard-modal"
+  on:click={closeModal}>
   <section
     class:bn-onboard-dark-mode={$app.darkMode}
-    class="bn-onboard-custom bn-onboard-modal-content">
+    class="bn-onboard-custom bn-onboard-modal-content"
+    on:click={e => e.stopPropagation()}>
     <slot />
     {#if closeable}
       <div

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -28,6 +28,10 @@ export interface WalletCheckModule {
   id?: string
 }
 
+export interface WalletCheckModule {
+  reset?: () => void
+}
+
 export interface WalletCheckModal {
   heading: string
   description: string

diff --git a/src/modules/check/accounts.ts b/src/modules/check/accounts.ts
@@ -1,19 +1,44 @@
-import { WalletCheckModule, StateAndHelpers } from '../../interfaces'
+import {
+  WalletCheckModule,
+  StateAndHelpers,
+  WalletCheckModal
+} from '../../interfaces'
+import { usbIcon } from './icons'
 
 type AccountsAndBalances = Array<{ balance: string; address: string }>
 
-function accountSelect(): WalletCheckModule | never {
+const msgStyles = `
+  display: block;
+  font-size: 0.889em;
+  font-family: inherit;
+  color: inherit;
+  margin-top: 0.5rem;
+`
+
+function accountSelect(
+  options: {
+    heading?: string
+    description?: string
+    icon?: string
+  } = {}
+): WalletCheckModule {
+  const { heading, description, icon } = options
   let completed: boolean = false
   let loadingAccounts: boolean = false
   let accountsAndBalances: AccountsAndBalances = []
 
-  return async (stateAndHelpers: StateAndHelpers) => {
-    const { wallet, BigNumber, address, balance } = stateAndHelpers
+  async function checkModule(
+    stateAndHelpers: StateAndHelpers
+  ): Promise<WalletCheckModal | undefined> {
+    const { wallet, BigNumber } = stateAndHelpers
     const { provider, type } = wallet
 
-    if (type === 'hardware' && !completed) {
-      if (accountsAndBalances.length <= 1 && !loadingAccounts) {
-        accountsAndBalances = [{ address, balance }]
+    if (type === 'hardware' && !completed && !provider.isCustomPath()) {
+      if (accountsAndBalances.length === 0) {
+        loadingAccounts = true
+        const accounts = await provider.enable()
+        accountsAndBalances = await provider.getBalances(accounts)
+        loadingAccounts = false
       }
 
       const deleteWindowProperties = () => {
@@ -23,8 +48,7 @@ function accountSelect(): WalletCheckModule | never {
 
       const loadMoreAccounts = async () => {
         loadingAccounts = true
-        const moreAccounts = await provider.getAllAccountsAndBalances()
-        accountsAndBalances = moreAccounts
+        accountsAndBalances = await provider.getMoreAccounts()
         loadingAccounts = false
       }
 
@@ -38,28 +62,35 @@ function accountSelect(): WalletCheckModule | never {
       ;(window as any).loadMoreAccounts = loadMoreAccounts
 
       return {
-        heading: 'Select Account',
-        description: `Please select which account you would like to use with this Dapp:`,
+        heading: heading || 'Select Account',
+        description:
+          description ||
+          `Please select which account you would like to use with this Dapp:`,
         eventCode: 'accountSelect',
         html: loadingAccounts
           ? `<div class="bn-onboard-custom bn-onboard-loading">
               <div class="bn-onboard-loading-first"></div>
               <div class="bn-onboard-loading-second"></div>
-              <div class="bn-onboard-loading-third"</div>
-            </div>`
+              <div class="bn-onboard-loading-third"></div>
+            </div>
+            <span style="${msgStyles}">Loading More Accounts...</span>
+            `
           : `
-          <select id="account-select" onchange="window.accountSelect()" style="padding: 0.5rem;">
-            ${accountsAndBalances.map(
-              (account: { balance: string; address: string }) =>
-                `<option value="${account.address}">${account.address} --- ${
-                  account.balance != null
-                    ? new BigNumber(account.balance)
-                        .div('1000000000000000000')
-                        .toFixed(3)
-                    : '0'
-                } ETH</option>`
-            )}
-          </select><button style="background: transparent; margin: 0 0.25rem; padding: 0.25rem 0.5rem; border-radius: 40px; cursor: pointer; color: inherit; border-color: inherit; border-width: 1px;" onclick="window.loadMoreAccounts()">Load More</button>
+          <div style="display: flex; align-items: center;">
+            <select id="account-select" onchange="window.accountSelect()" style="padding: 0.5rem;">
+              ${accountsAndBalances.map(
+                (account: { balance: string; address: string }) =>
+                  `<option>${account.address} --- ${
+                    account.balance != null
+                      ? new BigNumber(account.balance)
+                          .div('1000000000000000000')
+                          .toFixed(3)
+                      : '0'
+                  } ETH</option>`
+              )}
+            </select>
+            <button style="display: flex; align-items: center; text-align: center; height: 1.5rem; background: transparent; margin: 0 0.25rem; padding: 0 0.5rem; border-radius: 40px; cursor: pointer; color: inherit; border-color: inherit; border-width: 1px; border-style: solid;" onclick="window.loadMoreAccounts()">Load More</button>
+          </div>
         `,
         button: {
           onclick: () => {
@@ -68,12 +99,18 @@ function accountSelect(): WalletCheckModule | never {
           },
           text: 'Done'
         },
-        icon: `
-        <svg height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="m13.375 28c-1.86075 0-3.375-1.51425-3.375-3.375s1.51425-3.375 3.375-3.375 3.375 1.51425 3.375 3.375-1.51425 3.375-3.375 3.375zm0-4.5c-.619875 0-1.125.504-1.125 1.125s.505125 1.125 1.125 1.125 1.125-.504 1.125-1.125-.505125-1.125-1.125-1.125zm0-6.75c-1.86075 0-3.375-1.51425-3.375-3.375s1.51425-3.375 3.375-3.375 3.375 1.51425 3.375 3.375-1.51425 3.375-3.375 3.375zm0-4.5c-.619875 0-1.125.505125-1.125 1.125s.505125 1.125 1.125 1.125 1.125-.505125 1.125-1.125-.505125-1.125-1.125-1.125zm11.25 4.5c-1.86075 0-3.375-1.51425-3.375-3.375s1.51425-3.375 3.375-3.375 3.375 1.51425 3.375 3.375-1.51425 3.375-3.375 3.375zm0-4.5c-.621 0-1.125.505125-1.125 1.125s.504 1.125 1.125 1.125 1.125-.505125 1.125-1.125-.504-1.125-1.125-1.125zm-11.25 10.117125h-.014625c-.615375-.007875-1.110375-.50175-1.110375-1.117125 0-1.35675.898875-3.375 3.375-3.375h6.75c.50625-.0135 1.125-.219375 1.125-1.125v-1.125c0-.621.502875-1.125 1.125-1.125s1.125.504 1.125 1.125v1.125c0 2.476125-2.01825 3.375-3.375 3.375h-6.75c-.905625 0-1.1115.61875-1.125 1.1385-.01575.610875-.51525 1.103625-1.125 1.103625zm0 1.132875c-.621 0-1.125-.502875-1.125-1.125v-6.75c0-.621.504-1.125 1.125-1.125s1.125.504 1.125 1.125v6.75c0 .622125-.504 1.125-1.125 1.125z" fill="currentColor" transform="translate(-10 -10)"/></svg>
-        `
+        icon: icon || usbIcon
       }
     }
   }
+
+  checkModule.reset = () => {
+    completed = false
+    accountsAndBalances = []
+    loadingAccounts = false
+  }
+
+  return checkModule
 }
 
 export default accountSelect
diff --git a/src/modules/check/balance.ts b/src/modules/check/balance.ts
@@ -1,12 +1,18 @@
 import { WalletCheckModal, StateAndHelpers } from '../../interfaces'
 import { validateType } from '../../validation'
+import { balanceIcon } from './icons'
 
-function balance(options: {
-  minimumBalance: string
-}): (currentState: StateAndHelpers) => WalletCheckModal | undefined {
+function balance(
+  options: {
+    minimumBalance: string
+    heading?: string
+    description?: string
+    icon?: string
+  } = { minimumBalance: '0' }
+): (currentState: StateAndHelpers) => WalletCheckModal | undefined {
   validateType({ name: 'balance options', value: options, type: 'object' })
 
-  const { minimumBalance } = options
+  const { minimumBalance, heading, description, icon } = options
 
   validateType({
     name: 'minimumBalance',
@@ -17,18 +23,18 @@ function balance(options: {
   return (StateAndHelpers: StateAndHelpers) => {
     const { balance, BigNumber } = StateAndHelpers
     // if balance is less than minimum
-    if (BigNumber(balance).lt(BigNumber(minimumBalance || 0))) {
+    if (BigNumber(balance).lt(BigNumber(minimumBalance))) {
       return {
-        heading: 'Get Some ETH',
-        description: `Your current account has less than the necessary minimum balance of ${BigNumber(
-          minimumBalance
-        )
-          .div(BigNumber('1000000000000000000'))
-          .toString(10)} ETH.`,
+        heading: heading || 'Get Some ETH',
+        description:
+          description ||
+          `Your current account has less than the necessary minimum balance of ${BigNumber(
+            minimumBalance
+          )
+            .div(BigNumber('1000000000000000000'))
+            .toString(10)} ETH.`,
         eventCode: 'nsfFail',
-        icon: `
-        <svg height="18" viewBox="0 0 429 695" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><path d="m0 394 213 126.228516 214-126.228516-214 301z"/><path d="m0 353.962264 213.5-353.962264 213.5 353.962264-213.5 126.037736z"/></g></svg>
-        `
+        icon: icon || balanceIcon
       }
     }
   }

diff --git a/src/modules/check/connect.ts b/src/modules/check/connect.ts
@@ -1,17 +1,30 @@
-import { WalletCheckModal, StateAndHelpers } from '../../interfaces'
+import {
+  WalletCheckModal,
+  StateAndHelpers,
+  WalletCheckModule
+} from '../../interfaces'
+import { connectIcon } from './icons'
+
+function connect(
+  options: {
+    heading?: string
+    description?: string
+    icon?: string
+  } = {}
+): WalletCheckModule {
+  const { heading, description, icon } = options
 
-function connect() {
   return (stateAndHelpers: StateAndHelpers): WalletCheckModal | undefined => {
     const { wallet, address } = stateAndHelpers
     if (!address && wallet && wallet.name) {
       return {
-        heading: 'Login and Authorize Your Wallet',
-        description: `This dapp requires access to your wallet, please login and authorize access to your ${wallet.name} accounts to continue.`,
+        heading: heading || 'Login and Authorize Your Wallet',
+        description:
+          description ||
+          `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: `
-        <svg height="14" viewBox="0 0 18 14" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m10.29375 4.05351563c0-.04921875 0-.09140625 0-.13007813 0-1.0546875 0-2.109375 0-3.1640625 0-.43945312.3480469-.76992188.7804688-.7453125.2003906.01054688.3585937.10546875.4992187.24609375.5800781.58359375 1.1566406 1.16367188 1.7367187 1.74023438 1.4695313 1.46953125 2.9390625 2.93906249 4.4050782 4.40859375.1335937.13359375.2425781.27421875.2707031.46757812.0351562.20742188-.0246094.421875-.1652344.58007813-.0246094.028125-.0492187.05273437-.0738281.08085937-2.0601563 2.06367188-4.1203125 4.1238281-6.1804688 6.1875-.2109375.2109375-.4570312.3023438-.7453125.2179688-.2707031-.0808594-.4464843-.2707032-.5132812-.5484375-.0140625-.0738282-.0175781-.1441407-.0140625-.2179688 0-1.0335937 0-2.0707031 0-3.1042969 0-.0386719 0-.08085935 0-.13359372h-5.06953125c-.49570313 0-.80507813-.309375-.80507813-.80859375 0-1.42382813 0-2.84414063 0-4.26796875 0-.49570313.30585938-.8015625.8015625-.8015625h4.93593748z"/><path d="m5.69882812 13.978125h-4.01132812c-.928125 0-1.6875-.8753906-1.6875-1.9511719v-10.06171872c0-1.07578125.75585938-1.95117188 1.6875-1.95117188h4.01132812c.34101563 0 .61523438.31992188.61523438.71015625 0 .39023438-.27421875.71015625-.61523438.71015625h-4.01132812c-.253125 0-.45703125.23554688-.45703125.52734375v10.06171875c0 .2917969.20390625.5273437.45703125.5273437h4.01132812c.34101563 0 .61523438.3199219.61523438.7101563s-.27773438.7171875-.61523438.7171875z"/></g></svg>
-        `
+        icon: icon || connectIcon
       }
     }
   }