refactor: organize componentes files
This commit is contained in:
Jefferson Mantovani
153
src/components/ui/CustomAlert.vue
Normal file
153
src/components/ui/CustomAlert.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const props = defineProps<{
|
||||
type: string;
|
||||
}>();
|
||||
|
||||
const alertText = ref<string>("");
|
||||
const alertPaddingLeft = ref<string>("18rem");
|
||||
|
||||
if (props.type === "sell") {
|
||||
alertPaddingLeft.value = "30%";
|
||||
} else if (props.type === "buy") {
|
||||
alertPaddingLeft.value = "30%";
|
||||
} else if (props.type === "withdraw") {
|
||||
alertPaddingLeft.value = "40%";
|
||||
} else if (props.type === "redirect") {
|
||||
alertPaddingLeft.value = "35%";
|
||||
}
|
||||
|
||||
switch (props.type) {
|
||||
case "buy":
|
||||
alertText.value =
|
||||
"Tudo certo! Os tokens já foram retirados da oferta e estão disponíveis na sua carteira.";
|
||||
break;
|
||||
case "sell":
|
||||
alertText.value =
|
||||
"Tudo certo! Os tokens já foram reservados e sua oferta está disponível.";
|
||||
break;
|
||||
case "redirect":
|
||||
alertText.value = "Existe uma compra em aberto. Continuar?";
|
||||
break;
|
||||
case "withdraw":
|
||||
alertText.value = "Tudo certo! Saque realizado com sucesso!";
|
||||
break;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="modal-overlay sm:h-12 h-full inset-0 absolute backdrop-blur-sm sm:backdrop-blur-none"
|
||||
>
|
||||
<div class="modal px-12 text-center sm:flex justify-between hidden">
|
||||
<div class="flex items-center">
|
||||
<p class="text-black tracking-tighter leading-tight py-2">
|
||||
{{ alertText }}
|
||||
</p>
|
||||
<button v-if="props.type === 'redirect'" @click="$emit('go-to-lock')">
|
||||
Sim
|
||||
</button>
|
||||
</div>
|
||||
<img
|
||||
src="../../assets/closeAlertIcon.svg"
|
||||
alt="close alert"
|
||||
class="w-3 cursor-pointer"
|
||||
@click="$emit('close-alert')"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="modal-mobile px-7 py-3 text-center inline-block sm:hidden mt-24 h-48"
|
||||
v-if="props.type !== 'redirect'"
|
||||
>
|
||||
<p class="text-black tracking-tighter leading-tight my-2 text-start mb-4">
|
||||
{{ alertText }}
|
||||
</p>
|
||||
<button
|
||||
@click="$emit('close-alert')"
|
||||
class="border-2 border-solid border-amber-400 mt-2"
|
||||
>
|
||||
Ok
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="modal-mobile px-5 text-center inline-block sm:hidden mt-24 h-40"
|
||||
v-if="props.type === 'redirect'"
|
||||
>
|
||||
<p
|
||||
class="text-black text-lg tracking-tighter leading-tight my-6 mx-2 text-justify font-semibold"
|
||||
>
|
||||
Retomar a última compra?
|
||||
</p>
|
||||
<div class="flex justify-around items-center px-2">
|
||||
<button
|
||||
@click="$emit('close-alert')"
|
||||
class="border-2 border-solid border-white-400 mt-2 font-semibold"
|
||||
>
|
||||
Não
|
||||
</button>
|
||||
<button
|
||||
@click="$emit('go-to-lock')"
|
||||
class="border-2 border-solid border-white-400 mt-2 font-semibold"
|
||||
>
|
||||
Sim
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding-top: 7rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: rgba(251, 191, 36, 1);
|
||||
height: 3rem;
|
||||
width: 96%;
|
||||
border-radius: 10px;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.modal-mobile {
|
||||
background-color: rgba(251, 191, 36, 1);
|
||||
/* height: 200px; */
|
||||
width: 300px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.close {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close-img {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.check {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid white;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
</style>
|
||||
26
src/components/ui/CustomButton.vue
Normal file
26
src/components/ui/CustomButton.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
text: String,
|
||||
isDisabled: Boolean,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["buttonClicked"]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="button"
|
||||
@click="emit('buttonClicked')"
|
||||
v-bind:class="{ 'opacity-70': props.isDisabled }"
|
||||
:disabled="props.isDisabled ? props.isDisabled : false"
|
||||
>
|
||||
{{ props.text }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.button {
|
||||
@apply rounded-lg w-full text-base font-semibold text-gray-900 p-4 bg-amber-400;
|
||||
}
|
||||
</style>
|
||||
115
src/components/ui/CustomModal.vue
Normal file
115
src/components/ui/CustomModal.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
isRedirectModal: Boolean,
|
||||
});
|
||||
|
||||
const modalColor = ref<string>("white");
|
||||
const modalHeight = ref<string>("250px");
|
||||
const pFontSize = ref<string>("16px");
|
||||
|
||||
if (props.isRedirectModal) {
|
||||
modalColor.value = "rgba(251, 191, 36, 1)";
|
||||
modalHeight.value = "150px";
|
||||
pFontSize.value = "20px";
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="modal-overlay inset-0 fixed hidden md:block justify-center backdrop-blur-sm sm:backdrop-blur-none"
|
||||
v-if="!isRedirectModal"
|
||||
>
|
||||
<div class="modal px-5 text-center">
|
||||
<p
|
||||
class="text-black tracking-tighter leading-tight my-6 mx-2 text-justify"
|
||||
>
|
||||
<strong>ATENÇÃO!</strong>
|
||||
A transação só será processada após efetuado o pagamento do Pix. Caso
|
||||
contrário não conseguiremos comprovar o seu depósito e não será
|
||||
possível transferir os tokens para sua carteira.
|
||||
</p>
|
||||
<button
|
||||
@click="$emit('close-modal')"
|
||||
class="border-2 border-solid border-amber-400 mt-2"
|
||||
>
|
||||
Entendi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm"
|
||||
v-if="isRedirectModal"
|
||||
>
|
||||
<div class="modal px-5 text-center">
|
||||
<p
|
||||
class="text-black text-lg tracking-tighter leading-tight my-6 mx-2 text-justify font-semibold"
|
||||
>
|
||||
Retomar a última compra?
|
||||
</p>
|
||||
<div class="flex justify-around items-center px-2">
|
||||
<button
|
||||
@click="$emit('close-modal')"
|
||||
class="border-2 border-solid border-white-400 mt-2 font-semibold"
|
||||
>
|
||||
Não
|
||||
</button>
|
||||
<button
|
||||
@click="$emit('go-to-lock')"
|
||||
class="border-2 border-solid border-white-400 mt-2 font-semibold"
|
||||
>
|
||||
Sim
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
display: flex !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background-color: v-bind(modalColor);
|
||||
height: v-bind(modalHeight);
|
||||
width: 300px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.close {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close-img {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.check {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: v-bind(pFontSize);
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
71
src/components/ui/LoadingComponent.vue
Normal file
71
src/components/ui/LoadingComponent.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
// prop
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
message: String,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="text-container">
|
||||
<span
|
||||
class="text font-bold sm:text-3xl text-2xl sm:max-w-[29rem] max-w-[20rem]"
|
||||
>
|
||||
{{ props.title ? props.title : "Confirme em sua carteira" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="main-container max-w-md">
|
||||
<div
|
||||
class="flex flex-col w-full bg-white sm:px-10 px-4 py-5 rounded-lg border-y-10"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col text-center justify-center w-full items-center p-2 px-3 rounded-3xl lg:min-w-fit gap-1"
|
||||
>
|
||||
<img
|
||||
alt="Polygon image"
|
||||
src="@/assets/validating.svg?url"
|
||||
width="96"
|
||||
height="48"
|
||||
/>
|
||||
<span class="text-black font-medium text-sm lg:px-12 px-4 mt-4">
|
||||
{{ $props.message }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
</style>
|
||||
40
src/components/ui/SpinnerComponent.vue
Normal file
40
src/components/ui/SpinnerComponent.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
// prop
|
||||
const props = defineProps({
|
||||
width: String,
|
||||
height: String,
|
||||
show: Boolean,
|
||||
});
|
||||
|
||||
const getCustomClass = () => {
|
||||
return [
|
||||
`w-${props.width}`,
|
||||
`h-${props.height}`,
|
||||
`fill-white`,
|
||||
"text-gray-200",
|
||||
"animate-spin",
|
||||
"dark:text-gray-600",
|
||||
];
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="props.show ? props.show : true">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
:class="getCustomClass()"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
82
src/components/ui/ToasterComponent.vue
Normal file
82
src/components/ui/ToasterComponent.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from "vue";
|
||||
import { useOnboard } from "@web3-onboard/vue";
|
||||
import { Networks } from "@/model/Networks";
|
||||
import { useUser } from "@/composables/useUser";
|
||||
|
||||
const { connectedWallet } = useOnboard();
|
||||
const user = useUser();
|
||||
const { networkId, networkName } = user;
|
||||
|
||||
const isWrongNetwork = ref(false);
|
||||
const targetNetworkName = computed(() => Networks[networkName.value].chainName);
|
||||
|
||||
const checkNetwork = () => {
|
||||
if (connectedWallet.value) {
|
||||
const chainId = connectedWallet.value.chains[0].id;
|
||||
isWrongNetwork.value = Number(chainId) !== networkId.value;
|
||||
} else {
|
||||
isWrongNetwork.value = false; // No wallet connected yet
|
||||
}
|
||||
};
|
||||
|
||||
const switchNetwork = async () => {
|
||||
try {
|
||||
if (connectedWallet.value && connectedWallet.value.provider) {
|
||||
await connectedWallet.value.provider.request({
|
||||
method: "wallet_switchEthereumChain",
|
||||
params: [
|
||||
{
|
||||
chainId: Networks[networkName.value].chainId,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to switch network:", error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(checkNetwork);
|
||||
watch(connectedWallet, checkNetwork);
|
||||
watch(networkId, checkNetwork, { immediate: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<transition name="slide-up" appear>
|
||||
<div
|
||||
v-if="isWrongNetwork"
|
||||
class="fixed bottom-0 left-0 right-0 bg-red-500 text-white p-4 flex justify-between items-center z-50"
|
||||
>
|
||||
<div>
|
||||
<span class="font-bold">Wrong network!</span>
|
||||
<span> Please switch to {{ targetNetworkName }}.</span>
|
||||
</div>
|
||||
<button
|
||||
@click="switchNetwork"
|
||||
class="bg-white text-red-500 px-4 py-2 rounded font-bold hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
Switch Network
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.slide-up-enter-active,
|
||||
.slide-up-leave-active {
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-up-enter-from,
|
||||
.slide-up-leave-to {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-up-enter-to,
|
||||
.slide-up-leave-from {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user