refactored network and token selection

src/blockchain/__tests__/addresses.spec.ts

@@ -4,8 +4,6 @@ import {
   getP2PixAddress,
   getProviderUrl,
   isPossibleNetwork,
-  possibleChains,
-  network2Chain,
 } from "../addresses";
 
 import { setActivePinia, createPinia } from "pinia";
@@ -18,9 +16,6 @@ describe("addresses.ts types", () => {
     expectTypeOf(getP2PixAddress).toBeFunction();
     expectTypeOf(getProviderUrl).toBeFunction();
     expectTypeOf(isPossibleNetwork).toBeFunction();
-
-    expectTypeOf(possibleChains).toBeObject();
-    expectTypeOf(network2Chain).toBeObject();
   });
 });
 
@@ -115,13 +110,12 @@ describe("addresses.ts functions", () => {
   it("isPossibleNetwork Returns", () => {
     const etherStore = useEtherStore();
     etherStore.setNetworkName(NetworkEnum.ethereum);
-    expect(isPossibleNetwork("0x5")).toBe(true);
+    expect(isPossibleNetwork(0x5)).toBe(true);
-    expect(isPossibleNetwork("5")).toBe(true);
+    expect(isPossibleNetwork(5)).toBe(true);
-    expect(isPossibleNetwork("0x13881")).toBe(true);
+    expect(isPossibleNetwork(0x13881)).toBe(true);
-    expect(isPossibleNetwork("80001")).toBe(true);
+    expect(isPossibleNetwork(80001)).toBe(true);
 
-    expect(isPossibleNetwork("")).toBe(false);
+    expect(isPossibleNetwork(NaN)).toBe(false);
-    expect(isPossibleNetwork(" ")).toBe(false);
+    expect(isPossibleNetwork(0x55)).toBe(false);
-    expect(isPossibleNetwork("0x55")).toBe(false);
   });
 });

src/blockchain/addresses.ts

@@ -1,62 +1,44 @@
 import { useEtherStore } from "@/store/ether";
 import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
 
-const ethereumTokens: { [key in TokenEnum]: string } = {
+const Tokens: { [key in NetworkEnum]: {[key in TokenEnum] :string} } = {
+  [NetworkEnum.ethereum]: {
     BRZ: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
     BRX: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
-}
+  },
-
+  [NetworkEnum.polygon]: {
-const polygonTokens: { [key in TokenEnum]: string } = {
     BRZ: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29",
     BRX: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29",
-}
+  },
-
+  [NetworkEnum.rootstock]: {
-const rootstockTokens: { [key in TokenEnum]: string } = {
     BRZ: "0xfE841c74250e57640390f46d914C88d22C51e82e",
     BRX: "0xfE841c74250e57640390f46d914C88d22C51e82e",
   }
+};
 
 export const getTokenByAddress = (address: string) => {
-  for (const token of Object.keys(ethereumTokens)) {
+  for ( let network in NetworkEnum ) {
-    if (address === ethereumTokens[token as TokenEnum]) {
+    for (const token of Object.keys(Tokens[network])) {
+      if (address === Tokens[network][token as TokenEnum]) {
         return token as TokenEnum;
       }
     }
-
-  for (const token of Object.keys(polygonTokens)) {
-    if (address === ethereumTokens[token as TokenEnum]) {
-      return token as TokenEnum;
-    }
-  }
-
-  for (const token of Object.keys(rootstockTokens)) {
-    if (address === ethereumTokens[token as TokenEnum]) {
-      return token as TokenEnum;
-    }
   }
 
   return null;
-}
+};
 
 const getTokenAddress = (token: TokenEnum, network?: NetworkEnum): string => {
   const etherStore = useEtherStore();
-
+  return Tokens[network ? network : etherStore.networkName][token];
-  const possibleTokenAddresses: { [key: string]: { [key in TokenEnum]: string } } = {
-    Ethereum: ethereumTokens,
-    Polygon: polygonTokens,
-    Rootstock: rootstockTokens,
-  };
-
-  return possibleTokenAddresses[network ? network : etherStore.networkName][token];
 };
 
 const getP2PixAddress = (network?: NetworkEnum): string => {
   const etherStore = useEtherStore();
-
+  const possibleP2PixAddresses: { [key in NetworkEnum]: string } = {
-  const possibleP2PixAddresses: { [key: string]: string } = {
+    [NetworkEnum.ethereum]: "0xb7cD135F5eFD9760981e02E2a898790b688939fe",
-    Ethereum: "0xb7cD135F5eFD9760981e02E2a898790b688939fe",
+    [NetworkEnum.polygon]: "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00",
-    Polygon: "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00",
+    [NetworkEnum.rootstock]: "0x98ba35eb14b38D6Aa709338283af3e922476dE34",
-    Rootstock: "0x98ba35eb14b38D6Aa709338283af3e922476dE34",
   };
 
   return possibleP2PixAddresses[network ? network : etherStore.networkName];
@@ -64,40 +46,22 @@ const getP2PixAddress = (network?: NetworkEnum): string => {
 
 const getProviderUrl = (): string => {
   const etherStore = useEtherStore();
-  const possibleProvidersUrls: { [key: string]: string } = {
+  const possibleProvidersUrls: { [key in NetworkEnum]: string } = {
-    Ethereum: import.meta.env.VITE_SEPOLIA_API_URL,
+    [NetworkEnum.ethereum]: import.meta.env.VITE_SEPOLIA_API_URL,
-    Polygon: import.meta.env.VITE_MUMBAI_API_URL,
+    [NetworkEnum.polygon]: import.meta.env.VITE_MUMBAI_API_URL,
-    Rootstock: import.meta.env.VITE_RSK_API_URL,
+    [NetworkEnum.rootstock]: import.meta.env.VITE_RSK_API_URL,
   };
 
   return possibleProvidersUrls[etherStore.networkName];
 };
 
-const possibleChains: { [key: string]: NetworkEnum } = {
+const isPossibleNetwork = (networkChain: NetworkEnum): boolean => {
-  "11155111": NetworkEnum.ethereum,
+  return (Number(networkChain) in NetworkEnum);
-  "80001": NetworkEnum.polygon,
-  "31": NetworkEnum.rootstock,
-};
-
-const network2Chain: { [key: string]: string } = {
-  Ethereum: "0xAA36A7",
-  Polygon: "0x13881",
-  Localhost: "0x7a69",
-  Rootstock: "0x1f",
-};
-
-const isPossibleNetwork = (networkChain: string): boolean => {
-  if (Object.keys(possibleChains).includes(networkChain.toString())) {
-    return true;
-  }
-  return false;
 };
 
 export {
   getTokenAddress,
   getProviderUrl,
-  possibleChains,
-  network2Chain,
   isPossibleNetwork,
   getP2PixAddress,
 };

src/blockchain/provider.ts

@@ -6,11 +6,12 @@ import { updateWalletStatus } from "./wallet";
 import {
   getProviderUrl,
   isPossibleNetwork,
-  possibleChains,
-  network2Chain,
   getP2PixAddress,
 } from "./addresses";
 
+import type { NetworkEnum } from "@/model/NetworkEnum";
+import { Networks } from "@/model/Networks";
+
 import { ethers } from "ethers";
 
 const getProvider = (
@@ -57,11 +58,11 @@ const listenToWalletChange = (connection: any): void => {
 const listenToNetworkChange = (connection: any) => {
   const etherStore = useEtherStore();
 
-  connection.on("chainChanged", (networkChain: string) => {
+  connection.on("chainChanged", (networkChain: NetworkEnum) => {
     console.log("Changed network!");
 
     if (isPossibleNetwork(networkChain)) {
-      etherStore.setNetworkName(possibleChains[networkChain]);
+      etherStore.setNetworkName(networkChain);
       updateWalletStatus();
     } else {
       window.alert("Invalid chain!");
@@ -69,7 +70,7 @@ const listenToNetworkChange = (connection: any) => {
   });
 };
 
-const requestNetworkChange = async (network: string): Promise<boolean> => {
+const requestNetworkChange = async (network: NetworkEnum): Promise<boolean> => {
   const etherStore = useEtherStore();
   if (!etherStore.walletAddress) return true;
 
@@ -77,7 +78,7 @@ const requestNetworkChange = async (network: string): Promise<boolean> => {
     const window_ = window as any;
     await window_.ethereum.request({
       method: "wallet_switchEthereumChain",
-      params: [{ chainId: network2Chain[network] }], // chainId must be in hexadecimal numbers
+      params: [{ chainId: Networks[network].chainId }], // chainId must be in hexadecimal numbers
     });
   } catch {
     return false;

src/blockchain/wallet.ts

@@ -1,7 +1,7 @@
 import { useEtherStore } from "@/store/ether";
 
 import { getContract, getProvider } from "./provider";
-import { getTokenAddress, possibleChains, isPossibleNetwork } from "./addresses";
+import { getTokenAddress, isPossibleNetwork } from "./addresses";
 
 import mockToken from "@/utils/smart_contract_files/MockToken.json";
 
@@ -21,11 +21,11 @@ const updateWalletStatus = async (): Promise<void> => {
   const signer = provider.getSigner();
 
   const { chainId } = await provider.getNetwork();
-  if (!isPossibleNetwork(chainId.toString())) {
+  if (!isPossibleNetwork(chainId)) {
     window.alert("Invalid chain!:" + chainId);
     return;
   }
-  etherStore.setNetworkName(possibleChains[chainId]);
+  etherStore.setNetworkName(chainId);
 
   const mockTokenContract = new ethers.Contract(
     getTokenAddress(etherStore.selectedToken),

src/components/TopBar/TopBar.vue

@@ -6,6 +6,7 @@ import { onClickOutside } from "@vueuse/core";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
 import { getNetworkImage } from "@/utils/imagesPath";
+import { Networks } from "@/model/Networks";
 // Store reference
 const etherStore = useEtherStore();
 
@@ -227,7 +228,7 @@ onClickOutside(infoMenuRef, () => {
         >
           <img
             alt="Choosed network image"
-            :src="getNetworkImage(etherStore.networkName)"
+            :src="getNetworkImage(NetworkEnum[etherStore.networkName])"
             height="24"
             width="24"
           />
@@ -241,7 +242,7 @@ onClickOutside(infoMenuRef, () => {
                 : 'rgb(249 250 251)',
             }"
           >
-            {{ etherStore.networkName }}
+            {{ Networks[etherStore.networkName].chainName }}
           </span>
           <img
             class="text-gray-900"
@@ -267,18 +268,18 @@ onClickOutside(infoMenuRef, () => {
           <div class="mt-2">
             <div class="bg-white rounded-md z-10">
               <div
-                v-for="network in NetworkEnum"
+                v-for="(chainData, network) in Networks"
                 class="menu-button gap-2 px-4 rounded-md cursor-pointer"
                 @click="networkChange(network)"
               >
                 <img
-                  :alt="network + ' image'"
+                  :alt="chainData.chainName + ' image'"
                   width="20"
                   height="20"
-                  :src="getNetworkImage(network)"
+                  :src="getNetworkImage(NetworkEnum[network])"
                 />
                 <span class="text-gray-900 py-4 text-end font-semibold text-sm">
-                  {{ network }}
+                  {{ chainData.chainName }}
                 </span>
               </div>
               <div class="w-full flex justify-center">
@@ -455,18 +456,18 @@ onClickOutside(infoMenuRef, () => {
       <div class="pl-4 mt-2 h-full">
         <div class="bg-white rounded-md z-10 h-full">
           <div
-            v-for="network in NetworkEnum"
+            v-for="(chainData, network) in Networks"
             class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2"
             @click="networkChange(network)"
           >
             <img
-              :alt="network + 'image'"
+              :alt="chainData.chainName + 'image'"
               width="20"
               height="20"
-              :src="getNetworkImage(network)"
+              :src="getNetworkImage(NetworkEnum[network])"
             />
             <span class="text-gray-900 py-4 text-end font-bold text-sm">
-              {{ network }}
+              {{ chainData.chainName }}
             </span>
           </div>
         </div>

src/model/NetworkEnum.ts

@@ -1,7 +1,7 @@
 export enum NetworkEnum {
-  ethereum = "Ethereum",
+  ethereum = 11155111,
-  polygon = "Polygon",
+  polygon = 80001,
-  rootstock = "Rootstock",
+  rootstock = 31,
 }
 
 export enum TokenEnum {

src/model/Networks.ts

@@ -0,0 +1,41 @@
+import { NetworkEnum } from "@/model/NetworkEnum";
+
+export const Networks = {
+    [NetworkEnum.ethereum]:
+    {
+        chainId: "0xAA36A7",
+        chainName: "Sepolia"
+    },
+    [NetworkEnum.polygon]:
+    {
+        chainId: "0x13881",
+        chainName: "Polygon Mumbai",
+        nativeCurrency: {
+            name: "MATIC",
+            symbol: "MATIC",
+            decimals: 18
+        },
+        blockExplorerUrls: [
+            "https://mumbai.polygonscan.com/"
+        ]
+    },
+    [NetworkEnum.rootstock]:
+    {
+        chainId: "0x1F",
+        chainName: "Rootstock Testnet",
+        rpcUrls: [
+            "https://public-node.testnet.rsk.co/"
+        ],
+        iconUrls: [
+            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAPOSURBVHgBxVhNUhpBFH6vGdxp4S4LoSYnEE8gnEA4AbpMJUQ4gXgCRJK1egLxBOIJJCdwJElVllMu49Cd1z04zD/dY1H5qihmut/M93VPv59uhHdAXFaPAaEDgA2/BaeA4hq/zG+gIBAKQoyr9yshid4Jdn+2oQAYFIC4rA2zxUhgS3yrDqEAjGdIDD/YYG09aRl7L7vYd10wgPkMlcoNfdvtFhjCXJBAeyO2S5gLQuFo25bEIxjCCt8oN2Z46I+Mu4A4SbjwojQBi1+BDl5LP+JNYlhtQRmPsjjQN1ILldwY7JTXOuD9bWL/jxO8dFy7oL9TyMcIu/PeSghxlLduQUA9jwPXiAk98HLw5jFiaFfAEjRLImPR0qi7z+2VmArZ7zzqcDAS01ljCKqf7QSjxb7jKkIhTohu6rOCq64RjsNiFEo7x7ocSNMvlddhPWb0CQ6gAAw4HKZpKGFDcWhzSEG6kbQCm4dLbi9m+XlpBTHea2D31zTSNtxrAGMNdcP5FPuxfhlKdCHgASUJxcd7zUcobkAPXvkzWGyf7uVCt2M2DtkMljaHSxu92WWLAz8OjWsD+juD/4tzcpqBSh3yQrmwoNFFMZNuDB7bJRsp/hzMMQqeT+NQ96KtNEBK+SG+23XgHgUyy8FPjpPozy3M4sZwh1/nLRMOK26Mn50Z5IHjA6XkBugJSn1XHkeBbK8dJsxsl0jMEOUpm0o9+gkX+7+TI0E+0x6Hsk0ijyNYQ/4OAqWn2aF+5cLxEoRq6idqtyEPtFhp/XyMNI2p9ADFUc/iYL5h7YzEXEEyptj04mvVHxkGP4F8MS4sWDsqRr4DbyGZRiIcqCKtpRMYeTMcpVVAFewqMVPSjUkMVQTBp6BPVKeiTqN65E0qP1AvIArWC98qcQsms39oDeBEtoXFKFgLbQ76ZKiXiRH2E01UF9Go+kGDh32/LWHZAD2OQ7mGdLO4ndrqWaHZyNyD6XJUWEq6yIQqReOweCe49ivD2DNUIutjJgXpHwyUtyPbY/IMWehfBA0IZxQSQoW9rKXL+ltq0oKqYC+RB6yLKys4xEw/Idde5R02cTGOcgh1LSNnid+nihIqcN0tr48MhL89L2uoG+Dqv5Px/IwqAhkqnEi296M1OyLPqVCgdKhcuKNjlUnQL4X78cRk1E1JlMkBME1sFE0gRrRJZGs3iT44bRZP5z0wQJHzIZMMbpztN1t+FDhsMBe0YNfatimHDetgLGiZGkYapqPwYt6YIAWPDYI9fSrETfjkwwSFT2EVrV/USY+r+/GGNp2I7zoW/gdR9aOdZ/lPGgAAAABJRU5ErkJggg==",
+        ],
+        nativeCurrency: {
+            name: "tRBTC",
+            symbol: "tRBTC",
+            decimals: 18
+        },
+        blockExplorerUrls: [
+            "https://explorer.testnet.rootstock.io/"
+        ]
+    }
+}

src/store/ether.ts

@@ -33,7 +33,7 @@ export const useEtherStore = defineStore("ether", {
       this.selectedToken = token;
     },
     setNetworkName(networkName: NetworkEnum) {
-      this.networkName = networkName;
+      this.networkName = Number(networkName);
     },
     setLoadingLock(isLoadingLock: boolean) {
       this.loadingLock = isLoadingLock;