92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import CustomButton from "@/components/CustomButton/CustomButton.vue";
|
|
|
|
// Emits
|
|
const emit = defineEmits(["sendNetwork"]);
|
|
|
|
// props and store references
|
|
const props = defineProps({
|
|
pixKey: String,
|
|
offer: Number,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page">
|
|
<div class="text-container">
|
|
<span
|
|
class="text font-extrabold sm:text-5xl text-xl sm:max-w-[50rem] max-w-[20rem]"
|
|
>Envie sua oferta para a rede
|
|
</span>
|
|
<span
|
|
class="text text-xl font-normal sm:text-base text-xs sm:max-w-[30rem] max-w-[22rem]"
|
|
>Após a confirmação sua oferta estará disponível para outros usuários.
|
|
Caso deseje retirar a oferta, será necessário aguardar 24h para receber
|
|
os tokens de volta.</span
|
|
>
|
|
</div>
|
|
<div class="blur-container">
|
|
<div
|
|
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
|
|
>
|
|
<div>
|
|
<p>Tokens ofertados</p>
|
|
<p class="text-2xl text-gray-900">{{ props.offer }} BRZ</p>
|
|
</div>
|
|
<div class="my-3">
|
|
<p>Chave Pix</p>
|
|
<p class="text-xl text-gray-900 break-words">
|
|
{{ props.pixKey }}
|
|
</p>
|
|
</div>
|
|
<div class="mb-5">
|
|
<p>
|
|
<b>Atenção! </b> Os tokens ofertados ficam registrados no smart
|
|
contract e serão transferidos automaticamente para o comprador assim
|
|
que o Pix for detectado e confirmado.
|
|
</p>
|
|
</div>
|
|
<CustomButton
|
|
:text="'Enviar para a rede'"
|
|
@buttonClicked="emit('sendNetwork')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.page {
|
|
@apply flex flex-col items-center justify-center w-full mt-16;
|
|
}
|
|
|
|
p {
|
|
@apply text-gray-900;
|
|
}
|
|
|
|
.text-container {
|
|
@apply flex flex-col items-center justify-center sm:gap-4 gap-2;
|
|
}
|
|
|
|
.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 backdrop-blur-md mt-8 sm:w-1/3;
|
|
}
|
|
|
|
.last-deposit-info {
|
|
@apply font-medium text-base;
|
|
}
|
|
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
input[type="number"]::-webkit-inner-spin-button,
|
|
input[type="number"]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
</style>
|