Added different types of tokens.

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>