From 245cd9e1bdf8421467fd0a0b222c41e75711353c Mon Sep 17 00:00:00 2001
From: Renato Cardoso <re2005@gmail.com>
Date: Wed, 24 Aug 2022 09:55:42 +0200
Subject: [PATCH] fix: metamask can't clone reactive object & update readme

Convert network object into non reactive.

chore: update readme

Update main.ts
---
 README.md               | 2 +-
 demo/src/main.ts        | 3 ++-
 docs/index.md           | 2 +-
 src/wallets/metaMask.ts | 5 ++++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 6c8d740..b92f8ad 100644
--- 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
index fe83d0e..04f69ba 100644
--- 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
index 92c8b3b..52b8a02 100644
--- 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
index 5c55db5..3d95bc6 100644
--- 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,
           )