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

src/components/SearchComponent.vue

@@ -56,7 +56,6 @@ const decimalCount = (num: Number) => {
 const verifyLiquidity = () => {
   enableSelectButton.value = false;
   selectedDeposit.value = null;
-
   if (!walletAddress.value || tokenValue.value <= 0) return;
 
   depositsAddedList.value.find((element) => {
@@ -69,10 +68,6 @@ const verifyLiquidity = () => {
       enableSelectButton.value = true;
       hasLiquidity.value = true;
       selectedDeposit.value = element;
-      console.log(
-        "Selected is :",
-        blockchain.formatBigNumber(element.args.amount)
-      );
       return true;
     }
     return false;

src/store/ether.ts

@@ -4,14 +4,15 @@ export const useEtherStore = defineStore("ether", {
   state: () => ({
     walletAddress: "",
     balance: "",
+    loadingLock: false,
     // Depósitos válidos para compra
-    depositsValidList: [{}],
+    depositsValidList: [] as any[],
     // Depósitos adicionados na blockchain
-    depositsAddedList: [{}],
+    depositsAddedList: [] as any[],
     // Depósitos expirados na blockchain
-    depositsExpiredList: [{}],
+    depositsExpiredList: [] as any[],
     // Locks adicionados na blockchain
-    locksAddedList: [{}],
+    locksAddedList: [] as any[],
   }),
   actions: {
     setWalletAddress(walletAddress: string) {
@@ -20,6 +21,9 @@ export const useEtherStore = defineStore("ether", {
     setBalance(balance: string) {
       this.balance = balance;
     },
+    setLoadingLock(isLoadingLock: boolean) {
+      this.loadingLock = isLoadingLock;
+    },
     setDepositsValidList(depositsValidList: any[]) {
       this.depositsValidList = depositsValidList;
     },

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>

src/views/MockView.vue

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