Adding request to user change network in wallet

src/blockchain/addresses.ts

@@ -0,0 +1,56 @@
+import { useEtherStore } from "@/store/ether";
+import { NetworkEnum } from "@/model/NetworkEnum";
+
+const getTokenAddress = (): string => {
+  const etherStore = useEtherStore();
+
+  const possibleTokenAddresses: { [key: string]: string } = {
+    Ethereum: "0x294003F602c321627152c6b7DED3EAb5bEa853Ee",
+    Polygon: "0x294003F602c321627152c6b7DED3EAb5bEa853Ee",
+    Localhost: "0x5FbDB2315678afecb367f032d93F642f64180aa3",
+  };
+
+  return possibleTokenAddresses[etherStore.networkName];
+};
+
+const getProviderUrl = (): string => {
+  const etherStore = useEtherStore();
+
+  const possibleProvidersUrls: { [key: string]: string } = {
+    Ethereum: import.meta.env.VITE_GOERLI_API_URL,
+    Polygon: import.meta.env.VITE_MUMBAI_API_URL,
+    Localhost: import.meta.env.VITE_GOERLI_API_URL,
+  };
+
+  return possibleProvidersUrls[etherStore.networkName];
+};
+
+const possibleChains: { [key: string]: NetworkEnum } = {
+  "0x5": NetworkEnum.ethereum,
+  "5": NetworkEnum.ethereum,
+  "0x13881": NetworkEnum.polygon,
+  "80001": NetworkEnum.polygon,
+  "0x7a69": NetworkEnum.localhost,
+  "31337": NetworkEnum.localhost,
+};
+
+const network2Chain: { [key: string]: string } = {
+  Ethereum: "0x5",
+  Polygon: "0x13881",
+  Localhost: "0x7a69",
+};
+
+const isPossibleNetwork = (networkChain: string): boolean => {
+  if (Object.keys(possibleChains).includes(networkChain)) {
+    return true;
+  }
+  return false;
+};
+
+export {
+  getTokenAddress,
+  getProviderUrl,
+  possibleChains,
+  network2Chain,
+  isPossibleNetwork,
+};

src/blockchain/provider.ts

@@ -1,19 +1,14 @@
-import { ethers } from "ethers";
 import { useEtherStore } from "@/store/ether";
-import { NetworkEnum } from "@/model/NetworkEnum";
+
 import { updateWalletStatus } from "./wallet";
+import {
+  getProviderUrl,
+  isPossibleNetwork,
+  possibleChains,
+  network2Chain,
+} from "./addresses";
 
-const getProviderUrl = (): string => {
-  const etherStore = useEtherStore();
-
-  const possibleProvidersUrls: { [key: string]: string } = {
-    Ethereum: import.meta.env.VITE_GOERLI_API_URL,
-    Polygon: import.meta.env.VITE_MUMBAI_API_URL,
-    Localhost: import.meta.env.VITE_GOERLI_API_URL,
-  };
-
-  return possibleProvidersUrls[etherStore.networkName];
-};
+import { ethers } from "ethers";
 
 const getProvider = ():
   | ethers.providers.Web3Provider
@@ -27,21 +22,17 @@ const getProvider = ():
   return new ethers.providers.Web3Provider(connection); // metamask provider
 };
 
-const connectProvider = async (): Promise<void | null> => {
+const connectProvider = async (): Promise<void> => {
   const window_ = window as any;
   const connection = window_.ethereum;
   const provider = getProvider();
 
   if (!(provider instanceof ethers.providers.Web3Provider)) {
     window.alert("Please, connect to metamask extension");
-    return null;
+    return;
   }
 
   await updateWalletStatus();
-  // await updateValidDeposits();
-  // await updateDepositAddedEvents();
-  // await updateLockAddedEvents();
-  // await updateLockReleasedEvents();
 
   listenToNetworkChange(connection);
   listenToWalletChange(connection);
@@ -49,24 +40,43 @@ const connectProvider = async (): Promise<void | null> => {
 
 const listenToWalletChange = (connection: any): void => {
   connection.on("accountsChanged", async () => {
-    await updateWalletStatus();
+    console.log("Changed account!");
+    updateWalletStatus();
   });
 };
 
 const listenToNetworkChange = (connection: any) => {
   const etherStore = useEtherStore();
 
-  const possibleNetworks: { [key: string]: NetworkEnum } = {
-    "0x5": NetworkEnum.ethereum,
-    "0x13881": NetworkEnum.polygon,
-    "0x7a69": NetworkEnum.localhost,
-  };
-
   connection.on("chainChanged", (networkChain: string) => {
-    if (Object.keys(possibleNetworks).includes(networkChain)) {
-      etherStore.setNetworkName(possibleNetworks[networkChain]);
+    console.log("Changed network!");
+
+    if (isPossibleNetwork(networkChain)) {
+      etherStore.setNetworkName(possibleChains[networkChain]);
+      updateWalletStatus();
+    } else {
+      window.alert("Invalid chain!");
     }
   });
 };
 
-export { getProvider, connectProvider, listenToNetworkChange };
+const requestNetworkChange = async (network: string): Promise<boolean> => {
+  try {
+    const window_ = window as any;
+    await window_.ethereum.request({
+      method: "wallet_switchEthereumChain",
+      params: [{ chainId: network2Chain[network] }], // chainId must be in hexadecimal numbers
+    });
+  } catch {
+    return false;
+  }
+
+  return true;
+};
+
+export {
+  getProvider,
+  connectProvider,
+  listenToNetworkChange,
+  requestNetworkChange,
+};

src/blockchain/wallet.ts

@@ -1,38 +1,33 @@
-import { ethers } from "ethers";
-import { getProvider } from "./provider";
-import blockchain from "../utils/blockchain";
 import { useEtherStore } from "@/store/ether";
 
+import { getProvider } from "./provider";
+import { getTokenAddress, possibleChains } from "./addresses";
+
 import mockToken from "../utils/smart_contract_files/MockToken.json";
-import addresses from "../utils/smart_contract_files/localhost.json";
+
+import { ethers } from "ethers";
+import { formatEther } from "ethers/lib/utils";
 
 const updateWalletStatus = async () => {
   const etherStore = useEtherStore();
-  const provider = getProvider();
 
+  const provider = getProvider();
   const signer = provider.getSigner();
-  const contract = new ethers.Contract(addresses.token, mockToken.abi, signer);
+
+  const { chainId } = await provider.getNetwork();
+  etherStore.setNetworkName(possibleChains[chainId]);
+
+  const mockTokenContract = new ethers.Contract(
+    getTokenAddress(),
+    mockToken.abi,
+    signer
+  );
 
   const walletAddress = await provider.send("eth_requestAccounts", []);
+  const balance = await mockTokenContract.balanceOf(walletAddress[0]);
 
-  const balance = await contract.balanceOf(walletAddress[0]);
-  etherStore.setBalance(blockchain.formatBigNumber(balance));
+  etherStore.setBalance(formatEther(balance));
   etherStore.setWalletAddress(ethers.utils.getAddress(walletAddress[0]));
 };
 
-const updateWalletBalance = async () => {
-  const etherStore = useEtherStore();
-  const provider = getProvider();
-
-  if (!provider) return;
-
-  const signer = provider.getSigner();
-  const contract = new ethers.Contract(addresses.token, mockToken.abi, signer);
-
-  const walletAddress = await provider.send("eth_requestAccounts", []);
-
-  const balance = await contract.balanceOf(walletAddress[0]);
-  etherStore.setBalance(blockchain.formatBigNumber(balance));
-};
-
-export { updateWalletStatus, updateWalletBalance };
+export { updateWalletStatus };

src/components/TopBar.vue

@@ -3,7 +3,7 @@ import { storeToRefs } from "pinia";
 import { useEtherStore } from "../store/ether";
 import { ref } from "vue";
 import { NetworkEnum } from "@/model/NetworkEnum";
-import { connectProvider } from "../blockchain/provider";
+import { connectProvider, requestNetworkChange } from "../blockchain/provider";
 import ethereumImage from "../assets/ethereum.svg";
 import polygonImage from "../assets/polygon.svg";
 
@@ -48,6 +48,11 @@ const closeMenu = () => {
   menuOpenToggle.value = false;
 };
 
+const networkChange = async (network: NetworkEnum) => {
+  const change = await requestNetworkChange(network);
+  if (change) etherStore.setNetworkName(network);
+};
+
 const getNetworkImage = (networkName: NetworkEnum) => {
   let validImages = {
     Ethereum: ethereumImage,
@@ -132,7 +137,7 @@ const getNetworkImage = (networkName: NetworkEnum) => {
             <div class="bg-white rounded-md z-10">
               <div
                 class="menu-button gap-2 px-4 rounded-md cursor-pointer"
-                @click="etherStore.setNetworkName(NetworkEnum.ethereum)"
+                @click="networkChange(NetworkEnum.ethereum)"
               >
                 <img
                   alt="Ethereum image"
@@ -149,7 +154,7 @@ const getNetworkImage = (networkName: NetworkEnum) => {
               </div>
               <div
                 class="menu-button gap-2 px-4 rounded-md cursor-pointer"
-                @click="etherStore.setNetworkName(NetworkEnum.polygon)"
+                @click="networkChange(NetworkEnum.polygon)"
               >
                 <img
                   alt="Polygon image"
@@ -166,7 +171,7 @@ const getNetworkImage = (networkName: NetworkEnum) => {
               </div>
               <div
                 class="menu-button gap-2 px-4 rounded-md cursor-pointer"
-                @click="etherStore.setNetworkName(NetworkEnum.localhost)"
+                @click="networkChange(NetworkEnum.localhost)"
               >
                 <img
                   alt="Localhost"
@@ -273,7 +278,7 @@ const getNetworkImage = (networkName: NetworkEnum) => {
         </div>
         <div class="top-bar-info">
           <span class="default-text text-sm">
-            MBRZ: {{ formatWalletBalance() }}
+            MBRL: {{ formatWalletBalance() }}
           </span>
         </div>
         <!-- Temporary div, just to show a wallet's balance -->

src/utils/blockchain.ts

@@ -8,7 +8,6 @@ import addresses from "./smart_contract_files/localhost.json";
 // Mock wallets import
 import { wallets } from "./smart_contract_files/wallets.json";
 import { getProvider } from "../blockchain/provider";
-import { updateWalletBalance, updateWalletStatus } from "../blockchain/wallet";
 
 //  Split tokens between wallets in wallets.json
 const splitTokens = async () => {
@@ -28,7 +27,7 @@ const splitTokens = async () => {
       ethers.utils.parseEther("4000000.0")
     );
     await tx.wait();
-    updateWalletStatus();
+    // updateWalletStatus();
   }
 };
 
@@ -268,7 +267,7 @@ const addDeposit = async (tokenQty: Number, pixKey: String) => {
   );
   await deposit.wait();
 
-  await updateWalletStatus();
+  // await updateWalletStatus();
   await updateDepositAddedEvents();
   await updateValidDeposits();
 };
@@ -301,7 +300,7 @@ const mockDeposit = async (tokenQty: Number, pixKey: String) => {
   );
   await deposit.wait();
 
-  await updateWalletStatus();
+  // await updateWalletStatus();
   await updateValidDeposits();
   await updateDepositAddedEvents();
 };
@@ -316,7 +315,7 @@ const cancelDeposit = async (depositId: BigNumber): Promise<Boolean> => {
   const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
   await contract.cancelDeposit(depositId);
 
-  await updateWalletBalance();
+  // await updateWalletBalance();
   await updateValidDeposits();
   return true;
 };
@@ -331,7 +330,7 @@ const withdrawDeposit = async (depositId: BigNumber): Promise<Boolean> => {
   const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
   await contract.withdraw(depositId, []);
 
-  await updateWalletBalance();
+  // await updateWalletBalance();
   await updateValidDeposits();
   return true;
 };

src/utils/smart_contract_files/goerli.json

@@ -0,0 +1,8 @@
+{
+  "signers": [
+    "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
+    "0x70997970C51812dc3A010C7d01b50e0d17dc79C8"
+  ],
+  "p2pix": "0x5f3EFA9A90532914545CEf527C530658af87e196",
+  "token": "0x294003F602c321627152c6b7DED3EAb5bEa853Ee"
+}

src/utils/smart_contract_files/polygon-mumbai.json

@@ -0,0 +1,8 @@
+{
+  "signers": [
+    "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
+    "0x70997970C51812dc3A010C7d01b50e0d17dc79C8"
+  ],
+  "p2pix": "0x5f3EFA9A90532914545CEf527C530658af87e196",
+  "token": "0x294003F602c321627152c6b7DED3EAb5bEa853Ee"
+}