From 36e3368f58dc6bba9c5ce1468d1c28c39861e1b1 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Wed, 21 Dec 2022 19:35:03 -0300
Subject: [PATCH 01/18] Add initial listing component

Co-authored-by: Enzo Gabriel <eggqsaraiva@gmail.com>
---
 src/components/ListComponent.vue    |  82 +++++++++---------
 src/components/ListingComponent.vue | 129 ++++++++++++++++++++++++++++
 2 files changed, 170 insertions(+), 41 deletions(-)
 create mode 100644 src/components/ListingComponent.vue

diff --git a/src/components/ListComponent.vue b/src/components/ListComponent.vue
index 4211256..4a8ef45 100644
--- a/src/components/ListComponent.vue
+++ b/src/components/ListComponent.vue
@@ -65,50 +65,50 @@ const openEtherscanUrl = (url: string) => {
         >Últimas transações
       </span>
     </div>
-    <div class="blur-container min-w-[80%] gap-8">
-      <div class="flex flex-row justify-between w-full px-8">
-        <span class="text-xs text-gray-50 font-medium">Valor</span>
-        <span class="text-xs text-gray-50 font-medium">Tipo de transação</span>
-        <span class="text-xs text-gray-50 font-medium">Checar transação</span>
-      </div>
-      <div
-        class="flex flex-row justify-between w-full bg-white px-6 py-4 rounded-lg"
-        v-for="release in lastWalletReleaseTransactions"
-        :key="release?.blockNumber"
-      >
-        <span class="last-release-info">
-          {{ formatEventsAmount(release?.args.amount) }} BRZ
-        </span>
-        <span class="last-release-info">
-          {{ "Compra" }}
-        </span>
-        <div
-          class="flex gap-2 cursor-pointer items-center"
-          @click="
-            openEtherscanUrl(
-              `https://etherscan.io/tx/${release?.transactionHash}`
-            )
-          "
-        >
-          <span class="last-release-info">Etherscan</span>
-          <img alt="Redirect image" src="@/assets/redirect.svg" />
+      <div class="blur-container min-w-[80%] gap-8">
+        <div class="flex flex-row justify-between w-full px-8">
+          <span class="text-xs text-gray-50 font-medium">Valor</span>
+          <span class="text-xs text-gray-50 font-medium">Tipo de transação</span>
+          <span class="text-xs text-gray-50 font-medium">Checar transação</span>
         </div>
-      </div>
-      <div class="flex justify-center w-full right-6 mt-2">
-        <button
-          type="button"
-          class="text-white"
-          @click="() => {}"
-          v-if="lastWalletReleaseTransactions?.length != 0"
+        <div
+          class="flex flex-row justify-between w-full bg-white px-6 py-4 rounded-lg"
+          v-for="release in lastWalletReleaseTransactions"
+          :key="release?.blockNumber"
         >
-          Carregar mais
-        </button>
-      </div>
+          <span class="last-release-info">
+            {{ formatEventsAmount(release?.args.amount) }} BRZ
+          </span>
+          <span class="last-release-info">
+            {{ "Compra" }}
+          </span>
+          <div
+            class="flex gap-2 cursor-pointer items-center"
+            @click="
+              openEtherscanUrl(
+                `https://etherscan.io/tx/${release?.transactionHash}`
+              )
+            "
+          >
+            <span class="last-release-info">Etherscan</span>
+            <img alt="Redirect image" src="@/assets/redirect.svg" />
+          </div>
+        </div>
+        <div class="flex justify-center w-full right-6 mt-2">
+          <button
+            type="button"
+            class="text-white"
+            @click="() => {}"
+            v-if="lastWalletReleaseTransactions?.length != 0"
+          >
+            Carregar mais
+          </button>
+        </div>
 
-      <p class="font-bold" v-if="lastWalletReleaseTransactions?.length == 0">
-        Não há nenhuma transação anterior
-      </p>
-    </div>
+        <p class="font-bold" v-if="lastWalletReleaseTransactions?.length == 0">
+          Não há nenhuma transação anterior
+        </p>
+      </div>
   </div>
 </template>
 
diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
new file mode 100644
index 0000000..c5726e1
--- /dev/null
+++ b/src/components/ListingComponent.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import blockchain from '@/utils/blockchain';
+import { ref } from 'vue';
+
+const itemsToShow = ref<any[]>([]);
+
+const props = defineProps<{
+  lastWalletReleaseTransactions: any[];
+}>();
+
+const formatEventsAmount = (amount: any) => {
+  try {
+    const formated = blockchain.formatBigNumber(amount);
+    return formated;
+  } catch {
+    return "";
+  }
+};
+
+const openEtherscanUrl = (url: string) => {
+  window.open(url, "_blank");
+};
+
+const loadMore = () => {
+  const itemsShowing = itemsToShow.value.length
+  if(props.lastWalletReleaseTransactions?.length > ( itemsShowing + 3))
+    itemsToShow.value?.push(...props.lastWalletReleaseTransactions.slice(itemsShowing, itemsShowing + 3))
+  else
+    itemsToShow.value = props.lastWalletReleaseTransactions
+};
+
+itemsToShow.value = (props.lastWalletReleaseTransactions?.length > 3) ? props.lastWalletReleaseTransactions.slice(0, 3) : props.lastWalletReleaseTransactions;
+
+</script>
+
+<template>
+      <div class="blur-container">
+        <div class="grid grid-cols-4 grid-flow-row w-full px-6">
+            <span class="text-xs text-gray-50 font-medium justify-self-center">Valor</span>
+            <span class="text-xs text-gray-50 font-medium justify-self-center">Data</span>
+            <span class="text-xs text-gray-50 font-medium justify-self-center">Tipo de transação</span>
+            <span class="text-xs text-gray-50 font-medium justify-self-center">Checar transação</span>
+        </div>
+        <div
+            class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
+            v-for="item in itemsToShow"
+            :key="item?.blockNumber"
+          >
+            <span class="last-release-info">
+              {{ formatEventsAmount(item?.args.amount) }} BRZ
+            </span>
+            
+            <span class="last-release-info">
+              20 out 2022
+            </span>
+
+            <span class="last-release-info">
+              {{ "Compra" }}
+            </span>
+
+            <div
+              class="flex gap-2 cursor-pointer items-center justify-self-center"
+              @click="
+                openEtherscanUrl(
+                  `https://etherscan.io/tx/${item?.transactionHash}`
+                )
+              "
+            >
+              <span class="last-release-info">Etherscan</span>
+              <img alt="Redirect image" src="@/assets/redirect.svg" />
+            </div>
+          </div>
+          <div class="flex justify-center w-full mt-2">
+            <button
+              type="button"
+              class="text-white"
+              @click="loadMore()"
+            >
+              Carregar mais
+            </button>
+        </div>
+        <p class="font-bold" v-if="props.lastWalletReleaseTransactions?.length == 0">
+          Não há nenhuma transação anterior
+        </p>
+      </div>
+
+</template>
+
+<style scoped>
+.page {
+  @apply flex flex-col items-center justify-center w-full mt-16;
+}
+
+p {
+  @apply text-gray-900;
+}
+
+.text-container {
+  @apply flex flex-col items-center justify-center gap-4;
+}
+
+.text {
+  @apply text-gray-800 text-center;
+}
+.blur-container-row {
+  @apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
+}
+
+.blur-container {
+  @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
+}
+
+.grid-container {
+  @apply grid grid-cols-4 grid-flow-row items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
+}
+
+.last-release-info {
+  @apply font-medium text-base text-gray-900 justify-self-center;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+</style>
\ No newline at end of file

From d70b009b93a44b002b73629eae1bb88dbfd1e668 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Sun, 25 Dec 2022 23:26:43 -0300
Subject: [PATCH 02/18] change from div click to routerling inside top bar menu

---
 src/components/TopBar.vue | 86 +++++++++++++++++++++++----------------
 1 file changed, 50 insertions(+), 36 deletions(-)

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 25989d0..f68aed8 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -35,24 +35,38 @@ const formatWalletBalance = (): String => {
 
 const disconnectUser = () => {
   etherStore.setWalletAddress("");
-  const currentRoute = router.currentRoute.value.path;
-  if (currentRoute !== "/") {
-    router.push("/");
-  } else {
-    window.location.reload();
-  }
+  closeMenu();
+  window.location.reload();
+};
+
+const closeMenu = () => {
+  menuOpenToggle.value = false;
 };
 </script>
 
 <template>
   <header>
-    <img alt="P2Pix logo" class="logo" src="@/assets/logo.svg" width="75" height="75" />
+    <img
+      alt="P2Pix logo"
+      class="logo"
+      src="@/assets/logo.svg"
+      width="75"
+      height="75"
+    />
     <div class="flex gap-4 items-center">
-      <button type="button" class="default-button" v-on:click="router.push('/seller')">
+      <button
+        type="button"
+        class="default-button"
+        v-on:click="router.push('/seller')"
+      >
         Quero vender
       </button>
-      <button type="button" v-if="!walletAddress" class="border-amber-500 border-2 rounded default-button"
-        @click="connectMetaMask()">
+      <button
+        type="button"
+        v-if="!walletAddress"
+        class="border-amber-500 border-2 rounded default-button"
+        @click="connectMetaMask()"
+      >
         Conectar carteira
       </button>
       <div v-if="walletAddress" class="account-info">
@@ -105,37 +119,29 @@ const disconnectUser = () => {
               src="@/assets/chevronDownBlack.svg"
             />
           </div>
-          <div
-            v-show="menuOpenToggle"
-            class="mt-10 absolute w-full text-black"
-          >
+          <div v-show="menuOpenToggle" class="mt-10 absolute w-full text-black">
             <div class="pl-4 mt-2">
               <div class="bg-white rounded-md z-10">
-                <div
-                  class="menu-button px-4 rounded-md cursor-pointer"
-                  onclick="window.location='/bid_history'"
-                >
-                  <div class="py-4 text-end font-semibold text-xs">
+                <div class="menu-button" @click="closeMenu()">
+                  <RouterLink to="/bid_history" class="redirect_button px-0">
                     Histórico de compras
-                  </div>
-                  <hr />
+                  </RouterLink>
                 </div>
-                <div
-                  class="menu-button px-4 cursor-pointer"
-                  onclick="window.location='/manage_bids'"
-                >
-                  <div class="py-4 text-end font-semibold text-xs">
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+                <div class="menu-button" @click="closeMenu()">
+                  <RouterLink to="/manage_bids" class="redirect_button">
                     Gerenciar Ofertas
-                  </div>
-                  <hr />
+                  </RouterLink>
                 </div>
-                <div
-                  class="menu-button px-4 py-1 rounded-md cursor-pointer"
-                  @click="disconnectUser"
-                >
-                  <div class="py-3 text-end font-semibold text-xs">
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+                <div class="menu-button" @click="disconnectUser">
+                  <RouterLink to="/" class="redirect_button">
                     Desconectar
-                  </div>
+                  </RouterLink>
                 </div>
               </div>
             </div>
@@ -173,7 +179,15 @@ header {
   @apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 rounded;
 }
 
-.menu-button:hover {
-  background-color: #E5E7EB;
+.redirect_button {
+  @apply py-4 text-gray-900 font-semibold text-xs w-full;
+}
+
+.menu-button {
+  @apply flex text-center justify-center;
+}
+
+a:hover {
+  @apply bg-gray-200 rounded;
 }
 </style>

From 7b9c3e0394165b7e7f42028a5fbf1ab3ce9317d9 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Sun, 25 Dec 2022 23:49:55 -0300
Subject: [PATCH 03/18] add Suspense loading on RouterView Components

---
 src/App.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9c31a65..2dad8e1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,8 +4,13 @@ import TopBar from "./components/TopBar.vue";
 
 <template>
   <TopBar />
-
-  <RouterView />
+  <RouterView v-slot="{ Component }">
+    <template v-if="Component">
+      <Suspense>
+        <component :is="Component"></component>
+      </Suspense>
+    </template>
+  </RouterView>
 </template>
 
 <style scoped></style>

From 3cf60f267dff484957007174b6b5c899278679ee Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Sun, 25 Dec 2022 23:51:00 -0300
Subject: [PATCH 04/18] prepare ListingComponent to receive manager mode

---
 src/assets/cancel.svg               |   6 ++
 src/assets/withdraw.svg             |   8 ++
 src/components/ListComponent.vue    |  86 ++++++++--------
 src/components/ListingComponent.vue | 147 ++++++++++++++++------------
 src/views/BidHistoryView.vue        |   3 +-
 5 files changed, 145 insertions(+), 105 deletions(-)
 create mode 100644 src/assets/cancel.svg
 create mode 100644 src/assets/withdraw.svg

diff --git a/src/assets/cancel.svg b/src/assets/cancel.svg
new file mode 100644
index 0000000..e6069f6
--- /dev/null
+++ b/src/assets/cancel.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8Z" fill="#1F2937" stroke="#1F2937" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6115 4.81333C11.7288 4.696 11.7288 4.50577 11.6115 4.38844C11.4942 4.27111 11.304 4.27111 11.1866 4.38844L8 7.57509L4.81337 4.38844C4.69604 4.27111 4.50581 4.27111 4.38849 4.38844C4.27116 4.50577 4.27116 4.696 4.38849 4.81333L7.57511 7.99998L4.38844 11.1867C4.27111 11.304 4.27111 11.4942 4.38844 11.6116C4.50577 11.7289 4.69599 11.7289 4.81332 11.6116L8 8.42487L11.1867 11.6116C11.304 11.7289 11.4942 11.7289 11.6116 11.6116C11.7289 11.4942 11.7289 11.304 11.6116 11.1867L8.42489 7.99998L11.6115 4.81333Z" fill="#F9FAFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.17604 4.17599C4.4107 3.94134 4.79116 3.94133 5.02582 4.17599L8 7.1502L10.9742 4.176C11.2088 3.94133 11.5893 3.94133 11.824 4.176C12.0586 4.41066 12.0586 4.79111 11.824 5.02577L8.84977 7.99998L11.824 10.9742C12.0587 11.2089 12.0587 11.5893 11.824 11.824C11.5893 12.0587 11.2089 12.0587 10.9742 11.824L8 8.84975L5.02577 11.824C4.79111 12.0587 4.41065 12.0587 4.17599 11.824C3.94134 11.5893 3.94134 11.2089 4.17599 10.9742L7.15023 7.99998L4.17604 5.02577C3.94138 4.79111 3.94138 4.41065 4.17604 4.17599Z" fill="#F9FAFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.99926 3.99922C4.33155 3.66693 4.8703 3.66693 5.20259 3.99922L8 6.79664L10.7974 3.99922C11.1297 3.66693 11.6684 3.66693 12.0007 3.99922C12.333 4.33151 12.333 4.87026 12.0007 5.20255L9.20333 7.99998L12.0008 10.7974C12.3331 11.1297 12.3331 11.6685 12.0008 12.0008C11.6685 12.3331 11.1297 12.3331 10.7975 12.0008L8 9.20331L5.20254 12.0008C4.87025 12.3331 4.33151 12.3331 3.99922 12.0008C3.66693 11.6685 3.66693 11.1297 3.99922 10.7974L6.79667 7.99998L3.99926 5.20255C3.66698 4.87026 3.66698 4.33151 3.99926 3.99922ZM4.6366 4.56522C4.6169 4.54552 4.58496 4.54552 4.56526 4.56522C4.54556 4.58491 4.54556 4.61685 4.56526 4.63655L7.92866 7.99998L4.56521 11.3634C4.54552 11.3831 4.54552 11.4151 4.56521 11.4348C4.58491 11.4545 4.61685 11.4545 4.63655 11.4348L8 8.07131L11.3635 11.4348C11.3832 11.4545 11.4151 11.4545 11.4348 11.4348C11.4545 11.4151 11.4545 11.3831 11.4348 11.3634L8.07133 7.99998L11.4347 4.63655C11.4544 4.61685 11.4544 4.58491 11.4347 4.56522C11.415 4.54552 11.3831 4.54552 11.3634 4.56522L8 7.92864L4.6366 4.56522Z" fill="#F9FAFB"/>
+</svg>
diff --git a/src/assets/withdraw.svg b/src/assets/withdraw.svg
new file mode 100644
index 0000000..fbb5603
--- /dev/null
+++ b/src/assets/withdraw.svg
@@ -0,0 +1,8 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_968_914" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H1.5V14C1.5 15.1046 2.39543 16 3.5 16H14.5C15.6046 16 16.5 15.1046 16.5 14V2H17C17.5523 2 18 1.55228 18 1C18 0.447715 17.5523 0 17 0H14.5H3.5H1Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2H1.5V14C1.5 15.1046 2.39543 16 3.5 16H14.5C15.6046 16 16.5 15.1046 16.5 14V2H17C17.5523 2 18 1.55228 18 1C18 0.447715 17.5523 0 17 0H14.5H3.5H1Z" fill="#1F2937"/>
+<path d="M1.5 2H3.5V0H1.5V2ZM16.5 2V0H14.5V2H16.5ZM2 1C2 1.55228 1.55228 2 1 2V-2C-0.656854 -2 -2 -0.656854 -2 1H2ZM1 0C1.55228 0 2 0.447715 2 1H-2C-2 2.65685 -0.656854 4 1 4V0ZM1.5 0H1V4H1.5V0ZM3.5 14V2H-0.5V14H3.5ZM3.5 14H-0.5C-0.5 16.2091 1.29086 18 3.5 18V14ZM14.5 14H3.5V18H14.5V14ZM14.5 14V18C16.7091 18 18.5 16.2091 18.5 14H14.5ZM14.5 2V14H18.5V2H14.5ZM17 0H16.5V4H17V0ZM16 1C16 0.447715 16.4477 0 17 0V4C18.6569 4 20 2.65685 20 1H16ZM17 2C16.4477 2 16 1.55229 16 1H20C20 -0.656855 18.6569 -2 17 -2V2ZM14.5 2H17V-2H14.5V2ZM3.5 2H14.5V-2H3.5V2ZM1 2H3.5V-2H1V2Z" fill="#1F2937" mask="url(#path-1-inside-1_968_914)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99961 3.09998C9.49667 3.09998 9.89961 3.50292 9.89961 3.99998V9.91699L11.8828 8.05048C12.2447 7.70981 12.8143 7.72707 13.155 8.08903C13.4957 8.45099 13.4784 9.02057 13.1164 9.36124L9.61644 12.6554C9.2699 12.9815 8.72933 12.9815 8.38278 12.6554L4.88278 9.36124C4.52083 9.02057 4.50357 8.45099 4.84423 8.08903C5.1849 7.72707 5.75448 7.70981 6.11644 8.05048L8.09961 9.91699V3.99998C8.09961 3.50292 8.50256 3.09998 8.99961 3.09998Z" fill="#F9FAFB"/>
+</svg>
diff --git a/src/components/ListComponent.vue b/src/components/ListComponent.vue
index 4a8ef45..4211256 100644
--- a/src/components/ListComponent.vue
+++ b/src/components/ListComponent.vue
@@ -65,50 +65,50 @@ const openEtherscanUrl = (url: string) => {
         >Últimas transações
       </span>
     </div>
-      <div class="blur-container min-w-[80%] gap-8">
-        <div class="flex flex-row justify-between w-full px-8">
-          <span class="text-xs text-gray-50 font-medium">Valor</span>
-          <span class="text-xs text-gray-50 font-medium">Tipo de transação</span>
-          <span class="text-xs text-gray-50 font-medium">Checar transação</span>
-        </div>
-        <div
-          class="flex flex-row justify-between w-full bg-white px-6 py-4 rounded-lg"
-          v-for="release in lastWalletReleaseTransactions"
-          :key="release?.blockNumber"
-        >
-          <span class="last-release-info">
-            {{ formatEventsAmount(release?.args.amount) }} BRZ
-          </span>
-          <span class="last-release-info">
-            {{ "Compra" }}
-          </span>
-          <div
-            class="flex gap-2 cursor-pointer items-center"
-            @click="
-              openEtherscanUrl(
-                `https://etherscan.io/tx/${release?.transactionHash}`
-              )
-            "
-          >
-            <span class="last-release-info">Etherscan</span>
-            <img alt="Redirect image" src="@/assets/redirect.svg" />
-          </div>
-        </div>
-        <div class="flex justify-center w-full right-6 mt-2">
-          <button
-            type="button"
-            class="text-white"
-            @click="() => {}"
-            v-if="lastWalletReleaseTransactions?.length != 0"
-          >
-            Carregar mais
-          </button>
-        </div>
-
-        <p class="font-bold" v-if="lastWalletReleaseTransactions?.length == 0">
-          Não há nenhuma transação anterior
-        </p>
+    <div class="blur-container min-w-[80%] gap-8">
+      <div class="flex flex-row justify-between w-full px-8">
+        <span class="text-xs text-gray-50 font-medium">Valor</span>
+        <span class="text-xs text-gray-50 font-medium">Tipo de transação</span>
+        <span class="text-xs text-gray-50 font-medium">Checar transação</span>
       </div>
+      <div
+        class="flex flex-row justify-between w-full bg-white px-6 py-4 rounded-lg"
+        v-for="release in lastWalletReleaseTransactions"
+        :key="release?.blockNumber"
+      >
+        <span class="last-release-info">
+          {{ formatEventsAmount(release?.args.amount) }} BRZ
+        </span>
+        <span class="last-release-info">
+          {{ "Compra" }}
+        </span>
+        <div
+          class="flex gap-2 cursor-pointer items-center"
+          @click="
+            openEtherscanUrl(
+              `https://etherscan.io/tx/${release?.transactionHash}`
+            )
+          "
+        >
+          <span class="last-release-info">Etherscan</span>
+          <img alt="Redirect image" src="@/assets/redirect.svg" />
+        </div>
+      </div>
+      <div class="flex justify-center w-full right-6 mt-2">
+        <button
+          type="button"
+          class="text-white"
+          @click="() => {}"
+          v-if="lastWalletReleaseTransactions?.length != 0"
+        >
+          Carregar mais
+        </button>
+      </div>
+
+      <p class="font-bold" v-if="lastWalletReleaseTransactions?.length == 0">
+        Não há nenhuma transação anterior
+      </p>
+    </div>
   </div>
 </template>
 
diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
index c5726e1..a2d2995 100644
--- a/src/components/ListingComponent.vue
+++ b/src/components/ListingComponent.vue
@@ -1,13 +1,21 @@
 <script setup lang="ts">
-import blockchain from '@/utils/blockchain';
-import { ref } from 'vue';
+import blockchain from "@/utils/blockchain";
+import { ref } from "vue";
+
+// props
+const props = defineProps<{
+  walletTransactions: any[];
+  isManageMode: boolean;
+}>();
 
 const itemsToShow = ref<any[]>([]);
 
-const props = defineProps<{
-  lastWalletReleaseTransactions: any[];
-}>();
+itemsToShow.value =
+  props.walletTransactions?.length > 3
+    ? props.walletTransactions.slice(0, 3)
+    : props.walletTransactions;
 
+// Methods
 const formatEventsAmount = (amount: any) => {
   try {
     const formated = blockchain.formatBigNumber(amount);
@@ -22,68 +30,87 @@ const openEtherscanUrl = (url: string) => {
 };
 
 const loadMore = () => {
-  const itemsShowing = itemsToShow.value.length
-  if(props.lastWalletReleaseTransactions?.length > ( itemsShowing + 3))
-    itemsToShow.value?.push(...props.lastWalletReleaseTransactions.slice(itemsShowing, itemsShowing + 3))
-  else
-    itemsToShow.value = props.lastWalletReleaseTransactions
+  const itemsShowing = itemsToShow.value.length;
+  if (props.walletTransactions?.length > itemsShowing + 3)
+    itemsToShow.value?.push(
+      ...props.walletTransactions.slice(itemsShowing, itemsShowing + 3)
+    );
+  else itemsToShow.value = props.walletTransactions;
 };
 
-itemsToShow.value = (props.lastWalletReleaseTransactions?.length > 3) ? props.lastWalletReleaseTransactions.slice(0, 3) : props.lastWalletReleaseTransactions;
-
+//emits
+const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
 </script>
 
 <template>
-      <div class="blur-container">
-        <div class="grid grid-cols-4 grid-flow-row w-full px-6">
-            <span class="text-xs text-gray-50 font-medium justify-self-center">Valor</span>
-            <span class="text-xs text-gray-50 font-medium justify-self-center">Data</span>
-            <span class="text-xs text-gray-50 font-medium justify-self-center">Tipo de transação</span>
-            <span class="text-xs text-gray-50 font-medium justify-self-center">Checar transação</span>
-        </div>
-        <div
-            class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
-            v-for="item in itemsToShow"
-            :key="item?.blockNumber"
-          >
-            <span class="last-release-info">
-              {{ formatEventsAmount(item?.args.amount) }} BRZ
-            </span>
-            
-            <span class="last-release-info">
-              20 out 2022
-            </span>
+  <div class="blur-container">
+    <div class="grid grid-cols-4 grid-flow-row w-full px-6">
+      <span class="text-xs text-gray-50 font-medium justify-self-center"
+        >Valor</span
+      >
+      <span class="text-xs text-gray-50 font-medium justify-self-center"
+        >Data</span
+      >
+      <span class="text-xs text-gray-50 font-medium justify-self-center">{{
+        props.isManageMode ? "Cancelar oferta" : "Tipo de transação"
+      }}</span>
+      <span class="text-xs text-gray-50 font-medium justify-self-center">{{
+        props.isManageMode ? "Retirar tokens" : "Checar transação"
+      }}</span>
+    </div>
+    <div
+      class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
+      v-for="item in itemsToShow"
+      :key="item?.blockNumber"
+    >
+      <span class="last-release-info">
+        {{ formatEventsAmount(item?.args.amount) }} BRZ
+      </span>
 
-            <span class="last-release-info">
-              {{ "Compra" }}
-            </span>
+      <span class="last-release-info"> 20 out 2022 </span>
 
-            <div
-              class="flex gap-2 cursor-pointer items-center justify-self-center"
-              @click="
-                openEtherscanUrl(
-                  `https://etherscan.io/tx/${item?.transactionHash}`
-                )
-              "
-            >
-              <span class="last-release-info">Etherscan</span>
-              <img alt="Redirect image" src="@/assets/redirect.svg" />
-            </div>
-          </div>
-          <div class="flex justify-center w-full mt-2">
-            <button
-              type="button"
-              class="text-white"
-              @click="loadMore()"
-            >
-              Carregar mais
-            </button>
-        </div>
-        <p class="font-bold" v-if="props.lastWalletReleaseTransactions?.length == 0">
-          Não há nenhuma transação anterior
-        </p>
+      <div
+        v-if="props.isManageMode"
+        class="flex gap-2 cursor-pointer items-center justify-self-center"
+        @click="emit('cancelDeposit')"
+      >
+        <span class="last-release-info">Cancelar</span>
+        <img alt="Cancel image" src="@/assets/cancel.svg" />
       </div>
 
+      <span class="last-release-info" v-if="!props.isManageMode">
+        {{ "Compra" }}
+      </span>
+
+      <div
+        v-if="props.isManageMode"
+        class="flex gap-2 cursor-pointer items-center justify-self-center"
+        @click="emit('withdrawDeposit')"
+      >
+        <span class="last-release-info">Retirar</span>
+        <img alt="Cancel image" src="@/assets/withdraw.svg" />
+      </div>
+
+      <div
+        v-if="!props.isManageMode"
+        class="flex gap-2 cursor-pointer items-center justify-self-center"
+        @click="
+          openEtherscanUrl(`https://etherscan.io/tx/${item?.transactionHash}`)
+        "
+      >
+        <span class="last-release-info">Etherscan</span>
+        <img alt="Redirect image" src="@/assets/redirect.svg" />
+      </div>
+    </div>
+    <div class="flex justify-center w-full mt-2">
+      <button type="button" class="text-white" @click="loadMore()">
+        Carregar mais
+      </button>
+    </div>
+    <p class="font-bold" v-if="props.walletTransactions?.length == 0">
+      Não há nenhuma transação anterior
+    </p>
+  </div>
 </template>
 
 <style scoped>
@@ -107,7 +134,7 @@ p {
 }
 
 .blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
+  @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto;
 }
 
 .grid-container {
@@ -126,4 +153,4 @@ input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/BidHistoryView.vue b/src/views/BidHistoryView.vue
index a89deb3..fcbd4d5 100644
--- a/src/views/BidHistoryView.vue
+++ b/src/views/BidHistoryView.vue
@@ -1,5 +1,4 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <div class="page">Histórico de ofertas</div>

From d81580a1341f3dda377fd190c3652610eaa15bd4 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Sun, 25 Dec 2022 23:52:34 -0300
Subject: [PATCH 05/18] add Listing Component inside manage bids view

---
 src/views/ManageBidsView.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 636665d..f1b749e 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -1,12 +1,31 @@
 <script setup lang="ts">
+import { useEtherStore } from "@/store/ether";
+import { storeToRefs } from "pinia";
+import ListingComponent from "@/components/ListingComponent.vue";
+
+const etherStore = useEtherStore();
+const { depositsAddedList } = storeToRefs(etherStore);
 </script>
 
 <template>
-  <div class="page">Gerenciar Ofertas</div>
+  <div class="page">
+    <div class="header">
+      Gerenciar ofertas
+    </div>
+    <ListingComponent
+      v-if="depositsAddedList?.length != 0"
+      :wallet-transactions="depositsAddedList!"
+      :is-manage-mode="true"
+    ></ListingComponent>
+  </div>
 </template>
 
 <style scoped>
 .page {
-  @apply flex gap-8 mt-24;
+  @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>

From 0f1822ae87ab50cf0a18e0ac263c0ac33c54f766 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Mon, 26 Dec 2022 00:06:35 -0300
Subject: [PATCH 06/18] preparing listingComponent to receive empty data and
 updated this data according to vue lifecycle hook

---
 src/components/ListingComponent.vue | 30 ++++++++++++++++++++++++-----
 src/views/ManageBidsView.vue        | 11 ++++-------
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
index a2d2995..8be95e4 100644
--- a/src/components/ListingComponent.vue
+++ b/src/components/ListingComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import blockchain from "@/utils/blockchain";
-import { ref } from "vue";
+import { ref, onUpdated } from "vue";
 
 // props
 const props = defineProps<{
@@ -38,13 +38,27 @@ const loadMore = () => {
   else itemsToShow.value = props.walletTransactions;
 };
 
+// lifecycle methods
+
+onUpdated(() => {
+  if (itemsToShow.value.length == 0) {
+    itemsToShow.value =
+      props.walletTransactions?.length > 3
+        ? props.walletTransactions.slice(0, 3)
+        : props.walletTransactions;
+  }
+});
+
 //emits
 const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
 </script>
 
 <template>
   <div class="blur-container">
-    <div class="grid grid-cols-4 grid-flow-row w-full px-6">
+    <div
+      class="grid grid-cols-4 grid-flow-row w-full px-6"
+      v-if="props.walletTransactions?.length != 0"
+    >
       <span class="text-xs text-gray-50 font-medium justify-self-center"
         >Valor</span
       >
@@ -102,14 +116,20 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
         <img alt="Redirect image" src="@/assets/redirect.svg" />
       </div>
     </div>
-    <div class="flex justify-center w-full mt-2">
+    <div
+      class="flex justify-center w-full mt-2"
+      v-if="props.walletTransactions?.length != 0"
+    >
       <button type="button" class="text-white" @click="loadMore()">
         Carregar mais
       </button>
     </div>
-    <p class="font-bold" v-if="props.walletTransactions?.length == 0">
+    <span
+      class="font-bold text-gray-900"
+      v-if="props.walletTransactions?.length == 0"
+    >
       Não há nenhuma transação anterior
-    </p>
+    </span>
   </div>
 </template>
 
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index f1b749e..7ed79f0 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -9,12 +9,9 @@ const { depositsAddedList } = storeToRefs(etherStore);
 
 <template>
   <div class="page">
-    <div class="header">
-      Gerenciar ofertas
-    </div>
+    <div class="header">Gerenciar ofertas</div>
     <ListingComponent
-      v-if="depositsAddedList?.length != 0"
-      :wallet-transactions="depositsAddedList!"
+      :wallet-transactions="depositsAddedList"
       :is-manage-mode="true"
     ></ListingComponent>
   </div>
@@ -25,7 +22,7 @@ const { depositsAddedList } = storeToRefs(etherStore);
   @apply flex flex-col gap-10 mt-20 w-full;
 }
 
-.header{
-  @apply text-3xl text-gray-900 leading-9 font-bold justify-center flex
+.header {
+  @apply text-3xl text-gray-900 leading-9 font-bold justify-center flex;
 }
 </style>

From c0095b774da93f8202ee9ae32431f7d8e8b487e0 Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Mon, 26 Dec 2022 17:43:56 -0300
Subject: [PATCH 07/18] Create deposits history screen

---
 src/components/ListingComponent.vue | 10 ++++++-
 src/router/index.ts                 |  6 ++++
 src/views/DepositsHistoryView.vue   | 44 +++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 src/views/DepositsHistoryView.vue

diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
index 8be95e4..9b4aec6 100644
--- a/src/components/ListingComponent.vue
+++ b/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>
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 9684b60..a886d35 100644
--- a/src/router/index.ts
+++ b/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,
+    },
   ],
 });
 
diff --git a/src/views/DepositsHistoryView.vue b/src/views/DepositsHistoryView.vue
new file mode 100644
index 0000000..3db8b02
--- /dev/null
+++ b/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>
\ No newline at end of file

From 49f7b670a9bbd8e7d5398178a7c824232680364b Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Mon, 26 Dec 2022 17:58:11 -0300
Subject: [PATCH 08/18] add cancel deposit action in manage bids view

---
 src/components/ListingComponent.vue | 17 +++++++++++----
 src/components/TopBar.vue           |  5 ++++-
 src/utils/blockchain.ts             | 21 ++++++++++++++++--
 src/views/DepositsHistoryView.vue   |  8 ++++---
 src/views/ManageBidsView.vue        | 33 +++++++++++++++++++++++++++--
 5 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
index 9b4aec6..c0d128c 100644
--- a/src/components/ListingComponent.vue
+++ b/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>
 
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 0bf874b..a4767eb 100644
--- a/src/components/TopBar.vue
+++ b/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"
diff --git a/src/utils/blockchain.ts b/src/utils/blockchain.ts
index 1098da3..91a943e 100644
--- a/src/utils/blockchain.ts
+++ b/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,
diff --git a/src/views/DepositsHistoryView.vue b/src/views/DepositsHistoryView.vue
index 3db8b02..b83307f 100644
--- a/src/views/DepositsHistoryView.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 7ed79f0..3bafe87 100644
--- a/src/views/ManageBidsView.vue
+++ b/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>

From 34ffcc28608f02e895c2b766c1a1822968aab210 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Mon, 26 Dec 2022 19:34:05 -0300
Subject: [PATCH 09/18] change from listening onUpdate on listing component to
 watch props changes

---
 src/components/ListingComponent.vue | 25 ++++++++++++-------------
 src/views/ManageBidsView.vue        | 16 +++++++---------
 2 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
index c0d128c..c6d6ac6 100644
--- a/src/components/ListingComponent.vue
+++ b/src/components/ListingComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import blockchain from "@/utils/blockchain";
-import { ref, onUpdated } from "vue";
+import { ref, watch } from "vue";
 
 // props
 const props = defineProps<{
@@ -38,16 +38,15 @@ const loadMore = () => {
   else itemsToShow.value = props.walletTransactions;
 };
 
-// lifecycle methods
+// watch props changes
 
-onUpdated(() => {
-  if (itemsToShow.value.length == 0) {
-    itemsToShow.value =
-      props.walletTransactions?.length > 3
-        ? props.walletTransactions.slice(0, 3)
-        : props.walletTransactions;
-  }
-});
+watch(props, (newProps) => {
+  const itemsToShowQty = itemsToShow.value.length
+  itemsToShow.value =
+  newProps?.walletTransactions.length > itemsToShowQty + 3
+      ? newProps.walletTransactions.slice(itemsToShowQty, itemsToShowQty + 3)
+      : newProps.walletTransactions;
+})
 
 //emits
 const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
@@ -57,7 +56,7 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
   <div class="blur-container">
     <div
       class="grid grid-cols-4 grid-flow-row w-full px-6"
-      v-if="props.walletTransactions?.length != 0"
+      v-if="itemsToShow.length != 0"
     >
       <span class="text-xs text-gray-50 font-medium justify-self-center"
         >Valor</span
@@ -135,7 +134,7 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
     </div>
     <div
       class="flex justify-center w-full mt-2"
-      v-if="props.walletTransactions?.length != 0"
+      v-if="itemsToShow.length != 0"
     >
       <button type="button" class="text-white" @click="loadMore()">
         Carregar mais
@@ -143,7 +142,7 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
     </div>
     <span
       class="font-bold text-gray-900"
-      v-if="props.walletTransactions?.length == 0"
+      v-if="itemsToShow.length == 0"
     >
       Não há nenhuma transação anterior
     </span>
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 3bafe87..8d16bf5 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -4,26 +4,24 @@ 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";
+import { ref } from "vue";
 
 const etherStore = useEtherStore();
 const { walletAddress } = storeToRefs(etherStore);
 const depositList = ref<any[]>([]);
 
+if (walletAddress.value) {
+  await blockchain
+    .listDepositTransactionByWalletAddress(walletAddress.value)
+    .then((value) => (depositList.value = value));
+}
+
 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) {

From 0e8ca7f8037a6551f7dbe381b5d0335f5fb8786c Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Tue, 27 Dec 2022 11:55:30 -0300
Subject: [PATCH 10/18] Update DepositsHistory page behavior

---
 src/views/DepositsHistoryView.vue | 29 ++++++++++++++---------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/views/DepositsHistoryView.vue b/src/views/DepositsHistoryView.vue
index b83307f..879273f 100644
--- a/src/views/DepositsHistoryView.vue
+++ b/src/views/DepositsHistoryView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import ListingComponent from "@/components/ListingComponent.vue";
 import blockchain from "../utils/blockchain";
 
@@ -9,29 +9,28 @@ const etherStore = useEtherStore();
 const { walletAddress } = storeToRefs(etherStore);
 const allUserTransactions = ref<any[]>([]);
 
-if (walletAddress.value != "") {
-  blockchain
-    .listAllTransactionByWalletAddress(walletAddress.value)
-    .then((res) => {
-      allUserTransactions.value = res;
-    });
-}
+watch(walletAddress, async (newValue) => {
+  await blockchain
+    .listAllTransactionByWalletAddress(newValue)
+    .then((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
-      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>
 

From c6067fb4ebe0446eadad8bfd75a45547f9073ae3 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Tue, 27 Dec 2022 17:25:47 -0300
Subject: [PATCH 11/18] add withdraw deposit function

---
 src/components/ListingComponent.vue |  9 +++---
 src/utils/blockchain.ts             | 42 ++++++++++++++++++++++++---
 src/views/ManageBidsView.vue        | 44 ++++++++++++++++-------------
 3 files changed, 67 insertions(+), 28 deletions(-)

diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
index c6d6ac6..5bfee8b 100644
--- a/src/components/ListingComponent.vue
+++ b/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>
 
-      <span class="last-release-info"> 20 out 2022 </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" />
diff --git a/src/utils/blockchain.ts b/src/utils/blockchain.ts
index 91a943e..c7919c2 100644
--- a/src/utils/blockchain.ts
+++ b/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,
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 8d16bf5..d1dcb2b 100644
--- a/src/views/ManageBidsView.vue
+++ b/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 {

From 59c9eabd30165bdcea9be028f2b1460681df7ed6 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Wed, 28 Dec 2022 20:24:41 -0300
Subject: [PATCH 12/18] partial commit (will be removed)

---
 src/components/ListingComponent.vue | 45 +++++++++++++-----------
 src/store/ether.ts                  | 10 ++++++
 src/utils/blockchain.ts             | 54 ++++++++++++++++-------------
 src/views/DepositsHistoryView.vue   |  2 +-
 src/views/ManageBidsView.vue        | 39 +++++++++++++++------
 5 files changed, 92 insertions(+), 58 deletions(-)

diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
index 5bfee8b..72da322 100644
--- a/src/components/ListingComponent.vue
+++ b/src/components/ListingComponent.vue
@@ -6,16 +6,16 @@ import { ref, watch } from "vue";
 const props = defineProps<{
   walletTransactions: any[];
   isManageMode: boolean;
+  walletAddress?: string;
 }>();
 
 const itemsToShow = ref<any[]>([]);
 
-itemsToShow.value =
-  props.walletTransactions?.length > 3
-    ? props.walletTransactions.slice(0, 3)
-    : props.walletTransactions;
-
 // Methods
+const showInitialItems = (items: any[]) => {
+  return items.length > 3 ? items.slice(0, 3) : items;
+};
+
 const formatEventsAmount = (amount: any) => {
   try {
     const formated = blockchain.formatBigNumber(amount);
@@ -41,15 +41,21 @@ const loadMore = () => {
 // watch props changes
 
 watch(props, (newProps) => {
-  const itemsToShowQty = itemsToShow.value.length
-  itemsToShow.value =
-  newProps?.walletTransactions.length > itemsToShowQty + 3
-      ? newProps.walletTransactions.slice(itemsToShowQty, itemsToShowQty + 3)
-      : newProps.walletTransactions;
-})
+  const itemsToShowQty = itemsToShow.value.length;
+  if (itemsToShowQty == 0)
+    itemsToShow.value = showInitialItems(props.walletTransactions);
+  else
+    itemsToShow.value =
+      newProps?.walletTransactions.length > itemsToShowQty
+        ? newProps.walletTransactions.slice(0, itemsToShowQty)
+        : newProps.walletTransactions;
+});
 
 //emits
 const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
+
+// initial itemToShow value
+itemsToShow.value = showInitialItems(props.walletTransactions);
 </script>
 
 <template>
@@ -77,11 +83,14 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
       :key="item?.blockNumber"
     >
       <span class="last-release-info">
-        {{ formatEventsAmount(item?.args ? item?.args.amount : item?.remaining) }} BRZ
+        {{
+          item?.args ? formatEventsAmount(item?.args.amount) : item?.remaining
+        }}
+        BRZ
       </span>
 
       <!-- TODO: change this hardcoded date -->
-      <span class="last-release-info"> 20 out 2022 </span> 
+      <span class="last-release-info"> 20 out 2022 </span>
 
       <div
         v-if="props.isManageMode"
@@ -133,18 +142,12 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
         <img alt="Redirect image" src="@/assets/redirect.svg" />
       </div>
     </div>
-    <div
-      class="flex justify-center w-full mt-2"
-      v-if="itemsToShow.length != 0"
-    >
+    <div class="flex justify-center w-full mt-2" v-if="itemsToShow.length != 0">
       <button type="button" class="text-white" @click="loadMore()">
         Carregar mais
       </button>
     </div>
-    <span
-      class="font-bold text-gray-900"
-      v-if="itemsToShow.length == 0"
-    >
+    <span class="font-bold text-gray-900" v-if="itemsToShow.length == 0">
       Não há nenhuma transação anterior
     </span>
   </div>
diff --git a/src/store/ether.ts b/src/store/ether.ts
index 37a73d7..b4c0556 100644
--- a/src/store/ether.ts
+++ b/src/store/ether.ts
@@ -47,4 +47,14 @@ export const useEtherStore = defineStore("ether", {
       this.locksExpiredList = locksExpiredList;
     },
   },
+  getters: {
+    getValidDepositByWalletAddress: (state) => {
+      return (walletAddress: string) =>
+        state.depositsValidList
+          .filter((deposit) => deposit.seller == walletAddress)
+          .sort((a, b) => {
+            return b.blockNumber - a.blockNumber;
+          });
+    },
+  },
 });
diff --git a/src/utils/blockchain.ts b/src/utils/blockchain.ts
index c7919c2..29f1966 100644
--- a/src/utils/blockchain.ts
+++ b/src/utils/blockchain.ts
@@ -13,6 +13,7 @@ import { wallets } from "./smart_contract_files/wallets.json";
 const updateWalletStatus = async () => {
   const etherStore = useEtherStore();
   const provider = getProvider();
+
   if (!provider) return;
 
   const signer = provider.getSigner();
@@ -94,23 +95,19 @@ 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()
-
-  
-// };
+const listValidDepositTransactionsByWalletAddress = async (
+  walletAddress: string
+): Promise<any[]> => {
+  const walletDeposits = await getValidDeposits();
+  if (walletDeposits) {
+    return walletDeposits
+      .filter((deposit) => deposit.seller == String(walletAddress))
+      .sort((a, b) => {
+        return b.blockNumber - a.blockNumber;
+      });
+  }
+  return [];
+};
 
 // get wallet's lock transactions
 const listLockTransactionByWalletAddress = async (
@@ -150,9 +147,8 @@ const listReleaseTransactionByWalletAddress = async (
   });
 };
 
-// Update events at store methods
-const updateValidDeposits = async () => {
-  const etherStore = useEtherStore();
+//get valid deposits
+const getValidDeposits = async (): Promise<any[] | undefined> => {
   const window_ = window as any;
   const connection = window_.ethereum;
   let provider: ethers.providers.Web3Provider | null = null;
@@ -170,17 +166,23 @@ const updateValidDeposits = async () => {
     const mappedDeposit = await mapDeposits(deposit.args?.depositID);
 
     const validDeposit = {
+      blockNumber: deposit.blockNumber,
       depositID: deposit.args?.depositID,
       remaining: formatBigNumber(mappedDeposit.remaining),
       seller: mappedDeposit.seller,
       pixKey: mappedDeposit.pixTarget,
     };
 
-    if (mappedDeposit.valid)
-      depositList.push(validDeposit);
+    if (mappedDeposit.valid) depositList.push(validDeposit);
   });
 
-  etherStore.setDepositsValidList(depositList);
+  return depositList;
+};
+// Update events at store methods
+const updateValidDeposits = async () => {
+  const etherStore = useEtherStore();
+  const deposits = await getValidDeposits();
+  if (deposits) etherStore.setDepositsValidList(deposits);
 };
 
 const updateDepositAddedEvents = async () => {
@@ -240,10 +242,10 @@ const connectProvider = async () => {
   const connection = window_.ethereum;
 
   await updateWalletStatus();
+  await updateValidDeposits();
   await updateDepositAddedEvents();
   await updateLockAddedEvents();
   await updateLockReleasedEvents();
-  await updateValidDeposits();
 
   connection.on("accountsChanged", async () => {
     await updateWalletStatus();
@@ -290,8 +292,8 @@ const addDeposit = async (tokenQty: Number, pixKey: string) => {
   await deposit.wait();
 
   await updateWalletStatus();
-  await updateDepositAddedEvents();
   await updateValidDeposits();
+  await updateDepositAddedEvents();
 };
 
 // cancel a deposit by its Id
@@ -436,6 +438,7 @@ export default {
   formatEther,
   updateWalletStatus,
   splitTokens,
+  listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
   listReleaseTransactionByWalletAddress,
   listDepositTransactionByWalletAddress,
@@ -450,4 +453,5 @@ export default {
   releaseLock,
   updateLockAddedEvents,
   updateValidDeposits,
+  getValidDeposits,
 };
diff --git a/src/views/DepositsHistoryView.vue b/src/views/DepositsHistoryView.vue
index 879273f..6acf5f3 100644
--- a/src/views/DepositsHistoryView.vue
+++ b/src/views/DepositsHistoryView.vue
@@ -12,7 +12,7 @@ const allUserTransactions = ref<any[]>([]);
 watch(walletAddress, async (newValue) => {
   await blockchain
     .listAllTransactionByWalletAddress(newValue)
-    .then((res) => (allUserTransactions.value = res));
+    .then((res) => {if(res) (allUserTransactions.value = res)});
 });
 
 watch(walletAddress, async (newValue) => {
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index d1dcb2b..e717454 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -7,30 +7,47 @@ import type { BigNumber } from "ethers";
 import { ref } from "vue";
 
 const etherStore = useEtherStore();
-const { walletAddress, depositsValidList } = storeToRefs(etherStore);
+const { walletAddress } = storeToRefs(etherStore);
 const depositList = ref<any[]>([]);
 
-const listValidDepositTransactionsByWalletAddress = (walletAddress: string, deposits: any[]) => {
-  depositList.value = deposits.filter((deposit) => deposit.seller === walletAddress) 
-}
-
 const handleCancelDeposit = async (depositID: BigNumber) => {
   const response = await blockchain.cancelDeposit(depositID);
-  if (response == true) console.log("Depósito cancelado com sucesso.");
+  if (response == true) {
+    console.log("Depósito cancelado com sucesso.");
+    await blockchain
+      .listValidDepositTransactionsByWalletAddress(walletAddress.value)
+      .then((deposits) => {
+        if (deposits) depositList.value = deposits;
+      });
+  }
 };
 
 const handleWithDrawDeposit = async (depositID: BigNumber) => {
   const response = await blockchain.withdrawDeposit(depositID);
-  if (response == true) console.log("Token retirado com sucesso.");
+  if (response == true) {
+    console.log("Token retirado com sucesso.");
+    await blockchain
+      .listValidDepositTransactionsByWalletAddress(walletAddress.value)
+      .then((deposits) => {
+        if (deposits) depositList.value = deposits;
+      });
+  }
 };
 
 if (walletAddress.value) {
-  listValidDepositTransactionsByWalletAddress(walletAddress.value, depositsValidList.value)
+  depositList.value = etherStore.getValidDepositByWalletAddress(
+    walletAddress.value
+  );
 }
 
-etherStore.$subscribe((_mutation, state) => {
-  if(state.walletAddress != "")
-    listValidDepositTransactionsByWalletAddress(state.walletAddress, state.depositsValidList)
+etherStore.$subscribe(async (_mutation, state) => {
+  if (state.walletAddress != "" && state.depositsValidList.length > 0) {
+    await blockchain
+      .listValidDepositTransactionsByWalletAddress(walletAddress.value)
+      .then((deposits) => {
+        if (deposits) depositList.value = deposits;
+      });
+  }
 });
 </script>
 

From 6279acc20d03f00f8a2509ca613ae2b70e5a8719 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Fri, 30 Dec 2022 02:03:23 -0300
Subject: [PATCH 13/18] implement logic to await all validDeposits correctly
 and improve state rendering from listing component

---
 src/components/ListingComponent.vue | 55 ++++++++++++++++------------
 src/utils/blockchain.ts             | 56 ++++++++++++++++++++---------
 src/views/DepositsHistoryView.vue   |  6 ++--
 src/views/ManageBidsView.vue        | 42 ++++++++++------------
 4 files changed, 94 insertions(+), 65 deletions(-)

diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
index 72da322..3a5cd72 100644
--- a/src/components/ListingComponent.vue
+++ b/src/components/ListingComponent.vue
@@ -12,8 +12,8 @@ const props = defineProps<{
 const itemsToShow = ref<any[]>([]);
 
 // Methods
-const showInitialItems = (items: any[]) => {
-  return items.length > 3 ? items.slice(0, 3) : items;
+const showInitialItems = () => {
+  itemsToShow.value = props.walletTransactions.slice(0, 3);
 };
 
 const formatEventsAmount = (amount: any) => {
@@ -31,31 +31,27 @@ const openEtherscanUrl = (url: string) => {
 
 const loadMore = () => {
   const itemsShowing = itemsToShow.value.length;
-  if (props.walletTransactions?.length > itemsShowing + 3)
-    itemsToShow.value?.push(
-      ...props.walletTransactions.slice(itemsShowing, itemsShowing + 3)
-    );
-  else itemsToShow.value = props.walletTransactions;
+  itemsToShow.value?.push(
+    ...props.walletTransactions.slice(itemsShowing, itemsShowing + 3)
+  );
 };
 
 // watch props changes
-
-watch(props, (newProps) => {
+watch(props, async () => {
   const itemsToShowQty = itemsToShow.value.length;
-  if (itemsToShowQty == 0)
-    itemsToShow.value = showInitialItems(props.walletTransactions);
+  if (itemsToShowQty == 0) showInitialItems();
   else
     itemsToShow.value =
-      newProps?.walletTransactions.length > itemsToShowQty
-        ? newProps.walletTransactions.slice(0, itemsToShowQty)
-        : newProps.walletTransactions;
+      props.walletTransactions.length > itemsToShowQty
+        ? props.walletTransactions.slice(0, itemsToShowQty)
+        : props.walletTransactions;
 });
 
 //emits
 const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
 
-// initial itemToShow value
-itemsToShow.value = showInitialItems(props.walletTransactions);
+// initial itemsToShow value
+showInitialItems();
 </script>
 
 <template>
@@ -79,8 +75,8 @@ itemsToShow.value = showInitialItems(props.walletTransactions);
     </div>
     <div
       class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
-      v-for="item in itemsToShow"
-      :key="item?.blockNumber"
+      v-for="(item, index) in itemsToShow"
+      :key="item.depositID"
     >
       <span class="last-release-info">
         {{
@@ -95,7 +91,7 @@ itemsToShow.value = showInitialItems(props.walletTransactions);
       <div
         v-if="props.isManageMode"
         class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="emit('cancelDeposit', item.depositID)"
+        @click="emit('cancelDeposit', item.depositID, index)"
       >
         <span class="last-release-info">Cancelar</span>
         <img alt="Cancel image" src="@/assets/cancel.svg" />
@@ -125,7 +121,7 @@ itemsToShow.value = showInitialItems(props.walletTransactions);
       <div
         v-if="props.isManageMode"
         class="flex gap-2 cursor-pointer items-center justify-self-center"
-        @click="emit('withdrawDeposit', item.depositID)"
+        @click="emit('withdrawDeposit', item.depositID, index)"
       >
         <span class="last-release-info">Retirar</span>
         <img alt="Cancel image" src="@/assets/withdraw.svg" />
@@ -142,11 +138,26 @@ itemsToShow.value = showInitialItems(props.walletTransactions);
         <img alt="Redirect image" src="@/assets/redirect.svg" />
       </div>
     </div>
-    <div class="flex justify-center w-full mt-2" v-if="itemsToShow.length != 0">
-      <button type="button" class="text-white" @click="loadMore()">
+    <div
+      class="flex flex-col justify-center items-center w-full mt-2 gap-2"
+      v-if="
+        itemsToShow.length != 0 &&
+        itemsToShow.length != props.walletTransactions.length
+      "
+    >
+      <button
+        type="button"
+        class="text-white font-semibold"
+        @click="loadMore()"
+      >
         Carregar mais
       </button>
+      <span class="text-gray-300">
+        ({{ itemsToShow.length }} de
+        {{ props.walletTransactions.length }} transações)
+      </span>
     </div>
+
     <span class="font-bold text-gray-900" v-if="itemsToShow.length == 0">
       Não há nenhuma transação anterior
     </span>
diff --git a/src/utils/blockchain.ts b/src/utils/blockchain.ts
index 29f1966..fc58384 100644
--- a/src/utils/blockchain.ts
+++ b/src/utils/blockchain.ts
@@ -26,6 +26,21 @@ const updateWalletStatus = async () => {
   etherStore.setWalletAddress(ethers.utils.getAddress(walletAddress[0]));
 };
 
+const updateWalletBalance = async () => {
+  const etherStore = useEtherStore();
+  const provider = getProvider();
+
+  if (!provider) return;
+
+  const signer = provider.getSigner();
+  const contract = new ethers.Contract(addresses.token, mockToken.abi, signer);
+
+  const walletAddress = await provider.send("eth_requestAccounts", []);
+
+  const balance = await contract.balanceOf(walletAddress[0]);
+  etherStore.setBalance(formatBigNumber(balance));
+};
+
 //  Split tokens between wallets in wallets.json
 const splitTokens = async () => {
   const provider = getProvider();
@@ -101,7 +116,7 @@ const listValidDepositTransactionsByWalletAddress = async (
   const walletDeposits = await getValidDeposits();
   if (walletDeposits) {
     return walletDeposits
-      .filter((deposit) => deposit.seller == String(walletAddress))
+      .filter((deposit) => deposit.seller == walletAddress)
       .sort((a, b) => {
         return b.blockNumber - a.blockNumber;
       });
@@ -152,7 +167,9 @@ const getValidDeposits = async (): Promise<any[] | undefined> => {
   const window_ = window as any;
   const connection = window_.ethereum;
   let provider: ethers.providers.Web3Provider | null = null;
-  if (!connection) return;
+
+  if (!connection) return [];
+
   provider = new ethers.providers.Web3Provider(connection);
   const signer = provider.getSigner();
   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
@@ -160,21 +177,26 @@ const getValidDeposits = async (): Promise<any[] | undefined> => {
   const filterDeposits = p2pContract.filters.DepositAdded(null);
   const eventsDeposits = await p2pContract.queryFilter(filterDeposits);
 
-  const depositList = [] as any[];
+  const depositList: any[] = await Promise.all(
+    eventsDeposits
+      .map(async (deposit) => {
+        const mappedDeposit = await mapDeposits(deposit.args?.depositID);
+        let validDeposit = {};
 
-  eventsDeposits.forEach(async (deposit) => {
-    const mappedDeposit = await mapDeposits(deposit.args?.depositID);
+        if (mappedDeposit.valid) {
+          validDeposit = {
+            blockNumber: deposit.blockNumber,
+            depositID: deposit.args?.depositID,
+            remaining: formatBigNumber(mappedDeposit.remaining),
+            seller: mappedDeposit.seller,
+            pixKey: mappedDeposit.pixTarget,
+          };
+        }
 
-    const validDeposit = {
-      blockNumber: deposit.blockNumber,
-      depositID: deposit.args?.depositID,
-      remaining: formatBigNumber(mappedDeposit.remaining),
-      seller: mappedDeposit.seller,
-      pixKey: mappedDeposit.pixTarget,
-    };
-
-    if (mappedDeposit.valid) depositList.push(validDeposit);
-  });
+        return validDeposit;
+      })
+      .filter((deposit) => deposit)
+  );
 
   return depositList;
 };
@@ -306,7 +328,7 @@ const cancelDeposit = async (depositId: BigNumber): Promise<Boolean> => {
   const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
   await contract.cancelDeposit(depositId);
 
-  await updateWalletStatus();
+  await updateWalletBalance();
   await updateValidDeposits();
   return true;
 };
@@ -321,7 +343,7 @@ const withdrawDeposit = async (depositId: BigNumber): Promise<Boolean> => {
   const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
   await contract.withdraw(depositId, []);
 
-  await updateWalletStatus();
+  await updateWalletBalance();
   await updateValidDeposits();
   return true;
 };
diff --git a/src/views/DepositsHistoryView.vue b/src/views/DepositsHistoryView.vue
index 6acf5f3..ded40bf 100644
--- a/src/views/DepositsHistoryView.vue
+++ b/src/views/DepositsHistoryView.vue
@@ -10,9 +10,9 @@ const { walletAddress } = storeToRefs(etherStore);
 const allUserTransactions = ref<any[]>([]);
 
 watch(walletAddress, async (newValue) => {
-  await blockchain
-    .listAllTransactionByWalletAddress(newValue)
-    .then((res) => {if(res) (allUserTransactions.value = res)});
+  await blockchain.listAllTransactionByWalletAddress(newValue).then((res) => {
+    if (res) allUserTransactions.value = res;
+  });
 });
 
 watch(walletAddress, async (newValue) => {
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index e717454..a131a0e 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -4,49 +4,45 @@ import { storeToRefs } from "pinia";
 import blockchain from "../utils/blockchain";
 import ListingComponent from "@/components/ListingComponent.vue";
 import type { BigNumber } from "ethers";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 const etherStore = useEtherStore();
 const { walletAddress } = storeToRefs(etherStore);
 const depositList = ref<any[]>([]);
 
-const handleCancelDeposit = async (depositID: BigNumber) => {
+const handleCancelDeposit = async (depositID: BigNumber, index: number) => {
   const response = await blockchain.cancelDeposit(depositID);
   if (response == true) {
     console.log("Depósito cancelado com sucesso.");
-    await blockchain
-      .listValidDepositTransactionsByWalletAddress(walletAddress.value)
-      .then((deposits) => {
-        if (deposits) depositList.value = deposits;
-      });
+    depositList.value.splice(index, 1);
   }
 };
 
-const handleWithDrawDeposit = async (depositID: BigNumber) => {
+const handleWithDrawDeposit = async (depositID: BigNumber, index: number) => {
   const response = await blockchain.withdrawDeposit(depositID);
   if (response == true) {
     console.log("Token retirado com sucesso.");
-    await blockchain
-      .listValidDepositTransactionsByWalletAddress(walletAddress.value)
-      .then((deposits) => {
-        if (deposits) depositList.value = deposits;
-      });
+    depositList.value.splice(index, 1);
   }
 };
 
 if (walletAddress.value) {
-  depositList.value = etherStore.getValidDepositByWalletAddress(
-    walletAddress.value
-  );
+  const walletDeposits =
+    await blockchain.listValidDepositTransactionsByWalletAddress(
+      walletAddress.value
+    );
+  if (walletDeposits) {
+    depositList.value = walletDeposits;
+  }
 }
 
-etherStore.$subscribe(async (_mutation, state) => {
-  if (state.walletAddress != "" && state.depositsValidList.length > 0) {
-    await blockchain
-      .listValidDepositTransactionsByWalletAddress(walletAddress.value)
-      .then((deposits) => {
-        if (deposits) depositList.value = deposits;
-      });
+watch(walletAddress, async () => {
+  const walletDeposits =
+    await blockchain.listValidDepositTransactionsByWalletAddress(
+      walletAddress.value
+    );
+  if (walletDeposits) {
+    depositList.value = walletDeposits;
   }
 });
 </script>

From 060c4f370f03433d7b39bf7c0cbf2a88f91b86a2 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Fri, 30 Dec 2022 16:53:12 -0300
Subject: [PATCH 14/18] change from deposits history to bid history and add it
 to bid_history router

---
 src/components/ListingComponent.vue |  2 +-
 src/components/SearchComponent.vue  |  1 -
 src/router/index.ts                 |  6 ----
 src/views/BidHistoryView.vue        | 48 +++++++++++++++++++++++++++--
 src/views/DepositsHistoryView.vue   | 45 ---------------------------
 src/views/ManageBidsView.vue        | 22 +++++++------
 6 files changed, 58 insertions(+), 66 deletions(-)
 delete mode 100644 src/views/DepositsHistoryView.vue

diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
index 3a5cd72..9df05fd 100644
--- a/src/components/ListingComponent.vue
+++ b/src/components/ListingComponent.vue
@@ -154,7 +154,7 @@ showInitialItems();
       </button>
       <span class="text-gray-300">
         ({{ itemsToShow.length }} de
-        {{ props.walletTransactions.length }} transações)
+        {{ props.walletTransactions.length }} {{isManageMode ? 'ofertas' : 'transações'}})
       </span>
     </div>
 
diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue
index 72f8b37..d538b39 100644
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -62,7 +62,6 @@ const verifyLiquidity = () => {
   depositsValidList.value.find((element) => {
     const remaining = element.remaining;
     if (
-      element.valid == true &&
       tokenValue.value!! <= remaining &&
       tokenValue.value!! != 0 &&
       element.seller !== walletAddress.value
diff --git a/src/router/index.ts b/src/router/index.ts
index a886d35..9684b60 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,7 +3,6 @@ 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({
@@ -34,11 +33,6 @@ const router = createRouter({
       name: "manage bids",
       component: ManageBidsView,
     },
-    {
-      path: "/deposits_history",
-      name: "deposits history",
-      component: DepositsHistoryView,
-    },
   ],
 });
 
diff --git a/src/views/BidHistoryView.vue b/src/views/BidHistoryView.vue
index fcbd4d5..d5817dd 100644
--- a/src/views/BidHistoryView.vue
+++ b/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>
diff --git a/src/views/DepositsHistoryView.vue b/src/views/DepositsHistoryView.vue
deleted file mode 100644
index ded40bf..0000000
--- a/src/views/DepositsHistoryView.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index a131a0e..55d2a25 100644
--- a/src/views/ManageBidsView.vue
+++ b/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(

From 6fdd14f147d35bb1153ff50b843926d16e8fa13b Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Fri, 30 Dec 2022 17:04:52 -0300
Subject: [PATCH 15/18] rename list component to buy confirmed component and
 add Listing component inside it

---
 .../BuyConfirmedComponent.vue}                |  57 +++----
 src/components/ListComponent.vue              | 151 ------------------
 src/components/ListingComponent.vue           |   5 +-
 src/views/BidHistoryView.vue                  |  10 +-
 src/views/HomeView.vue                        |  16 +-
 src/views/ManageBidsView.vue                  |   1 -
 6 files changed, 46 insertions(+), 194 deletions(-)
 rename src/{views/ListView.vue => components/BuyConfirmedComponent.vue} (65%)
 delete mode 100644 src/components/ListComponent.vue

diff --git a/src/views/ListView.vue b/src/components/BuyConfirmedComponent.vue
similarity index 65%
rename from src/views/ListView.vue
rename to src/components/BuyConfirmedComponent.vue
index 49c39a4..7df6b9e 100644
--- a/src/views/ListView.vue
+++ b/src/components/BuyConfirmedComponent.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton.vue";
+import ListingComponent from "@/components/ListingComponent.vue";
+
+// props
+const props = defineProps<{
+  lastWalletReleaseTransactions: any[];
+  tokenAmount: Number | undefined;
+}>();
+
+// Emits
+const emit = defineEmits(["makeAnotherTransaction"]);
 </script>
 
 <template>
@@ -16,7 +26,7 @@ import CustomButton from "@/components/CustomButton.vue";
       >
         <div>
           <p>Tokens recebidos</p>
-          <p class="text-2xl text-gray-900">100 BRZ</p>
+          <p class="text-2xl text-gray-900">{{ props.tokenAmount }} BRZ</p>
         </div>
         <div class="my-5">
           <p>
@@ -29,41 +39,24 @@ import CustomButton from "@/components/CustomButton.vue";
           @buttonClicked="() => {}"
         />
       </div>
-    </div>
-    <div class="blur-container-row">
       <button
         type="button"
-        class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 w-full"
-        @click="() => {}"
+        class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 min-w-[198px]"
+        @click="emit('makeAnotherTransaction')"
       >
         Fazer nova transação
       </button>
-      <button
-        type="button"
-        class="border-amber-500 border-2 rounded default-button text-white p-2"
-        @click="() => {}"
-      >
-        Desconectar
-      </button>
     </div>
-    <div class="text-container mt-10">
+    <div class="text-container mt-16">
       <span class="text font-extrabold text-3xl max-w-[50rem]"
-        >Últimas transações
+        >Histórico de compras
       </span>
     </div>
-    <div class="blur-container">
-      <div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg">
-        <p>100 BRZ</p>
-        <p>20 out 2022</p>
-        <p>Etherscan</p>
-      </div>
-      <div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg">
-        <p>100 BRZ</p>
-        <p>20 out 2022</p>
-        <p>Etherscan</p>
-      </div>
-      <p class="text-white mt-2 cursor-pointer">Carregar mais</p>
-    </div>
+    <ListingComponent
+      :walletTransactions="lastWalletReleaseTransactions"
+      :isManageMode="false"
+    >
+    </ListingComponent>
   </div>
 </template>
 
@@ -72,6 +65,10 @@ import CustomButton from "@/components/CustomButton.vue";
   @apply flex flex-col items-center justify-center w-full mt-16;
 }
 
+p {
+  @apply text-gray-900;
+}
+
 .text-container {
   @apply flex flex-col items-center justify-center gap-4;
 }
@@ -84,7 +81,11 @@ import CustomButton from "@/components/CustomButton.vue";
 }
 
 .blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
+  @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
+}
+
+.last-release-info {
+  @apply font-medium text-base text-gray-900;
 }
 
 input[type="number"] {
diff --git a/src/components/ListComponent.vue b/src/components/ListComponent.vue
deleted file mode 100644
index 4211256..0000000
--- a/src/components/ListComponent.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<script setup lang="ts">
-import CustomButton from "@/components/CustomButton.vue";
-import blockchain from "../utils/blockchain";
-
-// props
-const props = defineProps<{
-  lastWalletReleaseTransactions: any[] | undefined;
-  tokenAmount: Number | undefined;
-}>();
-
-// Emits
-const emit = defineEmits(["makeAnotherTransaction"]);
-
-const formatEventsAmount = (amount: any) => {
-  try {
-    const formated = blockchain.formatBigNumber(amount);
-    return formated;
-  } catch {
-    return "";
-  }
-};
-
-const openEtherscanUrl = (url: string) => {
-  window.open(url, "_blank");
-};
-</script>
-
-<template>
-  <div class="page">
-    <div class="text-container">
-      <span class="text font-extrabold text-5xl max-w-[50rem]"
-        >Os tokens já foram transferidos <br />
-        para a sua carteira!
-      </span>
-    </div>
-    <div class="blur-container">
-      <div
-        class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
-      >
-        <div>
-          <p>Tokens recebidos</p>
-          <p class="text-2xl text-gray-900">{{ props.tokenAmount }} BRZ</p>
-        </div>
-        <div class="my-5">
-          <p>
-            <b>Não encontrou os tokens? </b>Clique no botão abaixo para <br />
-            cadastrar o BRZ em sua carteira.
-          </p>
-        </div>
-        <CustomButton
-          :text="'Cadastrar token na carteira'"
-          @buttonClicked="() => {}"
-        />
-      </div>
-      <button
-        type="button"
-        class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 min-w-[198px]"
-        @click="emit('makeAnotherTransaction')"
-      >
-        Fazer nova transação
-      </button>
-    </div>
-    <div class="text-container mt-16">
-      <span class="text font-extrabold text-3xl max-w-[50rem]"
-        >Últimas transações
-      </span>
-    </div>
-    <div class="blur-container min-w-[80%] gap-8">
-      <div class="flex flex-row justify-between w-full px-8">
-        <span class="text-xs text-gray-50 font-medium">Valor</span>
-        <span class="text-xs text-gray-50 font-medium">Tipo de transação</span>
-        <span class="text-xs text-gray-50 font-medium">Checar transação</span>
-      </div>
-      <div
-        class="flex flex-row justify-between w-full bg-white px-6 py-4 rounded-lg"
-        v-for="release in lastWalletReleaseTransactions"
-        :key="release?.blockNumber"
-      >
-        <span class="last-release-info">
-          {{ formatEventsAmount(release?.args.amount) }} BRZ
-        </span>
-        <span class="last-release-info">
-          {{ "Compra" }}
-        </span>
-        <div
-          class="flex gap-2 cursor-pointer items-center"
-          @click="
-            openEtherscanUrl(
-              `https://etherscan.io/tx/${release?.transactionHash}`
-            )
-          "
-        >
-          <span class="last-release-info">Etherscan</span>
-          <img alt="Redirect image" src="@/assets/redirect.svg" />
-        </div>
-      </div>
-      <div class="flex justify-center w-full right-6 mt-2">
-        <button
-          type="button"
-          class="text-white"
-          @click="() => {}"
-          v-if="lastWalletReleaseTransactions?.length != 0"
-        >
-          Carregar mais
-        </button>
-      </div>
-
-      <p class="font-bold" v-if="lastWalletReleaseTransactions?.length == 0">
-        Não há nenhuma transação anterior
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.page {
-  @apply flex flex-col items-center justify-center w-full mt-16;
-}
-
-p {
-  @apply text-gray-900;
-}
-
-.text-container {
-  @apply flex flex-col items-center justify-center gap-4;
-}
-
-.text {
-  @apply text-gray-800 text-center;
-}
-.blur-container-row {
-  @apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
-}
-
-.blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
-}
-
-.last-release-info {
-  @apply font-medium text-base text-gray-900;
-}
-
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-}
-</style>
diff --git a/src/components/ListingComponent.vue b/src/components/ListingComponent.vue
index 9df05fd..a2f25cd 100644
--- a/src/components/ListingComponent.vue
+++ b/src/components/ListingComponent.vue
@@ -6,7 +6,6 @@ import { ref, watch } from "vue";
 const props = defineProps<{
   walletTransactions: any[];
   isManageMode: boolean;
-  walletAddress?: string;
 }>();
 
 const itemsToShow = ref<any[]>([]);
@@ -153,8 +152,8 @@ showInitialItems();
         Carregar mais
       </button>
       <span class="text-gray-300">
-        ({{ itemsToShow.length }} de
-        {{ props.walletTransactions.length }} {{isManageMode ? 'ofertas' : 'transações'}})
+        ({{ itemsToShow.length }} de {{ props.walletTransactions.length }}
+        {{ isManageMode ? "ofertas" : "transações" }})
       </span>
     </div>
 
diff --git a/src/views/BidHistoryView.vue b/src/views/BidHistoryView.vue
index d5817dd..22c555f 100644
--- a/src/views/BidHistoryView.vue
+++ b/src/views/BidHistoryView.vue
@@ -9,10 +9,12 @@ 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;
-  });
+if (walletAddress.value) {
+  await blockchain
+    .listAllTransactionByWalletAddress(walletAddress.value)
+    .then((res) => {
+      if (res) allUserTransactions.value = res;
+    });
 }
 
 watch(walletAddress, async (newValue) => {
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a45b568..46038c2 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import SearchComponent from "../components/SearchComponent.vue";
 import ValidationComponent from "../components/LoadingComponent.vue";
-import ListComponent from "@/components/ListComponent.vue";
+import BuyConfirmedComponent from "@/components/BuyConfirmedComponent.vue";
 import blockchain from "../utils/blockchain";
 import { ref } from "vue";
 
@@ -24,7 +24,7 @@ const tokenAmount = ref<number>();
 const lockTransactionHash = ref<string>("");
 const lockId = ref<string>("");
 const loadingRelease = ref<Boolean>(false);
-const lastWalletReleaseTransactions = ref<any[] | undefined>([]);
+const lastWalletReleaseTransactions = ref<any[]>([]);
 
 const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   // finish buy screen
@@ -72,10 +72,12 @@ const releaseTransaction = async ({ e2eId }: any) => {
     );
     release.wait();
 
-    lastWalletReleaseTransactions.value =
-      await blockchain.listReleaseTransactionByWalletAddress(
-        walletAddress.value.toLowerCase()
-      );
+    await blockchain
+      .listReleaseTransactionByWalletAddress(walletAddress.value.toLowerCase())
+      .then((releaseTransactions) => {
+        if (releaseTransactions)
+          lastWalletReleaseTransactions.value = releaseTransactions;
+      });
 
     await blockchain.updateWalletStatus();
     loadingRelease.value = false;
@@ -101,7 +103,7 @@ const releaseTransaction = async ({ e2eId }: any) => {
     />
   </div>
   <div v-if="flowStep == Step.List">
-    <ListComponent
+    <BuyConfirmedComponent
       v-if="!loadingRelease"
       :last-wallet-release-transactions="lastWalletReleaseTransactions"
       :tokenAmount="tokenAmount"
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 55d2a25..9552912 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -8,7 +8,6 @@ import { ref, watch } from "vue";
 
 const etherStore = useEtherStore();
 
-
 const { walletAddress } = storeToRefs(etherStore);
 const depositList = ref<any[]>([]);
 

From 0cef35ab28194b905c642a07660bbd50da28106c Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Fri, 30 Dec 2022 17:27:34 -0300
Subject: [PATCH 16/18] improve top bar currency menu

---
 .../SellerSteps/SellerSearchComponent.vue     |  1 -
 src/components/TopBar.vue                     | 75 +++++++++----------
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/src/components/SellerSteps/SellerSearchComponent.vue b/src/components/SellerSteps/SellerSearchComponent.vue
index f68d3b9..4fe8059 100644
--- a/src/components/SellerSteps/SellerSearchComponent.vue
+++ b/src/components/SellerSteps/SellerSearchComponent.vue
@@ -35,7 +35,6 @@ const decimalCount = (num: Number) => {
   }
   return 0;
 };
-
 </script>
 
 <template>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index a4767eb..28fb3e2 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -94,7 +94,7 @@ const closeMenu = () => {
           >
             <img alt="Ethereum image" src="@/assets/ethereum.svg" />
             <span
-              class="default-text group-hover:text-black"
+              class="default-text group-hover:text-gray-900"
               :style="{
                 color: currencyMenuOpenToggle
                   ? '#000000'
@@ -106,7 +106,7 @@ const closeMenu = () => {
               Ethereum
             </span>
             <img
-              class="text-black"
+              class="text-gray-900"
               v-if="!currencyMenuHoverToggle && !currencyMenuOpenToggle"
               alt="Chevron Down"
               src="@/assets/chevronDown.svg"
@@ -124,42 +124,38 @@ const closeMenu = () => {
           </div>
           <div
             v-show="currencyMenuOpenToggle"
-            class="mt-10 absolute w-full text-black"
+            class="mt-10 pl-3 absolute w-full text-gray-900"
           >
             <div class="mt-2">
               <div class="bg-white rounded-md z-10">
-                <div class="menu-button px-4 rounded-md cursor-pointer">
-                  <div class="flex justify-between">
-                    <img
-                      alt="Ethereum image"
-                      width="20"
-                      height="20"
-                      src="@/assets/ethereum.svg"
-                    />
-                    <span
-                      class="text-black py-4 text-end font-semibold text-xs"
-                    >
-                      Ethereum
-                    </span>
-                    <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
-                  </div>
-                  <hr />
+                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
+                  <img
+                    alt="Ethereum image"
+                    width="20"
+                    height="20"
+                    src="@/assets/ethereum.svg"
+                  />
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  >
+                    Ethereum
+                  </span>
                 </div>
-                <div class="menu-button px-4 rounded-md cursor-pointer">
-                  <div class="flex justify-between">
-                    <img
-                      alt="Ethereum image"
-                      width="20"
-                      height="20"
-                      src="@/assets/polygon.svg"
-                    />
-                    <span
-                      class="text-black py-4 text-end font-semibold text-xs"
-                    >
-                      Polygon
-                    </span>
-                    <img alt="Chevron Down" src="@/assets/chevronDown.svg" />
-                  </div>
+                <div class="w-full flex justify-center">
+                  <hr class="w-4/5" />
+                </div>
+                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
+                  <img
+                    alt="Polygon image"
+                    width="20"
+                    height="20"
+                    src="@/assets/polygon.svg"
+                  />
+                  <span
+                    class="text-gray-900 py-4 text-end font-semibold text-sm"
+                  >
+                    Polygon
+                  </span>
                   <hr />
                 </div>
               </div>
@@ -199,7 +195,7 @@ const closeMenu = () => {
               {{ formatWalletAddress() }}
             </span>
             <img
-              class="text-black"
+              class="text-gray-900"
               v-if="!menuHoverToggle && !menuOpenToggle"
               alt="Chevron Down"
               src="@/assets/chevronDown.svg"
@@ -215,12 +211,15 @@ const closeMenu = () => {
               src="@/assets/chevronDownBlack.svg"
             />
           </div>
-          <div v-show="menuOpenToggle" class="mt-10 absolute w-full text-black">
+          <div
+            v-show="menuOpenToggle"
+            class="mt-10 absolute w-full text-gray-900"
+          >
             <div class="pl-4 mt-2">
               <div class="bg-white rounded-md z-10">
                 <div class="menu-button" @click="closeMenu()">
                   <RouterLink to="/bid_history" class="redirect_button px-0">
-                    Histórico de compras
+                    Histórico de transações
                   </RouterLink>
                 </div>
                 <div class="w-full flex justify-center">
@@ -280,7 +279,7 @@ header {
 }
 
 .menu-button {
-  @apply flex text-center justify-center;
+  @apply flex text-center justify-center hover:bg-gray-200;
 }
 
 a:hover {

From c657a95a4082b2c5ff5ba9a577ed6942fc7da696 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Fri, 30 Dec 2022 17:36:20 -0300
Subject: [PATCH 17/18] fix list buy history width in buy confirmed component

---
 src/components/BuyConfirmedComponent.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/BuyConfirmedComponent.vue b/src/components/BuyConfirmedComponent.vue
index 7df6b9e..fbfc637 100644
--- a/src/components/BuyConfirmedComponent.vue
+++ b/src/components/BuyConfirmedComponent.vue
@@ -52,11 +52,13 @@ const emit = defineEmits(["makeAnotherTransaction"]);
         >Histórico de compras
       </span>
     </div>
-    <ListingComponent
-      :walletTransactions="lastWalletReleaseTransactions"
-      :isManageMode="false"
-    >
-    </ListingComponent>
+    <div class="w-full max-w-4xl">
+      <ListingComponent
+        :walletTransactions="lastWalletReleaseTransactions"
+        :isManageMode="false"
+      >
+      </ListingComponent>
+    </div>
   </div>
 </template>
 

From 0a4ce0a292dd321540f583d4a4d48207343104c4 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Fri, 30 Dec 2022 17:39:21 -0300
Subject: [PATCH 18/18] rename from bid history to transaction history to be
 more coherent

---
 src/components/TopBar.vue                                 | 2 +-
 src/router/index.ts                                       | 8 ++++----
 .../{BidHistoryView.vue => TransactionHistoryView.vue}    | 0
 3 files changed, 5 insertions(+), 5 deletions(-)
 rename src/views/{BidHistoryView.vue => TransactionHistoryView.vue} (100%)

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 28fb3e2..c10585d 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -218,7 +218,7 @@ const closeMenu = () => {
             <div class="pl-4 mt-2">
               <div class="bg-white rounded-md z-10">
                 <div class="menu-button" @click="closeMenu()">
-                  <RouterLink to="/bid_history" class="redirect_button px-0">
+                  <RouterLink to="/transaction_history" class="redirect_button">
                     Histórico de transações
                   </RouterLink>
                 </div>
diff --git a/src/router/index.ts b/src/router/index.ts
index 9684b60..c86ab63 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import MockView from "../views/MockView.vue";
-import BidHistoryView from "../views/BidHistoryView.vue";
+import TransactionHistoryView from "../views/TransactionHistoryView.vue";
 import ManageBidsView from "../views/ManageBidsView.vue";
 import SellerView from "@/views/SellerView.vue";
 
@@ -24,9 +24,9 @@ const router = createRouter({
       component: MockView,
     },
     {
-      path: "/bid_history",
-      name: "bid history",
-      component: BidHistoryView,
+      path: "/transaction_history",
+      name: "transaction history",
+      component: TransactionHistoryView,
     },
     {
       path: "/manage_bids",
diff --git a/src/views/BidHistoryView.vue b/src/views/TransactionHistoryView.vue
similarity index 100%
rename from src/views/BidHistoryView.vue
rename to src/views/TransactionHistoryView.vue