partial commit (will be removed)

src/components/ListingComponent.vue

@@ -6,16 +6,16 @@ import { ref, watch } from "vue";
 const props = defineProps<{
   walletTransactions: any[];
   isManageMode: boolean;
+  walletAddress?: string;
 }>();
 
 const itemsToShow = ref<any[]>([]);
 
-itemsToShow.value =
-  props.walletTransactions?.length > 3
-    ? props.walletTransactions.slice(0, 3)
-    : props.walletTransactions;
-
 // Methods
+const showInitialItems = (items: any[]) => {
+  return items.length > 3 ? items.slice(0, 3) : items;
+};
+
 const formatEventsAmount = (amount: any) => {
   try {
     const formated = blockchain.formatBigNumber(amount);
@@ -41,15 +41,21 @@ const loadMore = () => {
 // watch props changes
 
 watch(props, (newProps) => {
-  const itemsToShowQty = itemsToShow.value.length
-  itemsToShow.value =
-  newProps?.walletTransactions.length > itemsToShowQty + 3
-      ? newProps.walletTransactions.slice(itemsToShowQty, itemsToShowQty + 3)
-      : newProps.walletTransactions;
-})
+  const itemsToShowQty = itemsToShow.value.length;
+  if (itemsToShowQty == 0)
+    itemsToShow.value = showInitialItems(props.walletTransactions);
+  else
+    itemsToShow.value =
+      newProps?.walletTransactions.length > itemsToShowQty
+        ? newProps.walletTransactions.slice(0, itemsToShowQty)
+        : newProps.walletTransactions;
+});
 
 //emits
 const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
+
+// initial itemToShow value
+itemsToShow.value = showInitialItems(props.walletTransactions);
 </script>
 
 <template>
@@ -77,7 +83,10 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
       :key="item?.blockNumber"
     >
       <span class="last-release-info">
-        {{ formatEventsAmount(item?.args ? item?.args.amount : item?.remaining) }} BRZ
+        {{
+          item?.args ? formatEventsAmount(item?.args.amount) : item?.remaining
+        }}
+        BRZ
       </span>
 
       <!-- TODO: change this hardcoded date -->
@@ -133,18 +142,12 @@ const emit = defineEmits(["cancelDeposit", "withdrawDeposit"]);
         <img alt="Redirect image" src="@/assets/redirect.svg" />
       </div>
     </div>
-    <div
-      class="flex justify-center w-full mt-2"
-      v-if="itemsToShow.length != 0"
-    >
+    <div class="flex justify-center w-full mt-2" v-if="itemsToShow.length != 0">
       <button type="button" class="text-white" @click="loadMore()">
         Carregar mais
       </button>
     </div>
-    <span
-      class="font-bold text-gray-900"
-      v-if="itemsToShow.length == 0"
-    >
+    <span class="font-bold text-gray-900" v-if="itemsToShow.length == 0">
       Não há nenhuma transação anterior
     </span>
   </div>

src/store/ether.ts

@@ -47,4 +47,14 @@ export const useEtherStore = defineStore("ether", {
       this.locksExpiredList = locksExpiredList;
     },
   },
+  getters: {
+    getValidDepositByWalletAddress: (state) => {
+      return (walletAddress: string) =>
+        state.depositsValidList
+          .filter((deposit) => deposit.seller == walletAddress)
+          .sort((a, b) => {
+            return b.blockNumber - a.blockNumber;
+          });
+    },
+  },
 });

src/utils/blockchain.ts

@@ -13,6 +13,7 @@ import { wallets } from "./smart_contract_files/wallets.json";
 const updateWalletStatus = async () => {
   const etherStore = useEtherStore();
   const provider = getProvider();
+
   if (!provider) return;
 
   const signer = provider.getSigner();
@@ -94,23 +95,19 @@ const listDepositTransactionByWalletAddress = async (
 };
 
 // get wallet's deposit transactions
-// const listValidDepositTransactionsByWalletAddress = async (
-//   walletAddress: string
-// ): Promise<any[]> => {
-//   const provider = getProvider();
-//   const etherStore = useEtherStore();
-//   if (!provider) return [];
-
-//   const signer = provider.getSigner();
-//   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
-
-//   const filterDeposits = p2pContract.filters.DepositAdded([walletAddress]);
-//   const eventsDeposits = await p2pContract.queryFilter(filterDeposits);
-
-//   console.log()
-
-  
-// };
+const listValidDepositTransactionsByWalletAddress = async (
+  walletAddress: string
+): Promise<any[]> => {
+  const walletDeposits = await getValidDeposits();
+  if (walletDeposits) {
+    return walletDeposits
+      .filter((deposit) => deposit.seller == String(walletAddress))
+      .sort((a, b) => {
+        return b.blockNumber - a.blockNumber;
+      });
+  }
+  return [];
+};
 
 // get wallet's lock transactions
 const listLockTransactionByWalletAddress = async (
@@ -150,9 +147,8 @@ const listReleaseTransactionByWalletAddress = async (
   });
 };
 
-// Update events at store methods
-const updateValidDeposits = async () => {
-  const etherStore = useEtherStore();
+//get valid deposits
+const getValidDeposits = async (): Promise<any[] | undefined> => {
   const window_ = window as any;
   const connection = window_.ethereum;
   let provider: ethers.providers.Web3Provider | null = null;
@@ -170,17 +166,23 @@ const updateValidDeposits = async () => {
     const mappedDeposit = await mapDeposits(deposit.args?.depositID);
 
     const validDeposit = {
+      blockNumber: deposit.blockNumber,
       depositID: deposit.args?.depositID,
       remaining: formatBigNumber(mappedDeposit.remaining),
       seller: mappedDeposit.seller,
       pixKey: mappedDeposit.pixTarget,
     };
 
-    if (mappedDeposit.valid)
-      depositList.push(validDeposit);
+    if (mappedDeposit.valid) depositList.push(validDeposit);
   });
 
-  etherStore.setDepositsValidList(depositList);
+  return depositList;
+};
+// Update events at store methods
+const updateValidDeposits = async () => {
+  const etherStore = useEtherStore();
+  const deposits = await getValidDeposits();
+  if (deposits) etherStore.setDepositsValidList(deposits);
 };
 
 const updateDepositAddedEvents = async () => {
@@ -240,10 +242,10 @@ const connectProvider = async () => {
   const connection = window_.ethereum;
 
   await updateWalletStatus();
+  await updateValidDeposits();
   await updateDepositAddedEvents();
   await updateLockAddedEvents();
   await updateLockReleasedEvents();
-  await updateValidDeposits();
 
   connection.on("accountsChanged", async () => {
     await updateWalletStatus();
@@ -290,8 +292,8 @@ const addDeposit = async (tokenQty: Number, pixKey: string) => {
   await deposit.wait();
 
   await updateWalletStatus();
-  await updateDepositAddedEvents();
   await updateValidDeposits();
+  await updateDepositAddedEvents();
 };
 
 // cancel a deposit by its Id
@@ -436,6 +438,7 @@ export default {
   formatEther,
   updateWalletStatus,
   splitTokens,
+  listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
   listReleaseTransactionByWalletAddress,
   listDepositTransactionByWalletAddress,
@@ -450,4 +453,5 @@ export default {
   releaseLock,
   updateLockAddedEvents,
   updateValidDeposits,
+  getValidDeposits,
 };

src/views/DepositsHistoryView.vue

@@ -12,7 +12,7 @@ const allUserTransactions = ref<any[]>([]);
 watch(walletAddress, async (newValue) => {
   await blockchain
     .listAllTransactionByWalletAddress(newValue)
-    .then((res) => (allUserTransactions.value = res));
+    .then((res) => {if(res) (allUserTransactions.value = res)});
 });
 
 watch(walletAddress, async (newValue) => {

src/views/ManageBidsView.vue

@@ -7,30 +7,47 @@ import type { BigNumber } from "ethers";
 import { ref } from "vue";
 
 const etherStore = useEtherStore();
-const { walletAddress, depositsValidList } = storeToRefs(etherStore);
+const { walletAddress } = storeToRefs(etherStore);
 const depositList = ref<any[]>([]);
 
-const listValidDepositTransactionsByWalletAddress = (walletAddress: string, deposits: any[]) => {
-  depositList.value = deposits.filter((deposit) => deposit.seller === walletAddress) 
-}
-
 const handleCancelDeposit = async (depositID: BigNumber) => {
   const response = await blockchain.cancelDeposit(depositID);
-  if (response == true) console.log("Depósito cancelado com sucesso.");
+  if (response == true) {
+    console.log("Depósito cancelado com sucesso.");
+    await blockchain
+      .listValidDepositTransactionsByWalletAddress(walletAddress.value)
+      .then((deposits) => {
+        if (deposits) depositList.value = deposits;
+      });
+  }
 };
 
 const handleWithDrawDeposit = async (depositID: BigNumber) => {
   const response = await blockchain.withdrawDeposit(depositID);
-  if (response == true) console.log("Token retirado com sucesso.");
+  if (response == true) {
+    console.log("Token retirado com sucesso.");
+    await blockchain
+      .listValidDepositTransactionsByWalletAddress(walletAddress.value)
+      .then((deposits) => {
+        if (deposits) depositList.value = deposits;
+      });
+  }
 };
 
 if (walletAddress.value) {
-  listValidDepositTransactionsByWalletAddress(walletAddress.value, depositsValidList.value)
+  depositList.value = etherStore.getValidDepositByWalletAddress(
+    walletAddress.value
+  );
 }
 
-etherStore.$subscribe((_mutation, state) => {
-  if(state.walletAddress != "")
-    listValidDepositTransactionsByWalletAddress(state.walletAddress, state.depositsValidList)
+etherStore.$subscribe(async (_mutation, state) => {
+  if (state.walletAddress != "" && state.depositsValidList.length > 0) {
+    await blockchain
+      .listValidDepositTransactionsByWalletAddress(walletAddress.value)
+      .then((deposits) => {
+        if (deposits) depositList.value = deposits;
+      });
+  }
 });
 </script>