adding filter for valid deposits

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>