Merge pull request #6 from doiim/refactor/network-dynamize

Refactor/network dynamize

src/App.vue

@@ -5,21 +5,20 @@ import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
 import ToasterComponent from "@/components/ui/ToasterComponent.vue";
 import { init, useOnboard } from "@web3-onboard/vue";
 import injectedModule from "@web3-onboard/injected-wallets";
-import { Networks } from "@/model/Networks";
-import { NetworkEnum } from "@/model/NetworkEnum";
+import { Networks, DEFAULT_NETWORK } from "@/config/networks";
 import { ref } from "vue";
 
 const route = useRoute();
 const injected = injectedModule();
-const targetNetwork = ref(NetworkEnum.sepolia);
+const targetNetwork = ref(DEFAULT_NETWORK);
 
 const web3Onboard = init({
   wallets: [injected],
-  chains: Object.entries(Networks).map(([, network]) => ({
-    id: network.chainId,
-    token: network.token,
-    label: network.chainName,
-    rpcUrl: network.rpcUrl,
+  chains: Object.values(Networks).map((network) => ({
+    id: network.id,
+    token: network.nativeCurrency.symbol,
+    label: network.name,
+    rpcUrl: network.rpcUrls.default.http[0],
   })),
   connect: {
     autoConnectLastWallet: true,

src/blockchain/addresses.ts

@@ -1,54 +0,0 @@
-import { useUser } from "@/composables/useUser";
-import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
-import { createPublicClient, http, type Address } from "viem";
-import { getContractAddress, getRpcUrl, getNetworkConfig, getViemChain } from "@/config/networks";
-
-export const getTokenByAddress = (address: Address) => {
-  const user = useUser();
-  const networkConfig = getNetworkConfig(user.networkName.value);
-
-  for (const [token, tokenAddress] of Object.entries(networkConfig.contracts.tokenAddresses)) {
-    if (tokenAddress.toLowerCase() === address.toLowerCase()) {
-      return token;
-    }
-  }
-  return null;
-};
-
-export const getTokenAddress = (
-  token: TokenEnum,
-  network?: NetworkEnum
-): Address => {
-  const user = useUser();
-  const networkId = network ? network : user.networkName.value;
-  
-  const tokenAddress = getContractAddress(networkId, token);
-  return tokenAddress as Address;
-};
-
-export const getP2PixAddress = (network?: NetworkEnum): Address => {
-  const user = useUser();
-  const networkId = network ? network : user.networkName.value;
-  
-  const p2pixAddress = getContractAddress(networkId, 'p2pix');
-  return p2pixAddress as Address;
-};
-
-export const getProviderUrl = (network?: NetworkEnum): string => {
-  const user = useUser();
-  const networkId = network || user.networkName.value;
-  
-  return getRpcUrl(networkId);
-};
-
-export const getProviderByNetwork = (network: NetworkEnum) => {
-  const chain = getViemChain(network);
-  return createPublicClient({
-    chain,
-    transport: http(getProviderUrl(network)),
-  });
-};
-
-export const isPossibleNetwork = (networkChain: NetworkEnum): boolean => {
-  return Number(networkChain) in NetworkEnum;
-};

src/blockchain/buyerMethods.ts

@@ -1,11 +1,10 @@
 import { getContract } from "./provider";
-import { getTokenAddress } from "./addresses";
+import { ChainContract } from "viem";
 import {
   parseEther,
   type Address,
   type TransactionReceipt,
 } from "viem";
-import type { TokenEnum } from "@/model/NetworkEnum";
 
 export const addLock = async (
   sellerAddress: Address,
@@ -37,7 +36,7 @@ export const addLock = async (
 
 export const withdrawDeposit = async (
   amount: string,
-  token: TokenEnum
+  token: Address
 ): Promise<boolean> => {
   const { address, abi, wallet, client, account } = await getContract();
 
@@ -45,13 +44,11 @@ export const withdrawDeposit = async (
     throw new Error("Wallet not connected");
   }
 
-  const tokenAddress = getTokenAddress(token);
-
   const { request } = await client.simulateContract({
     address,
     abi,
     functionName: "withdraw",
-    args: [tokenAddress, parseEther(amount), []],
+    args: [token, parseEther(amount), []],
     account
   });
 

src/blockchain/events.ts

@@ -1,14 +1,13 @@
 import { useUser } from "@/composables/useUser";
 import { formatEther, toHex, stringToHex } from "viem";
 import type { PublicClient, Address } from "viem";
-
+import { Networks } from "@/config/networks";
 import { getContract } from "./provider";
-import { getP2PixAddress, getTokenAddress } from "./addresses";
 import { p2PixAbi } from "./abi"
 import type { ValidDeposit } from "@/model/ValidDeposit";
-import { getNetworkSubgraphURL, NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
+import type { NetworkConfig } from "@/model/NetworkEnum";
 import type { UnreleasedLock } from "@/model/UnreleasedLock";
-import type { LockStatus } from "@/model/LockStatus"
+import { ChainContract } from "viem";
 
 const getNetworksLiquidity = async (): Promise<void> => {
   const user = useUser();
@@ -16,12 +15,10 @@ const getNetworksLiquidity = async (): Promise<void> => {
 
   const depositLists: ValidDeposit[][] = [];
 
-  for (const network of Object.values(NetworkEnum).filter(
-    (v) => !isNaN(Number(v))
-  )) {
+  for (const network of Object.values(Networks)) {
     const deposits = await getValidDeposits(
-      getTokenAddress(user.selectedToken.value),
-      Number(network)
+      user.network.value.tokens[user.selectedToken.value].address,
+      network
     );
     if (deposits) depositLists.push(deposits);
   }
@@ -62,7 +59,7 @@ const getParticipantID = async (
 
 const getValidDeposits = async (
   token: Address,
-  network: NetworkEnum,
+  network: NetworkConfig,
   contractInfo?: { client: PublicClient; address: Address }
 ): Promise<ValidDeposit[]> => {
   let client: PublicClient, abi;
@@ -74,9 +71,6 @@ const getValidDeposits = async (
     ({ abi, client } = await getContract(true));
   }
 
-  // TODO: Remove this once we have a subgraph for rootstock
-  if (network === NetworkEnum.rootstock) return [];
-
   const body = {
     query: `
       {
@@ -90,7 +84,7 @@ const getValidDeposits = async (
   `,
   };
 
-  const depositLogs = await fetch(getNetworkSubgraphURL(network), {
+  const depositLogs = await fetch( network.subgraphUrls[0], {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -119,7 +113,7 @@ const getValidDeposits = async (
   const sellersList = Object.keys(uniqueSellers) as Address[];
   // Use multicall to batch all getBalance requests
   const balanceCalls = sellersList.map((seller) => ({
-    address: getP2PixAddress(network),
+    address: (network.contracts?.p2pix as ChainContract).address,
     abi,
     functionName: "getBalance",
     args: [seller, token],

src/blockchain/provider.ts

@@ -1,6 +1,5 @@
 import { p2PixAbi } from "./abi";
 import { updateWalletStatus } from "./wallet";
-import { getProviderUrl, getP2PixAddress } from "./addresses";
 import {
   createPublicClient,
   createWalletClient,
@@ -10,15 +9,16 @@ import {
   WalletClient,
 } from "viem";
 import { useUser } from "@/composables/useUser";
-import { getViemChain } from "@/config/networks";
+import type { NetworkConfig } from "@/model/NetworkEnum";
+import type { ChainContract } from "viem";
 
 let walletClient: WalletClient | null = null;
 
 const getPublicClient = (): PublicClient => {
     const user = useUser();
-    const rpcUrl = getProviderUrl();
-    const chain = getViemChain(user.networkName.value);
-    
+    const rpcUrl = (user.network.value as NetworkConfig).rpcUrls.default.http[0];
+    const chain = user.network.value;
+
     return createPublicClient({
       chain,
       transport: http(rpcUrl),
@@ -31,7 +31,8 @@ const getWalletClient = (): WalletClient | null => {
 
 const getContract = async (onlyRpcProvider = false) => {
   const client = getPublicClient();
-  const address = getP2PixAddress();
+  const user = useUser();
+  const address = (user.network.value.contracts?.p2pix as ChainContract).address;
   const abi = p2PixAbi;
   const wallet = onlyRpcProvider ? null : getWalletClient();
 
@@ -46,7 +47,7 @@ const getContract = async (onlyRpcProvider = false) => {
 
 const connectProvider = async (p: any): Promise<void> => {
   const user = useUser();
-  const chain = getViemChain(user.networkName.value);
+  const chain = user.network.value;
 
   const [account] = await p!.request({ method: "eth_requestAccounts" });
 

src/blockchain/sellerMethods.ts

@@ -1,12 +1,15 @@
 import { getContract, getPublicClient, getWalletClient } from "./provider";
-import { getTokenAddress, getP2PixAddress } from "./addresses";
-import { parseEther, toHex } from "viem";
-import { getViemChain } from "@/config/networks";
-
+import { parseEther, toHex, ChainContract } from "viem";
 import { mockTokenAbi } from "./abi";
 import { useUser } from "@/composables/useUser";
 import { createParticipant } from "@/utils/bbPay";
 import type { Participant } from "@/utils/bbPay";
+import type { Address } from "viem";
+
+const getP2PixAddress = (): Address => {
+  const user = useUser();  
+  return (user.network.value.contracts?.p2pix as ChainContract).address;
+};
 
 const approveTokens = async (participant: Participant): Promise<any> => {
   const user = useUser();
@@ -21,7 +24,7 @@ const approveTokens = async (participant: Participant): Promise<any> => {
   const [account] = await walletClient.getAddresses();
 
   // Get token address
-  const tokenAddress = getTokenAddress(user.selectedToken.value);
+  const tokenAddress = user.network.value.tokens[user.selectedToken.value].address;
 
   // Check if the token is already approved
   const allowance = await publicClient.readContract({
@@ -33,7 +36,7 @@ const approveTokens = async (participant: Participant): Promise<any> => {
 
   if ( allowance < parseEther(participant.offer.toString()) ) {
     // Approve tokens
-    const chain = getViemChain(user.networkName.value);
+    const chain = user.network.value;
     const hash = await walletClient.writeContract({
       address: tokenAddress,
       abi: mockTokenAbi,
@@ -65,15 +68,15 @@ const addDeposit = async (): Promise<any> => {
   if (!sellerId.id) {
     throw new Error("Failed to create participant");
   }
-  const chain = getViemChain(user.networkName.value);
+  const chain = user.network.value;
   const hash = await walletClient.writeContract({
     address,
     abi,
     functionName: "deposit",
     args: [
-      user.networkId.value + "-" + sellerId.id,
+      user.network.value.id + "-" + sellerId.id,
       toHex("", { size: 32 }),
-      getTokenAddress(user.selectedToken.value),
+      user.network.value.tokens[user.selectedToken.value].address,
       parseEther(user.seller.value.offer.toString()),
       true,
     ],

src/blockchain/wallet.ts

@@ -2,7 +2,6 @@ import { formatEther, type Address } from "viem";
 import { useUser } from "@/composables/useUser";
 
 import { getPublicClient, getWalletClient, getContract } from "./provider";
-import { getTokenAddress } from "./addresses";
 
 import { getValidDeposits, getUnreleasedLockById } from "./events";
 
@@ -10,7 +9,6 @@ import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
 import type { UnreleasedLock } from "@/model/UnreleasedLock";
 import { LockStatus } from "@/model/LockStatus";
-import { getNetworkSubgraphURL } from "@/model/NetworkEnum";
 
 export const updateWalletStatus = async (): Promise<void> => {
   const user = useUser();
@@ -36,8 +34,8 @@ export const listValidDepositTransactionsByWalletAddress = async (
 ): Promise<ValidDeposit[]> => {
   const user = useUser();
   const walletDeposits = await getValidDeposits(
-    getTokenAddress(user.selectedToken.value),
-    user.networkName.value
+    user.network.value.tokens[user.selectedToken.value].address,
+    user.network.value
   );
   if (walletDeposits) {
     return walletDeposits
@@ -67,7 +65,7 @@ export const listAllTransactionByWalletAddress = async (
   const user = useUser();
 
   // Get the current network for the subgraph URL
-  const network = user.networkName.value;
+  const network = user.network.value;
 
   // Query subgraph for all relevant transactions
   const subgraphQuery = {
@@ -110,7 +108,7 @@ export const listAllTransactionByWalletAddress = async (
     `,
   };
 
-  const response = await fetch(getNetworkSubgraphURL(network), {
+  const response = await fetch(network.subgraphUrls[0], {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -200,7 +198,7 @@ export const listReleaseTransactionByWalletAddress = async (
   walletAddress: Address
 ) => {
   const user = useUser();
-  const network = user.networkName.value;
+  const network = user.network.value;
 
   // Query subgraph for release transactions
   const subgraphQuery = {
@@ -219,7 +217,7 @@ export const listReleaseTransactionByWalletAddress = async (
   };
 
   // Fetch data from subgraph
-  const response = await fetch(getNetworkSubgraphURL(network), {
+  const response = await fetch(network.subgraphUrls[0], {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -263,7 +261,7 @@ export const listReleaseTransactionByWalletAddress = async (
 
 const listLockTransactionByWalletAddress = async (walletAddress: Address) => {
   const user = useUser();
-  const network = user.networkName.value;
+  const network = user.network.value;
 
   // Query subgraph for lock added transactions
   const subgraphQuery = {
@@ -284,7 +282,7 @@ const listLockTransactionByWalletAddress = async (walletAddress: Address) => {
 
   try {
     // Fetch data from subgraph
-    const response = await fetch(getNetworkSubgraphURL(network), {
+    const response = await fetch(network.subgraphUrls[0], {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -332,7 +330,7 @@ const listLockTransactionByWalletAddress = async (walletAddress: Address) => {
 
 const listLockTransactionBySellerAddress = async (sellerAddress: Address) => {
   const user = useUser();
-  const network = user.networkName.value;
+  const network = user.network.value;
 
   // Query subgraph for lock added transactions where seller matches
   const subgraphQuery = {
@@ -354,7 +352,7 @@ const listLockTransactionBySellerAddress = async (sellerAddress: Address) => {
 
   try {
     // Fetch data from subgraph
-    const response = await fetch(getNetworkSubgraphURL(network), {
+    const response = await fetch(network.subgraphUrls[0], {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

src/components/BuyerSteps/BuyConfirmedComponent.vue

@@ -53,7 +53,7 @@ const getWalletTransactions = async () => {
 const callWithdraw = async (amount: string) => {
   if (amount) {
     user.setLoadingWalletTransactions(true);
-    const withdraw = await withdrawDeposit(amount, user.selectedToken.value);
+    const withdraw = await withdrawDeposit(amount, user.network.value.tokens[user.selectedToken.value].address);
     if (withdraw) {
       console.log("Saque realizado!");
       await getWalletTransactions();

src/components/BuyerSteps/BuyerSearchComponent.vue

@@ -5,12 +5,11 @@ import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
 import CustomButton from "@/components/ui/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
-import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { decimalCount } from "@/utils/decimalCount";
 import { getTokenImage } from "@/utils/imagesPath";
 import { onClickOutside } from "@vueuse/core";
-
+import { Networks } from "@/config/networks";
 import { TokenEnum } from "@/model/NetworkEnum";
 
 // Store reference
@@ -19,7 +18,7 @@ const selectTokenToggle = ref<boolean>(false);
 
 const {
   walletAddress,
-  networkName,
+  network,
   selectedToken,
   depositsValidList,
   loadingNetworkLiquidity,
@@ -51,7 +50,7 @@ const connectAccount = async (): Promise<void> => {
 
 const emitConfirmButton = async (): Promise<void> => {
   const deposit = selectedDeposits.value?.find(
-    (d) => d.network === Number(networkName.value)
+    (d) => d.network === network.value
   );
   if (!deposit) return;
   deposit.participantID = await getParticipantID(deposit.seller, deposit.token);
@@ -99,7 +98,7 @@ const verifyLiquidity = (): void => {
   );
   selectedDeposits.value = selDeposits;
   hasLiquidity.value = !!selDeposits.find(
-    (d) => d.network === Number(networkName.value)
+    (d) => d.network === network.value
   );
   enableOrDisableConfirmButton();
 };
@@ -110,7 +109,7 @@ const enableOrDisableConfirmButton = (): void => {
     return;
   }
 
-  if (!selectedDeposits.value.find((d) => d.network === networkName.value)) {
+  if (!selectedDeposits.value.find((d) => d.network === network.value)) {
     enableConfirmButton.value = false;
     return;
   }
@@ -118,7 +117,7 @@ const enableOrDisableConfirmButton = (): void => {
   enableConfirmButton.value = true;
 };
 
-watch(networkName, (): void => {
+watch(network, (): void => {
   verifyLiquidity();
   enableOrDisableConfirmButton();
 });
@@ -234,22 +233,22 @@ const handleSubmit = async (e: Event): Promise<void> => {
           <div class="flex gap-2">
             <img
               alt="Rootstock image"
-              src="@/assets/rootstock.svg?url"
+              src="@/assets/networks/rootstock.svg?url"
               width="24"
               height="24"
               v-if="
                 selectedDeposits &&
-                selectedDeposits.find((d) => d.network == NetworkEnum.rootstock)
+                selectedDeposits.find((d) => d.network == Networks.rootstockTestnet)
               "
             />
             <img
               alt="Ethereum image"
-              src="@/assets/ethereum.svg?url"
+              src="@/assets/networks/ethereum.svg?url"
               width="24"
               height="24"
               v-if="
                 selectedDeposits &&
-                selectedDeposits.find((d) => d.network == NetworkEnum.sepolia)
+                selectedDeposits.find((d) => d.network == Networks.sepolia)
               "
             />
           </div>

src/components/ListingComponent/ListingComponent.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
 import { useUser } from "@/composables/useUser";
@@ -32,10 +31,7 @@ const showInitialItems = (): void => {
 };
 
 const openEtherscanUrl = (transactionHash: string): void => {
-  const networkUrl =
-    user.networkName.value == NetworkEnum.sepolia
-      ? "sepolia.etherscan.io"
-      : "mumbai.polygonscan.com";
+  const networkUrl = user.network.value.blockExplorers?.default.url;
   const url = `https://${networkUrl}/tx/${transactionHash}`;
   window.open(url, "_blank");
 };
@@ -84,7 +80,7 @@ showInitialItems();
       :key="item.blockNumber"
       :selected-token="user.selectedToken.value"
       :transaction="item"
-      :network-name="user.networkName.value"
+      :network-name="user.network.value.name"
       @open-explorer="openEtherscanUrl"
     />
 

src/components/ListingComponent/TransactionCard.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import type { WalletTransaction } from "@/model/WalletTransaction";
-import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
+import { TokenEnum } from "@/model/NetworkEnum";
 import { computed } from "vue";
 import StatusBadge, { type StatusType } from "../ui/StatusBadge.vue";
+import { Networks } from "@/config/networks";
 
 const props = defineProps<{
   transaction: WalletTransaction;
-  networkName: NetworkEnum;
+  networkName: keyof typeof Networks;
   selectedToken: TokenEnum;
 }>();
 
@@ -28,7 +29,7 @@ const eventName = computed(() => {
 });
 
 const explorerName = computed(() => {
-  return props.networkName === NetworkEnum.sepolia ? "Etherscan" : "Polygonscan";
+  return Networks[props.networkName].blockExplorers?.default.name;
 });
 
 const statusType = computed((): StatusType => {

src/components/SellerSteps/SellerComponent.vue

@@ -71,7 +71,7 @@ const handleSubmit = (e: Event): void => {
 
   const data: Participant = {
     offer: offer.value,
-    chainID: user.networkId.value,
+    chainID: user.network.value.id,
     identification: processedIdentification,
     bankIspb: selectedBank.value?.ISPB,
     accountType: accountType.value,

src/components/SellerSteps/SellerSearchComponent.vue

@@ -90,13 +90,13 @@ const handleInputEvent = (event: any): void => {
           <div class="flex gap-2">
             <img
               alt="Polygon image"
-              src="@/assets/polygon.svg?url"
+              src="@/assets/networks/polygon.svg?url"
               width="24"
               height="24"
             />
             <img
               alt="Ethereum image"
-              src="@/assets/ethereum.svg?url"
+              src="@/assets/networks/ethereum.svg?url"
               width="24"
               height="24"
             />

src/components/TopBar/TopBar.vue

@@ -2,10 +2,8 @@
 import { ref, watch } from "vue";
 import { useUser } from "@/composables/useUser";
 import { onClickOutside } from "@vueuse/core";
-import { NetworkEnum } from "@/model/NetworkEnum";
 import { getNetworkImage } from "@/utils/imagesPath";
-import { Networks } from "@/model/Networks";
-
+import { Networks } from "@/config/networks";
 import { useOnboard } from "@web3-onboard/vue";
 
 import ChevronDown from "@/assets/chevronDown.svg";
@@ -13,10 +11,12 @@ import TwitterIcon from "@/assets/twitterIcon.svg";
 import LinkedinIcon from "@/assets/linkedinIcon.svg";
 import GithubIcon from "@/assets/githubIcon.svg";
 import { connectProvider } from "@/blockchain/provider";
+import { DEFAULT_NETWORK } from "@/config/networks";
+import type { NetworkConfig } from "@/model/NetworkEnum";
 
 // Use the new composable
 const user = useUser();
-const { walletAddress, sellerView, networkId } = user;
+const { walletAddress, sellerView, network } = user;
 
 const menuOpenToggle = ref<boolean>(false);
 const infoMenuOpenToggle = ref<boolean>(false);
@@ -40,20 +40,20 @@ watch(connectedWallet, async (newVal: any) => {
 });
 
 watch(connectedChain, (newVal: any) => {
-  // Check if connected chain is valid, otherwise default to Sepolia (NetworkEnum.SEPOLIA)
+  // Check if connected chain is valid, otherwise default to Sepolia
   if (
     !newVal ||
     !Object.values(Networks).some(
-      (network) => Number(network.chainId) === Number(newVal.id)
+      (network) => network.id === Number(newVal.id)
     )
   ) {
     console.log(
       "Invalid or unsupported network detected, defaulting to Sepolia"
     );
-    user.setNetworkId(user.networkId.value);
+    user.setNetwork(DEFAULT_NETWORK);
     return;
   }
-  user.setNetworkId(newVal?.id);
+  user.setNetworkById(newVal?.id);
 });
 
 const formatWalletAddress = (): string => {
@@ -78,14 +78,15 @@ const closeMenu = (): void => {
   menuOpenToggle.value = false;
 };
 
-const networkChange = async (network: NetworkEnum): Promise<void> => {
+const networkChange = async (network: NetworkConfig): Promise<void> => {
   currencyMenuOpenToggle.value = false;
+  const chainId = network.id.toString(16)
   try {
     await setChain({
-      chainId: Networks[network].chainId,
+      chainId: `0x${chainId}`,
       wallet: connectedWallet.value?.label || "",
     });
-    user.setNetworkId(network);
+    user.setNetwork(network);
   } catch (error) {
     console.log("Error changing network", error);
   }
@@ -258,7 +259,7 @@ onClickOutside(infoMenuRef, () => {
         >
           <img
             alt="Choosed network image"
-            :src="getNetworkImage(NetworkEnum[user.networkName.value])"
+            :src="getNetworkImage(network.name)"
             height="24"
             width="24"
           />
@@ -267,9 +268,7 @@ onClickOutside(infoMenuRef, () => {
             :class="{ '!text-gray-900': currencyMenuOpenToggle }"
           >
             {{
-              Networks[user.networkName.value]
-                ? Networks[user.networkName.value].chainName
-                : "Invalid Chain"
+              user.network.value.name || "Invalid Chain"
             }}
           </span>
           <div
@@ -292,20 +291,20 @@ onClickOutside(infoMenuRef, () => {
               class="mt-2 bg-white rounded-md border border-gray-300 drop-shadow-md shadow-md overflow-clip"
             >
               <div
-                v-for="(chainData, network) in Networks"
-                :key="network"
+                v-for="network in Networks"
+                :key="network.id"
                 class="menu-button p-4 gap-2 cursor-pointer hover:bg-gray-200 flex items-center !justify-start whitespace-nowrap transition-colors duration-150 ease-in-out"
                 @click="networkChange(network)"
               >
                 <img
-                  :alt="chainData.chainName + ' image'"
+                  :alt="network.name + ' image'"
                   width="20"
                   height="20"
-                  :src="getNetworkImage(NetworkEnum[network])"
+                  :src="getNetworkImage(network.name)"
                   class="mr-2 ml-1"
                 />
                 <span class="text-gray-900 font-semibold text-sm">
-                  {{ chainData.chainName }}
+                  {{ network.name }}
                 </span>
               </div>
               <div class="w-full flex justify-center">
@@ -462,19 +461,19 @@ onClickOutside(infoMenuRef, () => {
       <div class="pl-4 mt-2 h-full">
         <div class="bg-white rounded-md z-10 h-full">
           <div
-            v-for="(chainData, network) in Networks"
-            :key="network"
+            v-for="network in Networks"
+            :key="network.id"
             class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2 px-4"
             @click="networkChange(network)"
           >
             <img
-              :alt="chainData.chainName + 'image'"
+              :alt="network.name + 'image'"
               width="20"
               height="20"
-              :src="getNetworkImage(NetworkEnum[network])"
+              :src="getNetworkImage(network.name)"
             />
             <span class="text-gray-900 py-4 text-end font-bold text-sm">
-              {{ chainData.chainName }}
+              {{ network.name }}
             </span>
           </div>
         </div>

src/components/ui/NetworkBadges.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { NetworkEnum } from "@/model/NetworkEnum";
 import { getNetworkImage } from "@/utils/imagesPath";
+import type { NetworkConfig } from "@/model/NetworkEnum";
 
 const props = withDefaults(
   defineProps<{
-    networks: NetworkEnum[];
+    networks: NetworkConfig[];
     size?: "sm" | "md" | "lg";
     showLabel?: boolean;
   }>(),
@@ -24,8 +24,8 @@ const sizeMap = {
 const networkData = computed(() => {
   return props.networks.map((network) => ({
     network,
-    image: getNetworkImage(String(network)),
-    name: String(network),
+    image: getNetworkImage(network.name),
+    name: network.name,
   }));
 });
 </script>
@@ -34,7 +34,7 @@ const networkData = computed(() => {
   <div class="network-badges">
     <div
       v-for="data in networkData"
-      :key="data.network"
+      :key="data.network.id"
       class="network-badge"
       :title="data.name"
     >

src/components/ui/NetworkSelector.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { NetworkEnum } from "@/model/NetworkEnum";
-import { Networks } from "@/model/Networks";
+import { Networks } from "@/config/networks";
+import type { NetworkConfig } from "@/model/NetworkEnum";
 import { getNetworkImage } from "@/utils/imagesPath";
 import Dropdown, { type DropdownItem } from "./Dropdown.vue";
 
 const props = withDefaults(
   defineProps<{
-    modelValue: NetworkEnum;
+    modelValue: NetworkConfig;
     disabled?: boolean;
     size?: "sm" | "md" | "lg";
-    availableNetworks?: NetworkEnum[];
+    availableNetworks?: NetworkConfig[];
   }>(),
   {
     disabled: false,
@@ -19,21 +19,19 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-  "update:modelValue": [value: NetworkEnum];
-  change: [value: NetworkEnum];
+  "update:modelValue": [value: NetworkConfig];
+  change: [value: NetworkConfig];
 }>();
 
-const networkItems = computed((): DropdownItem<NetworkEnum>[] => {
-  const networks = props.availableNetworks || (Object.values(NetworkEnum).filter(v => typeof v === 'number') as NetworkEnum[]);
-  
-  return networks.map((network) => ({
+const networkItems = computed((): DropdownItem<NetworkConfig>[] => {  
+  return Object.values(Networks).map((network) => ({
     value: network,
-    label: Networks[network]?.chainName || String(network),
-    icon: getNetworkImage(String(network)),
+    label: network.name,
+    icon: getNetworkImage(network.name),
   }));
 });
 
-const handleChange = (value: NetworkEnum) => {
+const handleChange = (value: NetworkConfig) => {
   emit("update:modelValue", value);
   emit("change", value);
 };

src/components/ui/ToasterComponent.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from "vue";
 import { useOnboard } from "@web3-onboard/vue";
-import { Networks } from "@/model/Networks";
+import { Networks } from "@/config/networks";
 import { useUser } from "@/composables/useUser";
 
 const { connectedWallet } = useOnboard();
 const user = useUser();
-const { networkId, networkName } = user;
+const { network } = user;
 
 const isWrongNetwork = ref(false);
-const targetNetworkName = computed(() => Networks[networkName.value].chainName);
+const targetNetworkName = computed(() => network.value.name);
 
 const checkNetwork = () => {
   if (connectedWallet.value) {
     const chainId = connectedWallet.value.chains[0].id;
-    isWrongNetwork.value = Number(chainId) !== networkId.value;
+    isWrongNetwork.value = Number(chainId) !== network.value.id;
   } else {
     isWrongNetwork.value = false; // No wallet connected yet
   }
@@ -23,11 +23,12 @@ const checkNetwork = () => {
 const switchNetwork = async () => {
   try {
     if (connectedWallet.value && connectedWallet.value.provider) {
+      let chainId = network.value.id.toString(16);
       await connectedWallet.value.provider.request({
         method: "wallet_switchEthereumChain",
         params: [
           {
-            chainId: Networks[networkName.value].chainId,
+            chainId: `0x${chainId}`,
           },
         ],
       });
@@ -39,7 +40,7 @@ const switchNetwork = async () => {
 
 onMounted(checkNetwork);
 watch(connectedWallet, checkNetwork);
-watch(networkId, checkNetwork, { immediate: true });
+watch(network, checkNetwork, { immediate: true });
 </script>
 
 <template>

src/composables/useUser.ts

@@ -1,15 +1,14 @@
 import { ref } from "vue";
-import { NetworkEnum, TokenEnum } from "../model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { Participant } from "../utils/bbPay";
 import type { Address } from "viem"
-import { DEFAULT_NETWORK, getNetworkConfig } from "@/config/networks";
+import { DEFAULT_NETWORK, Networks } from "@/config/networks";
+import { TokenEnum, NetworkConfig } from "@/model/NetworkEnum"
 
 const walletAddress = ref<Address | null>(null);
 const balance = ref("");
-const networkId = ref(parseInt(getNetworkConfig(DEFAULT_NETWORK).chainId, 16));
-const networkName = ref(DEFAULT_NETWORK);
-const selectedToken = ref(TokenEnum.BRZ);
+const network = ref(DEFAULT_NETWORK);
+const selectedToken = ref<TokenEnum>(TokenEnum.BRZ);
 const loadingLock = ref(false);
 const sellerView = ref(false);
 const depositsValidList = ref<ValidDeposit[]>([]);
@@ -32,9 +31,29 @@ export function useUser() {
     selectedToken.value = token;
   };
 
-  const setNetworkId = (network: string | number) => {
-    networkName.value = Number(network) as NetworkEnum || DEFAULT_NETWORK;
-    networkId.value = Number(network);
+  const setNetwork = (chain: NetworkConfig) => {
+    network.value = chain;
+  };
+
+  const setNetworkById = (id: string | number) => {
+    let chainId: number;
+
+    if (typeof id === 'string') {
+      // Parse hex string or number string to number
+      if (id.startsWith('0x')) {
+        chainId = parseInt(id, 16);
+      } else {
+        chainId = parseInt(id, 10);
+      }
+    } else {
+      chainId = id;
+    }
+
+    // Find network by chain ID
+    const chain = Object.values(Networks).find(n => n.id === chainId);
+    if (chain) {
+      network.value = chain;
+    }
   };
 
   const setLoadingLock = (isLoading: boolean) => {
@@ -76,8 +95,7 @@ export function useUser() {
     // State
     walletAddress,
     balance,
-    networkId,
-    networkName,
+    network,
     selectedToken,
     loadingLock,
     sellerView,
@@ -91,7 +109,8 @@ export function useUser() {
     setWalletAddress,
     setBalance,
     setSelectedToken,
-    setNetworkId,
+    setNetwork,
+    setNetworkById,
     setLoadingLock,
     setSellerView,
     setDepositsValidList,

src/config/networks.ts

@@ -1,103 +1,24 @@
-import { NetworkEnum } from "@/model/NetworkEnum";
-import { sepolia, rootstockTestnet, type Chain } from "viem/chains";
+import { sepolia, rootstockTestnet } from "viem/chains";
+import { NetworkConfig } from "@/model/NetworkEnum"
+// TODO: import addresses from p2pix-smart-contracts deployments
 
-export interface NetworkConfig {
-  id: NetworkEnum;
-  chainId: string;
-  chainName: string;
-  token: string;
-  rpcUrl: string;
-  blockExplorerUrl: string;
-  iconPath: string;
-  viemChain: Chain;
-  contracts: {
-    p2pixAddress: string;
-    tokenAddresses: Record<string, string>;
-  };
-}
-
-export const NETWORK_CONFIGS: Record<NetworkEnum, NetworkConfig> = {
-  [NetworkEnum.sepolia]: {
-    id: NetworkEnum.sepolia,
-    chainId: "0xAA36A7",
-    chainName: "Sepolia Testnet",
-    token: "ETH",
-    rpcUrl: import.meta.env.VITE_SEPOLIA_API_URL,
-    blockExplorerUrl: "https://sepolia.etherscan.io",
-    iconPath: "/ethereum.svg",
-    viemChain: sepolia,
-    contracts: {
-      p2pixAddress: "0xb7cD135F5eFD9760981e02E2a898790b688939fe",
-      tokenAddresses: {
-        BRZ: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
-      },
-    },
+export const Networks: {[key:string]: NetworkConfig} = {
+  sepolia: { ...sepolia,
+    rpcUrls: { default: { http: [import.meta.env.VITE_SEPOLIA_API_URL]}},
+    contracts: { ...sepolia.contracts,
+      p2pix: {address:"0xb7cD135F5eFD9760981e02E2a898790b688939fe"} },
+    tokens: {
+      BRZ: {address:"0x3eBE67A2C7bdB2081CBd34ba3281E90377462289"} },
+    subgraphUrls: [import.meta.env.VITE_SEPOLIA_SUBGRAPH_URL]
   },
-  [NetworkEnum.rootstock]: {
-    id: NetworkEnum.rootstock,
-    chainId: "0x1F",
-    chainName: "Rootstock Testnet",
-    token: "tRBTC",
-    rpcUrl: import.meta.env.VITE_ROOTSTOCK_API_URL,
-    blockExplorerUrl: "https://explorer.testnet.rsk.co",
-    iconPath: "/rootstock.svg",
-    viemChain: rootstockTestnet,
-    contracts: {
-      p2pixAddress: "0x57Dcba05980761169508886eEdc6f5E7EC0411Dc",
-      tokenAddresses: {
-        BRZ: "0xfE841c74250e57640390f46d914C88d22C51e82e",
-      },
-    },
+  rootstockTestnet: { ...rootstockTestnet,
+    rpcUrls: { default: { http: [import.meta.env.VITE_RSK_API_URL]}},
+    contracts: { ...rootstockTestnet.contracts,
+      p2pix: {address:"0x57Dcba05980761169508886eEdc6f5E7EC0411Dc"} },
+    tokens: {
+      BRZ: {address:"0xfE841c74250e57640390f46d914C88d22C51e82e"} },
+    subgraphUrls: [import.meta.env.VITE_RSK_SUBGRAPH_URL]
   },
 };
 
-export const DEFAULT_NETWORK = NetworkEnum.sepolia;
-
-export const ENABLED_NETWORKS: NetworkEnum[] = [
-  NetworkEnum.sepolia,
-  NetworkEnum.rootstock,
-];
-
-export const getNetworkConfig = (networkId: NetworkEnum): NetworkConfig => {
-  return NETWORK_CONFIGS[networkId];
-};
-
-export const getEnabledNetworks = (): NetworkConfig[] => {
-  return ENABLED_NETWORKS.map(id => NETWORK_CONFIGS[id]);
-};
-
-export const isNetworkEnabled = (networkId: NetworkEnum): boolean => {
-  return ENABLED_NETWORKS.includes(networkId);
-};
-
-export const getNetworkByChainId = (chainId: string): NetworkConfig | null => {
-  const network = Object.values(NETWORK_CONFIGS).find(
-    config => config.chainId === chainId
-  );
-  return network || null;
-};
-
-export const getContractAddress = (
-  networkId: NetworkEnum,
-  contractType: 'p2pix' | string
-): string => {
-  const config = getNetworkConfig(networkId);
-  
-  if (contractType === 'p2pix') {
-    return config.contracts.p2pixAddress;
-  }
-  
-  return config.contracts.tokenAddresses[contractType] || '';
-};
-
-export const getRpcUrl = (networkId: NetworkEnum): string => {
-  return getNetworkConfig(networkId).rpcUrl;
-};
-
-export const getBlockExplorerUrl = (networkId: NetworkEnum): string => {
-  return getNetworkConfig(networkId).blockExplorerUrl;
-};
-
-export const getViemChain = (networkId: NetworkEnum): Chain => {
-  return getNetworkConfig(networkId).viemChain;
-};
+export const DEFAULT_NETWORK = Networks.sepolia;

src/model/NetworkEnum.ts

@@ -1,18 +1,10 @@
-export enum NetworkEnum {
-  sepolia = 11155111,
-  rootstock = 31,
-}
-
-export const getNetworkSubgraphURL = (network: NetworkEnum) => {
-  const networkMap: Record<NetworkEnum, string> = {
-    [NetworkEnum.sepolia]: import.meta.env.VITE_SEPOLIA_SUBGRAPH_URL || "",
-    [NetworkEnum.rootstock]: import.meta.env.VITE_RSK_SUBGRAPH_URL || "",
-  };
-
-  return networkMap[network] || "";
-};
+import type { Chain, ChainContract } from "viem";
 
 export enum TokenEnum {
-  BRZ = "BRZ",
+  BRZ = 'BRZ',
   // BRX = 'BRX'
 }
+export type NetworkConfig = Chain & {
+  tokens: Record<TokenEnum, ChainContract>,
+  subgraphUrls: string[]
+};

src/model/Networks.ts

@@ -1,28 +0,0 @@
-import { NetworkEnum } from "@/model/NetworkEnum";
-import { getNetworkConfig } from "@/config/networks";
-
-export interface NetworkConfig {
-  chainId: string;
-  chainName: string;
-  token: string;
-  rpcUrl?: string;
-  blockExplorerUrl?: string;
-}
-
-// Mapeamento para compatibilidade com código existente
-export const Networks: { [key in NetworkEnum]: NetworkConfig } = {
-  [NetworkEnum.sepolia]: {
-    chainId: getNetworkConfig(NetworkEnum.sepolia).chainId,
-    chainName: getNetworkConfig(NetworkEnum.sepolia).chainName,
-    token: getNetworkConfig(NetworkEnum.sepolia).token,
-    rpcUrl: getNetworkConfig(NetworkEnum.sepolia).rpcUrl,
-    blockExplorerUrl: getNetworkConfig(NetworkEnum.sepolia).blockExplorerUrl,
-  },
-  [NetworkEnum.rootstock]: {
-    chainId: getNetworkConfig(NetworkEnum.rootstock).chainId,
-    chainName: getNetworkConfig(NetworkEnum.rootstock).chainName,
-    token: getNetworkConfig(NetworkEnum.rootstock).token,
-    rpcUrl: getNetworkConfig(NetworkEnum.rootstock).rpcUrl,
-    blockExplorerUrl: getNetworkConfig(NetworkEnum.rootstock).blockExplorerUrl,
-  },
-};

src/model/ValidDeposit.ts

@@ -1,5 +1,5 @@
-import { NetworkEnum } from "./NetworkEnum";
 import type { Address } from "viem";
+import type { NetworkConfig } from "@/model/NetworkEnum";
 
 export type ValidDeposit = {
   token: Address;
@@ -7,6 +7,6 @@ export type ValidDeposit = {
   remaining: number;
   seller: Address;
   participantID: string;
-  network: NetworkEnum;
+  network: NetworkConfig;
   open?: boolean;
 };

src/utils/imagesPath.ts

@@ -1,30 +1,11 @@
 import type { TokenEnum } from "@/model/NetworkEnum";
-
-export const imagesPath = import.meta.glob<string>("@/assets/*.{png,svg}", {
-  eager: true,
-  query: "?url",
-  import: "default",
-});
+import { Networks } from "@/config/networks";
 
 export const getNetworkImage = (networkName: string): string => {
-  try {
-    const path = Object.keys(imagesPath).find((key) =>
-      key.endsWith(`${networkName.toLowerCase()}.svg`)
-    );
-    return path ? imagesPath[path] : "";
-  } catch (error) {
-    console.error("Error fetching network image");
-    const path = Object.keys(imagesPath).find((key) =>
-      key.endsWith(`invalidIcon.svg`)
-    );
-    return path ? imagesPath[path] : "";
-    return "";
-  }
+  const normalizedName = networkName.toLowerCase().replace(/[^a-z0-9]/g, '-');
+  return new URL(`../assets/networks/${normalizedName}.svg`, import.meta.url).href;
 };
 
 export const getTokenImage = (tokenName: TokenEnum): string => {
-  const path = Object.keys(imagesPath).find((key) =>
-    key.endsWith(`${tokenName.toLowerCase()}.svg`)
-  );
-  return path ? imagesPath[path] : "";
+  return new URL(`../assets/tokens/${tokenName.toLowerCase()}.svg`, import.meta.url).href;
 };

src/views/HomeView.vue

@@ -24,7 +24,7 @@ const user = useUser();
 user.setSellerView(false);
 
 // States
-const { loadingLock, walletAddress, networkName } = user;
+const { loadingLock, walletAddress, network } = user;
 const flowStep = ref<Step>(Step.Search);
 const participantID = ref<string>();
 const sellerAddress = ref<Address>();
@@ -103,7 +103,7 @@ if (paramLockID) {
     await checkForUnreleasedLocks();
   });
 
-  watch(networkName, async () => {
+  watch(network, async () => {
     if (walletAddress.value) await checkForUnreleasedLocks();
   });
 }

src/views/ManageBidsView.vue

@@ -16,7 +16,7 @@ import type { WalletTransaction } from "@/model/WalletTransaction";
 import router from "@/router/index";
 
 const user = useUser();
-const { walletAddress, networkName, selectedToken } = user;
+const { walletAddress, network, selectedToken } = user;
 const loadingWithdraw = ref<boolean>(false);
 const showAlert = ref<boolean>(false);
 
@@ -29,7 +29,9 @@ const callWithdraw = async (amount: string) => {
     loadingWithdraw.value = true;
     let withdraw;
     try {
-      withdraw = await withdrawDeposit(amount, selectedToken.value);
+      withdraw = await withdrawDeposit(
+          amount,
+          network.value.tokens[selectedToken.value].address);
     } catch {
       loadingWithdraw.value = false;
     }
@@ -79,7 +81,7 @@ watch(walletAddress, async () => {
   await getWalletTransactions();
 });
 
-watch(networkName, async () => {
+watch(network, async () => {
   await getWalletTransactions();
 });
 </script>