feat: return a promise with lock deposit when locking a deposit

src/components/ValidationComponent.vue

@@ -1,6 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts"></script>
-
-</script>
 <template>
   <div class="page">
     <div class="text-container">

src/utils/blockchain.ts

@@ -174,6 +174,7 @@ const addLock = async (depositId: Number, amount: Number) => {
   const filterLocks = p2pContract.filters.LockAdded(null);
   const eventsLocks = await p2pContract.queryFilter(filterLocks);
   etherStore.setLocksAddedList(eventsLocks);
+  return eventsLocks.pop();
 };
 
 // Get specific lock data by its ID

src/views/HomeView.vue

@@ -12,22 +12,21 @@ import { ethers } from "ethers";
 import QrCodeForm from "./QrCodeForm.vue";
 import { storeToRefs } from "pinia";
 
-
 enum Step {
   Search,
-  Buy
+  Buy,
 }
 
 // States
 const etherStore = useEtherStore();
 const { loadingLock } = storeToRefs(etherStore);
-const flowStep = ref<Step>(Step.Search)
+const flowStep = ref<Step>(Step.Search);
 
 const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   // finish buy screen
   console.log(selectedDeposit);
   let depositDetail;
-  const depositId = selectedDeposit["args"]["depositID"]
+  const depositId = selectedDeposit["args"]["depositID"];
   await blockchain
     .mapDeposits(depositId)
     .then((deposit) => (depositDetail = deposit));
@@ -36,16 +35,12 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
 
   // Makes lock with deposit ID and the Amount
   if (depositDetail) {
-    flowStep.value = Step.Buy
+    flowStep.value = Step.Buy;
     etherStore.setLoadingLock(true);
-    const lock = await blockchain.addLock(
-      depositId,
-      tokenValue
-    ).catch((_error) => {
-      flowStep.value = Step.Search
-    })
 
-    console.log(lock);
+    await blockchain.addLock(depositId, tokenValue).catch((_error) => {
+      flowStep.value = Step.Search;
+    });
 
     // (TO DO) Tirar isso daqui
     const window_ = window as any;
@@ -68,10 +63,13 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
 </script>
 
 <template>
-  <SearchComponent v-if="(flowStep == Step.Search)" @token-buy="confirmBuyClick" />
+  <SearchComponent
-  <div v-if="(flowStep == Step.Buy)">
+    v-if="flowStep == Step.Search"
-    <QrCodeForm v-if="!loadingLock"/>
+    @token-buy="confirmBuyClick"
-    <ValidationComponent v-if="loadingLock"/>
+  />
+  <div v-if="flowStep == Step.Buy">
+    <QrCodeForm v-if="!loadingLock" />
+    <ValidationComponent v-if="loadingLock" />
   </div>
 </template>
 

src/views/MockView.vue

@@ -54,7 +54,7 @@ const mapLock = (lockId: string) => {
   blockchain.mapLocks(lockId);
 };
 
-console.log(depositsAddedList)
+console.log(depositsAddedList);
 </script>
 
 <template>

src/views/QrCodeForm.vue

@@ -64,18 +64,17 @@ const submit = () => {
     </h4>
     <div class="white-box-content">
       <div class="black-box-content"></div>
-      <span class="text-center">
+      <span class="text-center"> Código pix </span>
-        Código pix
+      <span2 class="text-center"> c02942far7047f6shri5ifh371908973 </span2>
-      </span>
-      <span2 class="text-center">
-        c02942far7047f6shri5ifh371908973
-      </span2>
       <span3 class="text-center">
-        <strong>ATENÇÃO!</strong> A transação só será processada após inserir o código de autenticação. Caso contrário não conseguiremos comprovar o seu depósito e não será possível transferir os tokens para sua carteira. Confira aqui como encontrar o código no comprovante.
+        <strong>ATENÇÃO!</strong> A transação só será processada após inserir o
+        código de autenticação. Caso contrário não conseguiremos comprovar o seu
+        depósito e não será possível transferir os tokens para sua carteira.
+        Confira aqui como encontrar o código no comprovante.
       </span3>
     </div>
     <div class="white-box-content2">
-      <input type="text" placeholder="Digite o código do comprovante PIX">
+      <input type="text" placeholder="Digite o código do comprovante PIX" />
     </div>
     <button type="button">Enviar para a rede</button>
   </div>
@@ -146,7 +145,7 @@ span3 {
 }
 
 button {
-  background-color: #FBBF24;
+  background-color: #fbbf24;
   width: 400px;
   height: 60px;
   margin-top: 0.2cm;
@@ -155,14 +154,15 @@ button {
 
 input {
   background-color: #f9f8f8;
-  padding:3px;
+  padding: 3px;
   width: 350px;
   align-items: center;
   margin-bottom: 3cm;
 }
 
-::placeholder { /* Most modern browsers support this now. */
+::placeholder {
-   color:    #9CA3AF;
+  /* Most modern browsers support this now. */
+  color: #9ca3af;
 }
 
 h4 {
@@ -171,7 +171,7 @@ h4 {
 }
 
 h2 {
-  color: #080808
+  color: #080808;
 }
 
 .form-input {