add cancel deposit action in manage bids view

src/components/ListingComponent.vue

@@ -86,21 +86,30 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
       <div
         v-if="props.isManageMode"
         class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="emit('cancelDeposit')"
+        @click="emit('cancelDeposit', item.args.depositID)"
       >
         <span class="last-release-info">Cancelar</span>
         <img alt="Cancel image" src="@/assets/cancel.svg" />
       </div>
 
-      <span class="last-release-info" v-if="item.event == 'DepositAdded' && !props.isManageMode">
+      <span
+        class="last-release-info"
+        v-if="item.event == 'DepositAdded' && !props.isManageMode"
+      >
         {{ "Oferta" }}
       </span>
 
-      <span class="last-release-info" v-if="item.event == 'LockAdded' && !props.isManageMode">
+      <span
+        class="last-release-info"
+        v-if="item.event == 'LockAdded' && !props.isManageMode"
+      >
         {{ "Reserva" }}
       </span>
 
-      <span class="last-release-info" v-if="item.event == 'LockReleased' && !props.isManageMode">
+      <span
+        class="last-release-info"
+        v-if="item.event == 'LockReleased' && !props.isManageMode"
+      >
         {{ "Compra" }}
       </span>
 

src/components/TopBar.vue

@@ -170,7 +170,10 @@ const closeMenu = () => {
           <div
             class="top-bar-info cursor-pointer"
             @click="
-              [(menuOpenToggle = !menuOpenToggle), (currencyMenuOpenToggle = false)]
+              [
+                (menuOpenToggle = !menuOpenToggle),
+                (currencyMenuOpenToggle = false),
+              ]
             "
             @mouseover="menuHoverToggle = true"
             @mouseout="menuHoverToggle = false"

src/utils/blockchain.ts

@@ -78,9 +78,9 @@ const listAllTransactionByWalletAddress = async (
 // get wallet's deposit transactions
 const listDepositTransactionByWalletAddress = async (
   walletAddress: string
-): Promise<any[] | undefined> => {
+): Promise<any[]> => {
   const provider = getProvider();
-  if (!provider) return;
+  if (!provider) return [];
 
   const signer = provider.getSigner();
   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
@@ -275,6 +275,22 @@ const addDeposit = async (tokenQty: Number, pixKey: string) => {
   await updateValidDeposits();
 };
 
+// cancel a deposit by ots Id
+const cancelDeposit = 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.cancelDeposit(depositId);
+
+  await updateWalletStatus();
+  await updateDepositAddedEvents();
+  await updateValidDeposits();
+  return true;
+};
+
 // Get specific deposit data by its ID
 const mapDeposits = async (depositId: BigNumber): Promise<any> => {
   const provider = getProvider();
@@ -392,6 +408,7 @@ export default {
   listDepositTransactionByWalletAddress,
   listLockTransactionByWalletAddress,
   addDeposit,
+  cancelDeposit,
   mapDeposits,
   formatBigNumber,
   addLock,

src/views/DepositsHistoryView.vue

@@ -10,9 +10,11 @@ const { walletAddress } = storeToRefs(etherStore);
 const allUserTransactions = ref<any[]>([]);
 
 if (walletAddress.value != "") {
-  blockchain.listAllTransactionByWalletAddress(walletAddress.value).then((res) => {
+  blockchain
+    .listAllTransactionByWalletAddress(walletAddress.value)
+    .then((res) => {
       allUserTransactions.value = res;
-    })
+    });
 }
 </script>
 
@@ -41,4 +43,4 @@ if (walletAddress.value != "") {
 .header {
   @apply text-3xl text-gray-900 leading-9 font-bold justify-center flex;
 }
-</style>
+</style>

src/views/ManageBidsView.vue

@@ -1,18 +1,47 @@
 <script setup lang="ts">
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
+import blockchain from "../utils/blockchain";
 import ListingComponent from "@/components/ListingComponent.vue";
+import type { BigNumber } from "ethers";
+import { ref, onBeforeMount } from "vue";
 
 const etherStore = useEtherStore();
-const { depositsAddedList } = storeToRefs(etherStore);
+const { walletAddress } = storeToRefs(etherStore);
+const depositList = ref<any[]>([]);
+
+const handleCancelDeposit = async (depositID: BigNumber) => {
+  console.log(depositID);
+  const response = await blockchain.cancelDeposit(depositID);
+  if (response == true) console.log("Depósito cancelado com sucesso.");
+};
+
+onBeforeMount(async () => {
+  if (walletAddress.value) {
+    await blockchain
+      .listDepositTransactionByWalletAddress(walletAddress.value)
+      .then((value) => (depositList.value = value));
+  }
+});
+
+etherStore.$subscribe(async (mutation, state) => {
+  if (mutation.events.key == "walletAddress") {
+    if (state.walletAddress) {
+      await blockchain
+        .listDepositTransactionByWalletAddress(state.walletAddress)
+        .then((value) => (depositList.value = value));
+    }
+  }
+});
 </script>
 
 <template>
   <div class="page">
     <div class="header">Gerenciar ofertas</div>
     <ListingComponent
-      :wallet-transactions="depositsAddedList"
+      :wallet-transactions="depositList"
       :is-manage-mode="true"
+      @cancel-deposit="handleCancelDeposit"
     ></ListingComponent>
   </div>
 </template>