Added different types of tokens.

src/assets/brx.svg

@@ -0,0 +1 @@
+<svg height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle cx="16" cy="16" fill="#efb914" fill-rule="nonzero" r="16"/><path d="M21.002 9.855A7.947 7.947 0 0124 15.278l-2.847-.708a5.357 5.357 0 00-3.86-3.667c-2.866-.713-5.76.991-6.465 3.806s1.05 5.675 3.917 6.388a5.373 5.373 0 005.134-1.43l2.847.707a7.974 7.974 0 01-5.2 3.385L16.716 27l-2.596-.645.644-2.575a8.28 8.28 0 01-1.298-.323l-.643 2.575-2.596-.646.81-3.241c-2.378-1.875-3.575-4.996-2.804-8.081s3.297-5.281 6.28-5.823L15.323 5l2.596.645-.644 2.575a8.28 8.28 0 011.298.323l.643-2.575 2.596.646z" fill="#fff"/></g></svg>

src/blockchain/__tests__/addresses.spec.ts

@@ -9,7 +9,7 @@ import {
 } from "../addresses";
 
 import { setActivePinia, createPinia } from "pinia";
-import { NetworkEnum } from "@/model/NetworkEnum";
+import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
 import { useEtherStore } from "@/store/ether";
 
 describe("addresses.ts types", () => {
@@ -32,7 +32,7 @@ describe("addresses.ts functions", () => {
   it("getTokenAddress Ethereum", () => {
     const etherStore = useEtherStore();
     etherStore.setNetworkName(NetworkEnum.ethereum);
-    expect(getTokenAddress()).toBe(
+    expect(getTokenAddress(TokenEnum.BRZ)).toBe(
       "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
     );
   });
@@ -40,13 +40,13 @@ describe("addresses.ts functions", () => {
   it("getTokenAddress Polygon", () => {
     const etherStore = useEtherStore();
     etherStore.setNetworkName(NetworkEnum.polygon);
-    expect(getTokenAddress()).toBe(
+    expect(getTokenAddress(TokenEnum.BRZ)).toBe(
       "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29"
     );
   });
 
   it("getTokenAddress Default", () => {
-    expect(getTokenAddress()).toBe(
+    expect(getTokenAddress(TokenEnum.BRZ)).toBe(
       "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
     );
   });

src/blockchain/addresses.ts

@@ -1,16 +1,53 @@
 import { useEtherStore } from "@/store/ether";
-import { NetworkEnum } from "@/model/NetworkEnum";
+import { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
 
-const getTokenAddress = (network?: NetworkEnum): string => {
+const ethereumTokens: { [key in TokenEnum]: string } = {
+  BRZ: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
+  BRX: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
+}
+
+const polygonTokens: { [key in TokenEnum]: string } = {
+  BRZ: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29",
+  BRX: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29",
+}
+
+const rootstockTokens: { [key in TokenEnum]: string } = {
+  BRZ: "0xfE841c74250e57640390f46d914C88d22C51e82e",
+  BRX: "0xfE841c74250e57640390f46d914C88d22C51e82e",
+}
+
+export const getTokenByAddress = (address: string) => {
+  for (const token of Object.keys(ethereumTokens)) {
+    if (address === ethereumTokens[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();
 
-  const possibleTokenAddresses: { [key: string]: string } = {
+  const possibleTokenAddresses: { [key: string]: { [key in TokenEnum]: string } } = {
-    Ethereum: "0x3eBE67A2C7bdB2081CBd34ba3281E90377462289",
+    Ethereum: ethereumTokens,
-    Polygon: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29",
+    Polygon: polygonTokens,
-    Rootstock: "0xfE841c74250e57640390f46d914C88d22C51e82e",
+    Rootstock: rootstockTokens,
   };
 
-  return possibleTokenAddresses[network ? network : etherStore.networkName];
+  return possibleTokenAddresses[network ? network : etherStore.networkName][token];
 };
 
 const getP2PixAddress = (network?: NetworkEnum): string => {
@@ -27,7 +64,6 @@ const getP2PixAddress = (network?: NetworkEnum): string => {
 
 const getProviderUrl = (): string => {
   const etherStore = useEtherStore();
-
   const possibleProvidersUrls: { [key: string]: string } = {
     Ethereum: import.meta.env.VITE_SEPOLIA_API_URL,
     Polygon: import.meta.env.VITE_MUMBAI_API_URL,

src/blockchain/buyerMethods.ts

@@ -7,6 +7,7 @@ import p2pix from "@/utils/smart_contract_files/P2PIX.json";
 
 import { BigNumber, ethers } from "ethers";
 import { parseEther } from "ethers/lib/utils";
+import type { TokenEnum } from "@/model/NetworkEnum";
 
 const addLock = async (
   seller: string,
@@ -84,11 +85,11 @@ const cancelDeposit = async (depositId: BigNumber): Promise<any> => {
   return cancel;
 };
 
-const withdrawDeposit = async (amount: string): Promise<any> => {
+const withdrawDeposit = async (amount: string, token: TokenEnum): Promise<any> => {
   const contract = getContract();
 
   const withdraw = await contract.withdraw(
-    getTokenAddress(),
+    getTokenAddress(token),
     parseEther(String(amount)),
     []
   );

src/blockchain/events.ts

@@ -12,7 +12,6 @@ import type { Pix } from "@/model/Pix";
 
 const getNetworksLiquidity = async (): Promise<void> => {
   const etherStore = useEtherStore();
-
   const sepoliaProvider = new ethers.providers.JsonRpcProvider(
     import.meta.env.VITE_SEPOLIA_API_URL,
     11155111
@@ -36,7 +35,6 @@ const getNetworksLiquidity = async (): Promise<void> => {
     p2pix.abi,
     mumbaiProvider
   );
-
   const p2pContractRootstock = new ethers.Contract(
     getP2PixAddress(NetworkEnum.rootstock),
     p2pix.abi,
@@ -46,22 +44,20 @@ const getNetworksLiquidity = async (): Promise<void> => {
   etherStore.setLoadingNetworkLiquidity(true);
 
   const depositListSepolia = await getValidDeposits(
-    getTokenAddress(NetworkEnum.ethereum),
+    getTokenAddress(etherStore.selectedToken, NetworkEnum.ethereum),
     p2pContractSepolia
-  ); 
-
-  const depositListMumbai = await getValidDeposits(
-    getTokenAddress(NetworkEnum.polygon),
-    p2pContractMumbai
   );
-
+  // const depositListMumbai = await getValidDeposits(
+  //   getTokenAddress(etherStore.selectedToken, NetworkEnum.polygon),
+  //   p2pContractMumbai
+  // );
   const depositListRootstock = await getValidDeposits(
-    getTokenAddress(NetworkEnum.rootstock),
+    getTokenAddress(etherStore.selectedToken, NetworkEnum.rootstock),
     p2pContractRootstock
   );
 
   etherStore.setDepositsValidListSepolia(depositListSepolia);
-  etherStore.setDepositsValidListMumbai(depositListMumbai);
+  // etherStore.setDepositsValidListMumbai(depositListMumbai);
   etherStore.setDepositsValidListRootstock(depositListRootstock);
   etherStore.setLoadingNetworkLiquidity(false);
 };

src/blockchain/sellerMethods.ts

@@ -5,13 +5,15 @@ import { parseEther } from "ethers/lib/utils";
 import { ethers } from "ethers";
 
 import mockToken from "../utils/smart_contract_files/MockToken.json";
+import { useEtherStore } from "@/store/ether";
 
 const approveTokens = async (tokenQty: string): Promise<any> => {
   const provider = getProvider();
   const signer = provider.getSigner();
+  const etherStore = useEtherStore();
 
   const tokenContract = new ethers.Contract(
-    getTokenAddress(),
+    getTokenAddress(etherStore.selectedToken),
     mockToken.abi,
     signer
   );
@@ -27,9 +29,10 @@ const approveTokens = async (tokenQty: string): Promise<any> => {
 
 const addDeposit = async (tokenQty: string, pixKey: string): Promise<any> => {
   const p2pContract = getContract();
+  const etherStore = useEtherStore();
 
   const deposit = await p2pContract.deposit(
-    getTokenAddress(),
+    getTokenAddress(etherStore.selectedToken),
     parseEther(tokenQty),
     pixKey,
     true,

src/blockchain/wallet.ts

@@ -21,14 +21,14 @@ const updateWalletStatus = async (): Promise<void> => {
   const signer = provider.getSigner();
 
   const { chainId } = await provider.getNetwork();
-  if(!isPossibleNetwork(chainId.toString())){
+  if (!isPossibleNetwork(chainId.toString())) {
-    window.alert("Invalid chain!:"+chainId);
+    window.alert("Invalid chain!:" + chainId);
     return;
   }
   etherStore.setNetworkName(possibleChains[chainId]);
 
   const mockTokenContract = new ethers.Contract(
-    getTokenAddress(),
+    getTokenAddress(etherStore.selectedToken),
     mockToken.abi,
     signer
   );
@@ -43,7 +43,8 @@ const updateWalletStatus = async (): Promise<void> => {
 const listValidDepositTransactionsByWalletAddress = async (
   walletAddress: string
 ): Promise<ValidDeposit[]> => {
-  const walletDeposits = await getValidDeposits(getTokenAddress());
+  const etherStore = useEtherStore();
+  const walletDeposits = await getValidDeposits(getTokenAddress(etherStore.selectedToken));
 
   if (walletDeposits) {
     return walletDeposits

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -54,7 +54,7 @@ const getWalletTransactions = async () => {
 const callWithdraw = async (amount: string) => {
   if (amount) {
     etherStore.setLoadingWalletTransactions(true);
-    const withdraw = await withdrawDeposit(amount);
+    const withdraw = await withdrawDeposit(amount, etherStore.selectedToken);
     if (withdraw) {
       console.log("Saque realizado!");
       await getWalletTransactions();
@@ -92,13 +92,15 @@ onMounted(async () => {
       >
         <div>
           <p>Tokens recebidos</p>
-          <p class="text-2xl text-gray-900">{{ props.tokenAmount }} BRZ</p>
+          <p class="text-2xl text-gray-900">
+            {{ props.tokenAmount }} {{ etherStore.selectedToken }}
+          </p>
         </div>
         <div class="my-5">
           <p class="text-sm">
             <b>Não encontrou os tokens? </b><br />Clique no botão abaixo para
             <br />
-            cadastrar o BRZ em sua carteira.
+            cadastrar o {{ etherStore.selectedToken }} em sua carteira.
           </p>
         </div>
         <CustomButton :text="'Cadastrar token'" @buttonClicked="() => {}" />

src/components/ListingComponent/ListingComponent.vue

@@ -9,6 +9,7 @@ import { ref, watch, onMounted } from "vue";
 import SpinnerComponent from "../SpinnerComponent.vue";
 import { decimalCount } from "@/utils/decimalCount";
 import { debounce } from "@/utils/debounce";
+import { getTokenByAddress } from "@/blockchain/addresses";
 import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
 
 const etherStore = useEtherStore();
@@ -175,11 +176,13 @@ showInitialItems();
             Saldo disponível
           </p>
           <p class="text-xl leading-7 font-semibold text-gray-900">
-            {{ getRemaining() }} BRZ
+            {{ getRemaining() }} {{ etherStore.selectedToken }}
           </p>
           <div class="flex gap-2 w-32 sm:w-56" v-if="activeLockAmount != 0">
             <span class="text-xs font-normal text-gray-400" ref="infoText">{{
-              `com ${activeLockAmount.toFixed(2)} BRZ em lock`
+              `com ${activeLockAmount.toFixed(2)} ${
+                etherStore.selectedToken
+              } em lock`
             }}</span>
             <div
               class="absolute mt-[2px] md-view"
@@ -282,7 +285,7 @@ showInitialItems();
             class="text-xl sm:text-xl leading-7 font-semibold text-gray-900"
           >
             {{ item.amount }}
-            BRZ
+            {{ getTokenByAddress(item.token) }}
           </span>
         </div>
         <div>

src/components/SearchComponent.vue

@@ -10,13 +10,18 @@ import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { decimalCount } from "@/utils/decimalCount";
 import SpinnerComponent from "./SpinnerComponent.vue";
+import { getTokenImage } from "@/utils/imagesPath";
+
+import { TokenEnum } from "@/model/NetworkEnum";
 
 // Store reference
 const etherStore = useEtherStore();
+const selectTokenToggle = ref<boolean>(false);
 
 const {
   walletAddress,
   networkName,
+  selectedToken,
   depositsValidListSepolia,
   depositsValidListMumbai,
   loadingNetworkLiquidity,
@@ -66,6 +71,15 @@ const handleInputEvent = (event: any): void => {
   verifyLiquidity();
 };
 
+const openTokenSelection = (): void => {
+  selectTokenToggle.value = true;
+};
+
+const handleSelectedToken = (token: TokenEnum): void => {
+  etherStore.setSelectedToken(token);
+  selectTokenToggle.value = false;
+};
+
 // Verify if there is a valid deposit to buy
 const verifyLiquidity = (): void => {
   enableConfirmButton.value = false;
@@ -150,20 +164,49 @@ watch(walletAddress, (): void => {
             placeholder="0  "
             step=".01"
           />
-          <div
+          <div class="relative">
-            class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
+            <button
-          >
+              class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
-            <img
+              @click="openTokenSelection()"
-              alt="Token image"
-              class="sm:w-fit w-4"
-              src="@/assets/brz.svg"
-            />
-            <span class="text-gray-900 sm:text-lg text-md w-fit" id="brz"
-              >BRZ</span
             >
+              <img
+                alt="Token image"
+                class="sm:w-fit w-4"
+                :src="getTokenImage(selectedToken)"
+              />
+              <span class="text-gray-900 sm:text-lg text-md w-fit" id="token">{{
+                selectedToken
+              }}</span>
+            </button>
+            <div
+              v-if="selectTokenToggle"
+              class="mt-2 w-[100px] text-gray-900 lg-view absolute"
+            >
+              <div class="bg-white rounded-md z-10">
+                <div
+                  v-for="token in TokenEnum"
+                  class="flex menu-button gap-2 px-4 rounded-md cursor-pointer hover:bg-gray-300"
+                  @click="handleSelectedToken(token)"
+                >
+                  <img
+                    :alt="token + ' logo'"
+                    width="20"
+                    height="20"
+                    :src="getTokenImage(token)"
+                  />
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  >
+                    {{ token }}
+                  </span>
+                </div>
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-
         <div class="custom-divide py-2 mb-2"></div>
         <div
           class="flex justify-between"

src/components/SellerSteps/SellerSearchComponent.vue

@@ -4,6 +4,13 @@ import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
 
+import { TokenEnum } from "@/model/NetworkEnum";
+import { useEtherStore } from "@/store/ether";
+import { getTokenImage } from "@/utils/imagesPath";
+
+// Store
+const etherStore = useEtherStore();
+
 // Reactive state
 const tokenValue = ref<number>(0);
 const enableSelectButton = ref<boolean>(false);
@@ -58,8 +65,14 @@ const handleInputEvent = (event: any): void => {
           <div
             class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
           >
-            <img alt="Token image" class="w-fit" src="@/assets/brz.svg" />
+            <img
-            <span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span>
+              alt="Token image"
+              class="w-fit"
+              :src="getTokenImage(etherStore.selectedToken)"
+            />
+            <span class="text-gray-900 text-lg w-fit" id="token">{{
+              etherStore.selectedToken
+            }}</span>
           </div>
         </div>
 
@@ -94,6 +107,7 @@ const handleInputEvent = (event: any): void => {
           >
         </div>
       </div>
+
       <CustomButton
         :text="'Conectar carteira'"
         @buttonClicked="emit('tokenBuy')"

src/components/SellerSteps/SendNetwork.vue

@@ -8,6 +8,7 @@ const emit = defineEmits(["sendNetwork"]);
 const props = defineProps({
   pixKey: String,
   offer: Number,
+  selectedToken: String,
 });
 </script>
 
@@ -31,7 +32,9 @@ const props = defineProps({
       >
         <div>
           <p>Tokens ofertados</p>
-          <p class="text-2xl text-gray-900">{{ props.offer }} BRZ</p>
+          <p class="text-2xl text-gray-900">
+            {{ props.offer }} {{ props.selectedToken }}
+          </p>
         </div>
         <div class="my-3">
           <p>Chave Pix</p>

src/components/SellerSteps/WantSellComponent.vue

@@ -7,13 +7,16 @@ import { pixFormatValidation, postProcessKey } from "@/utils/pixKeyFormat";
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import { connectProvider } from "@/blockchain/provider";
+import { TokenEnum } from "@/model/NetworkEnum";
+import { getTokenImage } from "@/utils/imagesPath";
 
 // Reactive state
 const etherStore = useEtherStore();
-const { walletAddress } = storeToRefs(etherStore);
+const { walletAddress, selectedToken } = storeToRefs(etherStore);
 
 const offer = ref<string>("");
 const pixKey = ref<string>("");
+const selectTokenToggle = ref<boolean>(false);
 
 const enableSelectButton = ref<boolean>(false);
 const hasLiquidity = ref<boolean>(true);
@@ -52,6 +55,15 @@ const handlePixKeyInputEvent = (event: any): void => {
   validPixFormat.value = false;
 };
 
+const openTokenSelection = (): void => {
+  selectTokenToggle.value = true;
+};
+
+const handleSelectedToken = (token: TokenEnum): void => {
+  etherStore.setSelectedToken(token);
+  selectTokenToggle.value = false;
+};
+
 const handleButtonClick = async (
   offer: string,
   pixKey: string
@@ -94,15 +106,47 @@ const handleButtonClick = async (
             placeholder="Digite sua oferta"
             step=".01"
           />
-          <div
+          <div class="relative">
-            class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
+            <button
-          >
+              class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
-            <img
+              @click="openTokenSelection()"
-              alt="Token image"
+            >
-              class="sm:w-fit w-4"
+              <img
-              src="@/assets/brz.svg"
+                alt="Token image"
-            />
+                class="sm:w-fit w-4"
-            <span class="text-gray-900 w-fit" id="brz"> BRZ </span>
+                :src="getTokenImage(selectedToken)"
+              />
+              <span class="text-gray-900 sm:text-lg text-md w-fit" id="token">{{
+                selectedToken
+              }}</span>
+            </button>
+            <div
+              v-if="selectTokenToggle"
+              class="mt-2 w-[100px] text-gray-900 lg-view absolute"
+            >
+              <div class="bg-white rounded-md z-10">
+                <div
+                  v-for="token in TokenEnum"
+                  class="flex menu-button gap-2 px-4 rounded-md cursor-pointer hover:bg-gray-300"
+                  @click="handleSelectedToken(token)"
+                >
+                  <img
+                    :alt="token + ' logo'"
+                    width="20"
+                    height="20"
+                    :src="getTokenImage(token)"
+                  />
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  >
+                    {{ token }}
+                  </span>
+                </div>
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
 

src/components/TopBar/TopBar.vue

@@ -5,9 +5,7 @@ import { ref } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
-
+import { getNetworkImage } from "@/utils/imagesPath";
-const images = import.meta.glob<string>('@/assets/*.{png,svg}', { eager:true, query:'?url', import: 'default'} );
-
 // Store reference
 const etherStore = useEtherStore();
 
@@ -54,11 +52,6 @@ const networkChange = async (network: NetworkEnum): Promise<void> => {
   if (change) etherStore.setNetworkName(network);
 };
 
-const getNetworkImage = (networkName: NetworkEnum): string => {
-  const path = Object.keys(images).find(key => key.endsWith(`${networkName.toLowerCase()}.svg`));
-  return path ? images[path] : '';
-};
-
 onClickOutside(walletAddressRef, () => {
   menuHoverToggle.value = false;
   menuOpenToggle.value = false;
@@ -273,7 +266,7 @@ onClickOutside(infoMenuRef, () => {
         >
           <div class="mt-2">
             <div class="bg-white rounded-md z-10">
-              <div 
+              <div
                 v-for="network in NetworkEnum"
                 class="menu-button gap-2 px-4 rounded-md cursor-pointer"
                 @click="networkChange(network)"
@@ -471,8 +464,7 @@ onClickOutside(infoMenuRef, () => {
               width="20"
               height="20"
               :src="getNetworkImage(network)"
-
+            />
-          />
             <span class="text-gray-900 py-4 text-end font-bold text-sm">
               {{ network }}
             </span>

src/model/NetworkEnum.ts

@@ -3,3 +3,8 @@ export enum NetworkEnum {
   polygon = "Polygon",
   rootstock = "Rootstock",
 }
+
+export enum TokenEnum {
+  BRZ = 'BRZ',
+  BRX = 'BRX'
+}

src/store/ether.ts

@@ -1,12 +1,16 @@
-import { NetworkEnum } from "@/model/NetworkEnum";
+
+import { NetworkEnum, TokenEnum } from "../model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { defineStore } from "pinia";
 
+
+
 export const useEtherStore = defineStore("ether", {
   state: () => ({
     walletAddress: "",
     balance: "",
     networkName: NetworkEnum.ethereum,
+    selectedToken: TokenEnum.BRZ,
     loadingLock: false,
     sellerView: false,
     // Depósitos válidos para compra SEPOLIA
@@ -25,6 +29,9 @@ export const useEtherStore = defineStore("ether", {
     setBalance(balance: string) {
       this.balance = balance;
     },
+    setSelectedToken(token: TokenEnum) {
+      this.selectedToken = token;
+    },
     setNetworkName(networkName: NetworkEnum) {
       this.networkName = networkName;
     },

src/utils/imagesPath.ts

@@ -0,0 +1,17 @@
+import type { NetworkEnum, TokenEnum } from "@/model/NetworkEnum";
+
+export const imagesPath = import.meta.glob<string>('@/assets/*.{png,svg}', { eager: true, query: '?url', import: 'default' });
+
+export const getNetworkImage = (networkName: NetworkEnum): string => {
+    const path = Object.keys(imagesPath).find((key) =>
+        key.endsWith(`${networkName.toLowerCase()}.svg`)
+    );
+    return path ? imagesPath[path] : "";
+};
+
+export const getTokenImage = (tokenName: TokenEnum): string => {
+    const path = Object.keys(imagesPath).find((key) =>
+        key.endsWith(`${tokenName.toLowerCase()}.svg`)
+    );
+    return path ? imagesPath[path] : "";
+};

src/views/ManageBidsView.vue

@@ -17,8 +17,7 @@ import type { WalletTransaction } from "@/model/WalletTransaction";
 import router from "@/router/index";
 
 const etherStore = useEtherStore();
-
+const { walletAddress, networkName, selectedToken } = storeToRefs(etherStore);
-const { walletAddress, networkName } = storeToRefs(etherStore);
 const loadingWithdraw = ref<boolean>(false);
 const showAlert = ref<boolean>(false);
 
@@ -31,7 +30,7 @@ const callWithdraw = async (amount: string) => {
     loadingWithdraw.value = true;
     let withdraw;
     try {
-      withdraw = await withdrawDeposit(amount);
+      withdraw = await withdrawDeposit(amount, selectedToken.value);
     } catch {
       loadingWithdraw.value = false;
     }

src/views/SellerView.vue

@@ -77,6 +77,7 @@ const sendNetwork = async () => {
     <SendNetwork
       :pixKey="pixKeyBuyer"
       :offer="Number(offerValue)"
+      :selected-token="etherStore.selectedToken"
       v-if="!loading"
       @send-network="sendNetwork"
     />