Adjust search component and home view to new approaching using alchemy

Co-authored-by: brunoedcf <brest.dallacosta@outlook.com>

src/blockchain/events.ts

@@ -1,14 +1,13 @@
 import { useEtherStore } from "@/store/ether";
 import { Contract, ethers } from "ethers";
 
-import { mapDeposits } from "./sellerMethods";
-
 import p2pix from "../utils/smart_contract_files/P2PIX.json";
 import { formatEther } from "ethers/lib/utils";
 import { getProvider } from "./provider";
 import { getP2PixAddress } from "./addresses";
 
 const getNetworksLiquidity = async () => {
+  const etherStore = useEtherStore();
   console.log("Loading events");
 
   const goerliProvider = new ethers.providers.JsonRpcProvider(
@@ -31,10 +30,9 @@ const getNetworksLiquidity = async () => {
     mumbaiProvider
   );
 
-  const depositListGoerli = await getValidDeposits(p2pContractGoerli)
-  const depositListMumbai = await getValidDeposits(p2pContractMumbai)
+  const depositListGoerli = await getValidDeposits(p2pContractGoerli);
 
-  const etherStore = useEtherStore();
+  const depositListMumbai = await getValidDeposits(p2pContractMumbai);
 
   etherStore.setDepositsValidListGoerli(depositListGoerli);
   console.log(depositListGoerli);
@@ -43,7 +41,7 @@ const getNetworksLiquidity = async () => {
   console.log(depositListMumbai);
 };
 
-const getValidDeposits = async (contract?: Contract): Promise<any[]> => {
+const getValidDeposits = async ( contract?: Contract ): Promise<any[]> => {
   let p2pContract: Contract;
 
   if (contract){
@@ -62,7 +60,7 @@ const getValidDeposits = async (contract?: Contract): Promise<any[]> => {
   const depositList: any[] = await Promise.all(
     eventsDeposits
       .map(async (deposit) => {
-        const mappedDeposit = await mapDeposits(deposit.args?.depositID);
+        const mappedDeposit = await p2pContract.mapDeposits(deposit.args?.depositID);
         let validDeposit = {};
 
         if (mappedDeposit.valid) {
@@ -71,7 +69,7 @@ const getValidDeposits = async (contract?: Contract): Promise<any[]> => {
             depositID: deposit.args?.depositID,
             remaining: formatEther(mappedDeposit.remaining),
             seller: mappedDeposit.seller,
-            pixKey: mappedDeposit.pixTarget,
+            pixKey: mappedDeposit.pixTarget
           };
         }
 

src/components/SearchComponent.vue

@@ -1,22 +1,26 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import CustomButton from "../components/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import { connectProvider } from "@/blockchain/provider";
+import { verifyNetworkLiquidity } from "@/utils/networkLiquidity";
+import { NetworkEnum } from "@/model/NetworkEnum";
 
 // Store reference
 const etherStore = useEtherStore();
 
-const { walletAddress, depositsValidListGoerli } = storeToRefs(etherStore);
+const { walletAddress, networkName, depositsValidListGoerli, depositsValidListMumbai } = storeToRefs(etherStore);
 
 // Reactive state
 const tokenValue = ref(0);
-const enableSelectButton = ref(false);
+const enableConfirmButton = ref(false);
+const enableWalletButton = ref(false);
 const hasLiquidity = ref(true);
 const validDecimals = ref(true);
-const selectedDeposit = ref();
+const selectedGoerliDeposit = ref();
+const selectedMumbaiDeposit = ref();
 
 // Emits
 const emit = defineEmits(["tokenBuy"]);
@@ -24,9 +28,15 @@ const emit = defineEmits(["tokenBuy"]);
 // Blockchain methods
 const connectAccount = async () => {
   await connectProvider();
-  verifyLiquidity();
+
+  enableOrDisableConfirmButton();
 };
 
+const emitConfirmButton = () => {
+  const selectedDeposit = networkName.value == NetworkEnum.ethereum ? selectedGoerliDeposit.value : selectedMumbaiDeposit.value;
+  emit('tokenBuy', selectedDeposit, tokenValue.value)
+}
+
 // Debounce methods
 const handleInputEvent = (event: any) => {
   const { value } = event.target;
@@ -35,7 +45,7 @@ const handleInputEvent = (event: any) => {
 
   if (decimalCount(tokenValue.value) > 2) {
     validDecimals.value = false;
-    enableSelectButton.value = false;
+    enableConfirmButton.value = false;
     return;
   }
   validDecimals.value = true;
@@ -55,29 +65,41 @@ const decimalCount = (num: Number) => {
 
 // Verify if there is a valid deposit to buy
 const verifyLiquidity = () => {
-  enableSelectButton.value = false;
-  selectedDeposit.value = null;
-  if (!walletAddress.value || tokenValue.value <= 0) return;
+  enableConfirmButton.value = false;
+  selectedGoerliDeposit.value = null;
+  selectedMumbaiDeposit.value = null;
 
-  depositsValidListGoerli.value.find((element) => {
-    const remaining = element.remaining;
-    if (
-      tokenValue.value!! <= remaining &&
-      tokenValue.value!! != 0 &&
-      element.seller !== walletAddress.value
-    ) {
-      enableSelectButton.value = true;
-      hasLiquidity.value = true;
-      selectedDeposit.value = element;
-      return true;
-    }
-    return false;
-  });
+  if (tokenValue.value <= 0) {
+    enableWalletButton.value = false;
+    return;
+  }
 
-  if (!enableSelectButton.value) {
+  selectedGoerliDeposit.value = verifyNetworkLiquidity(tokenValue.value, walletAddress.value, depositsValidListGoerli.value);
+  selectedMumbaiDeposit.value = verifyNetworkLiquidity(tokenValue.value, walletAddress.value, depositsValidListMumbai.value);
+
+  enableOrDisableConfirmButton()
+  if(selectedGoerliDeposit.value || selectedMumbaiDeposit.value){
+    hasLiquidity.value = true;
+    enableWalletButton.value = true;
+  }
+  else{
     hasLiquidity.value = false;
+    enableWalletButton.value = true;
   }
 };
+
+const enableOrDisableConfirmButton = (): void => {
+  if(selectedGoerliDeposit.value && networkName.value == NetworkEnum.ethereum)
+    enableConfirmButton.value = true;
+  if(selectedMumbaiDeposit.value && networkName.value == NetworkEnum.polygon)
+    enableConfirmButton.value = true;
+  else
+    enableConfirmButton.value = false;
+}
+
+watch(networkName, async () => {
+  enableOrDisableConfirmButton()
+});
 </script>
 
 <template>
@@ -126,12 +148,14 @@ const verifyLiquidity = () => {
               src="@/assets/polygon.svg"
               width="24"
               height="24"
+              v-if="selectedMumbaiDeposit"
             />
             <img
               alt="Ethereum image"
               src="@/assets/ethereum.svg"
               width="24"
               height="24"
+              v-if="selectedGoerliDeposit"
             />
           </div>
         </div>
@@ -149,13 +173,14 @@ const verifyLiquidity = () => {
       <CustomButton
         v-if="!walletAddress"
         :text="'Conectar carteira'"
+        :is-disabled="!enableWalletButton"
         @buttonClicked="connectAccount()"
       />
       <CustomButton
         v-if="walletAddress"
         :text="'Confirmar compra'"
-        :is-disabled="!enableSelectButton"
-        @buttonClicked="emit('tokenBuy', { selectedDeposit, tokenValue })"
+        :is-disabled="!enableConfirmButton"
+        @buttonClicked="emitConfirmButton()"
       />
     </div>
   </div>

src/views/HomeView.vue

@@ -3,7 +3,7 @@ import SearchComponent from "../components/SearchComponent.vue";
 import ValidationComponent from "../components/LoadingComponent.vue";
 import BuyConfirmedComponent from "@/components/BuyConfirmedComponent.vue";
 import blockchain from "../utils/blockchain";
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 
 import { useEtherStore } from "@/store/ether";
 import QrCodeComponent from "../components/QrCodeComponent.vue";
@@ -11,7 +11,6 @@ import { storeToRefs } from "pinia";
 import { addLock, releaseLock } from "@/blockchain/buyerMethods";
 import { updateWalletStatus } from "@/blockchain/wallet";
 import { getNetworksLiquidity } from "@/blockchain/events";
-
 enum Step {
   Search,
   Buy,
@@ -20,7 +19,6 @@ enum Step {
 
 const etherStore = useEtherStore();
 etherStore.setSellerView(false);
-getNetworksLiquidity();
 
 // States
 const { loadingLock, walletAddress, locksAddedList } = storeToRefs(etherStore);
@@ -32,23 +30,22 @@ const lockId = ref<string>("");
 const loadingRelease = ref<Boolean>(false);
 const lastWalletReleaseTransactions = ref<any[]>([]);
 
-const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
+const confirmBuyClick = async (selectedDeposit: any, tokenValue: number) => {
   // finish buy screen
-  const depositDetail = selectedDeposit;
-  const depositId = selectedDeposit.depositID;
   pixTarget.value = selectedDeposit.pixKey;
   tokenAmount.value = tokenValue;
 
   // Makes lock with deposit ID and the Amount
-  if (depositDetail) {
+  if (selectedDeposit) {
     flowStep.value = Step.Buy;
     etherStore.setLoadingLock(true);
 
-    await addLock(depositId, tokenValue)
+    await addLock(selectedDeposit.depositID, tokenValue)
       .then((lock) => {
         lockTransactionHash.value = lock.transactionHash;
       })
-      .catch(() => {
+      .catch((err) => {
+        console.log(err)
         flowStep.value = Step.Search;
       });
 
@@ -88,6 +85,11 @@ const releaseTransaction = async ({ e2eId }: any) => {
     loadingRelease.value = false;
   }
 };
+
+
+onMounted(async () => {
+  await getNetworksLiquidity();
+})
 </script>
 
 <template>