Fixing tags at listing component

src/views/ManageBidsView.vue

@@ -2,19 +2,38 @@
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
+import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
 import { ref, watch, onMounted } from "vue";
 import {
   listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
 } from "@/blockchain/wallet";
+import { withdrawDeposit } from "@/blockchain/buyerMethods";
 import type { ValidDeposit } from "@/model/ValidDeposit";
-import type { Event } from "ethers";
+import type { WalletTransaction } from "@/model/WalletTransaction";
 
 const etherStore = useEtherStore();
 
 const { walletAddress, networkName } = storeToRefs(etherStore);
+const loadingWithdraw = ref<boolean>(false);
+
 const depositList = ref<ValidDeposit[]>([]);
-const transactionsList = ref<Event[]>([]);
+const transactionsList = ref<WalletTransaction[]>([]);
+
+const callWithdraw = async (amount: string) => {
+  if (amount) {
+    loadingWithdraw.value = true;
+    const withdraw = await withdrawDeposit(amount);
+    if (withdraw) {
+      alert("Saque realizado!");
+      await updateRemaining();
+      loadingWithdraw.value = false;
+    } else {
+      alert("Não foi possível realizar o saque!");
+      loadingWithdraw.value = false;
+    }
+  }
+};
 
 const updateRemaining = async () => {
   const walletDeposits = await listValidDepositTransactionsByWalletAddress(
@@ -86,13 +105,23 @@ watch(networkName, async () => {
 
 <template>
   <div class="page">
-    <div class="header">Gerenciar Ofertas</div>
+    <div class="header" v-if="!loadingWithdraw && !walletAddress">
+      Por Favor Conecte Sua Carteira
+    </div>
+    <div class="header" v-if="!loadingWithdraw && walletAddress">
+      Gerenciar Ofertas
+    </div>
     <div class="w-full max-w-4xl">
       <ListingComponent
+        v-if="!loadingWithdraw && walletAddress"
         :valid-deposits="depositList"
         :wallet-transactions="transactionsList"
-        @deposit-withdrawn="updateRemaining"
+        @deposit-withdrawn="callWithdraw"
       ></ListingComponent>
+      <LoadingComponent
+        v-if="loadingWithdraw"
+        :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
+      />
     </div>
   </div>
 </template>