feat: automatically load MetaMask wallet, close vu3th#80

johnson86tw · Oct 21, 2022 · 69c17ee · 69c17ee
1 parent 7dd5d5d
commit 69c17ee
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -42,20 +42,23 @@ Step 2. By default, VueDapp includes `Mainnet` and `Goerli` networks, but you ca
 
 ```javascript
 app.use(VueDapp, {
+ autoConnect: true, // Automatically connect MetaMask wallet when the page is loaded
+  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',
-        },
+      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: {
+      ...
     },
-    1336: {
-        ...
-    }
+  },
 });
 
 ```

diff --git a/demo/src/main.ts b/demo/src/main.ts
@@ -8,26 +8,29 @@ import { ethers } from 'ethers'
 const app = createApp(App)
 
 app.use(VueDapp, {
-  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',
+  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,
+    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,
+      },
     },
   },
 })

diff --git a/docs/index.md b/docs/index.md
@@ -22,20 +22,23 @@ Step 2. By default, VueDapp includes `Mainnet` and `Goerli` networks, but you ca
 
 ```javascript
 app.use(VueDapp, {
+ autoConnect: true, // Automatically connect MetaMask wallet when the page is loaded
+  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',
-        },
+      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',
+      },
     },
-    1336: {
-        ...
-    }
+    42161: {
+      ...
+    },
+  },
 });
 
 ```

diff --git a/src/components/Board.vue b/src/components/Board.vue
@@ -1,13 +1,13 @@
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, inject, onMounted } from 'vue'
 import Modal from './Modal.vue'
 import Loader from './Loader.vue'
 import WalletConnectIcon from './logos/WalletConnect.vue'
 import MetaMaskIcon from './logos/MetaMask.vue'
 import CoinbaseWallet from './logos/CoinbaseWallet.vue'
 import { useBoard } from '../composables/useBoard'
 import { useWallet } from '../composables/useWallet'
-import { Connector } from '../wallets'
+import { Connector, MetaMaskConnector } from '../wallets'
 
 export default defineComponent({
   components: {
@@ -31,20 +31,50 @@ export default defineComponent({
   },
   setup(props) {
     const { boardOpen, close } = useBoard()
-    const { connectWith, wallet } = useWallet()
+    const { connectWith, wallet, autoConnect } = useWallet()
 
     const walletItemClass = computed(() =>
       props.dark ? 'wallet-item--dark' : 'wallet-item',
     )
 
     const connectors = props.connectors as Connector[]
 
+    const isAutoConnect = inject('autoConnect')
+    if (isAutoConnect) {
+      onMounted(async () => {
+        const metaMaskConnector = connectors.find(
+          (connector) => connector.name === 'metaMask',
+        ) as MetaMaskConnector
+
+        if (metaMaskConnector) {
+          try {
+            await autoConnect(metaMaskConnector)
+          } catch (err) {
+            console.error(
+              'AutoConnectError: Failed to connect to MetaMask',
+              err,
+            )
+          }
+        } else {
+          console.error(
+            'AutoConnectError: MetaMask connector not found (you should add MetaMask connector so theautoConnect can work)',
+          )
+        }
+      })
+    }
+
+    const onClickWallet = (connector: Connector) => {
+      connectWith(connector)
+      close()
+    }
+
     return {
+      isAutoConnect,
       boardOpen,
       wallet,
       connectors,
       walletItemClass,
-      connectWith,
+      onClickWallet,
       close,
     }
   },
@@ -55,10 +85,7 @@ export default defineComponent({
   <Modal :modalOpen="boardOpen" @close="close" :dark="dark">
     <div v-click-outside="close">
       <div v-for="(connector, i) in connectors" :key="connector.name">
-        <div
-          :class="walletItemClass"
-          @click="connectWith(connector) && close()"
-        >
+        <div :class="walletItemClass" @click="onClickWallet(connector)">
           <div class="item">
             <MetaMaskIcon v-if="connector.name === 'metaMask'" class="logo" />
             <WalletConnectIcon
@@ -86,7 +113,10 @@ export default defineComponent({
   </Modal>
 
   <slot name="connecting">
-    <Modal :modalOpen="wallet.status === 'connecting'" :dark="dark">
+    <Modal
+      :modalOpen="wallet.status === 'connecting' && !isAutoConnect"
+      :dark="dark"
+    >
       <div class="loading-modal" v-if="wallet.status === 'connecting'">
         <p>Connecting...</p>
         <p class="mt-4">Approve or reject request using your wallet</p>
@@ -95,7 +125,10 @@ export default defineComponent({
   </slot>
 
   <slot name="loading">
-    <Modal :modalOpen="wallet.status === 'loading'" :dark="dark"></Modal>
+    <Modal
+      :modalOpen="wallet.status === 'loading' && !isAutoConnect"
+      :dark="dark"
+    ></Modal>
   </slot>
 </template>
 

diff --git a/src/composables/useWallet.ts b/src/composables/useWallet.ts
@@ -1,6 +1,6 @@
 import { reactive, markRaw } from 'vue'
 import { providers } from 'ethers'
-import { Connector } from '../wallets'
+import { Connector, MetaMaskConnector } from '../wallets'
 import { useEthers } from './useEthers'
 
 export type ConnectionStatus = 'none' | 'connecting' | 'loading' | 'connected'
@@ -133,6 +133,13 @@ export function useWallet(options: useWalletOptions = { useEthers: true }) {
     clearWallet()
   }
 
+  async function autoConnect(metaMaskConnector: MetaMaskConnector) {
+    const isConnected = await MetaMaskConnector.checkConnection()
+    if (isConnected) {
+      await connectWith(metaMaskConnector)
+    }
+  }
+
   function onDisconnect(callback: OnDisconnectCallback) {
     callbacks.onDisconnectCallback = callback
   }
@@ -150,6 +157,7 @@ export function useWallet(options: useWalletOptions = { useEthers: true }) {
 
     connectWith,
     disconnect,
+    autoConnect,
 
     onDisconnect,
     onAccountsChanged,

diff --git a/src/plugin.ts b/src/plugin.ts
@@ -6,11 +6,21 @@ import { AddEthereumChainParameter } from './wallets'
 import { useEthers } from './composables/useEthers'
 import { NETWORK_DETAILS } from './constants'
 
+type Options = {
+  autoConnect: boolean
+  networks: {
+    [key: number]: AddEthereumChainParameter
+  }
+}
+
 export const VueDapp: Plugin = {
-  install(app, options: { [key: number]: AddEthereumChainParameter }) {
-    const { availableNetworks } = useEthers()
-    availableNetworks.value = { ...NETWORK_DETAILS, ...options }
+  install(app, options: Options) {
+    if (options.networks) {
+      const { availableNetworks } = useEthers()
+      availableNetworks.value = { ...NETWORK_DETAILS, ...options.networks }
+    }
 
+    app.provide('autoConnect', options.autoConnect || false)
     app.directive('click-outside', clickOutside)
     app.component('vd-board', Board)
     app.component('vd-modal', Modal)

diff --git a/src/wallets/metaMask.ts b/src/wallets/metaMask.ts
@@ -24,6 +24,7 @@ export interface MetaMaskProvider extends MetaMaskEthereumProvider {
     method: string
     params?: any[] | undefined
   }) => Promise<any>
+  selectedAddress: string
 }
 
 /**
@@ -69,6 +70,16 @@ export class MetaMaskConnector extends Connector<
     super(options)
   }
 
+  static async checkConnection() {
+    if (typeof window !== 'undefined' && !!window.ethereum) {
+      const provider = window.ethereum as MetaMaskProvider
+      if (provider.selectedAddress) {
+        return true
+      }
+    }
+    return false
+  }
+
   async connect() {
     let provider = await this.getProvider()