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 };