remove implementation ofsearch by money and only allow to search by token ammount
This commit is contained in:
RcleydsonR
parent
f47f711bd9
commit
fc508734a2
@ -4,18 +4,18 @@ const props = defineProps({
|
||||
isDisabled: Boolean,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["clicked"]);
|
||||
const emit = defineEmits(["buttonClicked"]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="button"
|
||||
@click="emit('clicked')"
|
||||
v-bind:class="{ 'opacity-70': isDisabled }"
|
||||
:disabled="isDisabled"
|
||||
@click="emit('buttonClicked')"
|
||||
v-bind:class="{ 'opacity-70': props.isDisabled }"
|
||||
:disabled="props.isDisabled ? props.isDisabled : false"
|
||||
>
|
||||
{{ text }}
|
||||
{{ props.text }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
||||
@ -2,90 +2,85 @@
|
||||
import { ref } from "vue";
|
||||
import CustomButton from "../components/CustomButton.vue";
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import { ethers } from "ethers";
|
||||
import { useEtherStore } from "@/store/ether";
|
||||
import { storeToRefs } from "pinia";
|
||||
import blockchain from "../utils/blockchain";
|
||||
|
||||
const TAX_CONVERSION = 1.005
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
const { depositList } = storeToRefs(etherStore);
|
||||
const { walletAddress, depositList } = storeToRefs(etherStore);
|
||||
|
||||
const searchClick = () => {
|
||||
console.log("pass the deposit and token value ammount to next screen")
|
||||
};
|
||||
|
||||
const valueToToken = ref<Number>(0);
|
||||
const tokenValue = ref(0);
|
||||
const enableSelectButton = ref(false);
|
||||
const hasLiquidity = ref(true);
|
||||
const selectedDeposit = ref();
|
||||
|
||||
const valueConversion = (event: any) => {
|
||||
const { value } = event.target
|
||||
const handleInputEvent = (event: any) => {
|
||||
const { value } = event.target;
|
||||
|
||||
valueToToken.value = Number(value) / TAX_CONVERSION
|
||||
tokenValue.value = Number(value);
|
||||
verifyLiquidity();
|
||||
};
|
||||
|
||||
const verifyLiquidity = () => {
|
||||
enableSelectButton.value = false;
|
||||
selectedDeposit.value = null;
|
||||
|
||||
depositList.value.forEach((deposit) => {
|
||||
const p2pixTokenValue = blockchain.verifyDepositAmmount(deposit.args.amount);
|
||||
if (!walletAddress.value) return;
|
||||
|
||||
if(valueToToken.value!! <= Number(p2pixTokenValue) && valueToToken.value!! != 0){
|
||||
depositList.value.forEach((deposit) => {
|
||||
const p2pixTokenValue = blockchain.verifyDepositAmmount(
|
||||
deposit.args.amount
|
||||
);
|
||||
|
||||
if (
|
||||
tokenValue.value!! <= Number(p2pixTokenValue) &&
|
||||
tokenValue.value!! != 0
|
||||
) {
|
||||
enableSelectButton.value = true;
|
||||
hasLiquidity.value = true;
|
||||
selectedDeposit.value = deposit;
|
||||
return;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
if(!enableSelectButton.value){
|
||||
hasLiquidity.value = false
|
||||
if (!enableSelectButton.value) {
|
||||
hasLiquidity.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const emit = defineEmits(["tokenBuy"]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="text-container">
|
||||
<span class="text font-extrabold text-5xl max-w-[29rem]"
|
||||
>Adquira crypto com apenas um Pix</span
|
||||
>Adquira cripto com apenas um Pix</span
|
||||
>
|
||||
<span class="text font-medium text-base max-w-[28rem]"
|
||||
>Digite um valor, selecione uma oferta, conecta sua carteira e receba a
|
||||
crypto após realizar o Pix</span
|
||||
>Digite um valor, confira a oferta, conecte sua carteira e receba os
|
||||
tokens após realizar o Pix</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-1/3 mt-10"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between w-full bg-white px-8 py-5 rounded-lg border-y-10 relative gap-2"
|
||||
>
|
||||
<p class="text-xl font-normal text-gray-900" v-if="valueToToken != undefined && valueToToken != 0">R$</p>
|
||||
<input
|
||||
type="number"
|
||||
class="border-none outline-none text-lg text-gray-900 w-full"
|
||||
v-bind:class="{ 'font-semibold': valueToToken != undefined, 'text-xl': valueToToken != undefined}"
|
||||
placeholder="Digite o valor que deseja pagar"
|
||||
@input="debounce(valueConversion, 500)($event)"
|
||||
step=".01"
|
||||
/>
|
||||
<p class="text-xl font-normal text-gray-900" v-if="valueToToken == undefined || valueToToken == 0">R$</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
|
||||
>
|
||||
<div
|
||||
class="bg-emerald-400 px-3 py-2.5 rounded-lg absolute bottom-position w-8 h-8"
|
||||
>
|
||||
<img alt="Ethereum image" src="@/assets/arrow.svg"/>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between w-full items-center">
|
||||
<p class="text-3xl text-gray-900">{{valueToToken.toFixed(3)}}</p>
|
||||
<div class="flex flex-row p-2 px-3 bg-gray-300 rounded-full">
|
||||
<input
|
||||
type="number"
|
||||
class="border-none outline-none text-lg text-gray-900 w-auto"
|
||||
v-bind:class="{
|
||||
'font-semibold': tokenValue != undefined,
|
||||
'text-xl': tokenValue != undefined,
|
||||
}"
|
||||
@input="debounce(handleInputEvent, 500)($event)"
|
||||
step=".01"
|
||||
/>
|
||||
<div class="flex flex-row p-2 px-3 bg-gray-300 rounded-full w-fit">
|
||||
<img alt="Ethereum image" class="mr-3" src="@/assets/brz.svg" />
|
||||
<p class="text-gray-900 text-lg">BRZ</p>
|
||||
</div>
|
||||
@ -93,20 +88,40 @@ const valueConversion = (event: any) => {
|
||||
|
||||
<div class="custom-divide py-2"></div>
|
||||
<div class="flex justify-between pt-2" v-if="hasLiquidity">
|
||||
<p class="text-gray-500 font-normal text-sm w-fit">~ ETH 0,00 (+0,121%)</p>
|
||||
<p class="text-gray-500 font-normal text-sm w-auto">
|
||||
~ R$ {{ tokenValue.toFixed(2) }}
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<img alt="Polygon image" src="@/assets/polygon.svg" width="24px" height="24px"/>
|
||||
<img alt="Ethereum image" src="@/assets/ethereum.svg" width="24px" height="24px"/>
|
||||
<img
|
||||
alt="Polygon image"
|
||||
src="@/assets/polygon.svg"
|
||||
width="24"
|
||||
height="24"
|
||||
/>
|
||||
<img
|
||||
alt="Ethereum image"
|
||||
src="@/assets/ethereum.svg"
|
||||
width="24"
|
||||
height="24"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-2 justify-center" v-if="!hasLiquidity">
|
||||
<span class="text-red-500 font-normal text-sm">Atualmente não há liquidez nas redes para sua demanda</span>
|
||||
<span class="text-red-500 font-normal text-sm"
|
||||
>Atualmente não há liquidez nas redes para sua demanda</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<CustomButton
|
||||
:text="'Selecionar Oferta'"
|
||||
v-if="!walletAddress"
|
||||
:text="'Conectar carteira'"
|
||||
@buttonClicked="blockchain.connectProvider()"
|
||||
/>
|
||||
<CustomButton
|
||||
v-if="walletAddress"
|
||||
:text="'Confirmar compra'"
|
||||
:is-disabled="!enableSelectButton"
|
||||
@clicked="searchClick()"
|
||||
@buttonClicked="emit('tokenBuy')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -135,12 +150,12 @@ const valueConversion = (event: any) => {
|
||||
@apply text-gray-800 text-center;
|
||||
}
|
||||
|
||||
input[type='number'] {
|
||||
-moz-appearance:textfield;
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@ import mockToken from "./smart_contract_files/MockToken.json";
|
||||
import p2pix from "./smart_contract_files/P2PIX.json";
|
||||
import addresses from "./smart_contract_files/localhost.json";
|
||||
|
||||
import { wallets } from "./smart_contract_files/wallets.json"
|
||||
import { wallets } from "./smart_contract_files/wallets.json";
|
||||
|
||||
const updateWalletStatus = async (walletAddress: string) => {
|
||||
const etherStore = useEtherStore();
|
||||
@ -44,7 +44,7 @@ const connectProvider = async () => {
|
||||
const filter = p2pContract.filters.DepositAdded(null);
|
||||
const events = await p2pContract.queryFilter(filter);
|
||||
|
||||
console.log(events)
|
||||
console.log(events);
|
||||
etherStore.setDepositList(events);
|
||||
|
||||
connection.on("accountsChanged", (accounts: string[]) => {
|
||||
@ -60,12 +60,14 @@ const splitTokens = async () => {
|
||||
const signer = provider.getSigner();
|
||||
const contract = new ethers.Contract(addresses.token, mockToken.abi, signer);
|
||||
|
||||
for (var i = 0; i < wallets.length; i++){
|
||||
const tx = await contract.transfer(wallets[i], ethers.utils.parseEther("4000000.0"));
|
||||
await tx.wait()
|
||||
for (let i = 0; i < wallets.length; i++) {
|
||||
const tx = await contract.transfer(
|
||||
wallets[i],
|
||||
ethers.utils.parseEther("4000000.0")
|
||||
);
|
||||
await tx.wait();
|
||||
updateWalletStatus(etherStore.walletAddress);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const mockDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
|
||||
@ -75,16 +77,26 @@ const mockDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
|
||||
|
||||
const signer = provider.getSigner();
|
||||
|
||||
const tokenContract = new ethers.Contract(addresses.token, mockToken.abi, signer);
|
||||
const tokenContract = new ethers.Contract(
|
||||
addresses.token,
|
||||
mockToken.abi,
|
||||
signer
|
||||
);
|
||||
const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
|
||||
|
||||
// first get the approval
|
||||
const apprv = await tokenContract.approve(addresses.p2pix, ethers.utils.parseEther(tokenQty));
|
||||
const apprv = await tokenContract.approve(
|
||||
addresses.p2pix,
|
||||
ethers.utils.parseEther(tokenQty)
|
||||
);
|
||||
await apprv.wait();
|
||||
|
||||
|
||||
// deposit
|
||||
const deposit = await p2pContract.deposit(addresses.token, ethers.utils.parseEther(tokenQty), pixKey);
|
||||
const deposit = await p2pContract.deposit(
|
||||
addresses.token,
|
||||
ethers.utils.parseEther(tokenQty),
|
||||
pixKey
|
||||
);
|
||||
await deposit.wait();
|
||||
|
||||
updateWalletStatus(etherStore.walletAddress);
|
||||
@ -92,13 +104,11 @@ const mockDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
|
||||
const filter = p2pContract.filters.DepositAdded(null);
|
||||
const events = await p2pContract.queryFilter(filter);
|
||||
|
||||
console.log(events)
|
||||
console.log(events);
|
||||
|
||||
etherStore.setDepositList(events);
|
||||
|
||||
};
|
||||
|
||||
|
||||
const countDeposit = async () => {
|
||||
const provider = getProvider();
|
||||
if (!provider) return;
|
||||
@ -108,7 +118,7 @@ const countDeposit = async () => {
|
||||
|
||||
const count = await contract.depositCount();
|
||||
|
||||
console.log(Number(count))
|
||||
console.log(Number(count));
|
||||
};
|
||||
|
||||
const mapDeposits = async (depositId: BigNumber) => {
|
||||
@ -120,7 +130,7 @@ const mapDeposits = async (depositId: BigNumber) => {
|
||||
|
||||
const deposit = await contract.mapDeposits(depositId);
|
||||
|
||||
console.log(deposit)
|
||||
console.log(deposit);
|
||||
};
|
||||
|
||||
const formatEther = (balance: string) => {
|
||||
@ -129,9 +139,8 @@ const formatEther = (balance: string) => {
|
||||
};
|
||||
|
||||
const verifyDepositAmmount = (ammountBigNumber: BigNumber): string => {
|
||||
return ethers.utils.formatEther(ammountBigNumber)
|
||||
}
|
||||
|
||||
return ethers.utils.formatEther(ammountBigNumber);
|
||||
};
|
||||
|
||||
const getProvider = (): ethers.providers.Web3Provider | null => {
|
||||
const window_ = window as any;
|
||||
@ -142,4 +151,12 @@ const getProvider = (): ethers.providers.Web3Provider | null => {
|
||||
return new ethers.providers.Web3Provider(connection);
|
||||
};
|
||||
|
||||
export default { connectProvider, formatEther, splitTokens, mockDeposit, countDeposit, mapDeposits, verifyDepositAmmount };
|
||||
export default {
|
||||
connectProvider,
|
||||
formatEther,
|
||||
splitTokens,
|
||||
mockDeposit,
|
||||
countDeposit,
|
||||
mapDeposits,
|
||||
verifyDepositAmmount,
|
||||
};
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
export const debounce = (func: any, delay: number) => {
|
||||
let timer: any = null
|
||||
let timer: any = null;
|
||||
return function (this: unknown, ...args: any) {
|
||||
clearTimeout(timer)
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
func.apply(this, args)
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
func.apply(this, args);
|
||||
}, delay);
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import SearchComponent from "../components/SearchComponent.vue";
|
||||
|
||||
const confirmBuyClick = () => {
|
||||
// finish buy screen
|
||||
console.log("compra confirmada");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SearchComponent />
|
||||
<SearchComponent @token-buy="confirmBuyClick()" />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@ -7,7 +7,7 @@ import blockchain from "../utils/blockchain";
|
||||
|
||||
const etherStore = useEtherStore();
|
||||
|
||||
const { walletAddress, balance, depositList } = storeToRefs(etherStore);
|
||||
const { depositList } = storeToRefs(etherStore);
|
||||
|
||||
const depositValue = ref<Number>();
|
||||
const depositPixKey = ref<string>("");
|
||||
@ -17,7 +17,7 @@ const splitTokens = () => {
|
||||
};
|
||||
|
||||
const mockDeposit = () => {
|
||||
if(!depositValue.value || !depositPixKey.value) return;
|
||||
if (!depositValue.value || !depositPixKey.value) return;
|
||||
blockchain.mockDeposit(depositValue.value.toString(), depositPixKey.value);
|
||||
};
|
||||
|
||||
@ -25,38 +25,15 @@ const countDeposit = () => {
|
||||
blockchain.countDeposit();
|
||||
};
|
||||
|
||||
const formatWalletAddress = (): string => {
|
||||
const walletAddressLength = walletAddress.value.length;
|
||||
const initialText = walletAddress.value.substring(0, 5);
|
||||
const finalText = walletAddress.value.substring(
|
||||
walletAddressLength - 5,
|
||||
walletAddressLength - 1
|
||||
);
|
||||
return `${initialText} ... ${finalText}`;
|
||||
};
|
||||
|
||||
const mapDeposit = (depositId: BigNumber) => {
|
||||
blockchain.mapDeposits(depositId)
|
||||
}
|
||||
|
||||
const formatWalletBalance = (): string => {
|
||||
const formattedBalance = blockchain.formatEther(balance.value);
|
||||
const fixed = formattedBalance.substring(0, 8);
|
||||
|
||||
return fixed;
|
||||
blockchain.mapDeposits(depositId);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="page">
|
||||
|
||||
<div class="flex flex-col gap-4 justify-start items-start w-2/3">
|
||||
<button
|
||||
type="button"
|
||||
class="default-button"
|
||||
@click="countDeposit()"
|
||||
>
|
||||
<button type="button" class="default-button" @click="countDeposit()">
|
||||
Contar depósitos
|
||||
</button>
|
||||
|
||||
@ -75,26 +52,26 @@ const formatWalletBalance = (): string => {
|
||||
v-model="depositPixKey"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="default-button"
|
||||
@click="mockDeposit()"
|
||||
>
|
||||
<button type="button" class="default-button" @click="mockDeposit()">
|
||||
Mockar depósitos
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="default-button"
|
||||
@click="splitTokens()"
|
||||
>
|
||||
<button type="button" class="default-button" @click="splitTokens()">
|
||||
Dividir tokens
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul class="flex flex-col justify-center items-center gap-4">
|
||||
<li class="text-gray-900 font-semibold text-lg cursor-pointer border-2 border-amber-400 p-2 rounded-md bg-amber-200" v-for="deposit in depositList" :key="deposit['blockNumber']" @click="mapDeposit(deposit['args']['depositID'])">{{deposit['args']['0']}} : MRBZ {{blockchain.formatEther(deposit['args']['amount'])}} </li>
|
||||
<li
|
||||
class="text-gray-900 font-semibold text-lg cursor-pointer border-2 border-amber-400 p-2 rounded-md bg-amber-200"
|
||||
v-for="deposit in depositList"
|
||||
:key="deposit['blockNumber']"
|
||||
@click="mapDeposit(deposit['args']['depositID'])"
|
||||
>
|
||||
{{ deposit["args"]["0"] }} : MRBZ
|
||||
{{ blockchain.formatEther(deposit["args"]["amount"]) }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@ -104,22 +81,21 @@ header {
|
||||
@apply flex flex-row justify-between w-full items-center;
|
||||
}
|
||||
|
||||
.default-button{
|
||||
@apply p-2 rounded border-2 border-amber-400 text-gray-50 font-extrabold text-base w-full
|
||||
.default-button {
|
||||
@apply p-2 rounded border-2 border-amber-400 text-gray-50 font-extrabold text-base w-full;
|
||||
}
|
||||
|
||||
.default-input{
|
||||
@apply border-none outline-none text-lg text-gray-900 w-64 p-2 rounded-lg
|
||||
.default-input {
|
||||
@apply border-none outline-none text-lg text-gray-900 w-64 p-2 rounded-lg;
|
||||
}
|
||||
|
||||
.page{
|
||||
@apply flex gap-8 mt-24
|
||||
.page {
|
||||
@apply flex gap-8 mt-24;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.page {
|
||||
@apply flex-wrap
|
||||
@apply flex-wrap;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user