diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index a417886..af5b8df 100644 --- a/docs/.vitepress/config.js +++ b/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', diff --git a/docs/api/plugin-options.md b/docs/api/plugin-options.md new file mode 100644 index 0000000..e12ed8d --- /dev/null +++ b/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, + }, + }, + }, +}) +``` \ No newline at end of file diff --git a/src/composables/useWallet.ts b/src/composables/useWallet.ts index b463424..f5a3565 100644 --- a/src/composables/useWallet.ts +++ b/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, diff --git a/src/plugin.ts b/src/plugin.ts index 423416a..b9531db 100644 --- a/src/plugin.ts +++ b/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)