P2Pix-Front-End/src/components/SearchComponent.vue
2024-08-30 14:20:35 -03:00

318 lines
9.1 KiB
Vue

<script setup lang="ts">
import { ref, watch } from "vue";
import CustomButton from "@/components/CustomButton/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";
import type { ValidDeposit } from "@/model/ValidDeposit";
import { decimalCount } from "@/utils/decimalCount";
import SpinnerComponent from "./SpinnerComponent.vue";
import { getTokenImage } from "@/utils/imagesPath";
import { TokenEnum } from "@/model/NetworkEnum";
// Store reference
const etherStore = useEtherStore();
const selectTokenToggle = ref<boolean>(false);
const {
walletAddress,
networkName,
selectedToken,
depositsValidListSepolia,
depositsValidListMumbai,
loadingNetworkLiquidity,
} = storeToRefs(etherStore);
// Reactive state
const tokenValue = ref<number>(0);
const enableConfirmButton = ref<boolean>(false);
const enableWalletButton = ref<boolean>(false);
const hasLiquidity = ref<boolean>(true);
const validDecimals = ref<boolean>(true);
const selectedSepoliaDeposit = ref<ValidDeposit>();
const selectedMumbaiDeposit = ref<ValidDeposit>();
const selectedRootstockDeposit = ref<ValidDeposit>();
// Emits
const emit = defineEmits(["tokenBuy"]);
// Blockchain methods
const connectAccount = async (): Promise<void> => {
await connectProvider();
enableOrDisableConfirmButton();
};
const emitConfirmButton = (): void => {
const selectedDeposit =
networkName.value == NetworkEnum.ethereum
? selectedSepoliaDeposit.value
: selectedMumbaiDeposit.value;
emit("tokenBuy", selectedDeposit, tokenValue.value);
};
// Debounce methods
const handleInputEvent = (event: any): void => {
const { value } = event.target;
tokenValue.value = Number(value);
if (decimalCount(String(tokenValue.value)) > 2) {
validDecimals.value = false;
enableConfirmButton.value = false;
return;
}
validDecimals.value = true;
verifyLiquidity();
};
const openTokenSelection = (): void => {
selectTokenToggle.value = true;
};
const handleSelectedToken = (token: TokenEnum): void => {
etherStore.setSelectedToken(token);
selectTokenToggle.value = false;
};
// Verify if there is a valid deposit to buy
const verifyLiquidity = (): void => {
enableConfirmButton.value = false;
selectedSepoliaDeposit.value = undefined;
selectedMumbaiDeposit.value = undefined;
selectedRootstockDeposit.value = undefined;
if (tokenValue.value <= 0) {
enableWalletButton.value = false;
return;
}
selectedSepoliaDeposit.value = verifyNetworkLiquidity(
tokenValue.value,
walletAddress.value,
depositsValidListSepolia.value
);
selectedMumbaiDeposit.value = verifyNetworkLiquidity(
tokenValue.value,
walletAddress.value,
depositsValidListMumbai.value
);
enableOrDisableConfirmButton();
if (selectedSepoliaDeposit.value || selectedMumbaiDeposit.value) {
hasLiquidity.value = true;
enableWalletButton.value = true;
} else {
hasLiquidity.value = false;
enableWalletButton.value = true;
}
};
const enableOrDisableConfirmButton = (): void => {
if (selectedSepoliaDeposit.value && networkName.value == NetworkEnum.ethereum)
enableConfirmButton.value = true;
else if (
selectedMumbaiDeposit.value &&
networkName.value == NetworkEnum.polygon
)
enableConfirmButton.value = true;
else enableConfirmButton.value = false;
};
watch(networkName, (): void => {
verifyLiquidity();
enableOrDisableConfirmButton();
});
watch(walletAddress, (): void => {
verifyLiquidity();
});
</script>
<template>
<div class="page">
<div class="text-container">
<span
class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] max-w-[20rem]"
>
Adquira cripto com apenas um Pix</span
>
<span class="text font-medium sm:text-base text-sm max-w-[28rem]"
>Digite um valor, confira a oferta, conecte sua carteira e receba os
tokens após realizar o Pix</span
>
</div>
<div class="blur-container">
<div class="backdrop-blur -z-10 w-full h-full"></div>
<div
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
>
<div class="flex justify-between sm:w-full items-center">
<input
type="number"
class="border-none outline-none text-lg text-gray-900 w-3/4"
v-bind:class="{
'font-semibold': tokenValue != undefined,
'text-xl': tokenValue != undefined,
}"
@input="debounce(handleInputEvent, 500)($event)"
placeholder="0 "
step=".01"
/>
<div class="relative">
<button
class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
@click="openTokenSelection()"
>
<img
class="text-gray-900"
alt="Chevron Down"
src="@/assets/chevronDownBlack.svg"
/>
<img
alt="Token image"
class="sm:w-fit w-4"
:src="getTokenImage(selectedToken)"
/>
<span class="text-gray-900 sm:text-lg text-md w-fit" id="token">{{
selectedToken
}}</span>
</button>
<div
v-if="selectTokenToggle"
class="mt-2 w-[100px] text-gray-900 lg-view absolute"
>
<div class="bg-white rounded-md z-10">
<div
v-for="token in TokenEnum"
class="flex menu-button gap-2 px-4 rounded-md cursor-pointer hover:bg-gray-300"
@click="handleSelectedToken(token)"
>
<img
:alt="token + ' logo'"
width="20"
height="20"
:src="getTokenImage(token)"
/>
<span
class="text-gray-900 py-4 text-end font-semibold text-sm"
>
{{ token }}
</span>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
</div>
</div>
</div>
</div>
<div class="custom-divide py-2 mb-2"></div>
<div
class="flex justify-between"
v-if="hasLiquidity && !loadingNetworkLiquidity"
>
<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="24"
height="24"
v-if="selectedMumbaiDeposit"
/>
<img
alt="Ethereum image"
src="@/assets/ethereum.svg"
width="24"
height="24"
v-if="selectedSepoliaDeposit"
/>
</div>
</div>
<div
class="flex justify-center items-center"
v-if="loadingNetworkLiquidity"
>
<span class="text-gray-900 font-normal text-sm mr-2"
>Carregando liquidez das redes.</span
>
<SpinnerComponent width="4" height="4"></SpinnerComponent>
</div>
<div
class="flex justify-center"
v-if="!validDecimals && !loadingNetworkLiquidity"
>
<span class="text-red-500 font-normal text-sm"
>Por favor utilize no máximo 2 casas decimais</span
>
</div>
<div
class="flex justify-center"
v-else-if="!hasLiquidity && !loadingNetworkLiquidity"
>
<span class="text-red-500 font-normal text-sm"
>Atualmente não liquidez nas redes para sua demanda</span
>
</div>
</div>
<CustomButton
v-if="!walletAddress"
:text="'Conectar carteira'"
:is-disabled="!enableWalletButton"
@buttonClicked="connectAccount()"
/>
<CustomButton
v-if="walletAddress"
:text="'Confirmar compra'"
:is-disabled="!enableConfirmButton"
@buttonClicked="emitConfirmButton()"
/>
</div>
</div>
</template>
<style scoped>
.custom-divide {
width: 100%;
border-bottom: 1px solid #d1d5db;
}
.bottom-position {
top: -20px;
right: 50%;
transform: translateX(50%);
}
.page {
@apply flex flex-col items-center justify-center w-full mt-16;
}
.text-container {
@apply flex flex-col items-center justify-center gap-4;
}
.text {
@apply text-white text-center;
}
.blur-container {
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10;
}
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
</style>