Merge pull request #50 from liftlearning/listing-tags

Loadings com spinner e tags de status na listagem de transações

src/blockchain/buyerMethods.ts

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

src/blockchain/events.ts

@@ -10,7 +10,6 @@ import { NetworkEnum } from "@/model/NetworkEnum";
 
 const getNetworksLiquidity = async (): Promise<void> => {
   const etherStore = useEtherStore();
-  console.log("Loading events");
 
   const goerliProvider = new ethers.providers.JsonRpcProvider(
     import.meta.env.VITE_GOERLI_API_URL,
@@ -32,6 +31,7 @@ const getNetworksLiquidity = async (): Promise<void> => {
     mumbaiProvider
   );
 
+  etherStore.setLoadingNetworkLiquidity(true);
   const depositListGoerli = await getValidDeposits(
     getTokenAddress(NetworkEnum.ethereum),
     p2pContractGoerli
@@ -43,10 +43,8 @@ const getNetworksLiquidity = async (): Promise<void> => {
   );
 
   etherStore.setDepositsValidListGoerli(depositListGoerli);
-  console.log(depositListGoerli);
-
   etherStore.setDepositsValidListMumbai(depositListMumbai);
-  console.log(depositListMumbai);
+  etherStore.setLoadingNetworkLiquidity(false);
 };
 
 const getValidDeposits = async (

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,46 @@ 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 = await Promise.all(
+    transactions.map(async (transaction) => {
+      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
+          : "",
+      };
+
+      return tx;
+    })
+  );
+
+  return txs;
+};
+
 const listAllTransactionByWalletAddress = async (
   walletAddress: string
-): Promise<Event[]> => {
+): Promise<WalletTransaction[]> => {
   const p2pContract = getContract(true);
 
   const filterDeposits = p2pContract.filters.DepositAdded([walletAddress]);
@@ -73,14 +112,18 @@ const listAllTransactionByWalletAddress = async (
     filterWithdrawnDeposits
   );
 
-  return [
+  const lockStatusFiltered = await filterLockStatus(
-    ...eventsDeposits,
+    [
-    ...eventsAddedLocks,
+      ...eventsDeposits,
-    ...eventsReleasedLocks,
+      ...eventsAddedLocks,
-    ...eventsWithdrawnDeposits,
+      ...eventsReleasedLocks,
-  ].sort((a, b) => {
+      ...eventsWithdrawnDeposits,
-    return b.blockNumber - a.blockNumber;
+    ].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/CustomButton/CustomButton.vue

@@ -21,6 +21,6 @@ const emit = defineEmits(["buttonClicked"]);
 
 <style scoped>
 .button {
-  @apply rounded-lg w-full text-base font-semibold text-gray-900 py-4 bg-amber-400;
+  @apply rounded-lg w-full text-base font-semibold text-gray-900 p-4 bg-amber-400;
 }
 </style>

src/components/ListingComponent/ListingComponent.vue

@@ -2,26 +2,54 @@
 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 { storeToRefs } from "pinia";
-import type { BigNumber, Event } from "ethers";
 import { ref, watch } from "vue";
+import SpinnerComponent from "../SpinnerComponent.vue";
+import { decimalCount } from "@/utils/decimalCount";
+import { debounce } from "@/utils/debounce";
+
+const etherStore = useEtherStore();
 
 // props
 const props = defineProps<{
   validDeposits: ValidDeposit[];
-  walletTransactions: Event[];
+  walletTransactions: WalletTransaction[];
 }>();
 
 const emit = defineEmits(["depositWithdrawn"]);
 
-const etherStore = useEtherStore();
+const { loadingWalletTransactions } = storeToRefs(etherStore);
-
+const remaining = ref<number>(0.0);
-const itemsToShow = ref<Event[]>([]);
+const itemsToShow = ref<WalletTransaction[]>([]);
 const withdrawAmount = ref<string>("");
 const withdrawButtonOpacity = ref<number>(0.6);
 const withdrawButtonCursor = ref<string>("not-allowed");
 const isCollapsibleOpen = ref<boolean>(false);
+const validDecimals = ref<boolean>(true);
+const validWithdrawAmount = ref<boolean>(true);
+const enableConfirmButton = ref<boolean>(false);
+
+// Debounce methods
+const handleInputEvent = (event: any): void => {
+  const { value } = event.target;
+
+  if (decimalCount(String(value)) > 2) {
+    validDecimals.value = false;
+    enableConfirmButton.value = false;
+    return;
+  }
+  validDecimals.value = true;
+
+  if (value > remaining.value) {
+    validWithdrawAmount.value = false;
+    enableConfirmButton.value = false;
+    return;
+  }
+  validWithdrawAmount.value = true;
+  enableConfirmButton.value = true;
+};
 
 const callWithdraw = async () => {
   if (withdrawAmount.value) {
@@ -49,6 +77,7 @@ const getRemaining = (): number => {
     // 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.validDeposits[0];
+    remaining.value = deposit ? deposit.remaining : 0;
     return deposit ? deposit.remaining : 0;
   }
   return 0;
@@ -93,11 +122,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;
@@ -114,8 +138,14 @@ showInitialItems();
 </script>
 
 <template>
-  <div class="blur-container">
+  <div class="blur-container" v-if="loadingWalletTransactions">
-    <div class="w-full bg-white p-6 rounded-lg">
+    <SpinnerComponent width="8" height="8" fillColor="white"></SpinnerComponent>
+  </div>
+  <div class="blur-container" v-if="!loadingWalletTransactions">
+    <div
+      class="w-full bg-white p-6 rounded-lg"
+      v-if="props.validDeposits.length > 0"
+    >
       <div class="flex justify-between items-center">
         <div>
           <p class="text-sm leading-5 font-medium text-gray-600">
@@ -143,11 +173,22 @@ showInitialItems();
             type="number"
             name=""
             id=""
+            @input="debounce(handleInputEvent, 500)($event)"
             placeholder="0"
             class="text-2xl text-gray-900 w-full outline-none"
             v-model="withdrawAmount"
           />
         </div>
+        <div class="flex justify-center" v-if="!validDecimals">
+          <span class="text-red-500 font-normal text-sm"
+            >Por favor utilize no máximo 2 casas decimais</span
+          >
+        </div>
+        <div class="flex justify-center" v-else-if="!validWithdrawAmount">
+          <span class="text-red-500 font-normal text-sm"
+            >Saldo insuficiente</span
+          >
+        </div>
         <hr v-show="isCollapsibleOpen" class="pb-3" />
         <div
           v-show="isCollapsibleOpen"
@@ -159,7 +200,9 @@ showInitialItems();
           >
             Cancelar
           </h1>
+
           <div
+            v-if="enableConfirmButton"
             class="withdraw-button flex gap-2 items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
             @click="callWithdraw"
           >
@@ -180,18 +223,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 status-text"
+            v-if="getEventName(item.event) == 'Reserva' && item.lockStatus == 1"
+          >
+            Ativo
+          </div>
+          <div
+            class="bg-[#94A3B8] status-text"
+            v-if="getEventName(item.event) == 'Reserva' && item.lockStatus == 2"
+          >
+            Expirado
+          </div>
+          <div
+            class="bg-emerald-300 status-text"
+            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" />
@@ -242,6 +303,9 @@ p {
   @apply flex justify-between items-center;
 }
 
+.status-text {
+  @apply text-base font-medium text-gray-900 rounded-lg text-center mb-2 p-1;
+}
 .text {
   @apply text-white text-center;
 }

src/components/ListingComponent/__tests__/ListingComponent.spec.ts

@@ -3,11 +3,13 @@ import ListingComponent from "@/components/ListingComponent/ListingComponent.vue
 import { createPinia, setActivePinia } from "pinia";
 import { expect } from "vitest";
 import { MockValidDeposits } from "@/model/mock/ValidDepositMock";
-import { MockEvents } from "@/model/mock/EventMock";
+import { MockWalletTransactions } from "@/model/mock/WalletTransactionMock";
+import { useEtherStore } from "@/store/ether";
 
 describe("ListingComponent.vue", () => {
   beforeEach(() => {
     setActivePinia(createPinia());
+    useEtherStore().setLoadingWalletTransactions(false);
   });
 
   test("Test Message when an empty array is received", () => {
@@ -25,7 +27,7 @@ describe("ListingComponent.vue", () => {
     const wrapper = mount(ListingComponent, {
       props: {
         validDeposits: [],
-        walletTransactions: MockEvents,
+        walletTransactions: MockWalletTransactions,
       },
     });
 
@@ -38,7 +40,7 @@ describe("ListingComponent.vue", () => {
     const wrapper = mount(ListingComponent, {
       props: {
         validDeposits: MockValidDeposits,
-        walletTransactions: MockEvents,
+        walletTransactions: MockWalletTransactions,
       },
     });
     const btn = wrapper.find("button");
@@ -50,14 +52,14 @@ describe("ListingComponent.vue", () => {
 
     elements = wrapper.findAll(".item-container");
 
-    expect(elements).toHaveLength(4);
+    expect(elements).toHaveLength(5);
   });
 
   test("Test withdraw offer button emit", async () => {
     const wrapper = mount(ListingComponent, {
       props: {
         validDeposits: MockValidDeposits,
-        walletTransactions: MockEvents,
+        walletTransactions: MockWalletTransactions,
       },
     });
     wrapper.vm.$emit("depositWithdrawn");

src/components/SearchComponent.vue

@@ -9,6 +9,7 @@ import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { decimalCount } from "@/utils/decimalCount";
+import SpinnerComponent from "./SpinnerComponent.vue";
 
 // Store reference
 const etherStore = useEtherStore();
@@ -18,6 +19,7 @@ const {
   networkName,
   depositsValidListGoerli,
   depositsValidListMumbai,
+  loadingNetworkLiquidity,
 } = storeToRefs(etherStore);
 
 // Reactive state
@@ -160,8 +162,11 @@ watch(walletAddress, (): void => {
           </div>
         </div>
 
-        <div class="custom-divide py-2"></div>
+        <div class="custom-divide py-2 mb-2"></div>
-        <div class="flex justify-between pt-2" v-if="hasLiquidity">
+        <div
+          class="flex justify-between"
+          v-if="hasLiquidity && !loadingNetworkLiquidity"
+        >
           <p class="text-gray-500 font-normal text-sm w-auto">
             ~ R$ {{ tokenValue.toFixed(2) }}
           </p>
@@ -182,12 +187,31 @@ watch(walletAddress, (): void => {
             />
           </div>
         </div>
-        <div class="flex pt-2 justify-center" v-if="!validDecimals">
+        <div
+          class="flex justify-center items-center"
+          v-if="loadingNetworkLiquidity"
+        >
+          <span class="text-gray-900 font-normal text-sm mr-2"
+            >Carregando liquidez das redes.</span
+          >
+          <SpinnerComponent
+            width="4"
+            height="4"
+            fillColor="white"
+          ></SpinnerComponent>
+        </div>
+        <div
+          class="flex justify-center"
+          v-if="!validDecimals && !loadingNetworkLiquidity"
+        >
           <span class="text-red-500 font-normal text-sm"
             >Por favor utilize no máximo 2 casas decimais</span
           >
         </div>
-        <div class="flex pt-2 justify-center" v-else-if="!hasLiquidity">
+        <div
+          class="flex justify-center"
+          v-else-if="!hasLiquidity && !loadingNetworkLiquidity"
+        >
           <span class="text-red-500 font-normal text-sm"
             >Atualmente não há liquidez nas redes para sua demanda</span
           >

src/components/SpinnerComponent.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// prop
+const props = defineProps({
+  width: String,
+  height: String,
+  fillColor: String,
+  show: Boolean,
+});
+
+const getCustomClass = () => {
+  return [
+    `w-${props.width}`,
+    `h-${props.height}`,
+    `fill-${props.fillColor}`,
+    "text-gray-200",
+    "animate-spin",
+    "dark:text-gray-600",
+  ];
+};
+</script>
+
+<template>
+  <div v-if="props.show ? props.show : true">
+    <svg
+      aria-hidden="true"
+      :class="getCustomClass()"
+      viewBox="0 0 100 101"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+  </div>
+</template>

src/components/TopBar/TopBar.vue

@@ -118,7 +118,9 @@ onClickOutside(infoMenuRef, () => {
                 :to="'/faq'"
                 class="menu-button gap-2 px-4 rounded-md cursor-pointer"
               >
-                <span class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap">
+                <span
+                  class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
+                >
                   Perguntas frequentes
                 </span>
               </RouterLink>
@@ -357,7 +359,7 @@ onClickOutside(infoMenuRef, () => {
               {{ formatWalletAddress() }}
             </span>
             <img
-              class="text-gray-900 lg-view"
+              class="text-gray-900"
               v-if="!menuHoverToggle && !menuOpenToggle"
               alt="Chevron Down"
               src="@/assets/chevronDown.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/model/mock/WalletTransactionMock.ts

@@ -0,0 +1,54 @@
+import type { WalletTransaction } from "../WalletTransaction";
+
+export const MockWalletTransactions: WalletTransaction[] = [
+  {
+    blockNumber: 1,
+    token: "1",
+    amount: 70,
+    seller: "mockedSellerAddress",
+    buyer: "mockedBuyerAddress",
+    event: "Deposit",
+    lockStatus: 0,
+    transactionHash: "1",
+  },
+  {
+    blockNumber: 2,
+    token: "2",
+    amount: 200,
+    seller: "mockedSellerAddress",
+    buyer: "mockedBuyerAddress",
+    event: "Lock",
+    lockStatus: 1,
+    transactionHash: "2",
+  },
+  {
+    blockNumber: 3,
+    token: "3",
+    amount: 1250,
+    seller: "mockedSellerAddress",
+    buyer: "mockedBuyerAddress",
+    event: "Release",
+    lockStatus: 2,
+    transactionHash: "3",
+  },
+  {
+    blockNumber: 4,
+    token: "4",
+    amount: 4000,
+    seller: "mockedSellerAddress",
+    buyer: "mockedBuyerAddress",
+    event: "Deposit",
+    lockStatus: 0,
+    transactionHash: "4",
+  },
+  {
+    blockNumber: 5,
+    token: "5",
+    amount: 2000,
+    seller: "mockedSellerAddress",
+    buyer: "mockedBuyerAddress",
+    event: "Deposit",
+    lockStatus: 3,
+    transactionHash: "5",
+  },
+];

src/store/ether.ts

@@ -13,6 +13,8 @@ export const useEtherStore = defineStore("ether", {
     depositsValidListGoerli: [] as ValidDeposit[],
     // Depósitos válidos para compra MUMBAI
     depositsValidListMumbai: [] as ValidDeposit[],
+    loadingWalletTransactions: false,
+    loadingNetworkLiquidity: false,
   }),
   actions: {
     setWalletAddress(walletAddress: string) {
@@ -36,6 +38,12 @@ export const useEtherStore = defineStore("ether", {
     setDepositsValidListMumbai(depositsValidList: ValidDeposit[]) {
       this.depositsValidListMumbai = depositsValidList;
     },
+    setLoadingWalletTransactions(isLoadingWalletTransactions: boolean) {
+      this.loadingWalletTransactions = isLoadingWalletTransactions;
+    },
+    setLoadingNetworkLiquidity(isLoadingNetworkLiquidity: boolean) {
+      this.loadingNetworkLiquidity = isLoadingNetworkLiquidity;
+    },
   },
   // Alterar para integrar com mumbai
   getters: {

src/views/HomeView.vue

@@ -2,20 +2,26 @@
 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";
 import CustomModal from "@/components/CustomModal/CustomModal.vue";
 import { storeToRefs } from "pinia";
-import { addLock, releaseLock } from "@/blockchain/buyerMethods";
+import {
+  addLock,
+  releaseLock,
+  withdrawDeposit,
+} 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 +40,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,21 +82,50 @@ const releaseTransaction = async (e2eId: string) => {
     );
     release.wait();
 
-    await listReleaseTransactionByWalletAddress(
+    await getWalletTransactions();
-      walletAddress.value.toLowerCase()
-    ).then((releaseTransactions) => {
-      if (releaseTransactions)
-        lastWalletReleaseTransactions.value = releaseTransactions;
-    });
 
     await updateWalletStatus();
     loadingRelease.value = false;
   }
 };
 
+const getWalletTransactions = async () => {
+  etherStore.setLoadingWalletTransactions(true);
+  if (walletAddress.value) {
+    const walletDeposits = await listValidDepositTransactionsByWalletAddress(
+      walletAddress.value
+    );
+
+    const allUserTransactions = await listAllTransactionByWalletAddress(
+      walletAddress.value
+    );
+
+    if (walletDeposits) {
+      depositList.value = walletDeposits;
+    }
+    if (allUserTransactions) {
+      lastWalletTransactions.value = allUserTransactions;
+    }
+  }
+  etherStore.setLoadingWalletTransactions(false);
+};
+
+const callWithdraw = async (amount: string) => {
+  if (amount) {
+    etherStore.setLoadingWalletTransactions(true);
+    const withdraw = await withdrawDeposit(amount);
+    if (withdraw) {
+      console.log("Saque realizado!");
+      await getWalletTransactions();
+    } else {
+      console.log("Não foi possível realizar o saque!");
+    }
+    etherStore.setLoadingWalletTransactions(false);
+  }
+};
+
 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;
@@ -142,12 +178,22 @@ onMounted(async () => {
     />
   </div>
   <div v-if="flowStep == Step.List">
-    <BuyConfirmedComponent
+    <div class="flex flex-col gap-10" v-if="!loadingRelease">
-      v-if="!loadingRelease"
+      <BuyConfirmedComponent
-      :last-wallet-release-transactions="lastWalletReleaseTransactions"
+        :tokenAmount="tokenAmount"
-      :tokenAmount="tokenAmount"
+        @make-another-transaction="flowStep = Step.Search"
-      @make-another-transaction="flowStep = Step.Search"
+      />
-    />
+      <div
+        class="text-3xl text-white leading-9 font-bold justify-center flex mt-4"
+      >
+        Gerenciar transações
+      </div>
+      <ListingComponent
+        :valid-deposits="depositList"
+        :wallet-transactions="lastWalletTransactions"
+        @deposit-withdrawn="callWithdraw"
+      ></ListingComponent>
+    </div>
     <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,33 +2,48 @@
 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";
+
+import router from "@/router/index";
 
 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 updateRemaining = async () => {
+const callWithdraw = async (amount: string) => {
-  const walletDeposits = await listValidDepositTransactionsByWalletAddress(
+  if (amount) {
-    walletAddress.value
+    loadingWithdraw.value = true;
-  );
+    let withdraw;
-  depositList.value = walletDeposits;
+    try {
+      withdraw = await withdrawDeposit(amount);
+    } catch {
+      loadingWithdraw.value = false;
+    }
 
-  const allUserTransactions = await listAllTransactionByWalletAddress(
+    if (withdraw) {
-    walletAddress.value
+      console.log("Saque realizado!");
-  );
+      await getWalletTransactions();
-  transactionsList.value = allUserTransactions;
+    } else {
+      console.log("Não foi possível realizar o saque!");
+    }
+    loadingWithdraw.value = false;
+  }
 };
 
-onMounted(async () => {
+const getWalletTransactions = async () => {
+  etherStore.setLoadingWalletTransactions(true);
   if (walletAddress.value) {
     const walletDeposits = await listValidDepositTransactionsByWalletAddress(
       walletAddress.value
@@ -45,54 +60,44 @@ onMounted(async () => {
       transactionsList.value = allUserTransactions;
     }
   }
+  etherStore.setLoadingWalletTransactions(false);
+};
+
+onMounted(async () => {
+  if (!walletAddress.value) {
+    router.push({ name: "home" });
+  }
+  await getWalletTransactions();
 });
 
-watch(walletAddress, async (newValue) => {
+watch(walletAddress, async () => {
-  await listValidDepositTransactionsByWalletAddress(newValue)
+  await getWalletTransactions();
-    .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 () => {
-  await listValidDepositTransactionsByWalletAddress(walletAddress.value)
+  await getWalletTransactions();
-    .then((res) => {
-      if (res) depositList.value = res;
-    })
-    .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" 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>