Merge pull request #126 from blocknative/fix/balance-state

Make sure balance state is kept in sync.

Closes #125

Author: lnbc1QWFyb24

package.json

@@ -26,6 +26,7 @@
     "@babel/preset-env": "^7.5.5",
     "@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",
@@ -44,9 +45,10 @@
     "@walletconnect/web3-provider": "^1.0.0-beta.36",
     "authereum": "^0.0.4-beta.26",
     "bignumber.js": "^9.0.0",
-    "bnc-sdk": "1.0.0",
+    "bnc-sdk": "1.0.1",
     "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"

src/stores.ts

@@ -1,4 +1,5 @@
 import { writable, derived, get } from 'svelte/store'
+import debounce from 'lodash.debounce'
 import { getBlocknative } from './services'
 import { wait, makeQuerablePromise } from './utilities'
 import { validateWalletInterface, validateType } from './validation'
@@ -171,26 +172,32 @@ function createBalanceStore(initialState: string | null): BalanceStore {
           cancel = syncStateWithTimeout({
             getState: stateSyncer.get,
             setState: set,
-            timeout: 4000,
+            timeout: 2000,
             currentBalance: get(balance)
           })
 
           if (emitterAddress !== $address) {
             const blocknative = getBlocknative()
+
             emitter = blocknative.account(blocknative.clientIndex, $address)
               .emitter
-            emitter.on('txConfirmed', () => {
-              if (stateSyncer.get) {
-                cancel = syncStateWithTimeout({
-                  getState: stateSyncer.get,
-                  setState: set,
-                  timeout: 1500,
-                  currentBalance: get(balance)
-                })
-              }
-
-              return false
-            })
+
+            emitter.on(
+              'txConfirmed',
+              debounce(() => {
+                if (stateSyncer.get) {
+                  cancel = syncStateWithTimeout({
+                    getState: stateSyncer.get,
+                    setState: set,
+                    timeout: 2000,
+                    currentBalance: get(balance),
+                    pollStart: Date.now()
+                  })
+                }
+
+                return false
+              }, 500)
+            )
 
             emitter.on('all', () => false)
 
@@ -233,59 +240,56 @@ function createBalanceStore(initialState: string | null): BalanceStore {
   }
 }
 
-let timesTried: number = 0
-
 function syncStateWithTimeout(options: {
   getState: () => Promise<string | number | null>
   setState: (newState: string) => void
   timeout: number
   currentBalance: string
+  pollStart?: number
 }) {
-  if (timesTried < 4) {
-    timesTried++
-
-    const { getState, setState, timeout, currentBalance } = options
-    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 { getState, setState, timeout, currentBalance, pollStart } = options
 
-    balanceSyncStatus.syncing = prom
+  if (pollStart && Date.now() - pollStart > 25000) {
+    return () => {}
+  }
 
-    prom
-      .then(async (result: string) => {
-        if (result === currentBalance) {
-          await wait(150)
-          syncStateWithTimeout(options)
-        } else {
-          setState(result)
-        }
-      })
-      .catch(() => {})
+  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 timedOut = wait(timeout)
+  balanceSyncStatus.syncing = prom
 
-    timedOut.then(() => {
-      if (!prom.isFulfilled()) {
-        prom.cancel(() => {})
+  prom
+    .then(async (result: string) => {
+      if (result === currentBalance && pollStart) {
+        await wait(350)
+        syncStateWithTimeout(options)
+      } else {
+        setState(result)
       }
     })
+    .catch(() => {})
 
-    return () => prom.cancel(() => {})
-  } else {
-    timesTried = 0
-    return () => {}
-  }
+  const timedOut = wait(timeout)
+
+  timedOut.then(() => {
+    if (!prom.isFulfilled()) {
+      prom.cancel(() => {})
+    }
+  })
+
+  return () => prom.cancel(() => {})
 }