From a0e290f0ca7eb486dbe18e5a98e46e8a15fa0ce9 Mon Sep 17 00:00:00 2001
From: EsioFreitas <esio.gustavo@gmail.com>
Date: Thu, 9 Feb 2023 11:48:11 -0300
Subject: [PATCH 1/8] Add withdraw card

---
 .../ListingComponent/ListingComponent.vue     | 41 +++++++++++++++----
 src/views/ManageBidsView.vue                  |  2 +-
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
index 4f17529..c9d18e3 100644
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -86,9 +86,36 @@ showInitialItems();
 
 <template>
   <div class="blur-container">
+    <div class="w-full bg-white p-6 rounded-lg">
+      <div class="flex justify-between items-center">
+        <div>
+          <p class="text-sm leading-5 font-medium text-gray-600">
+            Saldo disponível
+          </p>
+          <p class="text-xl leading-7 font-semibold text-gray-900">0 BRZ</p>
+          <p class="text-xs leading-4 font-medium text-gray-600"></p>
+        </div>
+      </div>
+      <div class="pt-5" v-if="props.isManageMode">
+        <div class="py-2">
+          <p class="text-sm leading-5 font-medium">Valor do saque</p>
+          <p class="text-2xl leading-8 font-medium">0</p>
+        </div>
+
+        <hr class="pb-3" />
+        <div class="flex justify-end items-center">
+          <div
+            class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
+          >
+            <img alt="Withdraw image" src="@/assets/withdraw.svg" />
+            <span class="last-release-info">Sacar</span>
+          </div>
+        </div>
+      </div>
+    </div>
     <div
       class="w-full bg-white p-6 rounded-lg"
-      v-for="(item, index) in itemsToShow"
+      v-for="item in itemsToShow"
       :key="item.blockNumber"
     >
       <div class="flex justify-between items-center">
@@ -104,10 +131,10 @@ showInitialItems();
             }}
             BRZ
           </p>
-          <p class="text-xs leading-4 font-medium text-gray-600">20/08/2022</p>
+          <p class="text-xs leading-4 font-medium text-gray-600"></p>
         </div>
         <div>
-          <div class="bg-emerald-300 rounded-lg text-center mb-2">
+          <div class="bg-emerald-300 rounded-lg text-center mb-2 p-1">
             Finalizado
           </div>
           <div
@@ -120,11 +147,11 @@ showInitialItems();
           </div>
         </div>
       </div>
-      <div class="pt-5" v-if="props.isManageMode">
-        <!-- <div class="py-2">
+      <!-- <div class="pt-5" v-if="props.isManageMode">
+        <div class="py-2">
           <p class="text-sm leading-5 font-medium">Valor do saque</p>
           <p class="text-2xl leading-8 font-medium">0</p>
-        </div> -->
+        </div>
 
         <hr class="pb-3" />
         <div class="flex justify-between items-center">
@@ -138,7 +165,7 @@ showInitialItems();
             <span class="last-release-info">Sacar</span>
           </div>
         </div>
-      </div>
+      </div> -->
     </div>
     <div
       class="flex flex-col justify-center items-center w-full mt-2 gap-2"
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 475396c..81cb0eb 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -73,6 +73,6 @@ watch(networkName, async () => {
 }
 
 .header {
-  @apply text-3xl text-gray-900 leading-9 font-bold justify-center flex;
+  @apply text-3xl text-white leading-9 font-bold justify-center flex;
 }
 </style>

From 0f42733c080bdddea1293fabae7867cc4c582587 Mon Sep 17 00:00:00 2001
From: EsioFreitas <esio.gustavo@gmail.com>
Date: Thu, 9 Feb 2023 14:54:10 -0300
Subject: [PATCH 2/8] Add withdraw input

---
 src/components/ListingComponent/ListingComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
index c9d18e3..4cdde1d 100644
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -99,7 +99,7 @@ showInitialItems();
       <div class="pt-5" v-if="props.isManageMode">
         <div class="py-2">
           <p class="text-sm leading-5 font-medium">Valor do saque</p>
-          <p class="text-2xl leading-8 font-medium">0</p>
+          <input type="number" name="" id="" placeholder="0" class="text-2xl" />
         </div>
 
         <hr class="pb-3" />

From c27dde4dfe94d81aeeee5ed1ca4f47b2da382114 Mon Sep 17 00:00:00 2001
From: brunoedcf <brest.dallacosta@outlook.com>
Date: Sat, 11 Feb 2023 19:47:39 -0300
Subject: [PATCH 3/8] withdraw integration

---
 src/blockchain/buyerMethods.ts                | 17 +++--
 src/blockchain/wallet.ts                      | 18 +++--
 .../ListingComponent/ListingComponent.vue     | 46 +++++++++++--
 .../SellerSteps/WantSellComponent.vue         |  5 +-
 src/components/TopBar/TopBar.vue              | 16 -----
 src/router/index.ts                           |  6 --
 src/views/ManageBidsView.vue                  | 67 ++++++++++++++-----
 src/views/TransactionHistoryView.vue          | 63 -----------------
 8 files changed, 116 insertions(+), 122 deletions(-)
 delete mode 100644 src/views/TransactionHistoryView.vue

diff --git a/src/blockchain/buyerMethods.ts b/src/blockchain/buyerMethods.ts
index f8a06f1..5c5890b 100644
--- a/src/blockchain/buyerMethods.ts
+++ b/src/blockchain/buyerMethods.ts
@@ -1,7 +1,7 @@
 import { useEtherStore } from "@/store/ether";
 
 import { getContract, getProvider } from "./provider";
-import { getP2PixAddress } from "./addresses";
+import { getP2PixAddress, getTokenAddress } from "./addresses";
 
 import p2pix from "../utils/smart_contract_files/P2PIX.json";
 
@@ -84,15 +84,18 @@ const cancelDeposit = async (depositId: BigNumber): Promise<any> => {
   return cancel;
 };
 
-const withdrawDeposit = async (
-  depositId: BigNumber,
-  amount: string
-): Promise<any> => {
+const withdrawDeposit = async (amount: string): Promise<any> => {
   const contract = getContract();
 
-  const withdraw = await contract.withdraw(depositId, amount, []);
-  await withdraw.wait();
+  const withdraw = await contract.withdraw(
+    getTokenAddress(),
+    parseEther(String(amount)),
+    []
+  );
+  const with_rec = await withdraw.wait();
+  const [t] = with_rec.events;
 
+  console.log(t.args);
   return withdraw;
 };
 
diff --git a/src/blockchain/wallet.ts b/src/blockchain/wallet.ts
index 6aa2035..75d0470 100644
--- a/src/blockchain/wallet.ts
+++ b/src/blockchain/wallet.ts
@@ -64,11 +64,21 @@ const listAllTransactionByWalletAddress = async (
     filterReleasedLocks
   );
 
-  return [...eventsDeposits, ...eventsAddedLocks, ...eventsReleasedLocks].sort(
-    (a, b) => {
-      return b.blockNumber - a.blockNumber;
-    }
+  const filterWithdrawnDeposits = p2pContract.filters.DepositWithdrawn([
+    walletAddress,
+  ]);
+  const eventsWithdrawnDeposits = await p2pContract.queryFilter(
+    filterWithdrawnDeposits
   );
+
+  return [
+    ...eventsDeposits,
+    ...eventsAddedLocks,
+    ...eventsReleasedLocks,
+    ...eventsWithdrawnDeposits,
+  ].sort((a, b) => {
+    return b.blockNumber - a.blockNumber;
+  });
 };
 
 // get wallet's release transactions
diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
index 4cdde1d..6fd6e2d 100644
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { withdrawDeposit } from "@/blockchain/buyerMethods";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { useEtherStore } from "@/store/ether";
@@ -8,13 +9,36 @@ import { ref, watch } from "vue";
 
 // props
 const props = defineProps<{
+  depositList: (Event | ValidDeposit)[];
   walletTransactions: (Event | ValidDeposit)[];
   isManageMode: boolean;
 }>();
 
+const emit = defineEmits(["depositWithdrawn"]);
+
 const etherStore = useEtherStore();
 
 const itemsToShow = ref<(Event | ValidDeposit)[]>([]);
+const withdrawAmount = ref<string>("");
+
+const callWithdraw = async () => {
+  if (withdrawAmount.value) {
+    const withdraw = await withdrawDeposit(withdrawAmount.value);
+    if (withdraw) {
+      console.log(withdraw);
+      alert("Saque realizado!");
+      emit("depositWithdrawn");
+    }
+  }
+};
+
+const getRemaining = (): number => {
+  if (props.depositList instanceof Array) {
+    const deposit = props.depositList[0] as ValidDeposit;
+    return deposit ? deposit.remaining : 0;
+  }
+  return 0;
+};
 
 const getExplorer = (): string => {
   return etherStore.networkName == NetworkEnum.ethereum
@@ -56,6 +80,7 @@ const getEventName = (event: string | undefined): string => {
     DepositAdded: "Oferta",
     LockAdded: "Reserva",
     LockReleased: "Compra",
+    DepositWithdrawn: "Retirada",
   };
 
   return possibleEventName[event];
@@ -77,9 +102,6 @@ watch(props, async (): Promise<void> => {
         : props.walletTransactions;
 });
 
-//emits
-const emit = defineEmits(["withdrawDeposit"]);
-
 // initial itemsToShow valueb
 showInitialItems();
 </script>
@@ -92,20 +114,30 @@ showInitialItems();
           <p class="text-sm leading-5 font-medium text-gray-600">
             Saldo disponível
           </p>
-          <p class="text-xl leading-7 font-semibold text-gray-900">0 BRZ</p>
+          <p class="text-xl leading-7 font-semibold text-gray-900">
+            {{ getRemaining() }} BRZ
+          </p>
           <p class="text-xs leading-4 font-medium text-gray-600"></p>
         </div>
       </div>
       <div class="pt-5" v-if="props.isManageMode">
         <div class="py-2">
           <p class="text-sm leading-5 font-medium">Valor do saque</p>
-          <input type="number" name="" id="" placeholder="0" class="text-2xl" />
+          <input
+            type="number"
+            name=""
+            id=""
+            placeholder="0"
+            class="text-2xl"
+            v-model="withdrawAmount"
+          />
         </div>
 
         <hr class="pb-3" />
         <div class="flex justify-end items-center">
           <div
             class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
+            @click="callWithdraw"
           >
             <img alt="Withdraw image" src="@/assets/withdraw.svg" />
             <span class="last-release-info">Sacar</span>
@@ -138,7 +170,7 @@ showInitialItems();
             Finalizado
           </div>
           <div
-            v-if="!props.isManageMode"
+            v-if="props.isManageMode"
             class="flex gap-2 cursor-pointer items-center justify-self-center"
             @click="openEtherscanUrl((item as Event)?.transactionHash)"
           >
@@ -183,7 +215,7 @@ showInitialItems();
       </button>
       <span class="text-gray-300">
         ({{ itemsToShow.length }} de {{ props.walletTransactions.length }}
-        {{ isManageMode ? "ofertas" : "transações" }})
+        transações )
       </span>
     </div>
 
diff --git a/src/components/SellerSteps/WantSellComponent.vue b/src/components/SellerSteps/WantSellComponent.vue
index 56f346b..2f61843 100644
--- a/src/components/SellerSteps/WantSellComponent.vue
+++ b/src/components/SellerSteps/WantSellComponent.vue
@@ -56,8 +56,9 @@ const handleButtonClick = async (
   offer: string,
   pixKey: string
 ): Promise<void> => {
-  console.log(postProcessKey(pixKey));
-  if (walletAddress.value) emit("approveTokens", { offer, pixKey });
+  const postProcessedPixKey = postProcessKey(pixKey);
+  if (walletAddress.value)
+    emit("approveTokens", { offer, postProcessedPixKey });
   else await connectProvider();
 };
 </script>
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index a4b93f6..8bf15c7 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -284,14 +284,6 @@ onClickOutside(currencyRef, () => {
           >
             <div class="pl-4 mt-2">
               <div class="bg-white rounded-md z-10">
-                <div class="menu-button" @click="closeMenu()">
-                  <RouterLink to="/transaction_history" class="redirect_button">
-                    Histórico de transações
-                  </RouterLink>
-                </div>
-                <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
@@ -328,14 +320,6 @@ onClickOutside(currencyRef, () => {
           <div class="w-full flex justify-center">
             <hr class="w-4/5" />
           </div>
-          <div class="menu-button" @click="closeMenu()">
-            <RouterLink to="/transaction_history" class="redirect_button">
-              Histórico de transações
-            </RouterLink>
-          </div>
-          <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
diff --git a/src/router/index.ts b/src/router/index.ts
index 9b48387..43b0186 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
-import TransactionHistoryView from "../views/TransactionHistoryView.vue";
 import FaqView from "../views/FaqView.vue";
 import ManageBidsView from "../views/ManageBidsView.vue";
 import SellerView from "@/views/SellerView.vue";
@@ -18,11 +17,6 @@ const router = createRouter({
       name: "seller",
       component: SellerView,
     },
-    {
-      path: "/transaction_history",
-      name: "transaction history",
-      component: TransactionHistoryView,
-    },
     {
       path: "/manage_bids",
       name: "manage bids",
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 81cb0eb..8ae7cd9 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -2,45 +2,69 @@
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
-import type { BigNumber } from "ethers";
 import { ref, watch, onMounted } from "vue";
-import { withdrawDeposit } from "@/blockchain/buyerMethods";
-import { listValidDepositTransactionsByWalletAddress } from "@/blockchain/wallet";
+import {
+  listValidDepositTransactionsByWalletAddress,
+  listAllTransactionByWalletAddress,
+} from "@/blockchain/wallet";
 import type { ValidDeposit } from "@/model/ValidDeposit";
+import type { Event } from "ethers";
 
 const etherStore = useEtherStore();
 
 const { walletAddress, networkName } = storeToRefs(etherStore);
 const depositList = ref<ValidDeposit[]>([]);
+const transactionsList = ref<(Event | ValidDeposit)[]>([]);
+
+const updateRemaining = async () => {
+  const walletDeposits = await listValidDepositTransactionsByWalletAddress(
+    walletAddress.value
+  );
+  depositList.value = walletDeposits;
+
+  const allUserTransactions = await listAllTransactionByWalletAddress(
+    walletAddress.value
+  );
+  transactionsList.value = allUserTransactions;
+};
 
 onMounted(async () => {
   if (walletAddress.value) {
     const walletDeposits = await listValidDepositTransactionsByWalletAddress(
       walletAddress.value
     );
+    console.log(walletDeposits);
+
+    const allUserTransactions = await listAllTransactionByWalletAddress(
+      walletAddress.value
+    );
+    console.log(allUserTransactions);
+
     if (walletDeposits) {
       depositList.value = walletDeposits;
     }
+    if (allUserTransactions) {
+      transactionsList.value = allUserTransactions;
+    }
   }
 });
 
-const handleWithDrawDeposit = async (token: BigNumber, index: number) => {
-  const fixedAmount = "1"; // Need to ask user for amount
-  const response = await withdrawDeposit(token, fixedAmount);
-  if (response) {
-    console.log("Token retirado com sucesso.");
-    depositList.value.splice(index, 1);
-  }
-};
-
-watch(walletAddress, async () => {
-  await listValidDepositTransactionsByWalletAddress(walletAddress.value)
+watch(walletAddress, async (newValue) => {
+  await listValidDepositTransactionsByWalletAddress(newValue)
     .then((res) => {
       if (res) depositList.value = res;
     })
     .catch(() => {
       depositList.value = [];
     });
+
+  await listAllTransactionByWalletAddress(newValue)
+    .then((res) => {
+      if (res) transactionsList.value = res;
+    })
+    .catch(() => {
+      transactionsList.value = [];
+    });
 });
 
 watch(networkName, async () => {
@@ -51,17 +75,26 @@ watch(networkName, async () => {
     .catch(() => {
       depositList.value = [];
     });
+
+  await listAllTransactionByWalletAddress(walletAddress.value)
+    .then((res) => {
+      if (res) transactionsList.value = res;
+    })
+    .catch(() => {
+      transactionsList.value = [];
+    });
 });
 </script>
 
 <template>
   <div class="page">
-    <div class="header">Gerenciar ofertas</div>
+    <div class="header">Gerenciar Ofertas</div>
     <div class="w-full max-w-4xl">
       <ListingComponent
-        :wallet-transactions="depositList"
+        :deposit-list="depositList"
+        :wallet-transactions="transactionsList"
         :is-manage-mode="true"
-        @withdraw-deposit="handleWithDrawDeposit"
+        @deposit-withdrawn="updateRemaining"
       ></ListingComponent>
     </div>
   </div>
diff --git a/src/views/TransactionHistoryView.vue b/src/views/TransactionHistoryView.vue
deleted file mode 100644
index 4e0033f..0000000
--- a/src/views/TransactionHistoryView.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { useEtherStore } from "@/store/ether";
-import { storeToRefs } from "pinia";
-import { ref, watch, onMounted } from "vue";
-import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
-import { listAllTransactionByWalletAddress } from "@/blockchain/wallet";
-import type { Event } from "ethers";
-import type { ValidDeposit } from "@/model/ValidDeposit";
-
-const etherStore = useEtherStore();
-const { walletAddress, networkName } = storeToRefs(etherStore);
-const allUserTransactions = ref<(Event | ValidDeposit)[]>([]);
-
-onMounted(async () => {
-  if (walletAddress.value) {
-    await listAllTransactionByWalletAddress(walletAddress.value).then((res) => {
-      if (res) allUserTransactions.value = res;
-    });
-  }
-});
-
-watch(walletAddress, async (newValue) => {
-  await listAllTransactionByWalletAddress(newValue)
-    .then((res) => {
-      if (res) allUserTransactions.value = res;
-    })
-    .catch(() => {
-      allUserTransactions.value = [];
-    });
-});
-
-watch(networkName, async () => {
-  await listAllTransactionByWalletAddress(walletAddress.value)
-    .then((res) => {
-      if (res) allUserTransactions.value = res;
-    })
-    .catch(() => {
-      allUserTransactions.value = [];
-    });
-});
-</script>
-
-<template>
-  <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 flex-col gap-10 mt-20 w-full items-center;
-}
-
-.header {
-  @apply text-3xl text-white leading-9 font-bold justify-center flex;
-}
-</style>

From 5972f24f4ed28fbfdbf5d29901ebd686662f77fb Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Mon, 13 Feb 2023 12:58:57 -0300
Subject: [PATCH 4/8] fix test and build ci to deploy app correctly

---
 .../BuyConfirmedComponent.vue                 |  1 +
 .../ListingComponent/ListingComponent.vue     |  6 ++-
 .../__tests__/ListingComponent.spec.ts        | 41 ++++---------------
 .../TopBar/__tests__/TopBar.spec.ts           |  2 +-
 4 files changed, 16 insertions(+), 34 deletions(-)

diff --git a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
index 8ab3a9a..2fd458a 100644
--- a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
+++ b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
@@ -56,6 +56,7 @@ const emit = defineEmits(["makeAnotherTransaction"]);
     </div>
     <div class="w-full max-w-4xl lg-view">
       <ListingComponent
+        :deposit-list="[]"
         :walletTransactions="lastWalletReleaseTransactions"
         :isManageMode="false"
       >
diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
index 6fd6e2d..1fc9059 100644
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -150,7 +150,7 @@ showInitialItems();
       v-for="item in itemsToShow"
       :key="item.blockNumber"
     >
-      <div class="flex justify-between items-center">
+      <div class="item-container">
         <div>
           <p class="text-sm leading-5 font-medium text-gray-600">
             {{ getEventName((item as Event).event) }}
@@ -238,6 +238,10 @@ p {
   @apply flex flex-col items-center justify-center gap-4;
 }
 
+.item-container {
+  @apply flex justify-between items-center;
+}
+
 .text {
   @apply text-white text-center;
 }
diff --git a/src/components/ListingComponent/__tests__/ListingComponent.spec.ts b/src/components/ListingComponent/__tests__/ListingComponent.spec.ts
index d7312f1..30b9208 100644
--- a/src/components/ListingComponent/__tests__/ListingComponent.spec.ts
+++ b/src/components/ListingComponent/__tests__/ListingComponent.spec.ts
@@ -13,6 +13,7 @@ describe("ListingComponent.vue", () => {
   test("Test Message when an empty array is received", () => {
     const wrapper = mount(ListingComponent, {
       props: {
+        depositList: [],
         walletTransactions: [],
         isManageMode: true,
       },
@@ -21,42 +22,16 @@ describe("ListingComponent.vue", () => {
     expect(wrapper.html()).toContain("Não há nenhuma transação anterior");
   });
 
-  test("Test Headers on List in Manage Mode", () => {
-    const wrapper = mount(ListingComponent, {
-      props: {
-        walletTransactions: MockValidDeposits,
-        isManageMode: true,
-      },
-    });
-
-    expect(wrapper.html()).toContain("Valor");
-    expect(wrapper.html()).toContain("Data");
-    expect(wrapper.html()).toContain("Retirar tokens");
-  });
-
-  test("Test Headers on List in Unmanage Mode", () => {
-    const wrapper = mount(ListingComponent, {
-      props: {
-        walletTransactions: MockEvents,
-        isManageMode: false,
-      },
-    });
-
-    expect(wrapper.html()).toContain("Valor");
-    expect(wrapper.html()).toContain("Data");
-    expect(wrapper.html()).toContain("Tipo de transação");
-    expect(wrapper.html()).toContain("Checar transação");
-  });
-
   test("Test number of elements in the list first render", () => {
     const wrapper = mount(ListingComponent, {
       props: {
+        depositList: [],
         walletTransactions: MockEvents,
         isManageMode: false,
       },
     });
 
-    const elements = wrapper.findAll(".transaction-date");
+    const elements = wrapper.findAll(".item-container");
 
     expect(elements).toHaveLength(3);
   });
@@ -64,18 +39,19 @@ describe("ListingComponent.vue", () => {
   test("Test load more button behavior", async () => {
     const wrapper = mount(ListingComponent, {
       props: {
+        depositList: [],
         walletTransactions: MockValidDeposits,
         isManageMode: false,
       },
     });
     const btn = wrapper.find("button");
 
-    let elements = wrapper.findAll(".transaction-date");
+    let elements = wrapper.findAll(".item-container");
     expect(elements).toHaveLength(3);
 
     await btn.trigger("click");
 
-    elements = wrapper.findAll(".transaction-date");
+    elements = wrapper.findAll(".item-container");
 
     expect(elements).toHaveLength(5);
   });
@@ -83,14 +59,15 @@ describe("ListingComponent.vue", () => {
   test("Test withdraw offer button emit", async () => {
     const wrapper = mount(ListingComponent, {
       props: {
+        depositList: MockValidDeposits,
         walletTransactions: MockValidDeposits,
         isManageMode: true,
       },
     });
-    wrapper.vm.$emit("withdrawDeposit");
+    wrapper.vm.$emit("depositWithdrawn");
 
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.emitted("withdrawDeposit")).toBeTruthy();
+    expect(wrapper.emitted("depositWithdrawn")).toBeTruthy();
   });
 });
diff --git a/src/components/TopBar/__tests__/TopBar.spec.ts b/src/components/TopBar/__tests__/TopBar.spec.ts
index 8e28f75..6a55d74 100644
--- a/src/components/TopBar/__tests__/TopBar.spec.ts
+++ b/src/components/TopBar/__tests__/TopBar.spec.ts
@@ -30,6 +30,6 @@ describe("TopBar.vue", () => {
   it("should render the P2Pix logo correctly", () => {
     const wrapper = shallowMount(TopBar);
     const img = wrapper.findAll(".logo");
-    expect(img.length).toBe(1);
+    expect(img.length).toBe(2);
   });
 });

From cf9760bb2168b644a1dd36f6f3140f698c3909ec Mon Sep 17 00:00:00 2001
From: brunoedcf <brest.dallacosta@outlook.com>
Date: Mon, 13 Feb 2023 19:15:01 -0300
Subject: [PATCH 5/8] Pull Request review changes

---
 .../ListingComponent/ListingComponent.vue     | 48 ++++---------------
 src/views/ManageBidsView.vue                  |  5 +-
 2 files changed, 9 insertions(+), 44 deletions(-)

diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
index 1fc9059..880cc2f 100644
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -9,16 +9,15 @@ import { ref, watch } from "vue";
 
 // props
 const props = defineProps<{
-  depositList: (Event | ValidDeposit)[];
-  walletTransactions: (Event | ValidDeposit)[];
-  isManageMode: boolean;
+  depositList: ValidDeposit[];
+  walletTransactions: Event[];
 }>();
 
 const emit = defineEmits(["depositWithdrawn"]);
 
 const etherStore = useEtherStore();
 
-const itemsToShow = ref<(Event | ValidDeposit)[]>([]);
+const itemsToShow = ref<Event[]>([]);
 const withdrawAmount = ref<string>("");
 
 const callWithdraw = async () => {
@@ -34,7 +33,7 @@ const callWithdraw = async () => {
 
 const getRemaining = (): number => {
   if (props.depositList instanceof Array) {
-    const deposit = props.depositList[0] as ValidDeposit;
+    const deposit = props.depositList[0];
     return deposit ? deposit.remaining : 0;
   }
   return 0;
@@ -46,13 +45,6 @@ const getExplorer = (): string => {
     : "Polygonscan";
 };
 
-// Methods
-const isValidDeposit = (
-  deposit: Event | ValidDeposit
-): deposit is ValidDeposit => {
-  return (deposit as ValidDeposit).token !== undefined;
-};
-
 const showInitialItems = (): void => {
   itemsToShow.value = props.walletTransactions.slice(0, 3);
 };
@@ -120,7 +112,7 @@ showInitialItems();
           <p class="text-xs leading-4 font-medium text-gray-600"></p>
         </div>
       </div>
-      <div class="pt-5" v-if="props.isManageMode">
+      <div class="pt-5">
         <div class="py-2">
           <p class="text-sm leading-5 font-medium">Valor do saque</p>
           <input
@@ -153,14 +145,10 @@ showInitialItems();
       <div class="item-container">
         <div>
           <p class="text-sm leading-5 font-medium text-gray-600">
-            {{ getEventName((item as Event).event) }}
+            {{ getEventName(item.event) }}
           </p>
           <p class="text-xl leading-7 font-semibold text-gray-900">
-            {{
-              isValidDeposit(item)
-                ? item.remaining
-                : getAmountFormatted(item.args?.amount)
-            }}
+            {{ getAmountFormatted(item.args?.amount) }}
             BRZ
           </p>
           <p class="text-xs leading-4 font-medium text-gray-600"></p>
@@ -170,34 +158,14 @@ showInitialItems();
             Finalizado
           </div>
           <div
-            v-if="props.isManageMode"
             class="flex gap-2 cursor-pointer items-center justify-self-center"
-            @click="openEtherscanUrl((item as Event)?.transactionHash)"
+            @click="openEtherscanUrl(item?.transactionHash)"
           >
             <span class="last-release-info">{{ getExplorer() }}</span>
             <img alt="Redirect image" src="@/assets/redirect.svg" />
           </div>
         </div>
       </div>
-      <!-- <div class="pt-5" v-if="props.isManageMode">
-        <div class="py-2">
-          <p class="text-sm leading-5 font-medium">Valor do saque</p>
-          <p class="text-2xl leading-8 font-medium">0</p>
-        </div>
-
-        <hr class="pb-3" />
-        <div class="flex justify-between items-center">
-          <div
-            class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
-            @click="
-              emit('withdrawDeposit', (item as ValidDeposit).token, index)
-            "
-          >
-            <img alt="Withdraw image" src="@/assets/withdraw.svg" />
-            <span class="last-release-info">Sacar</span>
-          </div>
-        </div>
-      </div> -->
     </div>
     <div
       class="flex flex-col justify-center items-center w-full mt-2 gap-2"
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 8ae7cd9..3373168 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -14,7 +14,7 @@ const etherStore = useEtherStore();
 
 const { walletAddress, networkName } = storeToRefs(etherStore);
 const depositList = ref<ValidDeposit[]>([]);
-const transactionsList = ref<(Event | ValidDeposit)[]>([]);
+const transactionsList = ref<Event[]>([]);
 
 const updateRemaining = async () => {
   const walletDeposits = await listValidDepositTransactionsByWalletAddress(
@@ -33,12 +33,10 @@ onMounted(async () => {
     const walletDeposits = await listValidDepositTransactionsByWalletAddress(
       walletAddress.value
     );
-    console.log(walletDeposits);
 
     const allUserTransactions = await listAllTransactionByWalletAddress(
       walletAddress.value
     );
-    console.log(allUserTransactions);
 
     if (walletDeposits) {
       depositList.value = walletDeposits;
@@ -93,7 +91,6 @@ watch(networkName, async () => {
       <ListingComponent
         :deposit-list="depositList"
         :wallet-transactions="transactionsList"
-        :is-manage-mode="true"
         @deposit-withdrawn="updateRemaining"
       ></ListingComponent>
     </div>

From 3aae98bb44f1df298b40c50611140c72f2c069e9 Mon Sep 17 00:00:00 2001
From: brunoedcf <brest.dallacosta@outlook.com>
Date: Mon, 13 Feb 2023 21:24:37 -0300
Subject: [PATCH 6/8] Adding comment on getRemaining function

---
 src/components/ListingComponent/ListingComponent.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
index 880cc2f..5f3d18e 100644
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -33,7 +33,9 @@ const callWithdraw = async () => {
 
 const getRemaining = (): number => {
   if (props.depositList instanceof Array) {
-    const deposit = props.depositList[0];
+    // Here we are getting only the first element of the list because
+    // in this release only the BRL token is being used.
+    const deposit = props.depositList[0]; 
     return deposit ? deposit.remaining : 0;
   }
   return 0;

From 0319d91ccbc0f99e5eafb6115aec7be839301474 Mon Sep 17 00:00:00 2001
From: brunoedcf <brest.dallacosta@outlook.com>
Date: Tue, 14 Feb 2023 18:33:56 -0300
Subject: [PATCH 7/8] fixing listingComponent tests for deploy

---
 .../__tests__/ListingComponent.spec.ts               | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/ListingComponent/__tests__/ListingComponent.spec.ts b/src/components/ListingComponent/__tests__/ListingComponent.spec.ts
index 30b9208..1f12eb0 100644
--- a/src/components/ListingComponent/__tests__/ListingComponent.spec.ts
+++ b/src/components/ListingComponent/__tests__/ListingComponent.spec.ts
@@ -14,8 +14,7 @@ describe("ListingComponent.vue", () => {
     const wrapper = mount(ListingComponent, {
       props: {
         depositList: [],
-        walletTransactions: [],
-        isManageMode: true,
+        walletTransactions: []
       },
     });
 
@@ -27,7 +26,6 @@ describe("ListingComponent.vue", () => {
       props: {
         depositList: [],
         walletTransactions: MockEvents,
-        isManageMode: false,
       },
     });
 
@@ -39,9 +37,8 @@ describe("ListingComponent.vue", () => {
   test("Test load more button behavior", async () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        depositList: [],
-        walletTransactions: MockValidDeposits,
-        isManageMode: false,
+        depositList: MockValidDeposits,
+        walletTransactions: [],
       },
     });
     const btn = wrapper.find("button");
@@ -60,8 +57,7 @@ describe("ListingComponent.vue", () => {
     const wrapper = mount(ListingComponent, {
       props: {
         depositList: MockValidDeposits,
-        walletTransactions: MockValidDeposits,
-        isManageMode: true,
+        walletTransactions: MockEvents,
       },
     });
     wrapper.vm.$emit("depositWithdrawn");

From 9c0a527970394448056194a9a7c4dc5a953fbf36 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Wed, 15 Feb 2023 00:50:30 -0300
Subject: [PATCH 8/8] Improve test and withdraw input style

---
 .../BuyConfirmedComponent.vue                 |  2 +-
 .../ListingComponent/ListingComponent.vue     | 11 ++++---
 .../__tests__/ListingComponent.spec.ts        | 14 ++++-----
 src/model/mock/EventMock.ts                   | 29 +++++++++++++++++++
 src/views/ManageBidsView.vue                  |  2 +-
 5 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
index 2fd458a..2c23ce3 100644
--- a/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
+++ b/src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
@@ -56,7 +56,7 @@ const emit = defineEmits(["makeAnotherTransaction"]);
     </div>
     <div class="w-full max-w-4xl lg-view">
       <ListingComponent
-        :deposit-list="[]"
+        :valid-deposits="[]"
         :walletTransactions="lastWalletReleaseTransactions"
         :isManageMode="false"
       >
diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
index 5f3d18e..62d0115 100644
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -9,7 +9,7 @@ import { ref, watch } from "vue";
 
 // props
 const props = defineProps<{
-  depositList: ValidDeposit[];
+  validDeposits: ValidDeposit[];
   walletTransactions: Event[];
 }>();
 
@@ -32,10 +32,10 @@ const callWithdraw = async () => {
 };
 
 const getRemaining = (): number => {
-  if (props.depositList instanceof Array) {
+  if (props.validDeposits instanceof Array) {
     // Here we are getting only the first element of the list because
     // in this release only the BRL token is being used.
-    const deposit = props.depositList[0]; 
+    const deposit = props.validDeposits[0];
     return deposit ? deposit.remaining : 0;
   }
   return 0;
@@ -115,18 +115,17 @@ showInitialItems();
         </div>
       </div>
       <div class="pt-5">
-        <div class="py-2">
+        <div class="py-2 w-100">
           <p class="text-sm leading-5 font-medium">Valor do saque</p>
           <input
             type="number"
             name=""
             id=""
             placeholder="0"
-            class="text-2xl"
+            class="text-2xl text-gray-900 w-full outline-none"
             v-model="withdrawAmount"
           />
         </div>
-
         <hr class="pb-3" />
         <div class="flex justify-end items-center">
           <div
diff --git a/src/components/ListingComponent/__tests__/ListingComponent.spec.ts b/src/components/ListingComponent/__tests__/ListingComponent.spec.ts
index 1f12eb0..9d066db 100644
--- a/src/components/ListingComponent/__tests__/ListingComponent.spec.ts
+++ b/src/components/ListingComponent/__tests__/ListingComponent.spec.ts
@@ -13,8 +13,8 @@ describe("ListingComponent.vue", () => {
   test("Test Message when an empty array is received", () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        depositList: [],
-        walletTransactions: []
+        validDeposits: [],
+        walletTransactions: [],
       },
     });
 
@@ -24,7 +24,7 @@ describe("ListingComponent.vue", () => {
   test("Test number of elements in the list first render", () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        depositList: [],
+        validDeposits: [],
         walletTransactions: MockEvents,
       },
     });
@@ -37,8 +37,8 @@ describe("ListingComponent.vue", () => {
   test("Test load more button behavior", async () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        depositList: MockValidDeposits,
-        walletTransactions: [],
+        validDeposits: MockValidDeposits,
+        walletTransactions: MockEvents,
       },
     });
     const btn = wrapper.find("button");
@@ -50,13 +50,13 @@ describe("ListingComponent.vue", () => {
 
     elements = wrapper.findAll(".item-container");
 
-    expect(elements).toHaveLength(5);
+    expect(elements).toHaveLength(4);
   });
 
   test("Test withdraw offer button emit", async () => {
     const wrapper = mount(ListingComponent, {
       props: {
-        depositList: MockValidDeposits,
+        validDeposits: MockValidDeposits,
         walletTransactions: MockEvents,
       },
     });
diff --git a/src/model/mock/EventMock.ts b/src/model/mock/EventMock.ts
index 55d5d25..ed03598 100644
--- a/src/model/mock/EventMock.ts
+++ b/src/model/mock/EventMock.ts
@@ -89,4 +89,33 @@ export const MockEvents: Event[] = [
     getTransaction: vi.fn(),
     getTransactionReceipt: vi.fn(),
   },
+  {
+    blockNumber: 4,
+    blockHash: "0x8",
+    transactionIndex: 4,
+    removed: false,
+    address: "0x0",
+    data: "0x0",
+    topics: ["0x0", "0x0"],
+    transactionHash: "0x0",
+    logIndex: 4,
+    event: "LockReleased",
+    eventSignature: "LockReleased(address,uint256,address,uint256)",
+    args: [
+      "0x0",
+      {
+        type: "BigNumber",
+        hex: "0x00",
+      },
+      "0x0",
+      {
+        type: "BigNumber",
+        hex: "0x6c6b935b8bbd400000",
+      },
+    ],
+    getBlock: vi.fn(),
+    removeListener: vi.fn(),
+    getTransaction: vi.fn(),
+    getTransactionReceipt: vi.fn(),
+  },
 ];
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 3373168..63c123e 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -89,7 +89,7 @@ watch(networkName, async () => {
     <div class="header">Gerenciar Ofertas</div>
     <div class="w-full max-w-4xl">
       <ListingComponent
-        :deposit-list="depositList"
+        :valid-deposits="depositList"
         :wallet-transactions="transactionsList"
         @deposit-withdrawn="updateRemaining"
       ></ListingComponent>