adding filter for valid deposits

src/components/SearchComponent.vue

@@ -9,7 +9,7 @@ import blockchain from "../utils/blockchain";
 // Store reference
 const etherStore = useEtherStore();
 
-const { walletAddress, depositsAddedList } = storeToRefs(etherStore);
+const { walletAddress, depositsValidList } = storeToRefs(etherStore);
 
 // Reactive state
 const tokenValue = ref(0);
@@ -59,14 +59,13 @@ const verifyLiquidity = () => {
   selectedDeposit.value = null;
   if (!walletAddress.value || tokenValue.value <= 0) return;
 
-  depositsAddedList.value.find((element) => {
-    const p2pixTokenValue = Number(
-      blockchain.formatBigNumber(element.args.amount)
-    );
+  depositsValidList.value.find((element) => {
+    const remaining = element.remaining;
     if (
-      tokenValue.value!! <= p2pixTokenValue &&
+      element.valid == true &&
+      tokenValue.value!! <= remaining &&
       tokenValue.value!! != 0 &&
-      element.args.seller !== walletAddress.value
+      element.seller !== walletAddress.value
     ) {
       enableSelectButton.value = true;
       hasLiquidity.value = true;

src/components/TopBar.vue

@@ -24,9 +24,9 @@ const formatWalletAddress = (): string => {
   return `${initialText}...${finalText}`;
 };
 
-const formatWalletBalance = (): string => {
-  const fixed = balance.value.substring(0, 8);
-  return fixed;
+const formatWalletBalance = (): String => {
+  const fixed = Number(balance.value);
+  return fixed.toFixed(2);
 };
 </script>
 

src/utils/blockchain.ts

@@ -132,6 +132,38 @@ const listReleaseTransactionByWalletAddress = async (
 };
 
 // Update events at store methods
+const updateValidDeposits = async () => {
+  const etherStore = useEtherStore();
+  const window_ = window as any;
+  const connection = window_.ethereum;
+  let provider: ethers.providers.Web3Provider | null = null;
+  if (!connection) return;
+  provider = new ethers.providers.Web3Provider(connection);
+  const signer = provider.getSigner();
+  const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+
+  const filterDeposits = p2pContract.filters.DepositAdded(null);
+  const eventsDeposits = await p2pContract.queryFilter(filterDeposits);
+
+  const depositList = [] as any[];
+
+  eventsDeposits.forEach(async (deposit) => {
+    const mappedDeposit = await mapDeposits(deposit.args?.depositID);
+
+    const validDeposit = {
+      depositID: deposit.args?.depositID,
+      remaining: formatBigNumber(mappedDeposit.remaining),
+      seller: mappedDeposit.seller,
+      pixKey: mappedDeposit.pixTarget,
+      valid: mappedDeposit.valid,
+    };
+
+    depositList.push(validDeposit);
+  });
+
+  etherStore.setDepositsValidList(depositList);
+};
+
 const updateDepositAddedEvents = async () => {
   const etherStore = useEtherStore();
   const window_ = window as any;
@@ -192,9 +224,10 @@ const connectProvider = async () => {
   await updateDepositAddedEvents();
   await updateLockAddedEvents();
   await updateLockReleasedEvents();
+  await updateValidDeposits();
 
-  connection.on("accountsChanged", () => {
-    updateWalletStatus();
+  connection.on("accountsChanged", async () => {
+    await updateWalletStatus();
   });
 };
 
@@ -209,7 +242,7 @@ const getProvider = (): ethers.providers.Web3Provider | null => {
 
 // Deposit methods
 // Gets value and pix key from user's form to create a deposit in the blockchain
-const addDeposit = async (tokenQty: string, pixKey: string) => {
+const addDeposit = async (tokenQty: Number, pixKey: string) => {
   const provider = getProvider();
   if (!provider) return;
 
@@ -225,20 +258,21 @@ const addDeposit = async (tokenQty: string, pixKey: string) => {
   // First get the approval
   const apprv = await tokenContract.approve(
     addresses.p2pix,
-    formatEther(tokenQty)
+    formatEther(String(tokenQty))
   );
   await apprv.wait();
 
   // Now we make the deposit
   const deposit = await p2pContract.deposit(
     addresses.token,
-    formatEther(tokenQty),
+    formatEther(String(tokenQty)),
     pixKey
   );
   await deposit.wait();
 
-  updateWalletStatus();
-  updateDepositAddedEvents();
+  await updateWalletStatus();
+  await updateDepositAddedEvents();
+  await updateValidDeposits();
 };
 
 // Get specific deposit data by its ID
@@ -278,6 +312,7 @@ const addLock = async (depositId: BigNumber, amount: Number) => {
 
   while (etherStore.locksAddedList.length === oldEventsLen) {
     await updateLockAddedEvents();
+    await updateValidDeposits();
   }
 
   return lock;
@@ -331,6 +366,7 @@ const releaseLock = async (
   );
   release.wait();
   await updateLockReleasedEvents();
+  await updateValidDeposits();
 
   return release;
 };
@@ -362,4 +398,5 @@ export default {
   mapLocks,
   releaseLock,
   updateLockAddedEvents,
+  updateValidDeposits,
 };

src/views/HomeView.vue

@@ -28,14 +28,10 @@ const lastWalletReleaseTransactions = ref<any[] | undefined>([]);
 
 const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   // finish buy screen
-  let depositDetail;
-  // depositId is BigNumber type object
-  const depositId = selectedDeposit["args"]["depositID"];
-  await blockchain
-    .mapDeposits(depositId)
-    .then((deposit) => (depositDetail = deposit));
+  const depositDetail = selectedDeposit;
+  const depositId = selectedDeposit.depositID;
+  pixTarget.value = selectedDeposit.pixKey;
   tokenAmount.value = tokenValue;
-  pixTarget.value = String(depositDetail?.pixTarget);
 
   // Makes lock with deposit ID and the Amount
   if (depositDetail) {
@@ -59,20 +55,20 @@ const releaseTransaction = async ({ e2eId }: any) => {
   flowStep.value = Step.List;
   loadingRelease.value = true;
 
-  const findLockId = locksAddedList.value.find((element) => {
+  const findLock = locksAddedList.value.find((element) => {
     if (element.transactionHash === lockTransactionHash.value) {
-      lockId.value = element.args.lockID; // BigNumber type
+      lockId.value = element.args.lockID;
       return true;
     }
     return false;
   });
 
-  if (findLockId) {
+  if (findLock && tokenAmount.value) {
     const release = await blockchain.releaseLock(
-      pixTarget.value, // String
-      tokenAmount.value ?? 0, // Number
-      e2eId, // String
-      lockId.value // String
+      pixTarget.value,
+      tokenAmount.value,
+      e2eId,
+      lockId.value
     );
     release.wait();
 

src/views/MockView.vue

@@ -7,6 +7,7 @@ import blockchain from "../utils/blockchain";
 
 // Blockchain Data
 const etherStore = useEtherStore();
+const { depositsValidList } = storeToRefs(etherStore);
 const { depositsAddedList } = storeToRefs(etherStore);
 const { locksAddedList } = storeToRefs(etherStore);
 
@@ -35,7 +36,7 @@ const formatWalletAddress = (wallet: string): string => {
 // Gets value and pix key from user's form to create a deposit in the blockchain
 const mockDeposit = () => {
   if (!depositValue.value || !depositPixKey.value) return;
-  blockchain.addDeposit(depositValue.value.toString(), depositPixKey.value);
+  blockchain.addDeposit(depositValue.value, depositPixKey.value);
 };
 
 // Get specific deposit data by its ID
@@ -102,6 +103,17 @@ const mapLock = (lockId: string) => {
         MRBZ: {{ blockchain.formatBigNumber(lock.args.amount) }}
       </li>
     </ul>
+    <ul class="flex flex-col justify-center items-center gap-4">
+      <li
+        class="text-gray-900 font-semibold text-lg cursor-pointer border-2 border-amber-400 p-2 rounded-md bg-amber-200"
+        v-for="valid in depositsValidList"
+        :key="valid.depositID"
+        @click="mapDeposit(valid.depositID)"
+      >
+        Buyer:<br />{{ formatWalletAddress(valid.seller) }}<br />
+        MRBZ: {{ valid.remaining }}
+      </li>
+    </ul>
   </div>
 </template>