Merge pull request #76 from re2005/main

fix: metamask can't clone reactive object
ethaccount · Aug 24, 2022 · f4fb4f7 · f4fb4f7
2 parents fa91313 + 245cd9e
commit f4fb4f7
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ Step 2. By default, VueDapp includes `Mainnet` and `Goerli` networks, but you ca
 ```javascript
 app.use(VueDapp, {
     80001: {
-        chainId: '0x' + 80001,
+        chainId: ethers.utils.hexValue(80001),
         blockExplorerUrls: ['https://mumbai.polygonscan.com/'],
         chainName: 'Mumbai',
         rpcUrls: ['https://rpc-mumbai.maticvigil.com/'],

diff --git a/demo/src/main.ts b/demo/src/main.ts
@@ -3,12 +3,13 @@ import App from './App.vue'
 import 'windi.css'
 import './style.css'
 import { VueDapp } from 'vue-dapp'
+import { ethers } from 'ethers'
 
 const app = createApp(App)
 
 app.use(VueDapp, {
   80001: {
-    chainId: '0x' + 80001,
+    chainId: ethers.utils.hexValue(80001),
     blockExplorerUrls: ['https://mumbai.polygonscan.com/'],
     chainName: 'Mumbai',
     rpcUrls: ['https://rpc-mumbai.maticvigil.com/'],

diff --git a/docs/index.md b/docs/index.md
@@ -23,7 +23,7 @@ Step 2. By default, VueDapp includes `Mainnet` and `Goerli` networks, but you ca
 ```javascript
 app.use(VueDapp, {
     80001: {
-        chainId: '0x' + 80001,
+        chainId: ethers.utils.hexValue(80001),
         blockExplorerUrls: ['https://mumbai.polygonscan.com/'],
         chainName: 'Mumbai',
         rpcUrls: ['https://rpc-mumbai.maticvigil.com/'],

diff --git a/src/wallets/metaMask.ts b/src/wallets/metaMask.ts
@@ -185,6 +185,9 @@ export class MetaMaskConnector extends Connector<
     if (!this.#provider) throw new ProviderNotFoundError()
     const id = hexValue(chainId)
     const { availableNetworks } = useEthers() as any
+    const _availableNetworks = JSON.parse(
+      JSON.stringify(availableNetworks.value),
+    )
 
     try {
       await this.#provider.request({
@@ -195,7 +198,7 @@ export class MetaMaskConnector extends Connector<
       if ((<ProviderRpcError>err).code === 4902) {
         try {
           await this.addChain(
-            availableNetworks[
+            _availableNetworks[
               chainId as keyof typeof NETWORK_DETAILS
             ] as AddEthereumChainParameter,
           )