Integrate and componentize QRCode screen

src/components/QrCodeForm.vue

@@ -2,13 +2,20 @@
 import { pix } from "../utils/QrCodePix";
 import { ref } from "vue";
 import { debounce } from "@/utils/debounce";
-import CustomButton from "../components/CustomButton.vue";
+import CustomButton from "./CustomButton.vue";
+
+const props = defineProps({
+  pixTarget: String,
+  tokenValue: Number,
+});
+
+console.log(props.tokenValue);
 
 const qrCode = ref<string>("");
 const qrCodePayload = ref<string>("");
 const pixQrCode = pix({
-  pixKey: "key_test123456789",
+  pixKey: props.pixTarget,
-  value: 100,
+  value: props.tokenValue,
 });
 const pixIsValid = ref<number>(0);
 const stateButton = ref(false);
@@ -36,7 +43,6 @@ const validatePix = (value: any) => {
   }
 };
 
-console.log(pixIsValid.value, stateButton.value)
 </script>
 
 <template>
@@ -59,7 +65,7 @@ console.log(pixIsValid.value, stateButton.value)
         <img :src="qrCode" class="w-48 h-48" />
         <span class="text-center font-bold">Código pix</span>
         <span class="text-center text-xs">
-          c02942far7047f6shri5ifh371908973
+          {{ pixTarget }}
         </span>
         <img
           alt="Copy PIX code"

src/router/index.ts

@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
-import QrCodeFormVue from "../views/QrCodeForm.vue";
 import MockView from "../views/MockView.vue";
 
 const router = createRouter({
@@ -11,11 +10,6 @@ const router = createRouter({
       name: "home",
       component: HomeView,
     },
-    {
-      path: "/pix",
-      name: "pix",
-      component: QrCodeFormVue,
-    },
     {
       path: "/mock",
       name: "mock",

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 "./QrCodeForm.vue";
+import QrCodeForm from "../components/QrCodeForm.vue";
 import { storeToRefs } from "pinia";
 
 
@@ -21,7 +21,9 @@ enum Step {
 // States
 const etherStore = useEtherStore();
 const { loadingLock } = storeToRefs(etherStore);
-const flowStep = ref<Step>(Step.Search)
+const flowStep = ref<Step>(Step.Search);
+const pixTarget = ref<string>("");
+const tokens = ref<number>();
 
 const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   // finish buy screen
@@ -33,6 +35,8 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
     .then((deposit) => (depositDetail = deposit));
   console.log(tokenValue);
   console.log(depositDetail);
+  tokens.value = tokenValue;
+  pixTarget.value = depositDetail?.pixTarget;
 
   // Makes lock with deposit ID and the Amount
   if (depositDetail) {
@@ -70,7 +74,11 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
 <template>
   <SearchComponent v-if="(flowStep == Step.Search)" @token-buy="confirmBuyClick" />
   <div v-if="(flowStep == Step.Buy)">
-    <QrCodeForm v-if="!loadingLock"/>
+    <QrCodeForm
+      :pixTarget="pixTarget"
+      :tokenValue="tokens"
+      v-if="!loadingLock"
+    />
     <ValidationComponent v-if="loadingLock"/>
   </div>
 </template>