Added different types of tokens.

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
-            class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
-          >
-            <img
-              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
+          <div class="relative">
+            <button
+              class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
+              @click="openTokenSelection()"
             >
+              <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" />
-            <span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span>
+            <img
+              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
-            class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
-          >
-            <img
-              alt="Token image"
-              class="sm:w-fit w-4"
-              src="@/assets/brz.svg"
-            />
-            <span class="text-gray-900 w-fit" id="brz"> BRZ </span>
+          <div class="relative">
+            <button
+              class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
+              @click="openTokenSelection()"
+            >
+              <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>
 

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";
-
-const images = import.meta.glob<string>('@/assets/*.{png,svg}', { eager:true, query:'?url', import: 'default'} );
-
+import { getNetworkImage } from "@/utils/imagesPath";
 // 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>