emit e2eid from buy step to home view

src/components/ListComponent.vue

@@ -1,23 +1,17 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton.vue";
 import { useEtherStore } from "@/store/ether";
-import { storeToRefs } from "pinia";
 import blockchain from "../utils/blockchain";
-// Store reference
-const etherStore = useEtherStore();
-
-const { walletAddress } = storeToRefs(etherStore);
-
-const lastDeposits = await blockchain.listTransactionByWalletAddress(walletAddress.value.toLowerCase())
-
-const openEtherscanUrl = (url: string) => {
-  window.open(url, "_blank")
-}
 
+// props and store references
 const props = defineProps({
+  lastWalletTransactions: Array,
   tokenAmmount: Number,
 });
 
+const openEtherscanUrl = (url: string) => {
+  window.open(url, "_blank");
+};
 </script>
 
 <template>
@@ -34,7 +28,7 @@ const props = defineProps({
       >
         <div>
           <p>Tokens recebidos</p>
-          <p class="text-2xl text-gray-900">{{props.tokenAmmount}} BRZ</p>
+          <p class="text-2xl text-gray-900">{{ props.tokenAmmount }} BRZ</p>
         </div>
         <div class="my-5">
           <p>
@@ -70,23 +64,46 @@ const props = defineProps({
       </span>
     </div>
     <div class="blur-container">
-      <div class="flex flex-row justify-between w-full bg-white p-5 rounded-lg" v-for="deposit in lastDeposits" :key="deposit?.blockNumber">
-        <p class="last-deposit-info">{{blockchain.formatBigNumber(deposit?.args.amount)}} BRZ</p>
-        <p class="last-deposit-info">{{deposit?.event == 'DepositAdded' ? 'Depósito' : deposit?.event == 'LockAdded' ? 'Reserva' : 'Compra'}}</p>
-        <div class="flex gap-2 cursor-pointer items-center" @click="openEtherscanUrl(`https://etherscan.io/tx/${deposit?.transactionHash}`)">
+      <div
+        class="flex flex-row justify-between w-full bg-white p-5 rounded-lg"
+        v-for="deposit in lastWalletTransactions"
+        :key="deposit?.blockNumber"
+      >
+        <p class="last-deposit-info">
+          {{ blockchain.formatBigNumber(deposit?.args.amount) }} BRZ
+        </p>
+        <p class="last-deposit-info">
+          {{
+            deposit?.event == "DepositAdded"
+              ? "Depósito"
+              : deposit?.event == "LockAdded"
+              ? "Reserva"
+              : "Compra"
+          }}
+        </p>
+        <div
+          class="flex gap-2 cursor-pointer items-center"
+          @click="
+            openEtherscanUrl(
+              `https://etherscan.io/tx/${deposit?.transactionHash}`
+            )
+          "
+        >
           <p class="last-deposit-info">Etherscan</p>
-          <img alt="Redirect image" src="@/assets/redirect.svg"/>
+          <img alt="Redirect image" src="@/assets/redirect.svg" />
         </div>
       </div>
       <button
         type="button"
         class="text-white mt-2"
         @click="() => {}"
-        v-if="(lastDeposits?.length != 0)"
+        v-if="lastWalletTransactions?.length != 0"
       >
         Carregar mais
       </button>
-      <p class="font-bold" v-if="(lastDeposits?.length == 0)">Não há nenhuma transação anterior</p>
+      <p class="font-bold" v-if="lastWalletTransactions?.length == 0">
+        Não há nenhuma transação anterior
+      </p>
     </div>
   </div>
 </template>
@@ -97,7 +114,7 @@ const props = defineProps({
 }
 
 p {
-  @apply text-gray-900
+  @apply text-gray-900;
 }
 
 .text-container {
@@ -115,8 +132,8 @@ p {
   @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
 }
 
-.last-deposit-info{
-  @apply font-medium text-base
+.last-deposit-info {
+  @apply font-medium text-base;
 }
 
 input[type="number"] {

src/components/QrCodeComponent.vue

@@ -5,6 +5,7 @@ import { debounce } from "@/utils/debounce";
 import CustomButton from "./CustomButton.vue";
 import api from "../services/index";
 
+// props and store references
 const props = defineProps({
   pixTarget: String,
   tokenValue: Number,
@@ -12,13 +13,17 @@ const props = defineProps({
 
 const qrCode = ref<string>("");
 const qrCodePayload = ref<string>("");
+const isPixValid = ref<boolean>(false);
+const isCodeInputEmpty = ref<boolean>(true);
+const e2eId = ref<string>("");
+
+// Emits
+const emit = defineEmits(["pixValidated"]);
+
 const pixQrCode = pix({
   pixKey: props.pixTarget ?? "",
   value: props.tokenValue,
 });
-const isPixValid = ref<boolean>(false);
-const isCodeInputEmpty = ref<boolean>(true);
-
 pixQrCode.base64QrCode().then((code: string) => {
   qrCode.value = code;
 });
@@ -27,12 +32,12 @@ qrCodePayload.value = pixQrCode.payload();
 
 const handleInputEvent = (event: any) => {
   const { value } = event.target;
-
-  validatePix(value);
+  e2eId.value = value;
+  validatePix();
 };
 
-const validatePix = async (e2eid: any) => {
-  if (e2eid == "") {
+const validatePix = async () => {
+  if (e2eId.value == "") {
     isPixValid.value = false;
     isCodeInputEmpty.value = true;
     return;
@@ -42,7 +47,7 @@ const validatePix = async (e2eid: any) => {
 
   if (sellerPixKey && transactionValue) {
     var body_req = {
-      e2e_id: e2eid,
+      e2e_id: e2eId.value,
       pix_key: sellerPixKey,
       pix_value: transactionValue,
     };
@@ -64,6 +69,7 @@ const validatePix = async (e2eid: any) => {
 
 <template>
   <div class="page">
+    <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
@@ -141,6 +147,7 @@ const validatePix = async (e2eid: any) => {
       <CustomButton
         :is-disabled="isPixValid == false"
         :text="'Enviar para a rede'"
+        @button-clicked="emit('pixValidated', e2eId)"
       />
     </div>
   </div>

src/utils/blockchain.ts

@@ -222,6 +222,7 @@ const addLock = async (depositId: Number, amount: Number) => {
   lock.wait();
 
   updateLockAddedEvents();
+  return lock;
 };
 
 // Get specific lock data by its ID
@@ -270,6 +271,7 @@ const releaseLock = async (
   release.wait();
 
   updateLockReleasedEvents();
+  return release
 };
 
 // Formatting methods

src/views/HomeView.vue

@@ -21,10 +21,11 @@ enum Step {
 
 // States
 const etherStore = useEtherStore();
-const { loadingLock, walletAddress } = storeToRefs(etherStore);
+const { loadingLock, walletAddress, locksAddedList } = storeToRefs(etherStore);
 const flowStep = ref<Step>(Step.Search);
 const pixTarget = ref<string>("");
-const tokenAmmount = ref<number>();
+const tokenAmount = ref<number>();
+const lockTransactionHash = ref<string>("");
 const loadingRelease = ref<Boolean>(false);
 const lastWalletTransactions = ref<any[] | undefined>([]);
 
@@ -36,7 +37,7 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   await blockchain
     .mapDeposits(depositId)
     .then((deposit) => (depositDetail = deposit));
-  tokenAmmount.value = tokenValue;
+  tokenAmount.value = tokenValue;
   pixTarget.value = depositDetail?.pixTarget;
 
   // Makes lock with deposit ID and the Amount
@@ -44,7 +45,12 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
     flowStep.value = Step.Buy;
     etherStore.setLoadingLock(true);
 
-    await blockchain.addLock(depositId, tokenValue).catch(() => {
+    await blockchain.addLock(depositId, tokenValue)
+    .then((lock) => {
+      console.log(lock)
+      lockTransactionHash.value = lock.hash
+    })
+    .catch(() => {
       flowStep.value = Step.Search;
     });
 
@@ -67,17 +73,24 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   }
 };
 
-const releaseTransaction = async ({ pixE2Eid }: any) => {
-  console.log("release: ", pixE2Eid);
+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);
 
   lastWalletTransactions.value =
     await blockchain.listTransactionByWalletAddress(
       walletAddress.value.toLowerCase()
     );
 
-  setTimeout(() => (loadingRelease.value = false), 2000);
+  loadingRelease.value = false
 };
 </script>
 
@@ -89,7 +102,7 @@ const releaseTransaction = async ({ pixE2Eid }: any) => {
   <div v-if="flowStep == Step.Buy">
     <QrCodeComponent
       :pixTarget="pixTarget"
-      :tokenValue="tokenAmmount"
+      :tokenValue="tokenAmount"
       @pix-validated="releaseTransaction"
       v-if="!loadingLock"
     />
@@ -99,7 +112,7 @@ const releaseTransaction = async ({ pixE2Eid }: any) => {
     />
   </div>
   <div v-if="flowStep == Step.List">
-    <ListComponent v-if="!loadingRelease" :tokenAmmount="tokenAmmount" />
+    <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.'"