Merge pull request #179 from blocknative/develop

Release 1.2.0

- Add `walletReset` function
- Ensure WalletConnect disconnects

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.1.11",
+  "version": "1.2.0",
   "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",
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@portis/web3": "^2.0.0-beta.42",
-    "@walletconnect/web3-provider": "^1.0.0-beta.36",
+    "@walletconnect/web3-provider": "^1.0.0-beta.45",
     "authereum": "^0.0.4-beta.26",
     "bignumber.js": "^9.0.0",
     "bnc-sdk": "1.0.3",

src/components/Wallets.svelte

@@ -22,7 +22,7 @@
     overflow-y: scroll;
     padding: 0;
     scrollbar-width: none;
-    font-family: 'Helvetica Neue';
+    font-family: inherit;
     font-size: inherit;
     line-height: 1.15;
     box-sizing: border-box;

src/elements/Button.svelte

@@ -13,7 +13,7 @@
     padding: 0.55em 1.4em;
     cursor: pointer;
     color: #4a90e2;
-    font-family: "Helvetica Neue";
+    font-family: inherit;
     transition: background 150ms ease-in-out;
     line-height: 1.15;
   }

src/elements/IconButton.svelte

@@ -25,7 +25,7 @@
     cursor: pointer;
     color: inherit;
     line-height: 1.15;
-    font-family: 'Helvetica Neue';
+    font-family: inherit;
   }
 
   button:hover {

src/interfaces.ts

@@ -94,6 +94,7 @@ export interface Helpers {
   getAddress: (provider: any) => Promise<string | any>
   getNetwork: (provider: any) => Promise<number | any>
   getBalance: (provider: any) => Promise<string | any>
+  resetWalletState: (options: { disconnected?: boolean }) => void
 }
 
 export interface WalletInterface {
@@ -108,7 +109,7 @@ export interface WalletInterface {
 
 export interface StateSyncer {
   get?: () => Promise<string | number | null>
-  onChange?: (updater: (val: number | string) => void) => void
+  onChange?: (updater: (val: number | string | undefined) => void) => void
 }
 
 export interface Wallet {
@@ -176,6 +177,7 @@ export interface ConfigOptions {
 export interface API {
   walletSelect: WalletSelectFunction
   walletCheck: WalletCheck
+  walletReset: () => void
   config: Config
   getState: GetState
 }
@@ -189,7 +191,7 @@ export interface WritableStore {
 export interface WalletInterfaceStore {
   subscribe: (subscriber: (store: any) => void) => () => void
   update: (
-    updater: (walletInterface: WalletInterface | null) => WalletInterface
+    updater: (walletInterface: WalletInterface | null) => WalletInterface | null
   ) => void
   set: (walletInterface: WalletInterface) => void | never
 }

src/modules/select/content.ts

@@ -6,33 +6,33 @@ export const extensionInstallMessage = (helpers: {
 
   if (currentWallet) {
     return `
-    <p style="font-size: 0.889rem; font-family: Helvetica Neue; margin: 0.889rem 0;">
+    <p style="font-size: 0.889rem; font-family: inherit; margin: 0.889rem 0;">
     We have detected that you already have
     <b>${currentWallet}</b>
     installed. If you would prefer to use
     <b>${selectedWallet}</b>
     instead, then click below to install.
     </p>
-    <p style="font-size: 0.889rem; font-family: Helvetica Neue; margin: 0.889rem 0;">
+    <p style="font-size: 0.889rem; font-family: inherit; margin: 0.889rem 0;">
     <b>Tip:</b>
     If you already have ${selectedWallet} installed, check your
     browser extension settings to make sure that you have it enabled
     and that you have disabled any other browser extension wallets.
     <span
       class="bn-onboard-clickable"
-      style="color: #4a90e2; font-size: 0.889rem; font-family: Helvetica Neue;"
+      style="color: #4a90e2; font-size: 0.889rem; font-family: inherit;"
       onclick="window.location.reload();">
       Then refresh the page.
     </span>
     </p>
     `
   } else {
     return `
-    <p style="font-size: 0.889rem; font-family: Helvetica Neue; margin: 0.889rem 0;">
+    <p style="font-size: 0.889rem; font-family: inherit; margin: 0.889rem 0;">
     You'll need to install <b>${selectedWallet}</b> to continue. Once you have it installed, go ahead and
     <span
     class="bn-clickable"
-      style="color: #4a90e2; font-size: 0.889rem; font-family: Helvetica Neue;"
+      style="color: #4a90e2; font-size: 0.889rem; font-family: inherit;"
       onclick={window.location.reload();}>
       refresh the page.
     </span>

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

@@ -1,4 +1,8 @@
-import { WalletConnectOptions, WalletModule } from '../../../interfaces'
+import {
+  WalletConnectOptions,
+  WalletModule,
+  Helpers
+} from '../../../interfaces'
 
 import walletConnectIcon from '../wallet-icons/icon-wallet-connect'
 
@@ -9,7 +13,9 @@ function walletConnect(options: WalletConnectOptions): WalletModule {
     name: label || 'WalletConnect',
     svg: svg || walletConnectIcon,
     iconSrc,
-    wallet: async () => {
+    wallet: async (helpers: Helpers) => {
+      const { resetWalletState } = helpers
+
       const { default: WalletConnectProvider } = await import(
         '@walletconnect/web3-provider'
       )
@@ -20,6 +26,10 @@ function walletConnect(options: WalletConnectOptions): WalletModule {
 
       provider.autoRefreshOnNetworkChange = false
 
+      provider.wc.on('disconnect', () => {
+        resetWalletState({ disconnected: true })
+      })
+
       return {
         provider,
         interface: {
@@ -40,7 +50,7 @@ function walletConnect(options: WalletConnectOptions): WalletModule {
             onChange: func => {
               provider
                 .send('eth_accounts')
-                .then((accounts: string[]) => func(accounts[0]))
+                .then((accounts: string[]) => accounts[0] && func(accounts[0]))
               provider.on('accountsChanged', (accounts: string[]) =>
                 func(accounts[0])
               )
@@ -65,6 +75,10 @@ function walletConnect(options: WalletConnectOptions): WalletModule {
                   'latest'
                 ])
               })
+          },
+          disconnect: () => {
+            provider.wc.killSession()
+            provider.stop()
           }
         }
       }

src/onboard.ts

@@ -11,7 +11,8 @@ import {
   balance,
   wallet,
   state,
-  walletInterface
+  walletInterface,
+  resetWalletState
 } from './stores'
 
 import { getDeviceInfo } from './utilities'
@@ -84,7 +85,9 @@ function init(initialization: Initialization): API {
 
     if (subscriptions.network) {
       network.subscribe((networkId: number | null) => {
-        networkId && subscriptions.network(networkId)
+        if (networkId !== null) {
+          subscriptions.network(networkId)
+        }
       })
     }
 
@@ -98,7 +101,7 @@ function init(initialization: Initialization): API {
 
     if (subscriptions.wallet) {
       wallet.subscribe((wallet: Wallet) => {
-        wallet.provider && subscriptions.wallet(wallet)
+        wallet.provider !== null && subscriptions.wallet(wallet)
       })
     }
   }
@@ -144,6 +147,10 @@ function init(initialization: Initialization): API {
     })
   }
 
+  function walletReset(): void {
+    resetWalletState()
+  }
+
   function config(options: ConfigOptions): void {
     validateConfig(options)
     app.update((store: AppState) => ({ ...store, ...options }))
@@ -153,7 +160,7 @@ function init(initialization: Initialization): API {
     return get(state)
   }
 
-  return { walletSelect, walletCheck, config, getState }
+  return { walletSelect, walletCheck, walletReset, config, getState }
 }
 
 export default init

src/stores.ts

@@ -76,10 +76,11 @@ export const walletInterface: WalletInterfaceStore = createWalletInterfaceStore(
 
 walletInterface.subscribe((walletInterface: WalletInterface | null) => {
   if (walletInterface) {
+    const currentState = get(state)
     // reset state
-    balance.reset()
-    address.reset()
-    network.reset()
+    currentState.balance && balance.reset()
+    currentState.address && address.reset()
+    currentState.network && network.reset()
 
     // clear all current intervals if they exist
     currentSyncerIntervals.forEach(
@@ -95,6 +96,42 @@ walletInterface.subscribe((walletInterface: WalletInterface | null) => {
   }
 })
 
+export function resetWalletState(options: { disconnected?: boolean } = {}) {
+  // clear all current intervals if they exist
+  currentSyncerIntervals.forEach(
+    (interval: number | undefined) => interval && clearInterval(interval)
+  )
+
+  walletInterface.update((currentInterface: WalletInterface | null) => {
+    const { disconnected } = options
+    !disconnected &&
+      currentInterface &&
+      currentInterface.disconnect &&
+      currentInterface.disconnect()
+    return null
+  })
+
+  wallet.update(() => ({
+    name: undefined,
+    provider: undefined,
+    connect: undefined,
+    instance: undefined,
+    url: undefined,
+    loading: undefined
+  }))
+
+  balance.reset()
+  address.reset()
+  network.reset()
+
+  app.update(store => ({
+    ...store,
+    walletSelectInProgress: false,
+    walletSelectCompleted: false,
+    autoSelect: false
+  }))
+}
+
 function createWalletInterfaceStore(
   initialState: null | WalletInterface
 ): WalletInterfaceStore {
@@ -164,7 +201,7 @@ function createWalletStateSliceStore(options: {
 function createBalanceStore(initialState: string | null): BalanceStore {
   let stateSyncer: StateSyncer
   let emitter: any
-  let emitterAddress: String
+  let emitterAddress: String | undefined
   let cancel: () => void = () => {}
 
   const { subscribe } = derived(
@@ -209,8 +246,11 @@ function createBalanceStore(initialState: string | null): BalanceStore {
         } else if (emitterAddress && !$address) {
           // no address, so set balance to undefined
           set && set(undefined)
+          emitterAddress = undefined
         }
       }
+
+      set(initialState)
     }
   )
 

src/views/WalletCheck.svelte

@@ -5,7 +5,7 @@
   import BigNumber from 'bignumber.js'
 
   import { getBlocknative } from '../services'
-  import { app, state, balanceSyncStatus } from '../stores'
+  import { app, state, balanceSyncStatus, walletInterface } from '../stores'
   import { validateModal, validateWalletCheckModule } from '../validation'
   import { isPromise } from '../utilities'
 
@@ -35,9 +35,18 @@
   let actionResolved: boolean | undefined = undefined
   let loading: boolean = false
   let loadingModal: boolean = false
+  let stopChecking: boolean = false
+
+  const unsubscribe = walletInterface.subscribe(currentInterface => {
+    if (currentInterface === null) {
+      stopChecking = true
+      handleExit()
+      unsubscribe()
+    }
+  })
 
   // recheck modules if below conditions
-  $: if (!activeModal && !checkingModule) {
+  $: if (!activeModal && !checkingModule && !stopChecking) {
     renderModule()
   }
 
@@ -93,7 +102,7 @@
 
         // poll to automatically to check if condition has been met
         pollingInterval = setInterval(async () => {
-          if (currentModule) {
+          if (currentModule && !stopChecking) {
             const invalid = await invalidState(currentModule, get(state))
             if (!invalid && actionResolved !== false) {
               resetState()
@@ -216,7 +225,7 @@
   /* .bn-onboard-prepare-description */
   p {
     font-size: 0.889em;
-    font-family: 'Helvetica Neue';
+    font-family: inherit;
     margin: 1em 0;
   }
 

src/views/WalletSelect.svelte

@@ -3,7 +3,7 @@
   import { get } from 'svelte/store'
   import { fade } from 'svelte/transition'
 
-  import { app, walletInterface, wallet } from '../stores'
+  import { app, walletInterface, wallet, resetWalletState } from '../stores'
 
   import Modal from '../components/Modal.svelte'
   import ModalHeader from '../components/ModalHeader.svelte'
@@ -116,7 +116,8 @@
       BigNumber,
       getNetwork,
       getAddress,
-      getBalance
+      getBalance,
+      resetWalletState
     })
 
     loadingWallet = undefined
@@ -174,7 +175,7 @@
   p {
     font-size: 0.889em;
     margin: 1.6em 0 0 0;
-    font-family: 'Helvetica Neue';
+    font-family: inherit;
   }
 
   /* .bn-onboard-select-info-container */