Merge branch 'develop' into p2pix-V2

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.3",
     "@heroicons/vue": "^2.0.12",
+    "@vueuse/core": "^9.12.0",
     "alchemy-sdk": "^2.3.0",
     "axios": "^1.2.1",
     "crc": "^3.8.0",

src/assets/logo2.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.32352 0C3.37332 0 4.26027 0.697928 4.54816 1.65467C5.65322 1.73319 6.71174 2.21301 7.494 3.00109L11.7165 7.22065C11.731 7.23519 11.7485 7.24973 11.763 7.26718L16.3926 11.8939C16.9567 12.4609 17.7361 12.7837 18.5329 12.7837C18.5358 12.7837 18.5387 12.7837 18.5416 12.7837H18.7975C19.1465 11.9433 19.9753 11.353 20.9437 11.353C22.2261 11.353 23.2672 12.394 23.2672 13.6765C23.2672 14.9589 22.2261 16 20.9437 16C19.9084 16 19.036 15.3253 18.7336 14.3889H18.5445C18.5416 14.3889 18.5358 14.3889 18.5329 14.3889C17.3144 14.3889 16.1221 13.8946 15.2643 13.0309L11.0244 8.79099C11.0069 8.77644 10.9866 8.7619 10.9691 8.74446L6.35405 4.12941C5.84806 3.6205 5.16467 3.30934 4.44929 3.25118C4.0916 4.07125 3.27445 4.64413 2.32061 4.64413C1.04108 4.64413 0 3.60596 0 2.32352C0 1.04108 1.04108 0 2.32352 0Z" fill="#F9FAFB"/>
+<path d="M2.32352 11.3531C3.29189 11.3531 4.11778 11.9434 4.46965 12.7838H4.72555C4.72846 12.7838 4.73137 12.7838 4.73428 12.7838C5.53399 12.7838 6.31334 12.461 6.87459 11.894L9.63722 9.13135L10.7684 10.2626L8.00291 13.0281C7.14213 13.8918 5.95274 14.3862 4.73428 14.3862C4.73137 14.3862 4.72555 14.3862 4.72265 14.3862H4.53362C4.2341 15.3196 3.35878 15.9972 2.32352 15.9972C1.04108 15.9972 0 14.9561 0 13.6737C0 12.3913 1.04108 11.3531 2.32352 11.3531Z" fill="#F9FAFB"/>
+<path d="M20.9405 4.64413C19.9722 4.64413 19.1463 4.0538 18.7944 3.21338H18.5385C18.5356 3.21338 18.5327 3.21338 18.5298 3.21338C17.7301 3.21338 16.9507 3.53617 16.3895 4.10324L13.6268 6.86587L12.4956 5.73464L15.2611 2.9691C16.1219 2.10542 17.3113 1.61105 18.5298 1.61105C18.5327 1.61105 18.5385 1.61105 18.5414 1.61105H18.7304C19.0329 0.674664 19.9082 0 20.9405 0C22.223 0 23.2641 1.04108 23.2641 2.32352C23.2641 3.60596 22.223 4.64413 20.9405 4.64413Z" fill="#F9FAFB"/>
+</svg>

src/assets/main.css

@@ -4,8 +4,9 @@
 @tailwind utilities;
 
 #app {
+  width: 100%;
   margin: 0 auto;
-  padding: 2rem 4rem;
+  padding: 2rem;
   height: fit-content;
   min-height: 100vh;
   background-image: url( './bg.svg' );

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -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>
+          <p class="text-sm">
-            <b>Não encontrou os tokens? </b>Clique no botão abaixo para <br />
+            <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>

src/components/CustomModal.vue

@@ -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>

src/components/ListingComponent/ListingComponent.vue

@@ -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"
+      class="w-full bg-white p-6 rounded-lg"
-      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 }"
       v-for="(item, index) in itemsToShow"
       :key="item.blockNumber"
     >
-      <span class="last-release-info">
+      <div class="flex justify-between items-center">
-        {{
+        <div>
-          isValidDeposit(item)
+          <p class="text-sm leading-5 font-medium text-gray-600">
-            ? item.remaining
+            {{ getEventName((item as Event).event) }}
-            : getAmountFormatted(item.args?.amount)
+          </p>
-        }}
+          <p class="text-xl leading-7 font-semibold text-gray-900">
-        BRZ
+            {{
-      </span>
+              isValidDeposit(item)
-
+                ? item.remaining
-      <span class="last-release-info transaction-date"> 20 out 2022 </span>
+                : getAmountFormatted(item.args?.amount)
-
+            }}
-      <span class="last-release-info" v-if="!props.isManageMode">
+            BRZ
-        {{ getEventName((item as Event).event) }}
+          </p>
-      </span>
+          <p class="text-xs leading-4 font-medium text-gray-600">20/08/2022</p>
-
+        </div>
-      <div
+        <div>
-        v-if="!props.isManageMode"
+          <div class="bg-emerald-300 rounded-lg text-center mb-2">
-        class="flex gap-2 cursor-pointer items-center justify-self-center"
+            Finalizado
-        @click="openEtherscanUrl((item as Event)?.transactionHash)"
+          </div>
-      >
+          <div
-        <span class="last-release-info">Etherscan</span>
+            v-if="!props.isManageMode"
-        <img alt="Redirect image" src="@/assets/redirect.svg" />
+            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
+        <hr class="pb-3" />
-        v-if="props.isManageMode"
+        <div class="flex justify-between items-center">
-        class="flex gap-2 cursor-pointer items-center justify-self-center"
+          <div
-        @click="emit('withdrawDeposit', (item as ValidDeposit).token, index)"
+            class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
-      >
+            @click="
-        <span class="last-release-info">Retirar</span>
+              emit('withdrawDeposit', (item as ValidDeposit).token, index)
-        <img alt="Withdraw image" src="@/assets/withdraw.svg" />
+            "
+          >
+            <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;

src/components/LoadingComponent/LoadingComponent.vue

@@ -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]">{{
+      <span
-        props.title ? props.title : "Confirme em sua carteira"
+        class="text font-bold sm:text-3xl text-2xl sm:max-w-[29rem] max-w-[20rem]"
-      }}</span>
+      >
+        {{ 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"] {

src/components/QrCodeComponent.vue

@@ -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>

src/components/SearchComponent.vue

@@ -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]"
+      <span
-        >Adquira cripto com apenas um Pix</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" />
+            <img
-            <span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span>
+              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"] {

src/components/SellerSteps/SellerSearchComponent.vue

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

src/components/SellerSteps/SendNetwork.vue

@@ -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;
+  @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;
 }
 
 .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 {

src/components/SellerSteps/WantSellComponent.vue

@@ -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" />
+            <img
-            <span class="text-gray-900 text-lg w-fit" id="brz">BRZ</span>
+              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>

src/components/TopBar/TopBar.vue

@@ -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">
+    <div class="flex sm:gap-4 gap-2 items-center">
-      <RouterLink :to="'/faq'" class="default-button"> FAQ </RouterLink>
+      <RouterLink :to="'/faq'" class="default-button lg-view"> FAQ </RouterLink>
-      <RouterLink :to="sellerView ? '/' : '/seller'" class="default-button">
+      <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>

src/model/ValidDeposit.ts

@@ -4,4 +4,5 @@ export type ValidDeposit = {
   remaining: number;
   seller: string;
   pixKey: number;
+  open?: boolean;
 };

src/views/FaqView.vue

@@ -96,7 +96,7 @@ const openItem = (index: number) => {
 
     <div class="flex justify-between w-10/12 mt-20">
       <div>
-        <h1 class="text-3xl text-gray-800 font-bold">Sumário</h1>
+        <h1 class="text-3xl text-white font-bold">Sumário</h1>
         <h3
           :class="index == selectedSection ? 'selected-sumario' : 'sumario'"
           v-for="(f, index) in faq"
@@ -125,10 +125,10 @@ const openItem = (index: number) => {
               class="mr-3"
               v-if="item.isOpen"
             />
-            <h4>{{ item.title }}</h4>
+            <h4 class="text-white">{{ item.title }}</h4>
           </div>
           <div
-            style="padding-top: 24px"
+            style="padding-top: 24px; color: white"
             v-if="item.isOpen"
             v-html="item.content"
           ></div>
@@ -159,12 +159,8 @@ const openItem = (index: number) => {
   margin: 24px 0;
 }
 
-p,
+h3 {
-h2,
+  @apply text-white;
-h3,
-h4 {
-  @apply text-gray-800 text-xl;
-  color: #1f2937;
 }
 
 h2,
@@ -177,7 +173,7 @@ h4 {
 }
 
 .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;

src/views/TransactionHistoryView.vue

@@ -58,6 +58,6 @@ watch(networkName, async () => {
 }
 
 .header {
-  @apply text-3xl text-gray-900 leading-9 font-bold justify-center flex;
+  @apply text-3xl text-white leading-9 font-bold justify-center flex;
 }
 </style>