Merge pull request #176 from blocknative/feature/wallet-reset

Feature: Wallet Reset Function.

Closes #175

Author: lnbc1QWFyb24

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: (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/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(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,7 +75,8 @@ function walletConnect(options: WalletConnectOptions): WalletModule {
                   'latest'
                 ])
               })
-          }
+          },
+          disconnect: () => provider.close()
         }
       }
     },

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,36 @@ walletInterface.subscribe((walletInterface: WalletInterface | null) => {
   }
 })
 
+export function resetWalletState(disconnected?: boolean) {
+  walletInterface.update((currentInterface: WalletInterface | null) => {
+    !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 +195,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 +240,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()

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