Adjust search component and home view to new approaching using alchemy
Co-authored-by: brunoedcf <brest.dallacosta@outlook.com>
This commit is contained in:
RcleydsonR
parent
2cbf475e09
commit
d78f7f1fdf
@ -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
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
if (tokenValue.value <= 0) {
|
||||
enableWalletButton.value = false;
|
||||
return;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user