Merge pull request #292 from blocknative/develop

Release 1.7.2

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "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/interfaces.ts

@@ -68,6 +68,22 @@ export interface StateAndHelpers extends UserState {
   walletSelect: WalletSelectFunction
   wallet: Wallet
   exit: (completed?: boolean) => void
+  stateSyncStatus: {
+    [key: string]:
+      | null
+      | CancelablePromise
+      | Promise<Array<string>>
+      | Promise<string>
+      | Promise<void>
+    balance: null | CancelablePromise
+    address: null | Promise<Array<string>>
+    network: null | Promise<string>
+  }
+  stateStore: {
+    address: WalletStateSliceStore
+    network: WalletStateSliceStore
+    balance: BalanceStore
+  }
 }
 
 export interface WalletModule {
@@ -253,12 +269,14 @@ export interface WalletStateSliceStore {
   setStateSyncer: (
     stateSyncer: StateSyncer
   ) => { clear: () => void } | undefined
+  get: () => any
 }
 
 export interface BalanceStore {
   subscribe: (subscriber: (store: any) => void) => () => void
   setStateSyncer: (stateSyncer: StateSyncer) => undefined
   reset: () => void
+  get: () => any
 }
 
 export interface AppState {
@@ -274,6 +292,8 @@ export interface AppState {
   walletCheckInProgress: boolean
   walletCheckCompleted: boolean
   accountSelectInProgress: boolean
+  walletSelectDisplayedUI: boolean
+  walletCheckDisplayedUI: boolean
 }
 
 export interface CancelablePromise extends Promise<any> {

src/modules/check/balance.ts

@@ -9,7 +9,7 @@ function balance(
     description?: string
     icon?: string
   } = { minimumBalance: '0' }
-): (currentState: StateAndHelpers) => WalletCheckModal | undefined {
+): (currentState: StateAndHelpers) => Promise<WalletCheckModal | undefined> {
   validateType({ name: 'balance options', value: options, type: 'object' })
 
   const { minimumBalance, heading, description, icon } = options
@@ -20,10 +20,20 @@ function balance(
     type: 'string'
   })
 
-  return (StateAndHelpers: StateAndHelpers) => {
-    const { balance, BigNumber } = StateAndHelpers
+  return async (StateAndHelpers: StateAndHelpers) => {
+    const { balance, BigNumber, stateSyncStatus, stateStore } = StateAndHelpers
+
+    if (balance === null) {
+      // wait for balance sync if is still on initial value
+      if (stateSyncStatus.balance) {
+        try {
+          await stateSyncStatus.balance
+        } catch (error) {}
+      }
+    }
+
     // if balance is less than minimum
-    if (BigNumber(balance).lt(BigNumber(minimumBalance))) {
+    if (BigNumber(stateStore.balance.get()).lt(BigNumber(minimumBalance))) {
       return {
         heading: heading || 'Get Some ETH',
         description:

src/modules/check/connect.ts

@@ -14,9 +14,20 @@ function connect(
 ): WalletCheckModule {
   const { heading, description, icon } = options
 
-  return (stateAndHelpers: StateAndHelpers): WalletCheckModal | undefined => {
-    const { wallet, address } = stateAndHelpers
-    if (!address && wallet && wallet.name) {
+  return async (
+    stateAndHelpers: StateAndHelpers
+  ): Promise<WalletCheckModal | undefined> => {
+    const { wallet, address, stateSyncStatus, stateStore } = stateAndHelpers
+    if (address === null) {
+      // wait for address sync if is still on initial value
+      if (stateSyncStatus.address) {
+        try {
+          await stateSyncStatus.address
+        } catch (error) {}
+      }
+    }
+
+    if (!stateStore.address.get() && wallet && wallet.name) {
       return {
         heading: heading || 'Login and Authorize Your Wallet',
         description:

src/modules/check/derivation-path.ts

@@ -97,11 +97,13 @@ function derivationPath(
           .map((derivation: { path?: string; label: string }) => {
             const { path, label } = derivation
             return `
-              <button style="${baseStyles +
+              <button style="${
+                baseStyles +
                 buttonStyles +
                 (state.dPath === path && !state.showCustomInput
                   ? selectedStyles
-                  : '')}" onclick="window.handleDerivationClick(this)" data-path="${path}">
+                  : '')
+              }" onclick="window.handleDerivationClick(this)" data-path="${path}">
                 ${label} - ${path}
               </button>
             `
@@ -110,8 +112,9 @@ function derivationPath(
         ${
           state.showCustomInput
             ? customInputHtmlString(state.error)
-            : `<button style="${baseStyles +
-                buttonStyles}" onclick="window.handleDerivationClick(this)" data-path="custom">Custom Path</button>`
+            : `<button style="${
+                baseStyles + buttonStyles
+              }" onclick="window.handleDerivationClick(this)" data-path="custom">Custom Path</button>`
         }
         ${
           state.loading
@@ -178,7 +181,6 @@ function derivationPath(
       }
       ;(window as any).handleCustomInput = handleCustomInput
       ;(window as any).handleDerivationClick = handleDerivationClick
-
       return {
         heading: heading || 'Hardware Wallet Connect',
         description:

src/modules/check/network.ts

@@ -1,5 +1,5 @@
 import { networkName } from '../../utilities'
-import { WalletCheckModule, StateAndHelpers } from '../../interfaces'
+import { WalletCheckModal, StateAndHelpers } from '../../interfaces'
 import { networkIcon } from './icons'
 
 function network(
@@ -8,13 +8,29 @@ function network(
     description?: string
     icon?: string
   } = {}
-): WalletCheckModule | never {
+): (currentState: StateAndHelpers) => Promise<WalletCheckModal | undefined> {
   const { heading, description, icon } = options
 
-  return (stateAndHelpers: StateAndHelpers) => {
-    const { network, appNetworkId, walletSelect, exit } = stateAndHelpers
+  return async (stateAndHelpers: StateAndHelpers) => {
+    const {
+      network,
+      appNetworkId,
+      walletSelect,
+      exit,
+      stateSyncStatus,
+      stateStore
+    } = stateAndHelpers
 
-    if (network != appNetworkId) {
+    if (network === null) {
+      // wait for network sync if is still on initial value
+      if (stateSyncStatus.network) {
+        try {
+          await stateSyncStatus.network
+        } catch (error) {}
+      }
+    }
+
+    if (stateStore.network.get() != appNetworkId) {
       return {
         heading: heading || 'You Must Change Networks',
         description:

src/onboard.ts

@@ -116,11 +116,22 @@ function init(initialization: Initialization): API {
       }))
 
       const appUnsubscribe = app.subscribe((store: AppState) => {
-        const { walletSelectInProgress, walletSelectCompleted } = store
+        const {
+          walletSelectInProgress,
+          walletSelectCompleted,
+          walletSelectDisplayedUI
+        } = store
 
         if (walletSelectInProgress === false) {
           appUnsubscribe()
-          setTimeout(() => resolve(walletSelectCompleted), 500)
+
+          // timeout for UI transitions if it was displayed
+          walletSelectDisplayedUI
+            ? setTimeout(() => {
+                resolve(walletSelectCompleted)
+                app.update(store => ({ ...store, displayedUI: false }))
+              }, 500)
+            : resolve(walletSelectCompleted)
         }
       })
     })
@@ -138,10 +149,19 @@ function init(initialization: Initialization): API {
       }))
 
       const appUnsubscribe = app.subscribe((store: AppState) => {
-        const { walletCheckInProgress, walletCheckCompleted } = store
+        const {
+          walletCheckInProgress,
+          walletCheckCompleted,
+          walletCheckDisplayedUI
+        } = store
         if (walletCheckInProgress === false) {
           appUnsubscribe()
-          setTimeout(() => resolve(walletCheckCompleted), 500)
+          walletCheckDisplayedUI
+            ? setTimeout(() => {
+                resolve(walletCheckCompleted)
+                app.update(store => ({ ...store, displayedUI: false }))
+              }, 500)
+            : resolve(walletCheckCompleted)
         }
       })
     })
@@ -164,10 +184,15 @@ function init(initialization: Initialization): API {
       }))
 
       const appUnsubscribe = app.subscribe((store: AppState) => {
-        const { accountSelectInProgress } = store
+        const { accountSelectInProgress, walletSelectDisplayedUI } = store
         if (accountSelectInProgress === false) {
           appUnsubscribe()
-          setTimeout(() => resolve(true), 500)
+          walletSelectDisplayedUI
+            ? setTimeout(() => {
+                resolve(true)
+                app.update(store => ({ ...store, displayedUI: false }))
+              }, 500)
+            : resolve(true)
         }
       })
     })

src/stores.ts

@@ -26,15 +26,25 @@ export const app: WritableStore = writable({
   walletCheckCompleted: false,
   accountSelectInProgress: false,
   autoSelectWallet: '',
-  checkModules: []
+  checkModules: [],
+  walletSelectDisplayedUI: false,
+  walletCheckDisplayedUI: false
 })
 
-export const balanceSyncStatus: {
-  syncing: null | CancelablePromise
-  error: string
+export const stateSyncStatus: {
+  [key: string]:
+    | null
+    | CancelablePromise
+    | Promise<Array<string>>
+    | Promise<string>
+    | Promise<void>
+  balance: null | CancelablePromise
+  address: null | Promise<Array<string>>
+  network: null | Promise<string>
 } = {
-  syncing: null,
-  error: ''
+  balance: null,
+  address: null,
+  network: null
 }
 
 export const address: WalletStateSliceStore = createWalletStateSliceStore({
@@ -155,8 +165,7 @@ export function resetWalletState(options?: {
     return {
       ...store,
       walletSelectInProgress: false,
-      walletSelectCompleted: false,
-      autoSelect: false
+      walletSelectCompleted: false
     }
   })
 }
@@ -202,6 +211,7 @@ function createWalletStateSliceStore(options: {
     reset: () => {
       set(undefined)
     },
+    get: () => currentState,
     setStateSyncer: (stateSyncer: StateSyncer) => {
       validateType({ name: 'stateSyncer', value: stateSyncer, type: 'object' })
 
@@ -222,18 +232,22 @@ function createWalletStateSliceStore(options: {
       })
 
       if (onChange) {
-        onChange(newVal => {
-          if (newVal || currentState !== initialState) {
-            set(newVal)
-          }
+        stateSyncStatus[parameter] = new Promise(resolve => {
+          onChange(newVal => {
+            resolve()
+            if (newVal || currentState !== initialState) {
+              set(newVal)
+            }
+          })
         })
         return
       }
 
       if (get) {
         const interval: any = createInterval(() => {
-          get()
+          stateSyncStatus[parameter] = get()
             .then(newVal => {
+              stateSyncStatus[parameter] = null
               if (newVal || currentState !== initialState) {
                 interval.status.active && set(newVal)
               }
@@ -242,6 +256,7 @@ function createWalletStateSliceStore(options: {
               console.warn(
                 `Error getting ${parameter} from state syncer: ${err}`
               )
+              stateSyncStatus[parameter] = null
             })
         }, 200)
 
@@ -311,8 +326,14 @@ function createBalanceStore(initialState: string | null): BalanceStore {
     }
   )
 
+  let currentState: string | null
+  subscribe((store: any) => {
+    currentState = store
+  })
+
   return {
     subscribe,
+    get: () => currentState,
     setStateSyncer: (syncer: StateSyncer) => {
       validateType({ name: 'syncer', value: syncer, type: 'object' })
 
@@ -355,18 +376,21 @@ function syncStateWithTimeout(options: {
 
   const prom = makeCancelable(getState())
 
-  balanceSyncStatus.syncing = prom
+  stateSyncStatus.balance = prom
 
   prom
     .then(async (result: string) => {
       if (result === currentBalance && pollStart) {
         await wait(350)
         syncStateWithTimeout(options)
       } else {
+        stateSyncStatus.balance = null
         setState(result)
       }
     })
-    .catch(() => {})
+    .catch(() => {
+      stateSyncStatus.balance = null
+    })
 
   const timedOut = wait(timeout)