From 5192bfba0626fc87adc736c68209c8c6fc45d003 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Mon, 5 Dec 2022 14:07:39 -0300
Subject: [PATCH] feat: return a promise with lock deposit when locking a
 deposit

---
 src/components/ValidationComponent.vue |  4 +---
 src/utils/blockchain.ts                |  1 +
 src/views/HomeView.vue                 | 30 ++++++++++++--------------
 src/views/MockView.vue                 |  2 +-
 src/views/QrCodeForm.vue               | 30 +++++++++++++-------------
 5 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/src/components/ValidationComponent.vue b/src/components/ValidationComponent.vue
index c809a30..a40a2c7 100644
--- a/src/components/ValidationComponent.vue
+++ b/src/components/ValidationComponent.vue
@@ -1,6 +1,4 @@
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 <template>
   <div class="page">
     <div class="text-container">
diff --git a/src/utils/blockchain.ts b/src/utils/blockchain.ts
index 246f8b6..2b188fd 100644
--- a/src/utils/blockchain.ts
+++ b/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
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ff966dc..b42e855 100644
--- a/src/views/HomeView.vue
+++ b/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" />
-  <div v-if="(flowStep == Step.Buy)">
-    <QrCodeForm v-if="!loadingLock"/>
-    <ValidationComponent v-if="loadingLock"/>
+  <SearchComponent
+    v-if="flowStep == Step.Search"
+    @token-buy="confirmBuyClick"
+  />
+  <div v-if="flowStep == Step.Buy">
+    <QrCodeForm v-if="!loadingLock" />
+    <ValidationComponent v-if="loadingLock" />
   </div>
 </template>
 
diff --git a/src/views/MockView.vue b/src/views/MockView.vue
index 1368469..0be889f 100644
--- a/src/views/MockView.vue
+++ b/src/views/MockView.vue
@@ -54,7 +54,7 @@ const mapLock = (lockId: string) => {
   blockchain.mapLocks(lockId);
 };
 
-console.log(depositsAddedList)
+console.log(depositsAddedList);
 </script>
 
 <template>
diff --git a/src/views/QrCodeForm.vue b/src/views/QrCodeForm.vue
index e381257..817baf6 100644
--- a/src/views/QrCodeForm.vue
+++ b/src/views/QrCodeForm.vue
@@ -51,10 +51,10 @@ const submit = () => {
 <template>
   <div class="content">
     <h2 class="text-center font-bold text-emerald-50 text-2xl">
-        Utilize o QR Code ou copie o código
+      Utilize o QR Code ou copie o código
     </h2>
     <h2 class="text-center font-bold text-emerald-50 text-2xl">
-        para realizar o Pix
+      para realizar o Pix
     </h2>
     <h4 class="text-center">
       Após realizar o Pix no banco de sua preferência, insira o código de
@@ -64,18 +64,17 @@ const submit = () => {
     </h4>
     <div class="white-box-content">
       <div class="black-box-content"></div>
-      <span class="text-center">
-        Código pix
-      </span>
-      <span2 class="text-center">
-        c02942far7047f6shri5ifh371908973
-      </span2>
+      <span class="text-center"> Código pix </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. */
-   color:    #9CA3AF;
+::placeholder {
+  /* Most modern browsers support this now. */
+  color: #9ca3af;
 }
 
 h4 {
@@ -171,7 +171,7 @@ h4 {
 }
 
 h2 {
-  color: #080808
+  color: #080808;
 }
 
 .form-input {