implement logic to await all validDeposits correctly and improve state rendering from listing component

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>

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;
 };

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) => {

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>