From 86ee697b14060374a774abd04ae576a01a122b6c Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Mon, 12 Dec 2022 14:21:50 -0300
Subject: [PATCH] Rename QrCode file name and show qrCodePayload instead of
 pixTarget below QrCode img

---
 .../{QrCodeForm.vue => QrCodeComponent.vue}          | 12 ++++++++----
 src/views/HomeView.vue                               |  6 +++---
 2 files changed, 11 insertions(+), 7 deletions(-)
 rename src/components/{QrCodeForm.vue => QrCodeComponent.vue} (96%)

diff --git a/src/components/QrCodeForm.vue b/src/components/QrCodeComponent.vue
similarity index 96%
rename from src/components/QrCodeForm.vue
rename to src/components/QrCodeComponent.vue
index 290df10..470ade8 100644
--- a/src/components/QrCodeForm.vue
+++ b/src/components/QrCodeComponent.vue
@@ -24,6 +24,8 @@ pixQrCode.base64QrCode().then((code: string) => {
 
 qrCodePayload.value = pixQrCode.payload();
 
+console.log(qrCodePayload);
+
 const handleInputEvent = (event: any) => {
   const { value } = event.target;
 
@@ -73,13 +75,15 @@ const validatePix = async (e2eid: any) => {
     </div>
     <div class="blur-container max-w-[28rem] text-black">
       <div
-        class="flex-col items-center justify-center flex w-full bg-white p-8 rounded-lg"
+        class="flex-col items-center justify-center flex w-full bg-white p-8 rounded-lg break-normal"
       >
         <img :src="qrCode" class="w-48 h-48" />
         <span class="text-center font-bold">Código pix</span>
-        <span class="text-center text-xs">
-          {{ pixTarget }}
-        </span>
+        <div class="break-words w-4/5">
+          <span class="text-center text-xs">
+            {{ qrCodePayload }}
+          </span>
+        </div>
         <img
           alt="Copy PIX code"
           src="@/assets/copyPix.svg"
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index de35dd6..5dcb4c2 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -9,7 +9,7 @@ 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 QrCodeForm from "../components/QrCodeForm.vue";
+import QrCodeComponent from "../components/QrCodeComponent.vue";
 import { storeToRefs } from "pinia";
 
 enum Step {
@@ -33,7 +33,7 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
     .mapDeposits(depositId)
     .then((deposit) => (depositDetail = deposit));
   console.log(tokenValue);
-  console.log(depositDetail);
+  console.log('aqui', depositDetail);
   tokens.value = tokenValue;
   pixTarget.value = depositDetail?.pixTarget;
 
@@ -69,7 +69,7 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
 <template>
   <SearchComponent v-if="(flowStep == Step.Search)" @token-buy="confirmBuyClick" />
   <div v-if="(flowStep == Step.Buy)">
-    <QrCodeForm
+    <QrCodeComponent
       :pixTarget="pixTarget"
       :tokenValue="tokens"
       v-if="!loadingLock"