hueso/P2Pix-Front-End
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into p2pix-V2

Browse Source
This commit is contained in:
brunoedcf
2023-02-06 20:21:35 -03:00
parent 53eb43044b ce417075d3
commit 3bdea04020
17 changed files with 448 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue
View File

@@ -16,7 +16,7 @@ const emit = defineEmits(["makeAnotherTransaction"]);
<template>
<div class="page">
<div class="text-container">
<span class="text font-extrabold text-5xl max-w-[50rem]"
<span class="text font-extrabold sm:text-5xl text-xl max-w-[50rem]"
>Os tokens já foram transferidos <br />
para a sua carteira!
</span>
@@ -30,8 +30,9 @@ const emit = defineEmits(["makeAnotherTransaction"]);
<p class="text-2xl text-gray-900">{{ props.tokenAmount }} BRZ</p>
</div>
<div class="my-5">
<p>
<b>Não encontrou os tokens? </b>Clique no botão abaixo para <br />
<p class="text-sm">
<b>Não encontrou os tokens? </b><br />Clique no botão abaixo para
<br />
cadastrar o BRZ em sua carteira.
</p>
</div>
@@ -48,18 +49,24 @@ const emit = defineEmits(["makeAnotherTransaction"]);
Fazer nova transação
</button>
</div>
<div class="text-container mt-16">
<div class="text-container mt-16 lg-view">
<span class="text font-extrabold text-3xl max-w-[50rem]"
>Histórico de compras
>Gerenciar transações
</span>
</div>
<div class="w-full max-w-4xl">
<div class="w-full max-w-4xl lg-view">
<ListingComponent
:walletTransactions="lastWalletReleaseTransactions"
:isManageMode="false"
>
</ListingComponent>
</div>
<RouterLink
to="/transaction_history"
class="mt-8 text-white text-2xl font-bold"
>
Gerenciar Transações
</RouterLink>
</div>
</template>
@@ -77,7 +84,7 @@ p {
}
.text {
@apply text-gray-800 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 w-1/3;
@@ -99,4 +106,22 @@ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.lg-view {
display: inline-block;
}
.sm-view {
display: none;
}
@media screen and (max-width: 500px) {
.lg-view {
display: none;
}
.sm-view {
display: inline-block;
}
}
</style>

66
src/components/CustomModal.vue Normal file
View File

@@ -0,0 +1,66 @@
<script setup lang="ts">
</script>
<template>
<div class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none">
<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 inserir o código de autenticação.
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>
</template>
<style scoped>
.modal-overlay {
display: flex !important;
}
.modal {
background-color: white;
height: 250px;
width: 300px;
margin-top: 50%;
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: 16px;
}
button {
width: 100px;
height: 40px;
color: black;
font-size: 14px;
border-radius: 10px;
}
</style>

102
src/components/ListingComponent/ListingComponent.vue
View File

@@ -74,70 +74,64 @@ watch(props, async (): Promise<void> => {
//emits
const emit = defineEmits(["withdrawDeposit"]);
// initial itemsToShow value
// initial itemsToShow valueb
showInitialItems();
</script>
<template>
<div class="blur-container">
<div
class="grid grid-cols-4 grid-flow-row w-full px-6"
v-if="itemsToShow.length != 0"
v-bind:class="{ 'grid-cols-3': props.isManageMode }"
>
<span class="text-xs text-gray-50 font-medium justify-self-center"
>Valor</span
>
<span class="text-xs text-gray-50 font-medium justify-self-center"
>Data</span
>
<span
v-if="!props.isManageMode"
class="text-xs text-gray-50 font-medium justify-self-center"
>
"Tipo de transação"
</span>
<span class="text-xs text-gray-50 font-medium justify-self-center">{{
props.isManageMode ? "Retirar tokens" : "Checar transação"
}}</span>
</div>
<div
class="grid grid-cols-4 grid-flow-row w-full bg-white px-6 py-4 rounded-lg"
v-bind:class="{ 'grid-cols-3': props.isManageMode }"
class="w-full bg-white p-6 rounded-lg"
v-for="(item, index) in itemsToShow"
:key="item.blockNumber"
>
<span class="last-release-info">
{{
isValidDeposit(item)
? item.remaining
: getAmountFormatted(item.args?.amount)
}}
BRZ
</span>
<span class="last-release-info transaction-date"> 20 out 2022 </span>
<span class="last-release-info" v-if="!props.isManageMode">
{{ getEventName((item as Event).event) }}
</span>
<div
v-if="!props.isManageMode"
class="flex gap-2 cursor-pointer items-center justify-self-center"
@click="openEtherscanUrl((item as Event)?.transactionHash)"
>
<span class="last-release-info">Etherscan</span>
<img alt="Redirect image" src="@/assets/redirect.svg" />
<div class="flex justify-between items-center">
<div>
<p class="text-sm leading-5 font-medium text-gray-600">
{{ getEventName((item as Event).event) }}
</p>
<p class="text-xl leading-7 font-semibold text-gray-900">
{{
isValidDeposit(item)
? item.remaining
: getAmountFormatted(item.args?.amount)
}}
BRZ
</p>
<p class="text-xs leading-4 font-medium text-gray-600">20/08/2022</p>
</div>
<div>
<div class="bg-emerald-300 rounded-lg text-center mb-2">
Finalizado
</div>
<div
v-if="!props.isManageMode"
class="flex gap-2 cursor-pointer items-center justify-self-center"
@click="openEtherscanUrl((item as Event)?.transactionHash)"
>
<span class="last-release-info">Etherscan</span>
<img alt="Redirect image" src="@/assets/redirect.svg" />
</div>
</div>
</div>
<div class="pt-5" v-if="props.isManageMode">
<!-- <div class="py-2">
<p class="text-sm leading-5 font-medium">Valor do saque</p>
<p class="text-2xl leading-8 font-medium">0</p>
</div> -->
<div
v-if="props.isManageMode"
class="flex gap-2 cursor-pointer items-center justify-self-center"
@click="emit('withdrawDeposit', (item as ValidDeposit).token, index)"
>
<span class="last-release-info">Retirar</span>
<img alt="Withdraw image" src="@/assets/withdraw.svg" />
<hr class="pb-3" />
<div class="flex justify-between items-center">
<div
class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
@click="
emit('withdrawDeposit', (item as ValidDeposit).token, index)
"
>
<img alt="Withdraw image" src="@/assets/withdraw.svg" />
<span class="last-release-info">Sacar</span>
</div>
</div>
</div>
</div>
<div
@@ -180,7 +174,7 @@ p {
}
.text {
@apply text-gray-800 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 w-1/3;

20
src/components/LoadingComponent/LoadingComponent.vue
View File

@@ -9,16 +9,18 @@ const props = defineProps({
<template>
<div class="page">
<div class="text-container">
<span class="text font-bold text-3xl max-w-[29rem]">{{
props.title ? props.title : "Confirme em sua carteira"
}}</span>
<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="blur-container w-[26rem]">
<div class="blur-container sm:w-[26rem] w-[20rem]">
<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 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 min-w-fit gap-1"
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"
@@ -26,7 +28,7 @@ const props = defineProps({
width="96"
height="48"
/>
<span class="text-black font-medium text-sm px-12 mt-4">
<span class="text-black font-medium text-sm lg:px-12 px-4 mt-4">
{{ $props.message }}
</span>
</div>
@@ -55,11 +57,11 @@ const props = defineProps({
}
.text {
@apply text-gray-800 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;
@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"] {

42
src/components/QrCodeComponent.vue
View File

@@ -3,6 +3,7 @@ import { pix } from "../utils/QrCodePix";
import { ref } from "vue";
import { debounce } from "@/utils/debounce";
import CustomButton from "./CustomButton/CustomButton.vue";
import CustomModal from "./CustomModal.vue";
import api from "../services/index";
// props and store references
@@ -15,6 +16,7 @@ const qrCode = ref<string>("");
const qrCodePayload = ref<string>("");
const isPixValid = ref<boolean>(false);
const isCodeInputEmpty = ref<boolean>(true);
const showModal = ref<boolean>(true);
const e2eId = ref<string>("");
// Emits
@@ -71,17 +73,19 @@ const validatePix = async (): Promise<void> => {
<template>
<div class="page">
<div class="text-container">
<span class="text font-extrabold text-2xl max-w-[30rem]">
<span
class="text font-extrabold lg:text-2xl text-xl sm:max-w-[30rem] max-w-[24rem]"
>
Utilize o QR Code ou copie o código para realizar o Pix
</span>
<span class="text font-medium text-md max-w-[28rem]">
<span class="text font-medium lg:text-md text-sm max-w-[28rem]">
Após realizar o Pix no banco de sua preferência, insira o código de
autenticação para enviar a transação para a rede.
</span>
</div>
<div class="blur-container max-w-[28rem] text-black">
<div class="blur-container sm:max-w-[28rem] max-w-[20rem] text-black">
<div
class="flex-col items-center justify-center flex w-full bg-white p-8 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"
>
<img alt="Qr code image" :src="qrCode" class="w-48 h-48" />
<span class="text-center font-bold">Código pix</span>
@@ -95,9 +99,9 @@ const validatePix = async (): Promise<void> => {
src="@/assets/copyPix.svg"
width="16"
height="16"
class="pt-2 mb-5 cursor-pointer"
class="pt-2 lg:mb-5 cursor-pointer"
/>
<span class="text-xs text-start">
<span class="text-xs text-start lg-view">
<strong>ATENÇÃO!</strong> A transação só será processada após inserir
o código de autenticação. Caso contrário não conseguiremos comprovar o
seu depósito e não será possível transferir os tokens para sua
@@ -111,7 +115,7 @@ const validatePix = async (): Promise<void> => {
type="text"
placeholder="Digite o código do comprovante PIX"
@input="debounce(handleInputEvent, 500)($event)"
class="text-md w-full box-border p-2 h-6 mb-2 outline-none"
class="sm:text-md text-sm w-full box-border p-2 sm:h-6 h-2 mb-2 outline-none"
/>
<div class="custom-divide" v-if="!isCodeInputEmpty"></div>
<div
@@ -150,6 +154,10 @@ const validatePix = async (): Promise<void> => {
@button-clicked="emit('pixValidated', e2eId)"
/>
</div>
<CustomModal
v-if="showModal"
@close-modal="showModal = false"
/>
</div>
</template>
@@ -195,7 +203,7 @@ h2 {
}
.text {
@apply text-gray-800 text-center;
@apply text-white text-center;
}
.blur-container {
@@ -210,4 +218,22 @@ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.lg-view {
display: inline-block;
}
.sm-view {
display: none;
}
@media screen and (max-width: 500px) {
.lg-view {
display: none;
}
.sm-view {
display: inline-block;
}
}
</style>

27
src/components/SearchComponent.vue
View File

@@ -119,22 +119,25 @@ watch(walletAddress, (): void => {
<template>
<div class="page">
<div class="text-container">
<span class="text font-extrabold text-5xl max-w-[29rem]"
>Adquira cripto com apenas um Pix</span
<span
class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] max-w-[20rem]"
>
<span class="text font-medium text-base max-w-[28rem]"
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 px-10 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"
>
<div class="flex justify-between w-full items-center">
<div class="flex justify-between sm:w-full items-center">
<input
type="number"
class="border-none outline-none text-lg text-gray-900 w-fit"
class="border-none outline-none text-lg text-gray-900 w-3/4"
v-bind:class="{
'font-semibold': tokenValue != undefined,
'text-xl': tokenValue != undefined,
@@ -146,8 +149,12 @@ watch(walletAddress, (): void => {
<div
class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
>
<img alt="Token image" class="w-fit" src="@/assets/brz.svg" />
<span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span>
<img
alt="Token image"
class="sm:w-fit w-4"
src="@/assets/brz.svg"
/>
<span class="text-gray-900 sm:text-lg text-md w-fit" id="brz">BRZ</span>
</div>
</div>
@@ -220,11 +227,11 @@ watch(walletAddress, (): void => {
}
.text {
@apply text-gray-800 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;
@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"] {

2
src/components/SellerSteps/SellerSearchComponent.vue
View File

@@ -122,7 +122,7 @@ const handleInputEvent = (event: any): void => {
}
.text {
@apply text-gray-800 text-center;
@apply text-white text-center;
}
.blur-container {

13
src/components/SellerSteps/SendNetwork.vue
View File

@@ -14,10 +14,10 @@ const props = defineProps({
<template>
<div class="page">
<div class="text-container">
<span class="text font-extrabold text-5xl max-w-[50rem]"
<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-medium text-base max-w-[30rem]"
<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
@@ -63,18 +63,15 @@ p {
}
.text-container {
@apply flex flex-col items-center justify-center gap-4;
@apply flex flex-col items-center justify-center sm:gap-4 gap-2;
}
.text {
@apply text-gray-800 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 w-1/3;
@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 w-1/3;
@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 {

35
src/components/SellerSteps/WantSellComponent.vue
View File

@@ -63,25 +63,26 @@ const handleButtonClick = async (
</script>
<template>
<div class="page">
<div class="page w-full">
<div class="text-container">
<span class="text font-extrabold text-5xl max-w-[29rem]"
<span class="text font-extrabold sm:text-5xl text-3xl sm:max-w-[29rem] max-w-[20rem]"
>Venda cripto e receba em Pix</span
>
<span class="text font-medium text-base max-w-[28rem]"
<span class="text font-medium sm:text-base text-xs sm:max-w-[28rem] max-w-[30rem] sm:tracking-normal tracking-wide"
>Digite sua oferta, informe a chave Pix, selecione a rede, aprove o
envio da transação e confirme sua oferta.</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 px-10 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"
>
<div class="flex justify-between w-full items-center">
<div class="flex justify-between items-center">
<input
type="number"
v-model="offer"
class="border-none outline-none text-lg text-gray-900 w-fit"
class="border-none outline-none text-gray-900 sm:w-fit w-3/4"
v-bind:class="{
'font-semibold': offer != undefined,
'text-xl': offer != undefined,
@@ -93,8 +94,14 @@ const handleButtonClick = async (
<div
class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
>
<img alt="Token image" class="w-fit" src="@/assets/brz.svg" />
<span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span>
<img
alt="Token image"
class="sm:w-fit w-4"
src="@/assets/brz.svg"
/>
<span class="text-gray-900 w-fit" id="brz">
BRZ
</span>
</div>
</div>
@@ -110,14 +117,14 @@ const handleButtonClick = async (
</div>
</div>
<div
class="flex flex-col w-full bg-white px-10 py-8 rounded-lg border-y-10"
class="flex flex-col w-full bg-white sm:px-10 px-6 py-8 rounded-lg border-y-10"
>
<div class="flex justify-between w-full items-center">
<input
@input="debounce(handlePixKeyInputEvent, 500)($event)"
type="text"
v-model="pixKey"
class="border-none outline-none text-lg text-gray-900 w-fit"
class="border-none outline-none sm:text-lg text-sm text-gray-900 w-fit"
placeholder="Digite a chave Pix"
/>
</div>
@@ -156,11 +163,11 @@ const handleButtonClick = async (
}
.text {
@apply text-gray-800 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;
@apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 mt-10 w-auto;
}
input[type="number"] {
@@ -171,4 +178,8 @@ input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input {
@apply sm:text-lg text-sm;
}
</style>

194
src/components/TopBar/TopBar.vue
View File

@@ -1,7 +1,8 @@
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useEtherStore } from "@/store/ether";
import { ref } from "vue";
import { ref, onBeforeUnmount, onMounted } from "vue";
import { onClickOutside } from "@vueuse/core";
import { NetworkEnum } from "@/model/NetworkEnum";
import { connectProvider, requestNetworkChange } from "@/blockchain/provider";
import ethereumImage from "@/assets/ethereum.svg";
@@ -17,6 +18,8 @@ const menuHoverToggle = ref<boolean>(false);
const currencyMenuOpenToggle = ref<boolean>(false);
const currencyMenuHoverToggle = ref<boolean>(false);
const walletAddressRef = ref<any>(null);
const currencyRef = ref<any>(null);
//Methods
const connectMetaMask = async (): Promise<void> => {
@@ -58,28 +61,63 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
return validImages[networkName];
};
onClickOutside(walletAddressRef, () => {
menuHoverToggle.value = false;
menuOpenToggle.value = false;
});
onClickOutside(currencyRef, () => {
currencyMenuOpenToggle.value = false;
currencyMenuHoverToggle.value = false;
});
</script>
<template>
<header>
<header class="z-20">
<RouterLink :to="'/'" class="default-button">
<img
alt="P2Pix logo"
class="logo"
class="logo lg-view"
src="@/assets/logo.svg"
width="75"
height="75"
/>
<img
alt="P2Pix logo"
class="logo sm-view w-10/12"
src="@/assets/logo2.svg"
width="40"
height="40"
/>
</RouterLink>
<div class="flex gap-4 items-center">
<RouterLink :to="'/faq'" class="default-button"> FAQ </RouterLink>
<RouterLink :to="sellerView ? '/' : '/seller'" class="default-button">
<div class="flex sm:gap-4 gap-2 items-center">
<RouterLink :to="'/faq'" class="default-button lg-view"> FAQ </RouterLink>
<RouterLink
:to="'/faq'"
v-if="!walletAddress"
class="default-button sm-view"
>
FAQ
</RouterLink>
<RouterLink
:to="sellerView ? '/' : '/seller'"
class="default-button sm:whitespace-normal whitespace-nowrap lg-view"
>
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</RouterLink>
<RouterLink
:to="sellerView ? '/' : '/seller'"
v-if="!walletAddress"
class="default-button sm:whitespace-normal whitespace-nowrap sm-view"
>
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</RouterLink>
<div class="flex flex-col" v-if="walletAddress">
<div
class="group top-bar-info cursor-pointer hover:bg-white"
ref="currencyRef"
class="group top-bar-info cursor-pointer hover:bg-white h-10"
@click="
[
(currencyMenuOpenToggle = !currencyMenuOpenToggle),
@@ -101,7 +139,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
:src="getNetworkImage(etherStore.networkName)"
/>
<span
class="default-text group-hover:text-gray-900"
class="default-text group-hover:text-gray-900 lg-view"
:style="{
color: currencyMenuOpenToggle
? '#000000'
@@ -131,7 +169,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
</div>
<div
v-show="currencyMenuOpenToggle"
class="mt-10 pl-3 absolute w-full text-gray-900"
class="mt-10 pl-3 absolute w-full text-gray-900 lg-view"
>
<div class="mt-2">
<div class="bg-white rounded-md z-10">
@@ -176,15 +214,24 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
<button
type="button"
v-if="!walletAddress"
class="border-amber-500 border-2 rounded default-button"
class="border-amber-500 border-2 rounded default-button lg-view"
@click="connectMetaMask()"
>
Conectar carteira
</button>
<button
type="button"
v-if="!walletAddress"
class="border-amber-500 border-2 rounded default-button sm-view"
@click="connectMetaMask()"
>
Conectar
</button>
<div v-if="walletAddress" class="account-info">
<div class="flex flex-col">
<div
class="top-bar-info cursor-pointer"
ref="walletAddressRef"
class="top-bar-info cursor-pointer h-10"
@click="
[
(menuOpenToggle = !menuOpenToggle),
@@ -203,7 +250,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
>
<img alt="Account image" src="@/assets/account.svg" />
<span
class="default-text text-sm"
class="default-text"
:style="{
color: menuOpenToggle
? '#000000'
@@ -215,7 +262,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
{{ formatWalletAddress() }}
</span>
<img
class="text-gray-900"
class="text-gray-900 lg-view"
v-if="!menuHoverToggle && !menuOpenToggle"
alt="Chevron Down"
src="@/assets/chevronDown.svg"
@@ -233,7 +280,7 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
</div>
<div
v-show="menuOpenToggle"
class="mt-10 absolute w-full text-gray-900"
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">
@@ -264,6 +311,93 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
</div>
</div>
</div>
<div
v-show="menuOpenToggle"
class="mobile-menu fixed w-4/5 text-gray-900 sm-view"
>
<div class="pl-4 mt-2 h-full">
<div class="bg-white rounded-md z-10 h-full">
<div class="menu-button" @click="closeMenu()">
<RouterLink
:to="sellerView ? '/' : '/seller'"
class="redirect_button mt-2"
>
{{ sellerView ? "Quero comprar" : "Quero vender" }}
</RouterLink>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div class="menu-button" @click="closeMenu()">
<RouterLink to="/transaction_history" class="redirect_button">
Histórico de transações
</RouterLink>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<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 class="w-full flex justify-center pb-20">
<hr class="w-4/5" />
</div>
</div>
</div>
</div>
<div
v-show="currencyMenuOpenToggle"
class="mobile-menu fixed w-4/5 text-gray-900 sm-view"
>
<div class="pl-4 mt-2 h-full">
<div class="bg-white rounded-md z-10 h-full">
<div
class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2"
@click="networkChange(NetworkEnum.ethereum)"
>
<img
alt="Ethereum image"
width="20"
height="20"
src="@/assets/ethereum.svg"
/>
<span class="text-gray-900 py-4 text-end font-bold text-sm">
Ethereum
</span>
</div>
<div class="w-full flex justify-center">
<hr class="w-4/5" />
</div>
<div
class="menu-button gap-2 sm:px-4 rounded-md cursor-pointer py-2"
@click="networkChange(NetworkEnum.polygon)"
>
<img
alt="Polygon image"
width="20"
height="20"
src="@/assets/polygon.svg"
/>
<span class="text-gray-900 py-4 text-end font-bold text-sm">
Polygon
</span>
</div>
<div class="w-full flex justify-center pb-12">
<hr class="w-4/5" />
</div>
</div>
</div>
</div>
</header>
</template>
@@ -273,7 +407,7 @@ header {
}
.default-button {
@apply px-4 py-2 rounded text-gray-50 font-semibold text-base 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;
}
.account-info {
@@ -285,18 +419,42 @@ header {
}
.top-bar-info {
@apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 rounded;
@apply flex justify-between gap-2 px-4 py-2 border-amber-500 border-2 sm:rounded rounded-lg items-center;
}
.redirect_button {
@apply py-4 text-gray-900 font-semibold text-xs w-full;
@apply py-5 text-gray-900 sm:font-semibold font-bold sm:text-xs text-sm w-full;
}
.menu-button {
@apply flex text-center justify-center hover:bg-gray-200;
@apply flex sm:text-center sm:justify-center hover:bg-gray-200 ml-8 sm:ml-0;
}
a:hover {
@apply bg-gray-200 rounded;
}
.lg-view {
display: inline-block;
}
.sm-view {
display: none;
}
.mobile-menu {
margin-top: 1400px;
bottom: 0px;
height: auto;
}
@media screen and (max-width: 500px) {
.lg-view {
display: none;
}
.sm-view {
display: inline-block;
}
}
</style>