Histórico de compras
+ >Gerenciar transações
-
+
+
+ Gerenciar Transações
+
@@ -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;
+ }
+}
diff --git a/src/components/CustomModal.vue b/src/components/CustomModal.vue
new file mode 100644
index 0000000..8d0e70d
--- /dev/null
+++ b/src/components/CustomModal.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
index 5185858..fecf4bb 100644
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -74,70 +74,64 @@ watch(props, async (): Promise
- Valor
- Data
-
- "Tipo de transação"
-
- {{
- props.isManageMode ? "Retirar tokens" : "Checar transação"
- }}
-
-
-
- {{
- isValidDeposit(item)
- ? item.remaining
- : getAmountFormatted(item.args?.amount)
- }}
- BRZ
-
-
- 20 out 2022
-
-
- {{ getEventName((item as Event).event) }}
-
-
-
- Etherscan
- 
+
+
+
+
+
+ + {{ getEventName((item as Event).event) }} +
++ {{ + isValidDeposit(item) + ? item.remaining + : getAmountFormatted(item.args?.amount) + }} + BRZ +
+20/08/2022
+
+
+ Finalizado
+
+
+ Etherscan
+
+
+
+
+
-
- Retirar
- 
+
+
+ +
+
+
+ Sacar
+
+
+ Sacar
+
- {{
- props.title ? props.title : "Confirme em sua carteira"
- }}
+
+ {{ props.title ? props.title : "Confirme em sua carteira" }}
+
-
+
![Polygon image]()
-
+
{{ $props.message }}
@@ -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"] {
diff --git a/src/components/QrCodeComponent.vue b/src/components/QrCodeComponent.vue
index 18e50a5..e6fc5d3 100644
--- a/src/components/QrCodeComponent.vue
+++ b/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("");
const qrCodePayload = ref("");
const isPixValid = ref(false);
const isCodeInputEmpty = ref(true);
+const showModal = ref(true);
const e2eId = ref("");
// Emits
@@ -71,17 +73,19 @@ const validatePix = async (): Promise => {
-
+
Utilize o QR Code ou copie o código para realizar o Pix
-
+
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.
-
+
![Qr code image]()
Código pix
@@ -95,9 +99,9 @@ const validatePix = async (): Promise => {
src="@/assets/copyPix.svg"
width="16"
height="16"
- class="pt-2 mb-5 cursor-pointer"
+ class="pt-2 lg:mb-5 cursor-pointer"
/>
-
+
ATENÇÃO! 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 => {
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"
/>
@@ -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;
+ }
+}
diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue
index 98a22b2..b617b3c 100644
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -119,22 +119,25 @@ watch(walletAddress, (): void => {
=> {
@button-clicked="emit('pixValidated', e2eId)"
/>
+
- Adquira cripto com apenas um Pix
-
+ Digite um valor, confira a oferta, conecte sua carteira e receba os
tokens após realizar o Pix
+
-
+
@@ -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"] {
diff --git a/src/components/SellerSteps/SellerSearchComponent.vue b/src/components/SellerSteps/SellerSearchComponent.vue
index d92103c..dac415e 100644
--- a/src/components/SellerSteps/SellerSearchComponent.vue
+++ b/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 {
diff --git a/src/components/SellerSteps/SendNetwork.vue b/src/components/SellerSteps/SendNetwork.vue
index 14c004f..016e15a 100644
--- a/src/components/SellerSteps/SendNetwork.vue
+++ b/src/components/SellerSteps/SendNetwork.vue
@@ -14,10 +14,10 @@ const props = defineProps({
- 
- BRZ
+
+ BRZ
- BRZ
+
+ BRZ
- Envie sua oferta para a rede
- 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.
-
+
@@ -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;
+}
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 0e513c0..d8ad3ec 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -1,7 +1,8 @@
-
+
+ 
-
- Venda cripto e receba em Pix
- Digite sua oferta, informe a chave Pix, selecione a rede, aprove o
envio da transação e confirme sua oferta.
+
-
+
@@ -110,14 +117,14 @@ const handleButtonClick = async (
-
- BRZ
+
+
+ BRZ
+
- BRZ
+
+
+ BRZ
+
+
- FAQ
-
+
+ FAQ
+
+ FAQ
+
+
+ {{ sellerView ? "Quero comprar" : "Quero vender" }}
+
+
{{ sellerView ? "Quero comprar" : "Quero vender" }}
@@ -176,15 +214,24 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
+
+
+
{
@@ -264,6 +311,93 @@ const getNetworkImage = (networkName: NetworkEnum): string => {
+
@@ -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;
+ }
+}
diff --git a/src/model/ValidDeposit.ts b/src/model/ValidDeposit.ts
index a57383e..f7e9aa2 100644
--- a/src/model/ValidDeposit.ts
+++ b/src/model/ValidDeposit.ts
@@ -4,4 +4,5 @@ export type ValidDeposit = {
remaining: number;
seller: string;
pixKey: number;
+ open?: boolean;
};
diff --git a/src/views/FaqView.vue b/src/views/FaqView.vue
index ecbbebe..632b5fa 100644
--- a/src/views/FaqView.vue
+++ b/src/views/FaqView.vue
@@ -96,7 +96,7 @@ const openItem = (index: number) => {
+
+
+
+
+ 
+
+ Ethereum
+
+
+
+
+ Ethereum
+
+
+
+
+ +
+ 
+
+ Polygon
+
+
+
+
+ Polygon
+
+
+
+
+ +
- {
class="mr-3"
v-if="item.isOpen"
/>
-
@@ -159,12 +159,8 @@ const openItem = (index: number) => {
margin: 24px 0;
}
-p,
-h2,
-h3,
-h4 {
- @apply text-gray-800 text-xl;
- color: #1f2937;
+h3 {
+ @apply text-white;
}
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;
diff --git a/src/views/TransactionHistoryView.vue b/src/views/TransactionHistoryView.vue
index b463172..4e0033f 100644
--- a/src/views/TransactionHistoryView.vue
+++ b/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;
}