Merge pull request #142 from blocknative/develop

Release 1.1.7

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.1.6",
+  "version": "1.1.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",
@@ -27,10 +27,9 @@
     "@pyoner/svelte-ts-preprocess": "^1.2.1",
     "@rollup/plugin-json": "^4.0.0",
     "@types/lodash.debounce": "^4.0.6",
-    "@types/node": "^12.12.3",
     "babel-plugin-external-helpers": "^6.18.0",
     "rimraf": "^3.0.0",
-    "rollup": "^1.12.0",
+    "rollup": "^1.27.5",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-img": "^1.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
@@ -49,7 +48,6 @@
     "bowser": "^2.5.2",
     "fortmatic": "^0.8.2",
     "lodash.debounce": "^4.0.8",
-    "promise-cancelable": "^2.1.1",
     "regenerator-runtime": "^0.13.3",
     "squarelink": "^1.1.4"
   },

rollup.config.js

@@ -42,13 +42,14 @@ export default {
         importee === 'svelte' || importee.startsWith('svelte/')
     }),
     commonjs(),
-    typescript()
+    typescript({
+      clean: true
+    })
   ],
   external: [
     'bowser',
     'bnc-sdk',
     'bignumber.js',
-    'promise-cancelable',
     '@portis/web3',
     '@walletconnect/web3-provider',
     'fortmatic',

src/@types/images.d.ts

@@ -1,3 +1,10 @@
+declare module 'fortmatic'
+declare module 'squarelink'
+declare module '@walletconnect/web3-provider'
+
+declare module '*.png'
+declare module '*.svg'
+
 declare module 'svelte-i18n' {
   interface Options {
     fallback: string

src/@types/svelte-i18n.d.ts renamed to src/@types/index.d.ts

@@ -69,7 +69,7 @@
     </li>
   {/each}
 
-  {#if modalData.secondaryWallets && !showingAllWalletModules}
+  {#if modalData.secondaryWallets && modalData.secondaryWallets.length && !showingAllWalletModules}
     <div>
       <Button onclick={() => (showingAllWalletModules = true)}>
         Show More

src/@types/libraries.d.ts

@@ -208,14 +208,11 @@ export interface AppState {
   walletCheckCompleted: boolean
 }
 
-export interface QuerablePromise extends CancelablePromise {
-  isFulfilled: () => boolean
-  isResolved: () => boolean
-  isRejected: () => boolean
+export interface CancelablePromise extends Promise<any> {
+  cancel: () => void
 }
 
-export interface CancelablePromise extends Promise<any> {
-  cancel: (func: () => void) => void
+export interface QueryablePromise extends CancelablePromise {
   isFulfilled: () => boolean
   isResolved: () => boolean
   isRejected: () => boolean

src/components/Wallets.svelte

@@ -24,32 +24,33 @@ function authereum(options: {
     iconSrc: authereumIcon,
     wallet: async () => {
       const { default: Authereum } = await import('authereum')
-      const authereum = new Authereum({
+      const instance = new Authereum({
         networkName: networkName(networkId),
         disableNotifications: true
       })
 
-      const provider = authereum.getProvider()
+      const provider = instance.getProvider()
 
       return {
         provider,
+        instance,
         interface: {
           name: 'Authereum',
           connect: () => provider.enable(),
-          disconnect: () => authereum.logout(),
+          disconnect: () => instance.logout(),
           loading: new Promise((resolve: () => void) => {
-            authereum.on('openPopup', resolve)
+            instance.on('openPopup', resolve)
           }),
           address: {
-            get: () => authereum.getAccountAddress()
+            get: () => instance.getAccountAddress()
           },
           network: {
             get: () => Promise.resolve(networkId)
           },
           balance: {
             get: async () => {
-              const loggedIn = await authereum.isAuthenticated()
-              return loggedIn && authereum.getBalance()
+              const loggedIn = await instance.isAuthenticated()
+              return loggedIn && instance.getBalance()
             }
           }
         }

src/interfaces.ts

@@ -30,22 +30,17 @@ function fortmatic(options: SdkWalletOptions): WalletModule {
     optional: true
   })
 
-  let instance: any
-  let provider: any
-
   return {
     name: 'Fortmatic',
     svg: fortmaticIcon,
     wallet: async (helpers: Helpers) => {
-      if (!instance) {
-        const { default: Fortmatic } = await import('fortmatic')
+      const { default: Fortmatic } = await import('fortmatic')
 
-        instance = new Fortmatic(
-          apiKey,
-          networkId === 1 ? undefined : networkName(networkId)
-        )
-        provider = instance.getProvider()
-      }
+      const instance = new Fortmatic(
+        apiKey,
+        networkId === 1 ? undefined : networkName(networkId)
+      )
+      const provider = instance.getProvider()
 
       const { BigNumber } = helpers
 

src/modules/select/wallets/authereum.ts

@@ -20,18 +20,13 @@ function portis(options: SdkWalletOptions): WalletModule {
     optional: true
   })
 
-  let instance: any
-  let provider: any
-
   return {
     name: 'Portis',
     svg: portisIcon,
     wallet: async (helpers: Helpers) => {
-      if (!instance) {
-        const { default: Portis } = await import('@portis/web3')
-        instance = new Portis(apiKey, networkName(networkId))
-        provider = instance.provider
-      }
+      const { default: Portis } = await import('@portis/web3')
+      const instance = new Portis(apiKey, networkName(networkId))
+      const provider = instance.provider
 
       const { BigNumber } = helpers
 

src/modules/select/wallets/fortmatic.ts

@@ -29,22 +29,17 @@ function squarelink(options: SdkWalletOptions): WalletModule {
     optional: true
   })
 
-  let instance: any
-  let provider: any
-
   return {
     name: 'Squarelink',
     svg: sqlkIcon,
     wallet: async (helpers: Helpers) => {
-      if (!instance) {
-        const { default: Squarelink } = await import('squarelink')
+      const { default: Squarelink } = await import('squarelink')
 
-        instance = new Squarelink(apiKey, networkName(networkId), {
-          useSync: true
-        })
+      const instance = new Squarelink(apiKey, networkName(networkId), {
+        useSync: true
+      })
 
-        provider = instance.getProviderSync()
-      }
+      const provider = instance.getProviderSync()
 
       const { BigNumber } = helpers
 

src/modules/select/wallets/portis.ts

@@ -30,23 +30,19 @@ function walletConnect(options: WalletConnectOptions): WalletModule {
     optional: true
   })
 
-  let provider: any
-
   return {
     name: 'WalletConnect',
     svg: walletConnectIcon,
     wallet: async () => {
-      if (!provider) {
-        const { default: WalletConnectProvider } = await import(
-          '@walletconnect/web3-provider'
-        )
+      const { default: WalletConnectProvider } = await import(
+        '@walletconnect/web3-provider'
+      )
 
-        provider = new WalletConnectProvider({
-          infuraId: infuraKey
-        })
+      const provider = new WalletConnectProvider({
+        infuraId: infuraKey
+      })
 
-        provider.autoRefreshOnNetworkChange = false
-      }
+      provider.autoRefreshOnNetworkChange = false
 
       return {
         provider,
@@ -64,10 +60,6 @@ function walletConnect(options: WalletConnectOptions): WalletModule {
                   })
                 )
             }),
-          disconnect: () => {
-            provider.close()
-            provider = undefined
-          },
           address: {
             onChange: func => {
               provider

src/modules/select/wallets/squarelink.ts

@@ -1,19 +1,18 @@
-import { writable, derived, get } from 'svelte/store'
 import { getBlocknative } from './services'
-import { wait, makeQuerablePromise } from './utilities'
+import { writable, derived, get } from 'svelte/store'
+import debounce from 'lodash.debounce'
+import { wait, makeQueryablePromise, makeCancelable } from './utilities'
 import { validateWalletInterface, validateType } from './validation'
 import {
   WritableStore,
   WalletInterfaceStore,
   WalletInterface,
   WalletStateSliceStore,
   StateSyncer,
-  BalanceStore
+  BalanceStore,
+  QueryablePromise
 } from './interfaces'
 
-const { default: Cancelable } = require('promise-cancelable')
-const debounce = require('lodash.debounce')
-
 export const app: WritableStore = writable({
   dappId: '',
   networkId: 1,
@@ -23,11 +22,12 @@ export const app: WritableStore = writable({
   walletSelectInProgress: false,
   walletSelectCompleted: false,
   walletCheckInProgress: false,
-  walletCheckCompleted: false
+  walletCheckCompleted: false,
+  autoSelectWallet: ''
 })
 
 export const balanceSyncStatus: {
-  syncing: null | Promise<undefined>
+  syncing: null | QueryablePromise
   error: string
 } = {
   syncing: null,
@@ -253,22 +253,7 @@ function syncStateWithTimeout(options: {
     return () => {}
   }
 
-  const prom = makeQuerablePromise(
-    new Cancelable(
-      (
-        resolve: (val: string | number | null) => void,
-        reject: (err: any) => void,
-        onCancel: (callback: () => void) => void
-      ) => {
-        getState().then(resolve)
-
-        onCancel(() => {
-          balanceSyncStatus.error =
-            'There was a problem getting the balance of this wallet'
-        })
-      }
-    ).catch(() => {})
-  )
+  const prom = makeCancelable(getState())
 
   balanceSyncStatus.syncing = prom
 
@@ -286,10 +271,8 @@ function syncStateWithTimeout(options: {
   const timedOut = wait(timeout)
 
   timedOut.then(() => {
-    if (!prom.isFulfilled()) {
-      prom.cancel(() => {})
-    }
+    prom.cancel()
   })
 
-  return () => prom.cancel(() => {})
+  return () => prom.cancel()
 }