add withdraw deposit function

src/components/ListingComponent.vue

@@ -77,15 +77,16 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
       :key="item?.blockNumber"
     >
       <span class="last-release-info">
-        {{ formatEventsAmount(item?.args.amount) }} BRZ
+        {{ formatEventsAmount(item?.args ? item?.args.amount : item?.remaining) }} BRZ
       </span>
 
+      <!-- TODO: change this hardcoded date -->
       <span class="last-release-info"> 20 out 2022 </span> 
 
       <div
         v-if="props.isManageMode"
         class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="emit('cancelDeposit', item.args.depositID)"
+        @click="emit('cancelDeposit', item.depositID)"
       >
         <span class="last-release-info">Cancelar</span>
         <img alt="Cancel image" src="@/assets/cancel.svg" />
@@ -115,7 +116,7 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
       <div
         v-if="props.isManageMode"
         class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="emit('withdrawDeposit')"
+        @click="emit('withdrawDeposit', item.depositID)"
       >
         <span class="last-release-info">Retirar</span>
         <img alt="Cancel image" src="@/assets/withdraw.svg" />

src/utils/blockchain.ts

@@ -93,6 +93,25 @@ const listDepositTransactionByWalletAddress = async (
   });
 };
 
+// get wallet's deposit transactions
+// const listValidDepositTransactionsByWalletAddress = async (
+//   walletAddress: string
+// ): Promise<any[]> => {
+//   const provider = getProvider();
+//   const etherStore = useEtherStore();
+//   if (!provider) return [];
+
+//   const signer = provider.getSigner();
+//   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+
+//   const filterDeposits = p2pContract.filters.DepositAdded([walletAddress]);
+//   const eventsDeposits = await p2pContract.queryFilter(filterDeposits);
+
+//   console.log()
+
+  
+// };
+
 // get wallet's lock transactions
 const listLockTransactionByWalletAddress = async (
   walletAddress: string
@@ -155,10 +174,10 @@ const updateValidDeposits = async () => {
       remaining: formatBigNumber(mappedDeposit.remaining),
       seller: mappedDeposit.seller,
       pixKey: mappedDeposit.pixTarget,
-      valid: mappedDeposit.valid,
     };
 
-    depositList.push(validDeposit);
+    if (mappedDeposit.valid)
+      depositList.push(validDeposit);
   });
 
   etherStore.setDepositsValidList(depositList);
@@ -275,7 +294,7 @@ const addDeposit = async (tokenQty: Number, pixKey: string) => {
   await updateValidDeposits();
 };
 
-// cancel a deposit by ots Id
+// cancel a deposit by its Id
 const cancelDeposit = async (depositId: BigNumber): Promise<Boolean> => {
   const provider = getProvider();
 
@@ -286,7 +305,21 @@ const cancelDeposit = async (depositId: BigNumber): Promise<Boolean> => {
   await contract.cancelDeposit(depositId);
 
   await updateWalletStatus();
-  await updateDepositAddedEvents();
+  await updateValidDeposits();
+  return true;
+};
+
+// withdraw a deposit by its Id
+const withdrawDeposit = async (depositId: BigNumber): Promise<Boolean> => {
+  const provider = getProvider();
+
+  if (!provider) return false;
+
+  const signer = provider.getSigner();
+  const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+  await contract.withdraw(depositId, []);
+
+  await updateWalletStatus();
   await updateValidDeposits();
   return true;
 };
@@ -409,6 +442,7 @@ export default {
   listLockTransactionByWalletAddress,
   addDeposit,
   cancelDeposit,
+  withdrawDeposit,
   mapDeposits,
   formatBigNumber,
   addLock,

src/views/ManageBidsView.vue

@@ -7,46 +7,50 @@ import type { BigNumber } from "ethers";
 import { ref } from "vue";
 
 const etherStore = useEtherStore();
-const { walletAddress } = storeToRefs(etherStore);
+const { walletAddress, depositsValidList } = storeToRefs(etherStore);
 const depositList = ref<any[]>([]);
 
-if (walletAddress.value) {
-  await blockchain
-    .listDepositTransactionByWalletAddress(walletAddress.value)
-    .then((value) => (depositList.value = value));
+const listValidDepositTransactionsByWalletAddress = (walletAddress: string, deposits: any[]) => {
+  depositList.value = deposits.filter((deposit) => deposit.seller === walletAddress) 
 }
 
 const handleCancelDeposit = async (depositID: BigNumber) => {
-  console.log(depositID);
   const response = await blockchain.cancelDeposit(depositID);
   if (response == true) console.log("Depósito cancelado com sucesso.");
 };
 
-etherStore.$subscribe(async (mutation, state) => {
-  if (mutation.events.key == "walletAddress") {
-    if (state.walletAddress) {
-      await blockchain
-        .listDepositTransactionByWalletAddress(state.walletAddress)
-        .then((value) => (depositList.value = value));
-    }
-  }
+const handleWithDrawDeposit = async (depositID: BigNumber) => {
+  const response = await blockchain.withdrawDeposit(depositID);
+  if (response == true) console.log("Token retirado com sucesso.");
+};
+
+if (walletAddress.value) {
+  listValidDepositTransactionsByWalletAddress(walletAddress.value, depositsValidList.value)
+}
+
+etherStore.$subscribe((_mutation, state) => {
+  if(state.walletAddress != "")
+    listValidDepositTransactionsByWalletAddress(state.walletAddress, state.depositsValidList)
 });
 </script>
 
 <template>
   <div class="page">
     <div class="header">Gerenciar ofertas</div>
-    <ListingComponent
-      :wallet-transactions="depositList"
-      :is-manage-mode="true"
-      @cancel-deposit="handleCancelDeposit"
-    ></ListingComponent>
+    <div class="w-full max-w-4xl">
+      <ListingComponent
+        :wallet-transactions="depositList"
+        :is-manage-mode="true"
+        @cancel-deposit="handleCancelDeposit"
+        @withdraw-deposit="handleWithDrawDeposit"
+      ></ListingComponent>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .page {
-  @apply flex flex-col gap-10 mt-20 w-full;
+  @apply flex flex-col items-center gap-10 mt-20 w-full;
 }
 
 .header {