Merge commit 'b61dfb2de05e494b66ffd1f99da8f8594782764c' into fix-token-dropdowns
This commit is contained in:
Filipe Soccol
commit
9ddc843c01
35
src/App.vue
35
src/App.vue
@ -1,4 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
import TopBar from "@/components/TopBar/TopBar.vue";
|
import TopBar from "@/components/TopBar/TopBar.vue";
|
||||||
import SpinnerComponent from "@/components/SpinnerComponent.vue";
|
import SpinnerComponent from "@/components/SpinnerComponent.vue";
|
||||||
import { init, useOnboard } from "@web3-onboard/vue";
|
import { init, useOnboard } from "@web3-onboard/vue";
|
||||||
@ -6,6 +7,7 @@ import injectedModule from "@web3-onboard/injected-wallets";
|
|||||||
import { Networks } from "./model/Networks";
|
import { Networks } from "./model/Networks";
|
||||||
import { NetworkEnum } from "./model/NetworkEnum";
|
import { NetworkEnum } from "./model/NetworkEnum";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
const injected = injectedModule();
|
const injected = injectedModule();
|
||||||
|
|
||||||
const web3Onboard = init({
|
const web3Onboard = init({
|
||||||
@ -33,18 +35,25 @@ if (!connectedWallet) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<TopBar />
|
<div class="p-3 sm:p-4 md:p-8">
|
||||||
<RouterView v-slot="{ Component }">
|
<TopBar />
|
||||||
<template v-if="Component">
|
<RouterView v-slot="{ Component }">
|
||||||
<Suspense>
|
<template v-if="Component">
|
||||||
<component :is="Component"></component>
|
<Transition name="page" mode="out-in" appear>
|
||||||
<template #fallback>
|
<div :key="route.fullPath">
|
||||||
<appkit-button />
|
<Suspense>
|
||||||
<div class="flex w-full h-full justify-center items-center">
|
<template #default>
|
||||||
<SpinnerComponent :width="'16'" :height="'16'"></SpinnerComponent>
|
<component :is="Component" />
|
||||||
|
</template>
|
||||||
|
<template #fallback>
|
||||||
|
<div class="flex w-full h-full justify-center items-center">
|
||||||
|
<SpinnerComponent :width="'16'" :height="'16'" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Suspense>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</Transition>
|
||||||
</Suspense>
|
</template>
|
||||||
</template>
|
</RouterView>
|
||||||
</RouterView>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
3
src/assets/chevron.svg
Normal file
3
src/assets/chevron.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="chevronDown" fill-rule="evenodd" clip-rule="evenodd" d="M1.64645 4.64645C1.84171 4.45118 2.15829 4.45118 2.35355 4.64645L8 10.2929L13.6464 4.64645C13.8417 4.45118 14.1583 4.45118 14.3536 4.64645C14.5488 4.84171 14.5488 5.15829 14.3536 5.35355L8.35355 11.3536C8.15829 11.5488 7.84171 11.5488 7.64645 11.3536L1.64645 5.35355C1.45118 5.15829 1.45118 4.84171 1.64645 4.64645Z" fill="currentColor"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 508 B |
@ -6,7 +6,6 @@
|
|||||||
#app {
|
#app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem;
|
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: radial-gradient(ellipse at 50% -50%, rgba(49, 46, 129, 1) 60%, rgba(24, 30, 42, 1) 80%);
|
background: radial-gradient(ellipse at 50% -50%, rgba(49, 46, 129, 1) 60%, rgba(24, 30, 42, 1) 80%);
|
||||||
@ -25,3 +24,7 @@ a,
|
|||||||
background-color: hsla(160, 100%, 37%, 0.2);
|
background-color: hsla(160, 100%, 37%, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
@apply flex w-full md:max-w-lg flex-col justify-center items-center px-4 sm:px-8 py-4 sm:py-6 gap-4 rounded-lg border border-gray-500 backdrop-blur-md drop-shadow-lg shadow-lg mt-10;
|
||||||
|
}
|
||||||
|
|||||||
21
src/assets/transitions.css
Normal file
21
src/assets/transitions.css
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
.dropdown-enter-active,
|
||||||
|
.dropdown-leave-active {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-enter-from,
|
||||||
|
.dropdown-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-enter-active,
|
||||||
|
.page-leave-active {
|
||||||
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-enter-from,
|
||||||
|
.page-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(15px);
|
||||||
|
}
|
||||||
@ -86,7 +86,7 @@ onMounted(async () => {
|
|||||||
para a sua carteira!
|
para a sua carteira!
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="blur-container">
|
<div class="main-container">
|
||||||
<div
|
<div
|
||||||
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
|
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
|
||||||
>
|
>
|
||||||
@ -145,13 +145,6 @@ p {
|
|||||||
.text {
|
.text {
|
||||||
@apply text-white text-center;
|
@apply text-white text-center;
|
||||||
}
|
}
|
||||||
.blur-container-row {
|
|
||||||
@apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 max-w-screen-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blur-container {
|
|
||||||
@apply flex w-full max-w-xs md:max-w-lg flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.last-release-info {
|
.last-release-info {
|
||||||
@apply font-medium text-base text-gray-900;
|
@apply font-medium text-base text-gray-900;
|
||||||
|
|||||||
@ -17,50 +17,52 @@ if (props.isRedirectModal) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div>
|
||||||
class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
|
<div
|
||||||
v-if="!isRedirectModal"
|
class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
|
||||||
>
|
v-if="!isRedirectModal"
|
||||||
<div class="modal px-5 text-center">
|
>
|
||||||
<p
|
<div class="modal px-5 text-center">
|
||||||
class="text-black tracking-tighter leading-tight my-6 mx-2 text-justify"
|
<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 inserir o código de autenticação.
|
<strong>ATENÇÃO!</strong>
|
||||||
Caso contrário não conseguiremos comprovar o seu depósito e não será
|
A transação só será processada após inserir o código de autenticação.
|
||||||
possível transferir os tokens para sua carteira.
|
Caso contrário não conseguiremos comprovar o seu depósito e não será
|
||||||
</p>
|
possível transferir os tokens para sua carteira.
|
||||||
<button
|
</p>
|
||||||
@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
|
<button
|
||||||
@click="$emit('close-modal')"
|
@click="$emit('close-modal')"
|
||||||
class="border-2 border-solid border-white-400 mt-2 font-semibold"
|
class="border-2 border-solid border-amber-400 mt-2"
|
||||||
>
|
>
|
||||||
Não
|
Entendi
|
||||||
</button>
|
</button>
|
||||||
<button
|
</div>
|
||||||
@click="$emit('go-to-lock')"
|
</div>
|
||||||
class="border-2 border-solid border-white-400 mt-2 font-semibold"
|
<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"
|
||||||
>
|
>
|
||||||
Sim
|
Retomar a última compra?
|
||||||
</button>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -162,10 +162,10 @@ showInitialItems();
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="blur-container" v-if="loadingWalletTransactions">
|
<div class="main-container !w-full !max-w-full" v-if="loadingWalletTransactions">
|
||||||
<SpinnerComponent width="8" height="8"></SpinnerComponent>
|
<SpinnerComponent width="8" height="8"></SpinnerComponent>
|
||||||
</div>
|
</div>
|
||||||
<div class="blur-container" v-if="!loadingWalletTransactions">
|
<div class="main-container !w-full !max-w-full" v-if="!loadingWalletTransactions">
|
||||||
<div
|
<div
|
||||||
class="w-full bg-white p-4 sm:p-6 rounded-lg"
|
class="w-full bg-white p-4 sm:p-6 rounded-lg"
|
||||||
v-if="props.validDeposits.length > 0"
|
v-if="props.validDeposits.length > 0"
|
||||||
@ -389,10 +389,6 @@ p {
|
|||||||
@apply text-white text-center;
|
@apply text-white text-center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blur-container {
|
|
||||||
@apply flex flex-col justify-center items-center px-4 py-3 sm:px-8 sm:py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md w-auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-container {
|
.grid-container {
|
||||||
@apply grid grid-cols-4 grid-flow-row items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
|
@apply grid grid-cols-4 grid-flow-row items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,7 +15,7 @@ const props = defineProps({
|
|||||||
{{ props.title ? props.title : "Confirme em sua carteira" }}
|
{{ props.title ? props.title : "Confirme em sua carteira" }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="blur-container sm:w-[26rem] w-[20rem]">
|
<div class="main-container !sm:w-[26rem] !w-[20rem]">
|
||||||
<div
|
<div
|
||||||
class="flex flex-col w-full bg-white sm:px-10 px-4 py-5 rounded-lg border-y-10"
|
class="flex flex-col w-full bg-white sm:px-10 px-4 py-5 rounded-lg border-y-10"
|
||||||
>
|
>
|
||||||
@ -60,10 +60,6 @@ const props = defineProps({
|
|||||||
@apply text-white text-center;
|
@apply text-white text-center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blur-container {
|
|
||||||
@apply flex flex-col justify-center items-center sm:px-8 px-6 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="number"] {
|
input[type="number"] {
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -97,7 +97,7 @@ onUnmounted(() => {
|
|||||||
autenticação para enviar a transação para a rede.
|
autenticação para enviar a transação para a rede.
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="blur-container sm:max-w-[28rem] max-w-[20rem] text-black">
|
<div class="main-container sm:max-w-[28rem] max-w-[20rem] text-black">
|
||||||
<div
|
<div
|
||||||
class="flex-col items-center justify-center flex w-full bg-white sm:p-8 p-4 rounded-lg break-normal"
|
class="flex-col items-center justify-center flex w-full bg-white sm:p-8 p-4 rounded-lg break-normal"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -126,7 +126,7 @@ const enableOrDisableConfirmButton = (): void => {
|
|||||||
enableConfirmButton.value = true;
|
enableConfirmButton.value = true;
|
||||||
else if (
|
else if (
|
||||||
selectedRootstockDeposit.value &&
|
selectedRootstockDeposit.value &&
|
||||||
networkName.value == NetworkEnum.polygon
|
networkName.value != NetworkEnum.rootstock
|
||||||
)
|
)
|
||||||
enableConfirmButton.value = true;
|
enableConfirmButton.value = true;
|
||||||
else enableConfirmButton.value = false;
|
else enableConfirmButton.value = false;
|
||||||
@ -155,7 +155,7 @@ watch(walletAddress, (): void => {
|
|||||||
tokens após realizar o Pix</span
|
tokens após realizar o Pix</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="blur-container">
|
<div class="main-container">
|
||||||
<div class="backdrop-blur -z-10 w-full h-full"></div>
|
<div class="backdrop-blur -z-10 w-full h-full"></div>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
|
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
|
||||||
@ -172,7 +172,7 @@ watch(walletAddress, (): void => {
|
|||||||
placeholder="0 "
|
placeholder="0 "
|
||||||
step=".01"
|
step=".01"
|
||||||
/>
|
/>
|
||||||
<div class="relative">
|
<div class="relative overflow-visible">
|
||||||
<button
|
<button
|
||||||
ref="tokenDropdownRef"
|
ref="tokenDropdownRef"
|
||||||
class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
|
class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
|
||||||
@ -194,35 +194,37 @@ watch(walletAddress, (): void => {
|
|||||||
alt="Chevron Down"
|
alt="Chevron Down"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<div
|
<transition name="dropdown">
|
||||||
v-if="selectTokenToggle"
|
|
||||||
class="mt-2 w-[100px] text-gray-900 absolute"
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
|
v-if="selectTokenToggle"
|
||||||
|
class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-for="token in TokenEnum"
|
class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
|
||||||
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
|
|
||||||
@click="handleSelectedToken(token)"
|
|
||||||
>
|
>
|
||||||
<img
|
<div
|
||||||
:alt="token + ' logo'"
|
v-for="token in TokenEnum"
|
||||||
width="20"
|
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
|
||||||
height="20"
|
@click="handleSelectedToken(token)"
|
||||||
:src="getTokenImage(token)"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="text-gray-900 py-4 text-end font-semibold text-sm"
|
|
||||||
>
|
>
|
||||||
{{ token }}
|
<img
|
||||||
</span>
|
:alt="token + ' logo'"
|
||||||
</div>
|
width="20"
|
||||||
<div class="w-full flex justify-center">
|
height="20"
|
||||||
<hr class="w-4/5" />
|
: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>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="custom-divide py-2 mb-2"></div>
|
<div class="custom-divide py-2 mb-2"></div>
|
||||||
@ -315,10 +317,6 @@ watch(walletAddress, (): void => {
|
|||||||
@apply text-white text-center;
|
@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 max-w-screen-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="number"] {
|
input[type="number"] {
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -54,7 +54,7 @@ const handleInputEvent = (event: any): void => {
|
|||||||
tokens após realizar o Pix</span
|
tokens após realizar o Pix</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="blur-container">
|
<div class="main-container">
|
||||||
<div
|
<div
|
||||||
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
|
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
|
||||||
>
|
>
|
||||||
@ -153,10 +153,6 @@ const handleInputEvent = (event: any): void => {
|
|||||||
@apply text-white text-center;
|
@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-10;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="number"] {
|
input[type="number"] {
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -26,7 +26,7 @@ const props = defineProps({
|
|||||||
os tokens de volta.</span
|
os tokens de volta.</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="blur-container">
|
<div class="main-container sm:w-1/3">
|
||||||
<div
|
<div
|
||||||
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
|
class="flex flex-col w-full bg-white px-10 py-5 rounded-lg border-y-10"
|
||||||
>
|
>
|
||||||
@ -75,10 +75,6 @@ p {
|
|||||||
@apply text-white text-center;
|
@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 max-w-screen-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.last-deposit-info {
|
.last-deposit-info {
|
||||||
@apply font-medium text-base;
|
@apply font-medium text-base;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -101,7 +101,7 @@ const handleSellClick = async (
|
|||||||
envio da transação e confirme sua oferta.</span
|
envio da transação e confirme sua oferta.</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="blur-container">
|
<div class="main-container">
|
||||||
<div class="backdrop-blur -z-10 w-full h-full"></div>
|
<div class="backdrop-blur -z-10 w-full h-full"></div>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
|
class="flex flex-col w-full bg-white sm:px-10 px-6 py-5 rounded-lg border-y-10"
|
||||||
@ -111,15 +111,15 @@ const handleSellClick = async (
|
|||||||
type="number"
|
type="number"
|
||||||
v-model="offer"
|
v-model="offer"
|
||||||
class="border-none outline-none text-gray-900 sm:w-fit w-3/4"
|
class="border-none outline-none text-gray-900 sm:w-fit w-3/4"
|
||||||
v-bind:class="{
|
:class="{
|
||||||
'font-semibold': offer != undefined,
|
'!font-medium': offer !== undefined && offer !== '',
|
||||||
'text-xl': offer != undefined,
|
'text-xl': offer !== undefined && offer !== '',
|
||||||
}"
|
}"
|
||||||
@input="debounce(handleInputEvent, 500)($event)"
|
@input="debounce(handleInputEvent, 500)($event)"
|
||||||
placeholder="Digite sua oferta"
|
placeholder="Digite sua oferta"
|
||||||
step=".01"
|
step=".01"
|
||||||
/>
|
/>
|
||||||
<div class="relative">
|
<div class="relative overflow-visible">
|
||||||
<button
|
<button
|
||||||
ref="tokenDropdownRef"
|
ref="tokenDropdownRef"
|
||||||
class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
|
class="flex flex-row items-center p-2 bg-gray-300 hover:bg-gray-200 focus:outline-indigo-800 focus:outline-2 rounded-3xl min-w-fit gap-2 transition-colors"
|
||||||
@ -133,44 +133,44 @@ const handleSellClick = async (
|
|||||||
<span
|
<span
|
||||||
class="text-gray-900 sm:text-lg text-md font-medium"
|
class="text-gray-900 sm:text-lg text-md font-medium"
|
||||||
id="token"
|
id="token"
|
||||||
>{{ selectedToken }}</span
|
|
||||||
>
|
>
|
||||||
<ChevronDown
|
{{ selectedToken }}
|
||||||
class="pr-4 sm:pr-0 transition-all duration-500 ease-in-out invert"
|
</span>
|
||||||
|
<img
|
||||||
|
class="text-gray-900 pr-4 sm:pr-0 transition-all duration-500 ease-in-out"
|
||||||
:class="{ 'scale-y-[-1]': selectTokenToggle }"
|
:class="{ 'scale-y-[-1]': selectTokenToggle }"
|
||||||
alt="Chevron Down"
|
alt="Chevron Down"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<div
|
<transition name="dropdown">
|
||||||
v-if="selectTokenToggle"
|
|
||||||
class="mt-2 w-[100px] text-gray-900 absolute"
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
|
v-if="selectTokenToggle"
|
||||||
|
class="mt-2 text-gray-900 absolute right-0 z-50 w-full min-w-max"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-for="token in TokenEnum"
|
class="bg-white rounded-xl z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
|
||||||
:key="token"
|
|
||||||
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
|
|
||||||
@click="handleSelectedToken(token)"
|
|
||||||
>
|
>
|
||||||
<img
|
<div
|
||||||
:alt="token + ' logo'"
|
v-for="token in TokenEnum"
|
||||||
width="20"
|
:key="token"
|
||||||
height="20"
|
class="flex menu-button gap-2 px-4 cursor-pointer hover:bg-gray-300 transition-colors"
|
||||||
:src="getTokenImage(token)"
|
@click="handleSelectedToken(token)"
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="text-gray-900 py-4 text-end font-semibold text-sm"
|
|
||||||
>
|
>
|
||||||
{{ token }}
|
<img
|
||||||
</span>
|
:alt="token + ' logo'"
|
||||||
</div>
|
width="20"
|
||||||
<div class="w-full flex justify-center">
|
height="20"
|
||||||
<hr class="w-4/5" />
|
:src="getTokenImage(token)"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="text-gray-900 py-4 text-end font-semibold text-sm"
|
||||||
|
>
|
||||||
|
{{ token }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -194,6 +194,10 @@ const handleSellClick = async (
|
|||||||
type="text"
|
type="text"
|
||||||
v-model="pixKey"
|
v-model="pixKey"
|
||||||
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-fit"
|
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-fit"
|
||||||
|
:class="{
|
||||||
|
'!font-medium': pixKey !== undefined && pixKey !== '',
|
||||||
|
'text-xl': pixKey !== undefined && pixKey !== '',
|
||||||
|
}"
|
||||||
placeholder="Digite a chave Pix"
|
placeholder="Digite a chave Pix"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -241,10 +245,6 @@ const handleSellClick = async (
|
|||||||
@apply text-white text-center;
|
@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 max-w-screen-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="number"] {
|
input[type="number"] {
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
appearance: textfield;
|
appearance: textfield;
|
||||||
|
|||||||
@ -113,82 +113,7 @@ onClickOutside(infoMenuRef, () => {
|
|||||||
|
|
||||||
<div class="flex sm:gap-4 gap-2 items-center">
|
<div class="flex sm:gap-4 gap-2 items-center">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div
|
<button
|
||||||
v-show="infoMenuOpenToggle"
|
|
||||||
class="mt-10 absolute w-full text-gray-900 hidden md:inline-block"
|
|
||||||
>
|
|
||||||
<div class="mt-2">
|
|
||||||
<div class="bg-white rounded-md z-10 -left-32 w-52">
|
|
||||||
<div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
|
|
||||||
<span class="text-gray-900 py-4 text-end font-semibold text-sm">
|
|
||||||
Documentação
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="w-full flex justify-center">
|
|
||||||
<hr class="w-4/5" />
|
|
||||||
</div>
|
|
||||||
<RouterLink
|
|
||||||
:to="'/faq'"
|
|
||||||
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
|
|
||||||
>
|
|
||||||
Perguntas frequentes
|
|
||||||
</span>
|
|
||||||
</RouterLink>
|
|
||||||
<div class="w-full flex justify-center">
|
|
||||||
<hr class="w-4/5" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
|
|
||||||
>
|
|
||||||
<div class="redirect_button">
|
|
||||||
<a
|
|
||||||
href="https://www.twitter.com/doiim"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<TwitterIcon
|
|
||||||
alt="Twitter"
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
class="cursor-pointer"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.linkedin.com/company/doiim/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<LinkedinIcon
|
|
||||||
alt="LinkedIn"
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
class="cursor-pointer"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.github.com/doiim"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<GithubIcon
|
|
||||||
alt="Github"
|
|
||||||
width="20"
|
|
||||||
height="20"
|
|
||||||
class="cursor-pointer"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-full flex justify-center">
|
|
||||||
<hr class="w-4/5" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
ref="infoMenuRef"
|
ref="infoMenuRef"
|
||||||
class="default-button hidden md:inline-block cursor-pointer"
|
class="default-button hidden md:inline-block cursor-pointer"
|
||||||
@click="
|
@click="
|
||||||
@ -200,16 +125,93 @@ onClickOutside(infoMenuRef, () => {
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<h1
|
<h1
|
||||||
class="text-gray-50 font-semibold sm:text-base"
|
class="topbar-text topbar-link"
|
||||||
:style="{
|
:style="{
|
||||||
'border-bottom': infoMenuOpenToggle
|
'border-bottom': infoMenuOpenToggle
|
||||||
? '2px solid white'
|
? '2px solid white'
|
||||||
: 'transparent',
|
: '2px solid transparent',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
Menu
|
Menu
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</button>
|
||||||
|
<transition name="dropdown">
|
||||||
|
<div
|
||||||
|
v-show="infoMenuOpenToggle"
|
||||||
|
class="mt-10 absolute w-full text-gray-900 lg-view"
|
||||||
|
>
|
||||||
|
<div class="mt-2">
|
||||||
|
<div class="bg-white rounded-md z-10 -left-36 w-52">
|
||||||
|
<div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
|
||||||
|
<span
|
||||||
|
class="text-gray-900 py-4 text-end font-semibold text-sm"
|
||||||
|
>
|
||||||
|
Documentação
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full flex justify-center">
|
||||||
|
<hr class="w-4/5" />
|
||||||
|
</div>
|
||||||
|
<RouterLink
|
||||||
|
:to="'/faq'"
|
||||||
|
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="text-gray-900 py-4 text-end font-semibold text-sm whitespace-nowrap"
|
||||||
|
>
|
||||||
|
Perguntas frequentes
|
||||||
|
</span>
|
||||||
|
</RouterLink>
|
||||||
|
<div class="w-full flex justify-center">
|
||||||
|
<hr class="w-4/5" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="sm:text-center sm:justify-center ml-8 sm:ml-0 gap-2 px-4 rounded-md float-right"
|
||||||
|
>
|
||||||
|
<div class="redirect_button flex mr-4">
|
||||||
|
<div class="mr-6">
|
||||||
|
<a href="https://www.twitter.com/doiim">
|
||||||
|
<img
|
||||||
|
alt="Twitter"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
src="@/assets/twitterIcon.svg"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="mr-6">
|
||||||
|
<a href="https://www.linkedin.com/company/doiim/">
|
||||||
|
<img
|
||||||
|
alt="LinkedIn"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
src="@/assets/linkedinIcon.svg"
|
||||||
|
class="cursor-pointer"
|
||||||
|
href="https://www.linkedin.com/company/doiim/"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="mr-6">
|
||||||
|
<a href="https://www.github.com/doiim">
|
||||||
|
<img
|
||||||
|
alt="Github"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
src="@/assets/githubIcon.svg"
|
||||||
|
class="cursor-pointer"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full flex justify-center">
|
||||||
|
<hr class="w-4/5" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
<RouterLink
|
<RouterLink
|
||||||
:to="'/faq'"
|
:to="'/faq'"
|
||||||
@ -220,21 +222,26 @@ onClickOutside(infoMenuRef, () => {
|
|||||||
</RouterLink>
|
</RouterLink>
|
||||||
<RouterLink
|
<RouterLink
|
||||||
:to="sellerView ? '/' : '/seller'"
|
:to="sellerView ? '/' : '/seller'"
|
||||||
class="default-button sm:whitespace-normal whitespace-nowrap hidden md:inline-block"
|
class="default-button sm:whitespace-normal whitespace-nowrap lg-view w-40 sm:w-44 md:w-36"
|
||||||
>
|
>
|
||||||
{{ sellerView ? "Quero comprar" : "Quero vender" }}
|
<div class="topbar-text topbar-link text-center mx-auto inline-block">
|
||||||
|
{{ sellerView ? "Quero comprar" : "Quero vender" }}
|
||||||
|
</div>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
<RouterLink
|
<RouterLink
|
||||||
:to="sellerView ? '/' : '/seller'"
|
:to="sellerView ? '/' : '/seller'"
|
||||||
v-if="!walletAddress"
|
v-if="!walletAddress"
|
||||||
class="default-button sm:whitespace-normal whitespace-nowrap inline-block md:hidden"
|
class="default-button sm:whitespace-normal whitespace-nowrap sm-view w-40 sm:w-44 md:w-36"
|
||||||
>
|
>
|
||||||
{{ sellerView ? "Quero comprar" : "Quero vender" }}
|
<div class="topbar-text topbar-link text-center mx-auto inline-block">
|
||||||
|
{{ sellerView ? "Quero comprar" : "Quero vender" }}
|
||||||
|
</div>
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
<div class="flex flex-col" v-if="walletAddress">
|
<div class="flex flex-col relative" v-if="walletAddress">
|
||||||
<div
|
<div
|
||||||
ref="currencyRef"
|
ref="currencyRef"
|
||||||
class="group top-bar-info cursor-pointer h-10"
|
class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
|
||||||
|
:class="{ 'bg-gray-50': currencyMenuOpenToggle }"
|
||||||
@click="
|
@click="
|
||||||
[
|
[
|
||||||
(currencyMenuOpenToggle = !currencyMenuOpenToggle),
|
(currencyMenuOpenToggle = !currencyMenuOpenToggle),
|
||||||
@ -249,25 +256,36 @@ onClickOutside(infoMenuRef, () => {
|
|||||||
height="24"
|
height="24"
|
||||||
width="24"
|
width="24"
|
||||||
/>
|
/>
|
||||||
<span class="default-text hidden md:inline-block">
|
<span
|
||||||
|
class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out"
|
||||||
|
:class="{ '!text-gray-900': currencyMenuOpenToggle }"
|
||||||
|
>
|
||||||
{{ Networks[etherStore.networkName].chainName }}
|
{{ Networks[etherStore.networkName].chainName }}
|
||||||
</span>
|
</span>
|
||||||
<ChevronDown
|
<div
|
||||||
class="pr-4 sm:pr-0 transition-all duration-300 ease-in-out"
|
class="transition-all duration-500 ease-in-out mt-1"
|
||||||
:class="{ 'scale-y-[-1]': currencyMenuOpenToggle }"
|
:class="{ 'scale-y-[-1]': currencyMenuOpenToggle }"
|
||||||
alt="Chevron Down"
|
>
|
||||||
/>
|
<svg
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
class="h-4 w-4 text-white group-hover:text-gray-900"
|
||||||
|
:class="{ '!text-gray-900': currencyMenuOpenToggle }"
|
||||||
|
>
|
||||||
|
<use href="@/assets/chevron.svg#chevronDown"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<transition name="dropdown">
|
||||||
v-show="currencyMenuOpenToggle"
|
<div
|
||||||
class="mt-10 pl-3 absolute w-full text-gray-900 hidden md:inline-block"
|
v-show="currencyMenuOpenToggle"
|
||||||
>
|
class="mt-10 absolute text-gray-900 lg-view min-w-max left-0"
|
||||||
<div class="mt-2">
|
>
|
||||||
<div class="bg-white rounded-md z-10">
|
<div
|
||||||
|
class="mt-2 bg-white rounded-md border border-gray-300 drop-shadow-md shadow-md overflow-clip"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
v-for="(chainData, network) in Networks"
|
v-for="(chainData, network) in Networks"
|
||||||
:key="network"
|
class="menu-button p-4 gap-2 cursor-pointer hover:bg-gray-200 flex items-center !justify-start whitespace-nowrap transition-colors duration-150 ease-in-out"
|
||||||
class="menu-button gap-2 px-4 rounded-md cursor-pointer"
|
|
||||||
@click="networkChange(network)"
|
@click="networkChange(network)"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
@ -275,8 +293,9 @@ onClickOutside(infoMenuRef, () => {
|
|||||||
width="20"
|
width="20"
|
||||||
height="20"
|
height="20"
|
||||||
:src="getNetworkImage(NetworkEnum[network])"
|
:src="getNetworkImage(NetworkEnum[network])"
|
||||||
|
class="mr-2 ml-1"
|
||||||
/>
|
/>
|
||||||
<span class="text-gray-900 py-4 text-end font-semibold text-sm">
|
<span class="text-gray-900 font-semibold text-sm">
|
||||||
{{ chainData.chainName }}
|
{{ chainData.chainName }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -285,7 +304,7 @@ onClickOutside(infoMenuRef, () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@ -304,10 +323,11 @@ onClickOutside(infoMenuRef, () => {
|
|||||||
Conectar
|
Conectar
|
||||||
</button>
|
</button>
|
||||||
<div v-if="walletAddress" class="account-info">
|
<div v-if="walletAddress" class="account-info">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col relative">
|
||||||
<div
|
<div
|
||||||
ref="walletAddressRef"
|
ref="walletAddressRef"
|
||||||
class="top-bar-info cursor-pointer h-10"
|
class="top-bar-info cursor-pointer h-10 group hover:bg-gray-50 transition-all duration-500 ease-in-out"
|
||||||
|
:class="{ 'bg-gray-50': menuOpenToggle }"
|
||||||
@click="
|
@click="
|
||||||
[
|
[
|
||||||
(menuOpenToggle = !menuOpenToggle),
|
(menuOpenToggle = !menuOpenToggle),
|
||||||
@ -316,41 +336,52 @@ onClickOutside(infoMenuRef, () => {
|
|||||||
]
|
]
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<Account alt="Account image" />
|
<img alt="Account image" src="@/assets/account.svg" />
|
||||||
<span class="default-text">
|
<span
|
||||||
|
class="default-text text-gray-50 group-hover:text-gray-900 transition-all duration-500 ease-in-out"
|
||||||
|
:class="{ '!text-gray-900': menuOpenToggle }"
|
||||||
|
>
|
||||||
{{ formatWalletAddress() }}
|
{{ formatWalletAddress() }}
|
||||||
</span>
|
</span>
|
||||||
<ChevronDown
|
<div
|
||||||
class="pr-4 sm:pr-0 transition-all duration-300 ease-in-out"
|
class="transition-all duration-500 ease-in-out mt-1"
|
||||||
:class="{ 'scale-y-[-1]': menuOpenToggle }"
|
:class="{ 'scale-y-[-1]': menuOpenToggle }"
|
||||||
alt="Chevron Down"
|
>
|
||||||
/>
|
<svg
|
||||||
</div>
|
viewBox="0 0 16 16"
|
||||||
<div
|
class="h-4 w-4 text-white group-hover:text-gray-900"
|
||||||
v-show="menuOpenToggle"
|
:class="{ '!text-gray-900': menuOpenToggle }"
|
||||||
class="mt-10 absolute w-full text-gray-900 hidden md:inline-block"
|
>
|
||||||
>
|
<use href="@/assets/chevron.svg#chevronDown"></use>
|
||||||
<div class="pl-4 mt-2">
|
</svg>
|
||||||
<div class="bg-white rounded-md z-10">
|
|
||||||
<RouterLink
|
|
||||||
onclick="closeMenu()"
|
|
||||||
to="/manage_bids"
|
|
||||||
class="redirect_button menu-button"
|
|
||||||
>
|
|
||||||
Gerenciar Ofertas
|
|
||||||
</RouterLink>
|
|
||||||
<div class="w-full flex justify-center">
|
|
||||||
<hr class="w-4/5" />
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
onclick="disconnectUser()"
|
|
||||||
class="redirect_button menu-button"
|
|
||||||
>
|
|
||||||
Desconectar
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<transition name="dropdown">
|
||||||
|
<div
|
||||||
|
v-show="menuOpenToggle"
|
||||||
|
class="mt-10 absolute w-full text-gray-900 lg-view"
|
||||||
|
>
|
||||||
|
<div class="pl-4 mt-2">
|
||||||
|
<div
|
||||||
|
class="bg-white rounded-md z-10 border border-gray-300 drop-shadow-md shadow-md overflow-clip"
|
||||||
|
>
|
||||||
|
<div class="menu-button" @click="closeMenu()">
|
||||||
|
<RouterLink to="/manage_bids" class="redirect_button">
|
||||||
|
Gerenciar Ofertas
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
|
<div class="w-full flex justify-center">
|
||||||
|
<hr class="w-4/5" />
|
||||||
|
</div>
|
||||||
|
<div class="menu-button" @click="disconnectUser">
|
||||||
|
<RouterLink to="/" class="redirect_button">
|
||||||
|
Desconectar
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -450,6 +481,13 @@ header {
|
|||||||
@apply sm:px-4 px-3 py-2 rounded text-gray-50 font-semibold sm:text-base text-xs hover:bg-transparent;
|
@apply sm:px-4 px-3 py-2 rounded text-gray-50 font-semibold sm:text-base text-xs hover:bg-transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.topbar-text {
|
||||||
|
@apply text-gray-50 font-semibold sm:text-base mt-0.5 transition-all duration-500;
|
||||||
|
}
|
||||||
|
.topbar-link {
|
||||||
|
@apply mt-0.5 hover:border-b-2 border-b-2 border-transparent hover:!border-white;
|
||||||
|
}
|
||||||
|
|
||||||
.account-info {
|
.account-info {
|
||||||
@apply flex items-center gap-6;
|
@apply flex items-center gap-6;
|
||||||
}
|
}
|
||||||
@ -459,7 +497,7 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.top-bar-info {
|
.top-bar-info {
|
||||||
@apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg items-center;
|
@apply flex justify-between items-center gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.redirect_button {
|
.redirect_button {
|
||||||
@ -474,9 +512,26 @@ a:hover {
|
|||||||
@apply bg-gray-200 rounded;
|
@apply bg-gray-200 rounded;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lg-view {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.sm-view {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.mobile-menu {
|
.mobile-menu {
|
||||||
margin-top: 1400px;
|
margin-top: 1400px;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 500px) {
|
||||||
|
.lg-view {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-view {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -4,6 +4,7 @@ import router from "./router";
|
|||||||
import { createPinia } from "pinia";
|
import { createPinia } from "pinia";
|
||||||
|
|
||||||
import "./assets/main.css";
|
import "./assets/main.css";
|
||||||
|
import "./assets/transitions.css";
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|
||||||
|
|||||||
@ -134,11 +134,4 @@ h4 {
|
|||||||
.text {
|
.text {
|
||||||
@apply text-white text-center;
|
@apply text-white text-center;
|
||||||
}
|
}
|
||||||
.blur-container-row {
|
|
||||||
@apply flex flex-row justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 max-w-screen-sm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 max-w-screen-sm;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -120,46 +120,48 @@ onMounted(async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<SearchComponent
|
<div>
|
||||||
v-if="flowStep == Step.Search"
|
<SearchComponent
|
||||||
@token-buy="confirmBuyClick"
|
v-if="flowStep == Step.Search"
|
||||||
/>
|
@token-buy="confirmBuyClick"
|
||||||
<CustomAlert
|
|
||||||
v-if="flowStep == Step.Search && showModal"
|
|
||||||
:type="'redirect'"
|
|
||||||
@close-alert="showModal = false"
|
|
||||||
@go-to-lock="flowStep = Step.Buy"
|
|
||||||
/>
|
|
||||||
<CustomAlert
|
|
||||||
v-if="
|
|
||||||
flowStep == Step.List && showBuyAlert && !loadingLock && !loadingRelease
|
|
||||||
"
|
|
||||||
:type="'buy'"
|
|
||||||
@close-alert="showBuyAlert = false"
|
|
||||||
/>
|
|
||||||
<div v-if="flowStep == Step.Buy">
|
|
||||||
<QrCodeComponent
|
|
||||||
:pixTarget="String(pixTarget)"
|
|
||||||
:tokenValue="tokenAmount"
|
|
||||||
@pix-validated="releaseTransaction"
|
|
||||||
v-if="!loadingLock"
|
|
||||||
/>
|
/>
|
||||||
<LoadingComponent
|
<CustomAlert
|
||||||
v-if="loadingLock"
|
v-if="flowStep == Step.Search && showModal"
|
||||||
:message="'A transação está sendo enviada para a rede'"
|
:type="'redirect'"
|
||||||
|
@close-alert="showModal = false"
|
||||||
|
@go-to-lock="flowStep = Step.Buy"
|
||||||
/>
|
/>
|
||||||
</div>
|
<CustomAlert
|
||||||
<div v-if="flowStep == Step.List">
|
v-if="
|
||||||
<div class="flex flex-col gap-10" v-if="!loadingRelease">
|
flowStep == Step.List && showBuyAlert && !loadingLock && !loadingRelease
|
||||||
<BuyConfirmedComponent
|
"
|
||||||
:tokenAmount="tokenAmount"
|
:type="'buy'"
|
||||||
:is-current-step="flowStep == Step.List"
|
@close-alert="showBuyAlert = false"
|
||||||
@make-another-transaction="flowStep = Step.Search"
|
/>
|
||||||
|
<div v-if="flowStep == Step.Buy">
|
||||||
|
<QrCodeComponent
|
||||||
|
:pixTarget="String(pixTarget)"
|
||||||
|
:tokenValue="tokenAmount"
|
||||||
|
@pix-validated="releaseTransaction"
|
||||||
|
v-if="!loadingLock"
|
||||||
|
/>
|
||||||
|
<LoadingComponent
|
||||||
|
v-if="loadingLock"
|
||||||
|
:message="'A transação está sendo enviada para a rede'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div v-if="flowStep == Step.List">
|
||||||
|
<div class="flex flex-col gap-10" v-if="!loadingRelease">
|
||||||
|
<BuyConfirmedComponent
|
||||||
|
:tokenAmount="tokenAmount"
|
||||||
|
:is-current-step="flowStep == Step.List"
|
||||||
|
@make-another-transaction="flowStep = Step.Search"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<LoadingComponent
|
||||||
|
v-if="loadingRelease"
|
||||||
|
:message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<LoadingComponent
|
|
||||||
v-if="loadingRelease"
|
|
||||||
:message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -86,30 +86,32 @@ watch(networkName, async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<CustomAlert
|
<div>
|
||||||
v-if="showAlert"
|
<CustomAlert
|
||||||
:type="'withdraw'"
|
v-if="showAlert"
|
||||||
@close-alert="showAlert = false"
|
:type="'withdraw'"
|
||||||
/>
|
@close-alert="showAlert = false"
|
||||||
<div class="page">
|
/>
|
||||||
<div class="header" v-if="!loadingWithdraw && !walletAddress">
|
<div class="page">
|
||||||
Por Favor Conecte Sua Carteira
|
<div class="header" v-if="!loadingWithdraw && !walletAddress">
|
||||||
</div>
|
Por Favor Conecte Sua Carteira
|
||||||
<div class="header" v-if="!loadingWithdraw && walletAddress">
|
</div>
|
||||||
Gerenciar Ofertas
|
<div class="header" v-if="!loadingWithdraw && walletAddress">
|
||||||
</div>
|
Gerenciar Ofertas
|
||||||
<div class="w-full max-w-4xl">
|
</div>
|
||||||
<ListingComponent
|
<div class="w-full max-w-4xl">
|
||||||
v-if="!loadingWithdraw && walletAddress"
|
<ListingComponent
|
||||||
:valid-deposits="depositList"
|
v-if="!loadingWithdraw && walletAddress"
|
||||||
:wallet-transactions="transactionsList"
|
:valid-deposits="depositList"
|
||||||
:active-lock-amount="activeLockAmount"
|
:wallet-transactions="transactionsList"
|
||||||
@deposit-withdrawn="callWithdraw"
|
:active-lock-amount="activeLockAmount"
|
||||||
></ListingComponent>
|
@deposit-withdrawn="callWithdraw"
|
||||||
<LoadingComponent
|
></ListingComponent>
|
||||||
v-if="loadingWithdraw"
|
<LoadingComponent
|
||||||
:message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
|
v-if="loadingWithdraw"
|
||||||
/>
|
:message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -61,29 +61,31 @@ const sendNetwork = async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-if="flowStep == Step.Sell">
|
<div>
|
||||||
<WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
|
<div v-if="flowStep == Step.Sell">
|
||||||
<LoadingComponent
|
<WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
|
||||||
v-if="loading"
|
<LoadingComponent
|
||||||
:message="'A transação está sendo enviada para a rede.'"
|
v-if="loading"
|
||||||
/>
|
:message="'A transação está sendo enviada para a rede.'"
|
||||||
</div>
|
/>
|
||||||
<CustomAlert
|
</div>
|
||||||
v-if="flowStep == Step.Sell && showAlert"
|
<CustomAlert
|
||||||
:type="'sell'"
|
v-if="flowStep == Step.Sell && showAlert"
|
||||||
@close-alert="showAlert = false"
|
:type="'sell'"
|
||||||
/>
|
@close-alert="showAlert = false"
|
||||||
<div v-if="flowStep == Step.Network">
|
|
||||||
<SendNetwork
|
|
||||||
:pixKey="pixKeyBuyer"
|
|
||||||
:offer="Number(offerValue)"
|
|
||||||
:selected-token="etherStore.selectedToken"
|
|
||||||
v-if="!loading"
|
|
||||||
@send-network="sendNetwork"
|
|
||||||
/>
|
|
||||||
<LoadingComponent
|
|
||||||
v-if="loading"
|
|
||||||
:message="'A transação está sendo enviada para a rede.'"
|
|
||||||
/>
|
/>
|
||||||
|
<div v-if="flowStep == Step.Network">
|
||||||
|
<SendNetwork
|
||||||
|
:pixKey="pixKeyBuyer"
|
||||||
|
:offer="Number(offerValue)"
|
||||||
|
:selected-token="etherStore.selectedToken"
|
||||||
|
v-if="!loading"
|
||||||
|
@send-network="sendNetwork"
|
||||||
|
/>
|
||||||
|
<LoadingComponent
|
||||||
|
v-if="loading"
|
||||||
|
:message="'A transação está sendo enviada para a rede.'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user