feat: adding steps to home view to change from search to buy component

src/views/HomeView.vue

@@ -2,29 +2,49 @@
 import SearchComponent from "../components/SearchComponent.vue";
 import ValidationComponent from "../components/ValidationComponent.vue";
 import blockchain from "../utils/blockchain";
+import { ref } from "vue";
 
 // (TO DO) Tirar isso tudo daqui
 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 { storeToRefs } from "pinia";
+
+
+enum Step {
+  Search,
+  Buy
+}
+
+// States
+const etherStore = useEtherStore();
+const { loadingLock } = storeToRefs(etherStore);
+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"]
   await blockchain
-    .mapDeposits(selectedDeposit["args"]["depositID"])
+    .mapDeposits(depositId)
     .then((deposit) => (depositDetail = deposit));
   console.log(tokenValue);
   console.log(depositDetail);
 
   // Makes lock with deposit ID and the Amount
   if (depositDetail) {
+    flowStep.value = Step.Buy
+    etherStore.setLoadingLock(true);
     const lock = await blockchain.addLock(
-      depositDetail.args.depositID,
+      depositId,
       tokenValue
-    );
+    ).catch((_error) => {
+      flowStep.value = Step.Search
+    })
+
     console.log(lock);
 
     // (TO DO) Tirar isso daqui
@@ -34,11 +54,11 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
     if (!connection) return;
     provider = new ethers.providers.Web3Provider(connection);
     const signer = provider.getSigner();
-    const etherStore = useEtherStore();
     const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
     const filterLocks = p2pContract.filters.LockAdded(null);
     const eventsLocks = await p2pContract.queryFilter(filterLocks);
     etherStore.setLocksAddedList(eventsLocks);
+    etherStore.setLoadingLock(false);
 
     // Data to QRCode
     // Chave Pix = depositDetail.pixTarget
@@ -48,8 +68,11 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
 </script>
 
 <template>
-  <!-- <SearchComponent @token-buy="confirmBuyClick" /> -->
-  <ValidationComponent />
+  <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>
 
 <style scoped></style>