Create deposits history screen

src/components/ListingComponent.vue

@@ -92,7 +92,15 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
         <img alt="Cancel image" src="@/assets/cancel.svg" />
       </div>
 
-      <span class="last-release-info" v-if="!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">
+        {{ "Reserva" }}
+      </span>
+
+      <span class="last-release-info" v-if="item.event == 'LockReleased' && !props.isManageMode">
         {{ "Compra" }}
       </span>
 

src/router/index.ts

@@ -3,6 +3,7 @@ import HomeView from "../views/HomeView.vue";
 import MockView from "../views/MockView.vue";
 import BidHistoryView from "../views/BidHistoryView.vue";
 import ManageBidsView from "../views/ManageBidsView.vue";
+import DepositsHistoryView from "../views/DepositsHistoryView.vue";
 import SellerView from "@/views/SellerView.vue";
 
 const router = createRouter({
@@ -33,6 +34,11 @@ const router = createRouter({
       name: "manage bids",
       component: ManageBidsView,
     },
+    {
+      path: "/deposits_history",
+      name: "deposits history",
+      component: DepositsHistoryView,
+    },
   ],
 });
 

src/views/DepositsHistoryView.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useEtherStore } from "@/store/ether";
+import { storeToRefs } from "pinia";
+import { ref } 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 != "") {
+  blockchain.listAllTransactionByWalletAddress(walletAddress.value).then((res) => {
+      allUserTransactions.value = res;
+    })
+}
+</script>
+
+<template>
+  <div class="page">
+    <div class="header">Histórico de Depósitos</div>
+    <ListingComponent
+      v-if="walletAddress != '' && allUserTransactions.length != 0"
+      :wallet-transactions="allUserTransactions"
+      :is-manage-mode="false"
+    ></ListingComponent>
+    <div v-if="walletAddress == ''">
+      Conecte sua carteira para ver o histórico
+    </div>
+    <div v-if="allUserTransactions.length == 0 && walletAddress != ''">
+      Carregando dados...
+    </div>
+  </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>