change from deposits history to bid history and add it to bid_history router

src/views/BidHistoryView.vue

@@ -1,11 +1,53 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useEtherStore } from "@/store/ether";
+import { storeToRefs } from "pinia";
+import { ref, watch } from "vue";
+import ListingComponent from "@/components/ListingComponent.vue";
+import blockchain from "../utils/blockchain";
+
+const etherStore = useEtherStore();
+const { walletAddress } = storeToRefs(etherStore);
+const allUserTransactions = ref<any[]>([]);
+
+  if (walletAddress.value) {
+  await blockchain.listAllTransactionByWalletAddress(walletAddress.value).then((res) => {
+    if (res) allUserTransactions.value = res;
+  });
+}
+
+watch(walletAddress, async (newValue) => {
+  await blockchain.listAllTransactionByWalletAddress(newValue).then((res) => {
+    if (res) allUserTransactions.value = res;
+  });
+});
+
+watch(walletAddress, async (newValue) => {
+  console.log(newValue);
+});
+
+watch(allUserTransactions, (newValue) => {
+  console.log(newValue);
+});
+</script>
 
 <template>
-  <div class="page">Histórico de ofertas</div>
+  <div class="page">
+    <div class="header">Histórico de transações</div>
+    <div class="w-full max-w-4xl">
+      <ListingComponent
+        :wallet-transactions="allUserTransactions"
+        :is-manage-mode="false"
+      ></ListingComponent>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 .page {
-  @apply flex gap-8 mt-24;
+  @apply flex flex-col gap-10 mt-20 w-full items-center;
+}
+
+.header {
+  @apply text-3xl text-gray-900 leading-9 font-bold justify-center flex;
 }
 </style>

src/views/DepositsHistoryView.vue

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import { useEtherStore } from "@/store/ether";
-import { storeToRefs } from "pinia";
-import { ref, watch } from "vue";
-import ListingComponent from "@/components/ListingComponent.vue";
-import blockchain from "../utils/blockchain";
-
-const etherStore = useEtherStore();
-const { walletAddress } = storeToRefs(etherStore);
-const allUserTransactions = ref<any[]>([]);
-
-watch(walletAddress, async (newValue) => {
-  await blockchain.listAllTransactionByWalletAddress(newValue).then((res) => {
-    if (res) allUserTransactions.value = res;
-  });
-});
-
-watch(walletAddress, async (newValue) => {
-  console.log(newValue);
-});
-
-watch(allUserTransactions, (newValue) => {
-  console.log(newValue);
-});
-</script>
-
-<template>
-  <div class="page">
-    <div class="header">Histórico de Depósitos</div>
-    <ListingComponent
-      :wallet-transactions="allUserTransactions"
-      :is-manage-mode="false"
-    ></ListingComponent>
-  </div>
-</template>
-
-<style scoped>
-.page {
-  @apply flex flex-col gap-10 mt-20 w-full;
-}
-
-.header {
-  @apply text-3xl text-gray-900 leading-9 font-bold justify-center flex;
-}
-</style>

src/views/ManageBidsView.vue

@@ -7,9 +7,21 @@ import type { BigNumber } from "ethers";
 import { ref, watch } from "vue";
 
 const etherStore = useEtherStore();
+
+
 const { walletAddress } = storeToRefs(etherStore);
 const depositList = ref<any[]>([]);
 
+if (walletAddress.value) {
+  const walletDeposits =
+    await blockchain.listValidDepositTransactionsByWalletAddress(
+      walletAddress.value
+    );
+  if (walletDeposits) {
+    depositList.value = walletDeposits;
+  }
+}
+
 const handleCancelDeposit = async (depositID: BigNumber, index: number) => {
   const response = await blockchain.cancelDeposit(depositID);
   if (response == true) {
@@ -26,16 +38,6 @@ const handleWithDrawDeposit = async (depositID: BigNumber, index: number) => {
   }
 };
 
-if (walletAddress.value) {
-  const walletDeposits =
-    await blockchain.listValidDepositTransactionsByWalletAddress(
-      walletAddress.value
-    );
-  if (walletDeposits) {
-    depositList.value = walletDeposits;
-  }
-}
-
 watch(walletAddress, async () => {
   const walletDeposits =
     await blockchain.listValidDepositTransactionsByWalletAddress(