Merge pull request #113 from blocknative/develop

Release 1.0.4

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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/components/Modal.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-  import { fade } from "svelte/transition";
-  import { app } from "../stores";
-  export let closeModal: () => void;
+  import { fade } from 'svelte/transition'
+  import { app } from '../stores'
+  export let closeModal: () => void
 
-  let closeHovered: boolean;
+  let closeHovered: boolean
 </script>
 
 <style>
   /* === TARGET BY ELEMENT TO ALLOW CUSTOM OVERRIDES TO HAVE ADEQUATE SPECIFICITY ===*/
   /* .bn-onboard-modal */
   aside {
     display: flex;
-    font-family: "Helvetica Neue";
+    font-family: 'Helvetica Neue';
     justify-content: center;
     align-items: center;
     position: absolute;
     font-size: 16px;
-    z-index: 99999999;
+    z-index: 99;
     top: 0;
     left: 0;
     width: 100vw;
@@ -37,7 +37,7 @@
     background: #ffffff;
     border-radius: 10px;
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
-    font-family: "Helvetica Neue";
+    font-family: 'Helvetica Neue';
     font-size: inherit;
     padding: 1.33em;
     position: relative;

src/interfaces.ts

@@ -196,6 +196,7 @@ export interface WalletStateSliceStore {
 export interface BalanceStore {
   subscribe: (subscriber: (store: any) => void) => () => void
   setStateSyncer: (stateSyncer: StateSyncer) => number | undefined
+  reset: () => void
 }
 
 export interface AppState {

src/modules/select/wallets/wallet-connect.ts

@@ -40,7 +40,8 @@ function walletConnect(options: WalletConnectOptions): WalletModule {
         const { default: WalletConnectProvider } = await import(
           '@walletconnect/web3-provider'
         )
-        const provider = new WalletConnectProvider({
+
+        provider = new WalletConnectProvider({
           infuraId: infuraKey
         })
 
@@ -63,7 +64,10 @@ function walletConnect(options: WalletConnectOptions): WalletModule {
                   })
                 )
             }),
-          disconnect: () => provider.close(),
+          disconnect: () => {
+            provider.close()
+            provider = undefined
+          },
           address: {
             onChange: func => {
               provider

src/stores.ts

@@ -72,6 +72,7 @@ export const walletInterface: WalletInterfaceStore = createWalletInterfaceStore(
 walletInterface.subscribe((walletInterface: WalletInterface | null) => {
   if (walletInterface) {
     // reset state
+    balance.reset()
     address.reset()
     network.reset()
 
@@ -159,13 +160,14 @@ function createBalanceStore(initialState: string | null): BalanceStore {
   let stateSyncer: StateSyncer
   let emitter: any
   let emitterAddress: String
+  let cancel: () => void = () => {}
 
   const { subscribe } = derived(
     [address, network],
-    ([$address]: string[], set: any) => {
+    ([$address, $network]: string[], set: any) => {
       if (stateSyncer && !stateSyncer.onChange) {
-        if ($address && stateSyncer.get && set) {
-          syncStateWithTimeout({
+        if ($address && $network && stateSyncer.get && set) {
+          cancel = syncStateWithTimeout({
             getState: stateSyncer.get,
             setState: set,
             timeout: 4000,
@@ -177,13 +179,14 @@ function createBalanceStore(initialState: string | null): BalanceStore {
             emitter = blocknative.account(blocknative.clientIndex, $address)
               .emitter
             emitter.on('txConfirmed', () => {
-              stateSyncer.get &&
-                syncStateWithTimeout({
+              if (stateSyncer.get) {
+                cancel = syncStateWithTimeout({
                   getState: stateSyncer.get,
                   setState: set,
-                  timeout: 4000,
+                  timeout: 1500,
                   currentBalance: get(balance)
                 })
+              }
 
               return false
             })
@@ -224,51 +227,64 @@ function createBalanceStore(initialState: string | null): BalanceStore {
       stateSyncer = syncer
 
       return undefined
-    }
+    },
+    reset: cancel
   }
 }
 
+let timesTried: number = 0
+
 function syncStateWithTimeout(options: {
   getState: () => Promise<string | number | null>
   setState: (newState: string) => void
   timeout: number
   currentBalance: string
 }) {
-  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(() => {})
-  )
+  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(() => {})
+    )
 
-  balanceSyncStatus.syncing = prom
+    balanceSyncStatus.syncing = prom
 
-  prom
-    .then((result: string) => {
-      if (result === currentBalance) {
-        syncStateWithTimeout(options)
-      } else {
-        setState(result)
+    prom
+      .then(async (result: string) => {
+        if (result === currentBalance) {
+          await wait(150)
+          syncStateWithTimeout(options)
+        } else {
+          setState(result)
+        }
+      })
+      .catch(() => {})
+
+    const timedOut = wait(timeout)
+
+    timedOut.then(() => {
+      if (!prom.isFulfilled()) {
+        prom.cancel(() => {})
       }
     })
-    .catch(() => {})
 
-  const timedOut = wait(timeout)
-
-  timedOut.then(() => {
-    if (!prom.isFulfilled()) {
-      prom.cancel(() => {})
-    }
-  })
+    return () => prom.cancel(() => {})
+  } else {
+    timesTried = 0
+    return () => {}
+  }
 }