fix: stay disconnected after clicking disconnect and refreshing page, c…

…lose vu3th#104, vu3th#62

docs/.vitepress/config.js

@@ -55,6 +55,10 @@ module.exports = {
       {
         text: 'API',
         items: [
+          {
+            text: 'Plugin Options',
+            link: '/api/plugin-options',
+          },
           {
             text: 'Components',
             link: '/api/components',

docs/api/plugin-options.md

@@ -0,0 +1,55 @@
+# Plugin Options
+
+## Types
+```ts
+type PluginOptions = {
+    autoConnect: boolean;
+    persistDisconnect?: boolean;
+    networks: {
+        [key: number]: AddEthereumChainParameter;
+    };
+};
+```
+
+## autoConnect
+- Default: false
+- If set up to true, will trigger auto-connect when the page load
+
+## persistDisconnect
+- Only take effect when autoConnect is true
+- Default to true if autoConnect is true
+- If set up to false, the page would keep auto-connect after clicking disconnect and refreshing page
+
+## networks
+[TBD]
+
+## Example
+```ts
+app.use(VueDapp, {
+  autoConnect: true,
+  networks: {
+    80001: {
+      chainId: ethers.utils.hexValue(80001),
+      blockExplorerUrls: ['https://mumbai.polygonscan.com/'],
+      chainName: 'Mumbai',
+      rpcUrls: ['https://rpc-mumbai.maticvigil.com/'],
+      nativeCurrency: {
+        name: 'Mumbai',
+        decimals: 18,
+        symbol: 'MATIC',
+      },
+    },
+    42161: {
+      chainId: ethers.utils.hexValue(42161),
+      blockExplorerUrls: ['https://arbiscan.io'],
+      chainName: 'Arbitrum One',
+      rpcUrls: ['https://arb1.arbitrum.io/rpc'],
+      nativeCurrency: {
+        name: 'Arbitrum',
+        symbol: 'ETH',
+        decimals: 18,
+      },
+    },
+  },
+})
+```

src/composables/useWallet.ts

@@ -1,4 +1,4 @@
-import { reactive, markRaw } from 'vue'
+import { ref, reactive, markRaw } from 'vue'
 import { providers } from 'ethers'
 import {
   AutoConnectError,
@@ -20,6 +20,8 @@ const wallet = reactive({
   status: 'none' as ConnectionStatus,
 })
 
+const persistDisconnect = ref(true)
+
 export type OnDisconnectCallback = (...args: any[]) => void
 export type OnAccountsChangedCallback = (accounts: string[]) => void
 export type OnChainChangedCallback = (chainId: number) => void
@@ -97,6 +99,7 @@ export function useWallet(options: useWalletOptions = { useEthers: true }) {
     }
 
     wallet.status = 'connected'
+    localStorage.removeItem('hasDisconnected')
 
     // 3. subscribe events
     if (wallet.connector) {
@@ -148,9 +151,13 @@ export function useWallet(options: useWalletOptions = { useEthers: true }) {
       }
     }
     clearWallet()
+    persistDisconnect.value && localStorage.setItem('hasDisconnected', 'true')
   }
 
   async function autoConnect(connectors: Connector[]) {
+    if (persistDisconnect.value && localStorage.getItem('hasDisconnected')) {
+      return
+    }
     // try auto-connect to safe
     const safe = connectors.find((conn) => conn.name === 'safe') as
       | SafeConnector
@@ -198,6 +205,7 @@ export function useWallet(options: useWalletOptions = { useEthers: true }) {
 
   return {
     wallet,
+    persistDisconnect,
 
     connectWith,
     disconnect,

src/plugin.ts

@@ -3,24 +3,29 @@ import { clickOutside } from './directive'
 import Board from './components/Board.vue'
 import Modal from './components/Modal.vue'
 import { AddEthereumChainParameter } from './connectors'
-import { useEthers } from './composables/useEthers'
 import { NETWORK_DETAILS } from './constants'
+import { useWallet, useEthers } from './composables'
 
-type Options = {
+export type PluginOptions = {
   autoConnect: boolean
+  persistDisconnect?: boolean
   networks: {
     [key: number]: AddEthereumChainParameter
   }
 }
 
 export const VueDapp: Plugin = {
-  install(app, options?: Options) {
+  install(app, options?: PluginOptions) {
     if (options && options.networks) {
       const { availableNetworks } = useEthers()
       availableNetworks.value = { ...NETWORK_DETAILS, ...options.networks }
     }
 
     app.provide('autoConnect', options?.autoConnect || false)
+    if (options?.autoConnect && options?.persistDisconnect === false) {
+      const { persistDisconnect } = useWallet()
+      persistDisconnect.value = false
+    }
 
     app.directive('click-outside', clickOutside)
     app.component('vd-board', Board)