Fixing tags at listing component

src/blockchain/buyerMethods.ts

@@ -92,10 +92,8 @@ const withdrawDeposit = async (amount: string): Promise<any> => {
     parseEther(String(amount)),
     []
   );
-  const with_rec = await withdraw.wait();
-  const [t] = with_rec.events;
+  await withdraw.wait();
 
-  console.log(t.args);
   return withdraw;
 };
 

src/blockchain/wallet.ts

@@ -5,10 +5,12 @@ import { getTokenAddress, possibleChains } from "./addresses";
 
 import mockToken from "@/utils/smart_contract_files/MockToken.json";
 
-import { ethers, type Event } from "ethers";
+import { ethers, type Event, type BigNumber } from "ethers";
 import { formatEther } from "ethers/lib/utils";
 import { getValidDeposits } from "./events";
+
 import type { ValidDeposit } from "@/model/ValidDeposit";
+import type { WalletTransaction } from "@/model/WalletTransaction";
 import type { UnreleasedLock } from "@/model/UnreleasedLock";
 import type { Pix } from "@/model/Pix";
 
@@ -50,9 +52,45 @@ const listValidDepositTransactionsByWalletAddress = async (
   return [];
 };
 
+const getLockStatus = async (id: [BigNumber]): Promise<number> => {
+  const p2pContract = getContract();
+  const res = await p2pContract.getLocksStatus([id]);
+
+  return res[1][0];
+};
+
+const filterLockStatus = async (
+  transactions: Event[]
+): Promise<WalletTransaction[]> => {
+  const txs = [];
+
+  for (const transaction of transactions) {
+    const tx: WalletTransaction = {
+      token: transaction.args?.token ? transaction.args?.token : "",
+      blockNumber: transaction.blockNumber ? transaction.blockNumber : -1,
+      amount: transaction.args?.amount
+        ? Number(formatEther(transaction.args?.amount))
+        : -1,
+      seller: transaction.args?.seller ? transaction.args?.seller : "",
+      buyer: transaction.args?.buyer ? transaction.args?.buyer : "",
+      event: transaction.event ? transaction.event : "",
+      lockStatus:
+        transaction.event == "LockAdded"
+          ? await getLockStatus(transaction.args?.lockID)
+          : -1,
+      transactionHash: transaction.transactionHash
+        ? transaction.transactionHash
+        : "",
+    };
+    txs.push(tx);
+  }
+
+  return txs;
+};
+
 const listAllTransactionByWalletAddress = async (
   walletAddress: string
-): Promise<Event[]> => {
+): Promise<WalletTransaction[]> => {
   const p2pContract = getContract(true);
 
   const filterDeposits = p2pContract.filters.DepositAdded([walletAddress]);
@@ -73,14 +111,18 @@ const listAllTransactionByWalletAddress = async (
     filterWithdrawnDeposits
   );
 
-  return [
+  const lockStatusFiltered = await filterLockStatus(
+    [
       ...eventsDeposits,
       ...eventsAddedLocks,
       ...eventsReleasedLocks,
       ...eventsWithdrawnDeposits,
     ].sort((a, b) => {
       return b.blockNumber - a.blockNumber;
-  });
+    })
+  );
+
+  return lockStatusFiltered;
 };
 
 // get wallet's release transactions

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
-import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
-import type { Event } from "ethers";
 
 // props
 const props = defineProps<{
-  lastWalletReleaseTransactions: Event[];
   tokenAmount: number | undefined;
 }>();
 
@@ -49,25 +46,6 @@ const emit = defineEmits(["makeAnotherTransaction"]);
         Fazer nova transação
       </button>
     </div>
-    <div class="text-container mt-16 lg-view">
-      <span class="text font-extrabold text-3xl max-w-[50rem]"
-        >Gerenciar transações
-      </span>
-    </div>
-    <div class="w-full max-w-4xl lg-view">
-      <ListingComponent
-        :valid-deposits="[]"
-        :walletTransactions="lastWalletReleaseTransactions"
-        :isManageMode="false"
-      >
-      </ListingComponent>
-    </div>
-    <RouterLink
-      to="/transaction_history"
-      class="mt-8 text-white text-2xl font-bold"
-    >
-      Gerenciar Transações
-    </RouterLink>
   </div>
 </template>
 

src/components/ListingComponent/ListingComponent.vue

@@ -2,22 +2,21 @@
 import { withdrawDeposit } from "@/blockchain/buyerMethods";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
+import type { WalletTransaction } from "@/model/WalletTransaction";
 import { useEtherStore } from "@/store/ether";
-import { formatEther } from "@ethersproject/units";
-import type { BigNumber, Event } from "ethers";
 import { ref, watch } from "vue";
 
 // props
 const props = defineProps<{
   validDeposits: ValidDeposit[];
-  walletTransactions: Event[];
+  walletTransactions: WalletTransaction[];
 }>();
 
 const emit = defineEmits(["depositWithdrawn"]);
 
 const etherStore = useEtherStore();
 
-const itemsToShow = ref<Event[]>([]);
+const itemsToShow = ref<WalletTransaction[]>([]);
 const withdrawAmount = ref<string>("");
 const withdrawButtonOpacity = ref<number>(0.6);
 const withdrawButtonCursor = ref<string>("not-allowed");
@@ -93,11 +92,6 @@ const getEventName = (event: string | undefined): string => {
   return possibleEventName[event];
 };
 
-const getAmountFormatted = (amount?: BigNumber): string => {
-  if (!amount) return "";
-  return formatEther(amount);
-};
-
 // watch props changes
 watch(props, async (): Promise<void> => {
   const itemsToShowQty = itemsToShow.value.length;
@@ -180,18 +174,36 @@ showInitialItems();
             {{ getEventName(item.event) }}
           </p>
           <p class="text-xl leading-7 font-semibold text-gray-900">
-            {{ getAmountFormatted(item.args?.amount) }}
+            {{ item.amount }}
             BRZ
           </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 p-1">
+          <div
+            class="bg-amber-300 rounded-lg text-center mb-2 p-1"
+            v-if="getEventName(item.event) == 'Reserva' && item.lockStatus == 1"
+          >
+            Ativo
+          </div>
+          <div
+            class="bg-[#94A3B8] rounded-lg text-center mb-2 p-1"
+            v-if="getEventName(item.event) == 'Reserva' && item.lockStatus == 2"
+          >
+            Expirado
+          </div>
+          <div
+            class="bg-emerald-300 rounded-lg text-center mb-2 p-1"
+            v-if="
+              (getEventName(item.event) == 'Reserva' && item.lockStatus == 3) ||
+              getEventName(item.event) != 'Reserva'
+            "
+          >
             Finalizado
           </div>
           <div
             class="flex gap-2 cursor-pointer items-center justify-self-center"
-            @click="openEtherscanUrl(item?.transactionHash)"
+            @click="openEtherscanUrl(item.transactionHash)"
           >
             <span class="last-release-info">{{ getExplorer() }}</span>
             <img alt="Redirect image" src="@/assets/redirect.svg" />

src/model/WalletTransaction.ts

@@ -0,0 +1,10 @@
+export type WalletTransaction = {
+  token: string;
+  blockNumber: number;
+  amount: number;
+  seller: string;
+  buyer: string;
+  event: string;
+  lockStatus: number;
+  transactionHash: string;
+};

src/views/HomeView.vue

@@ -2,6 +2,7 @@
 import SearchComponent from "@/components/SearchComponent.vue";
 import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
 import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue";
+import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 import { ref, onMounted, watch } from "vue";
 import { useEtherStore } from "@/store/ether";
 import QrCodeComponent from "@/components/QrCodeComponent.vue";
@@ -10,12 +11,13 @@ import { storeToRefs } from "pinia";
 import { addLock, releaseLock } from "@/blockchain/buyerMethods";
 import {
   updateWalletStatus,
-  listReleaseTransactionByWalletAddress,
+  listAllTransactionByWalletAddress,
   checkUnreleasedLock,
+  listValidDepositTransactionsByWalletAddress,
 } from "@/blockchain/wallet";
 import { getNetworksLiquidity } from "@/blockchain/events";
-import type { Event } from "ethers";
 import type { ValidDeposit } from "@/model/ValidDeposit";
+import type { WalletTransaction } from "@/model/WalletTransaction";
 
 enum Step {
   Search,
@@ -34,7 +36,8 @@ const tokenAmount = ref<number>();
 const lockID = ref<string>("");
 const loadingRelease = ref<boolean>(false);
 const showModal = ref<boolean>(false);
-const lastWalletReleaseTransactions = ref<Event[]>([]);
+const lastWalletTransactions = ref<WalletTransaction[]>([]);
+const depositList = ref<ValidDeposit[]>([]);
 
 const confirmBuyClick = async (
   selectedDeposit: ValidDeposit,
@@ -75,13 +78,18 @@ const releaseTransaction = async (e2eId: string) => {
     );
     release.wait();
 
-    await listReleaseTransactionByWalletAddress(
+    await listAllTransactionByWalletAddress(
       walletAddress.value.toLowerCase()
     ).then((releaseTransactions) => {
       if (releaseTransactions)
-        lastWalletReleaseTransactions.value = releaseTransactions;
+        lastWalletTransactions.value = releaseTransactions;
     });
 
+    const walletDeposits = await listValidDepositTransactionsByWalletAddress(
+      walletAddress.value
+    );
+    depositList.value = walletDeposits;
+
     await updateWalletStatus();
     loadingRelease.value = false;
   }
@@ -89,7 +97,6 @@ const releaseTransaction = async (e2eId: string) => {
 
 const checkForUnreleasedLocks = async (): Promise<void> => {
   const walletLocks = await checkUnreleasedLock(walletAddress.value);
-  console.log(walletLocks);
   if (walletLocks) {
     lockID.value = walletLocks.lockID;
     tokenAmount.value = walletLocks.pix.value;
@@ -144,10 +151,14 @@ onMounted(async () => {
   <div v-if="flowStep == Step.List">
     <BuyConfirmedComponent
       v-if="!loadingRelease"
-      :last-wallet-release-transactions="lastWalletReleaseTransactions"
       :tokenAmount="tokenAmount"
       @make-another-transaction="flowStep = Step.Search"
     />
+    <ListingComponent
+      v-if="!loadingRelease"
+      :valid-deposits="depositList"
+      :wallet-transactions="lastWalletTransactions"
+    ></ListingComponent>
     <LoadingComponent
       v-if="loadingRelease"
       :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"

src/views/ManageBidsView.vue

@@ -2,19 +2,38 @@
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
+import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
 import { ref, watch, onMounted } from "vue";
 import {
   listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
 } from "@/blockchain/wallet";
+import { withdrawDeposit } from "@/blockchain/buyerMethods";
 import type { ValidDeposit } from "@/model/ValidDeposit";
-import type { Event } from "ethers";
+import type { WalletTransaction } from "@/model/WalletTransaction";
 
 const etherStore = useEtherStore();
 
 const { walletAddress, networkName } = storeToRefs(etherStore);
+const loadingWithdraw = ref<boolean>(false);
+
 const depositList = ref<ValidDeposit[]>([]);
-const transactionsList = ref<Event[]>([]);
+const transactionsList = ref<WalletTransaction[]>([]);
+
+const callWithdraw = async (amount: string) => {
+  if (amount) {
+    loadingWithdraw.value = true;
+    const withdraw = await withdrawDeposit(amount);
+    if (withdraw) {
+      alert("Saque realizado!");
+      await updateRemaining();
+      loadingWithdraw.value = false;
+    } else {
+      alert("Não foi possível realizar o saque!");
+      loadingWithdraw.value = false;
+    }
+  }
+};
 
 const updateRemaining = async () => {
   const walletDeposits = await listValidDepositTransactionsByWalletAddress(
@@ -86,13 +105,23 @@ watch(networkName, async () => {
 
 <template>
   <div class="page">
-    <div class="header">Gerenciar Ofertas</div>
+    <div class="header" v-if="!loadingWithdraw && !walletAddress">
+      Por Favor Conecte Sua Carteira
+    </div>
+    <div class="header" v-if="!loadingWithdraw && walletAddress">
+      Gerenciar Ofertas
+    </div>
     <div class="w-full max-w-4xl">
       <ListingComponent
+        v-if="!loadingWithdraw && walletAddress"
         :valid-deposits="depositList"
         :wallet-transactions="transactionsList"
-        @deposit-withdrawn="updateRemaining"
+        @deposit-withdrawn="callWithdraw"
       ></ListingComponent>
+      <LoadingComponent
+        v-if="loadingWithdraw"
+        :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
+      />
     </div>
   </div>
 </template>