Merge pull request #52 from blocknative/develop

Release 0.2.6

Closes #46
Closes #47
Closes #48

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "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/@types/libraries.d.ts

@@ -1,7 +1,7 @@
 declare module "promise-cancelable" {
   export default class Cancelable extends Promise<any> {
     constructor(executor: any)
-    cancel(): any
+    cancel(func: () => void): any
     isFulfilled(): any
     isResolved(): any
     isRejected(): any

src/interfaces.ts

@@ -95,6 +95,9 @@ export interface Helpers {
   createLegacyProviderInterface: (provider: any) => WalletInterface
   createModernProviderInterface: (provider: any) => WalletInterface
   BigNumber: any
+  getAddress: (provider: any) => Promise<string | any>
+  getNetwork: (provider: any) => Promise<number | any>
+  getBalance: (provider: any) => Promise<string | any>
 }
 
 export interface WalletInterface {
@@ -216,7 +219,7 @@ export interface QuerablePromise extends CancelablePromise {
 }
 
 export interface CancelablePromise extends Promise<any> {
-  cancel: () => void
+  cancel: (func: () => void) => void
   isFulfilled: () => boolean
   isResolved: () => boolean
   isRejected: () => boolean

src/modules/select/wallets/dapper.ts

@@ -10,48 +10,14 @@ function dapper(): WalletModule {
     iconSrc: dapperIcon,
     iconSrcSet: dapperIcon2x,
     wallet: (helpers: Helpers) => {
-      const { getProviderName, BigNumber } = helpers
+      const { createModernProviderInterface, getProviderName } = helpers
       const provider = (window as any).ethereum
 
       return {
         provider,
         interface:
           provider && getProviderName(provider) === "Dapper"
-            ? {
-                name: "Dapper",
-                connect: provider.enable,
-                address: {
-                  get: () =>
-                    Promise.resolve(provider.cachedResults.eth_coinbase.result)
-                },
-                network: {
-                  get: () =>
-                    Promise.resolve(provider.cachedResults.net_version.result)
-                },
-                balance: {
-                  get: () =>
-                    new Promise(resolve => {
-                      if (!provider.cachedResults.eth_coinbase.result) {
-                        resolve(null)
-                        return
-                      }
-
-                      provider.sendAsync(
-                        {
-                          method: "eth_getBalance",
-                          params: [
-                            provider.cachedResults.eth_coinbase.result,
-                            "latest"
-                          ],
-                          id: 1
-                        },
-                        (e: any, res: any) => {
-                          resolve(BigNumber(res.result).toString(10))
-                        }
-                      )
-                    })
-                }
-              }
+            ? createModernProviderInterface(provider)
             : null
       }
     },

src/onboard.ts

@@ -56,7 +56,9 @@ function init(initialization: Initialization): API {
   if (subscriptions) {
     if (subscriptions.address) {
       address.subscribe((address: string | null) => {
-        address && subscriptions.address(address)
+        if (address !== null) {
+          subscriptions.address(address)
+        }
       })
     }
 
@@ -68,7 +70,9 @@ function init(initialization: Initialization): API {
 
     if (subscriptions.balance) {
       balance.subscribe((balance: string) => {
-        balance && subscriptions.balance(balance)
+        if (balance !== null) {
+          subscriptions.balance(balance)
+        }
       })
     }
 

src/stores.ts

@@ -41,7 +41,7 @@ export const network: WalletStateSliceStore = createWalletStateSliceStore({
   parameter: "network",
   initialState: null
 })
-export const balance: BalanceStore = createBalanceStore("")
+export const balance: BalanceStore = createBalanceStore(null)
 export const wallet: WritableStore = writable({
   name: null,
   provider: null,
@@ -106,14 +106,14 @@ function createWalletInterfaceStore(
 
 function createWalletStateSliceStore(options: {
   parameter: string
-  initialState: string | number | null
+  initialState: string | number | null | undefined
 }): WalletStateSliceStore {
   const { parameter, initialState } = options
   const { subscribe, set } = writable(initialState)
 
   return {
     subscribe,
-    reset: () => set(initialState),
+    reset: () => set(undefined),
     setStateSyncer: (stateSyncer: StateSyncer) => {
       validateType({ name: "stateSyncer", value: stateSyncer, type: "object" })
 
@@ -155,7 +155,7 @@ function createWalletStateSliceStore(options: {
   }
 }
 
-function createBalanceStore(initialState: string): BalanceStore {
+function createBalanceStore(initialState: string | null): BalanceStore {
   let stateSyncer: StateSyncer
   let emitter
 
@@ -181,7 +181,7 @@ function createBalanceStore(initialState: string): BalanceStore {
         emitter.on("all", () => false)
       } else {
         // no address, so set balance back to null
-        set && set(initialState)
+        set && set(undefined)
       }
     }
   })
@@ -234,7 +234,7 @@ function syncStateWithTimeout(options: {
             "There was a problem getting the balance of this wallet"
         })
       }
-    )
+    ).catch(() => {})
   )
 
   balanceSyncStatus.syncing = prom
@@ -251,7 +251,7 @@ function syncStateWithTimeout(options: {
 
   timedOut.then(() => {
     if (!prom.isFulfilled()) {
-      prom.cancel()
+      prom.cancel(() => {})
     }
   })
 }

src/utilities.ts

@@ -7,52 +7,91 @@ import {
   CancelablePromise
 } from "./interfaces"
 
+export function getNetwork(provider: any): Promise<number | any> {
+  return new Promise((resolve, reject) => {
+    provider.sendAsync(
+      {
+        method: "net_version",
+        params: [],
+        id: 42
+      },
+      (e: any, res: any) => {
+        e && reject(e)
+        resolve(Number(res && res.result))
+      }
+    )
+  })
+}
+
+export function getAddress(provider: any): Promise<string | any> {
+  return new Promise((resolve, reject) => {
+    provider.sendAsync(
+      {
+        method: "eth_accounts",
+        params: [],
+        id: 42
+      },
+      (e: any, res: any) => {
+        e && reject(e)
+        resolve(res && res.result && res.result[0])
+      }
+    )
+  })
+}
+
+export function getBalance(provider: any): Promise<string | any> {
+  return new Promise(async (resolve, reject) => {
+    const currentAddress = await getAddress(provider)
+
+    if (!currentAddress) {
+      resolve(null)
+      return
+    }
+
+    provider.sendAsync(
+      {
+        method: "eth_getBalance",
+        params: [currentAddress, "latest"],
+        id: 42
+      },
+      (e: any, res: any) => {
+        e && reject(e)
+        resolve(res && res.result && new BigNumber(res.result).toString(10))
+      }
+    )
+  })
+}
+
 export function createModernProviderInterface(provider: any): WalletInterface {
   provider.autoRefreshOnNetworkChange = false
 
-  return {
-    address: {
-      get: () => {
-        return Promise.resolve(provider.selectedAddress || null)
-      }
+  const onFuncExists = typeof provider.on === "function"
 
-      // METAMASK BUG NEEDS TO BE FIXED FOR CHROME: https://github.com/MetaMask/metamask-extension/issues/7101
-      // onChange: func => {
-      //   // give the initial value if it exists
-      //   if (provider.selectedAddress) {
-      //     func(provider.selectedAddress)
-      //   }
-      //   provider.on("accountsChanged", accounts => func(accounts[0]))
-      // }
-    },
-    network: {
-      onChange: (func: (val: string | number) => void) => {
-        // give the initial value if it exists
-        if (provider.networkVersion) {
-          func(provider.networkVersion)
+  return {
+    address: onFuncExists
+      ? {
+          onChange: func => {
+            // get the initial value
+            getAddress(provider).then(func)
+            provider.on("accountsChanged", (accounts: string[]) =>
+              func(accounts[0])
+            )
+          }
         }
-        provider.on("networkChanged", func)
-      }
-    },
-    balance: {
-      get: () =>
-        new Promise((resolve: (val: any) => void) => {
-          if (!provider.selectedAddress) {
-            resolve(null)
-            return
+      : {
+          get: () => getAddress(provider)
+        },
+    network: onFuncExists
+      ? {
+          onChange: (func: (val: string | number) => void) => {
+            // get initial value
+            getNetwork(provider).then(func)
+            provider.on("networkChanged", func)
           }
-
-          provider.sendAsync(
-            {
-              method: "eth_getBalance",
-              params: [provider.selectedAddress, "latest"],
-              id: 1
-            },
-            (e: any, res: any) => {
-              resolve(new BigNumber(res.result).toString(10))
-            }
-          )
-        })
+        }
+      : { get: () => getNetwork(provider) },
+    balance: {
+      get: () => getBalance(provider)
     },
     connect: () =>
       new Promise(
@@ -74,24 +113,13 @@ export function createModernProviderInterface(provider: any): WalletInterface {
 export function createLegacyProviderInterface(provider: any): WalletInterface {
   return {
     address: {
-      get: () => Promise.resolve(provider._address || provider.address)
+      get: () => getAddress(provider)
     },
     network: {
-      get: () => Promise.resolve(provider._chainId || provider.chainId)
+      get: () => getNetwork(provider)
     },
     balance: {
-      get: () =>
-        new Promise((resolve: (val: string | number | null) => void) => {
-          provider.sendAsync(
-            {
-              method: "eth_getBalance",
-              params: [provider._address, "latest"]
-            },
-            (e: any, res: any) => {
-              resolve(new BigNumber(res.result).toString(10))
-            }
-          )
-        })
+      get: () => getBalance(provider)
     },
     name: getProviderName(provider) || "unknown"
   }

src/views/WalletSelect.svelte

@@ -17,7 +17,10 @@
   import {
     getProviderName,
     createLegacyProviderInterface,
-    createModernProviderInterface
+    createModernProviderInterface,
+    getAddress,
+    getBalance,
+    getNetwork
   } from "../utilities";
 
   import {
@@ -102,7 +105,10 @@
       getProviderName,
       createLegacyProviderInterface,
       createModernProviderInterface,
-      BigNumber
+      BigNumber,
+      getNetwork,
+      getAddress,
+      getBalance
     });
 
     // if no interface then the user does not have the wallet they selected installed or available

tsconfig.json

@@ -1,9 +1,10 @@
 {
+  "include": ["src/**/*"],
   "exclude": ["node_modules/*"],
   "compilerOptions": {
     /* Basic Options */
-    "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
-    "module": "es2015" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    "target": "ESNEXT" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
+    "module": "ESNEXT" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
     // "lib": [],                             /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */