Release integration with qrcode component and list component

src/components/ListComponent.vue

@@ -1,14 +1,28 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton.vue";
-import { useEtherStore } from "@/store/ether";
+import { BigNumber } from "ethers";
 import blockchain from "../utils/blockchain";
 
 // props and store references
 const props = defineProps({
   lastWalletTransactions: Array,
-  tokenAmmount: Number,
+  tokenAmmount: BigNumber,
 });
 
+const teste = (amount: any) => {
+  console.log(amount);
+  console.log("Teste");
+};
+
+const formatEventsAmount = (amount: any) => {
+  try {
+    const formated = blockchain.formatBigNumber(amount);
+    return formated;
+  } catch {
+    return "";
+  }
+};
+
 const openEtherscanUrl = (url: string) => {
   window.open(url, "_blank");
 };
@@ -28,7 +42,9 @@ const openEtherscanUrl = (url: string) => {
       >
         <div>
           <p>Tokens recebidos</p>
-          <p class="text-2xl text-gray-900">{{ props.tokenAmmount }} BRZ</p>
+          <p class="text-2xl text-gray-900">
+            {{ teste(props.tokenAmmount) }} BRZ
+          </p>
         </div>
         <div class="my-5">
           <p>
@@ -70,7 +86,7 @@ const openEtherscanUrl = (url: string) => {
         :key="deposit?.blockNumber"
       >
         <p class="last-deposit-info">
-          {{ blockchain.formatBigNumber(deposit?.args.amount) }} BRZ
+          {{ formatEventsAmount(deposit?.args.amount) }} BRZ
         </p>
         <p class="last-deposit-info">
           {{

src/components/QrCodeComponent.vue

@@ -69,7 +69,7 @@ const validatePix = async () => {
 
 <template>
   <div class="page">
-    <h2>{{e2eId}}</h2>
+    <h2>{{ e2eId }}</h2>
     <div class="text-container">
       <span class="text font-extrabold text-2xl max-w-[30rem]">
         Utilize o QR Code ou copie o código para realizar o Pix
@@ -147,7 +147,7 @@ const validatePix = async () => {
       <CustomButton
         :is-disabled="isPixValid == false"
         :text="'Enviar para a rede'"
-        @button-clicked="emit('pixValidated', e2eId)"
+        @button-clicked="emit('pixValidated', { e2eId })"
       />
     </div>
   </div>

src/utils/blockchain.ts

@@ -196,7 +196,6 @@ const mapDeposits = async (depositId: BigNumber) => {
   const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
   const deposit = await contract.mapDeposits(depositId.toNumber());
 
-  console.log(deposit);
   return deposit;
 };
 
@@ -211,6 +210,7 @@ const addLock = async (depositId: Number, amount: Number) => {
   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
 
   // Make lock
+  const oldEventsLen = etherStore.locksAddedList.length;
   const lock = await p2pContract.lock(
     depositId,
     etherStore.walletAddress,
@@ -220,8 +220,9 @@ const addLock = async (depositId: Number, amount: Number) => {
     []
   );
   lock.wait();
-
-  updateLockAddedEvents();
+  while (etherStore.locksAddedList.length === oldEventsLen) {
+    await updateLockAddedEvents();
+  }
   return lock;
 };
 
@@ -269,9 +270,9 @@ const releaseLock = async (
 
   const release = await p2pContract.release(lockId, e2eId, sig.r, sig.s, sig.v);
   release.wait();
+  await updateLockReleasedEvents();
 
-  updateLockReleasedEvents();
-  return release
+  return release;
 };
 
 // Formatting methods
@@ -296,4 +297,5 @@ export default {
   addLock,
   mapLocks,
   releaseLock,
+  updateLockAddedEvents,
 };

src/views/HomeView.vue

@@ -5,11 +5,7 @@ import ListComponent from "@/components/ListComponent.vue";
 import blockchain from "../utils/blockchain";
 import { ref } from "vue";
 
-// (TO DO) Tirar isso tudo daqui
-import p2pix from "../utils/smart_contract_files/P2PIX.json";
-import addresses from "../utils/smart_contract_files/localhost.json";
 import { useEtherStore } from "@/store/ether";
-import { ethers } from "ethers";
 import QrCodeComponent from "../components/QrCodeComponent.vue";
 import { storeToRefs } from "pinia";
 
@@ -26,6 +22,7 @@ const flowStep = ref<Step>(Step.Search);
 const pixTarget = ref<string>("");
 const tokenAmount = ref<number>();
 const lockTransactionHash = ref<string>("");
+const lockId = ref<string>("");
 const loadingRelease = ref<Boolean>(false);
 const lastWalletTransactions = ref<any[] | undefined>([]);
 
@@ -45,52 +42,56 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
     flowStep.value = Step.Buy;
     etherStore.setLoadingLock(true);
 
-    await blockchain.addLock(depositId, tokenValue)
-    .then((lock) => {
-      console.log(lock)
-      lockTransactionHash.value = lock.hash
-    })
-    .catch(() => {
-      flowStep.value = Step.Search;
-    });
+    await blockchain
+      .addLock(depositId, tokenValue)
+      .then((lock) => {
+        lockTransactionHash.value = lock.hash;
+      })
+      .catch(() => {
+        flowStep.value = Step.Search;
+      });
 
-    // (TO DO) Tirar isso daqui
-    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 filterLocks = p2pContract.filters.LockAdded(null);
-    const eventsLocks = await p2pContract.queryFilter(filterLocks);
-    etherStore.setLocksAddedList(eventsLocks);
     etherStore.setLoadingLock(false);
-
-    // Data to QRCode
-    // Chave Pix = depositDetail.pixTarget
-    // Valor = tokenValue
   }
 };
 
 const releaseTransaction = async ({ e2eId }: any) => {
-  console.log(e2eId);
   flowStep.value = Step.List;
   loadingRelease.value = true;
-  console.log(lockTransactionHash.value);
-  console.log(locksAddedList.value);
 
-  // make lock release
-  // need to find lockId
-  // const release = await blockchain.releaseLock(pixTarget.value, String(tokenAmount.value), Number(e2eId), lockTransactionHash.value)
-  // console.log(release);
+  const findLockId = locksAddedList.value.find((element) => {
+    if (element.transactionHash === lockTransactionHash.value) {
+      lockId.value = element.args.lockID;
+      return true;
+    }
+    return false;
+  });
 
-  lastWalletTransactions.value =
-    await blockchain.listTransactionByWalletAddress(
-      walletAddress.value.toLowerCase()
+  if (findLockId) {
+    console.log(
+      pixTarget.value,
+      String(tokenAmount.value),
+      Number(e2eId),
+      lockId.value
     );
 
-  loadingRelease.value = false
+    const release = await blockchain.releaseLock(
+      pixTarget.value,
+      String(tokenAmount.value),
+      Number(e2eId),
+      lockId.value
+    );
+    release.wait();
+
+    lastWalletTransactions.value =
+      await blockchain.listTransactionByWalletAddress(
+        walletAddress.value.toLowerCase()
+      );
+
+    console.log(tokenAmount);
+
+    loadingRelease.value = false;
+  }
 };
 </script>
 
@@ -112,7 +113,11 @@ const releaseTransaction = async ({ e2eId }: any) => {
     />
   </div>
   <div v-if="flowStep == Step.List">
-    <ListComponent v-if="!loadingRelease" :tokenAmount="tokenAmount" :last-wallet-transactions="lastWalletTransactions" />
+    <ListComponent
+      v-if="!loadingRelease"
+      :tokenAmount="tokenAmount"
+      :last-wallet-transactions="lastWalletTransactions"
+    />
     <ValidationComponent
       v-if="loadingRelease"
       :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"