diff --git a/src/assets/faqEthereum.jpeg b/src/assets/faqEthereum.jpeg new file mode 100644 index 0000000..a4c511e Binary files /dev/null and b/src/assets/faqEthereum.jpeg differ diff --git a/src/utils/files/faqContent.json b/src/utils/files/faqContent.json new file mode 100644 index 0000000..5be0f1a --- /dev/null +++ b/src/utils/files/faqContent.json @@ -0,0 +1,53 @@ +[ + { + "name": "1. Como Começar", + "items": [ + { + "title": "O que é uma carteira (wallet)?", + "content": "Cripto-wallet é um software que armazena criptomoedas e criptoativos de forma segura. Existem também dispositivos físicos chamados de cold/hard wallets. Com a carteira-cripto você consegue comprar e vender tokens sem a necessidade de uma corretora (exchange), por exemplo. Cripto-ativos não ficam de fato armazenados nessa carteira, mas sim as informações que possibilitam acessá-los numa blockchain, como suas chaves pública e privada.\n
\n\n* **O que é um endereço de carteira (wallet address)?**\n Sequência alfanumérica que permite que você envie e receba suas criptomoedas em segurança. Por exemplo: 3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy.\n\n* **Como conectar sua carteira ao p2pix?**\n Clique em 'Conectar Carteira'. Escolha qual wallet ou ponte (bridge) utilizará para se conectar (MetaMask ou WalletConnect). Ao clicar, sua carteira se abrirá. Caso seja seu 1º acesso, certifique-se de que permitiu sua carteira a se conectar com nossa plataforma. \n\n* **Como instalar MetaMask no Google Chrome?** \n MetaMask é uma web3 wallet que pode ser adicionada como extensão no seu browser (navegador). Para instalar esse plugin (add-on) no Google Chrome, basta você acessar a Chrome Web Store e pesquisar “MetaMask”. Certifique-se de que é a versão legítima da carteira pelo número de downloads (bastante alto, pois é a maior cold wallet da web3), então é só clicar em “Adicionar ao Chrome”. Depois da instalação ser concluída, basta seguir o passo-a-passo proposto na interface da MetaMask para a criação da conta, login e senha. O caminho para a instalação em outros browsers como Firefox, Opera, entre outros navegadores, é o mesmo. \n\n
\nNota: Não esqueça de guardar sua seed phrase em um local seguro! Sem ela é impossível recuperar o acesso à sua carteira (caso perca sua senha) e também aos seus cripto ativos, eles serão perdidos - literalmente - para sempre.\n" + }, + { + "title": "O que é uma rede (network)?", + "content": "Criptomoedas são transacionadas em redes de computadores, nas blockchains é que ficam armazenadas as informações sobre suas transações, não em um servidor. Existem [diversas redes no ecossistema cripto](https://www.gemini.com/cryptopedia/blockchain-technology-explained), como a rede do Bitcoin, da Ethereum, para citar as duas mais conhecidas. \n
\n\n* **Como selecionar a rede?**\nVocê deve ficar atento a rede que está selecionada em sua carteira. Na MetaMask, escolha a você escolhe a rede que vai operar clicando na primeira caixa ao lado do seu avatar:\n![Image Ethereum](/src/assets/faqEthereum.jpeg)\nCaso você copie um endereço na sua MetaMask estando selecionada a Rede Ethereum Mainnet e queira operar na Polygon, seus cripto ativos serão perdidos. \n\n* **O que é taxa de rede (gas fee)?**\nCusto de transação do blockchain. Você paga essa taxa para a rede que vai remunerar os validadores. É uma forma de incentivar os validadores a dar continuidade nos seus serviços. " + } + ] + }, + { + "name": "2. Comprar tokens", + "items": [ + { + "title": "Como comprar?", + "content": "1. Conectar wallet (MetaMask ou WalletConnect)\n2. Digitar amount (quantidade);\n3. Solicitar token (criptomoeda);\n4. Identificar vendedor (da lista de pessoas);\n * Escanear QRCode (ou acrescenta chave manualmente);\n * Colar e2eID (identificação end-to-end) a.k.a. código de identificação (API Pix / comprovante bancário);\n5. Receber na carteira (wallet conectada." + }, + { + "title": "O que é uma stablecoin?", + "content": "É uma criptomoeda com lastro em moeda fiduciária (por exemplo, Real brasileiro ou Dólar americando). Cada stablecoin gerada por um projeto emissor tem a mesma quantidade em reserva da moeda fiduciária em seu caixa. Alguns exemplos de stablecoins pareadas com dólar americano são USDt, DAI, USDc. Já vinculadas ao preço do Real são BRZ, MBRL e cREAL.\n
\n\n* **O que é o BRZ?**\n [BRZ](https://www.brztoken.io/) é a sigla para Brazilian Digital Token. É um tipo de criptomoeda que tem valor pareado com o Real (BRL). Ou seja, 1 BRZ tem valor igual a 1 BRL." + }, + { + "title": "De quem estou comprando?", + "content": "Vendedores fazem as ofertas e indicam a chave-Pix que irão receber o valor transacionado. Essa oferta fica travada no smart contract até que as transações sejam concluídas e você possa fazer o saque dos seus tokens. \n\n
\n\n* **Onde encontrar comprovante do Pix?**\n Quando você faz um Pix um comprovante é gerado automaticamente para o pagador e para o recebedor. Esse comprovante pode ser acessado no momento da transação via app/site do banco ou pelo seu extrato bancário convencional.\n* **Para onde vão os tokens que eu comprei?**\n Os tokens comprados terão como destino a carteira que você conectou ao p2pix. \n Nota: Lembre-se sempre de configurar a sua carteira na rede correta em que quer receber seus tokens. " + } + ] + }, + { + "name": "3. Vender tokens", + "items": [ + { + "title": "Como vender?", + "content": "1. Enviar tokens;\n2. Indique sua chave-Pix;\n3. Criar [whitelist](https://academy.binance.com/en/glossary/whitelist) onde quer receber isso;\n4. Withdraw (saque) para remoção dos tokens;\n5. Lock (trava de 24h) para esperar transações antes dos saques.\n" + }, + { + "title": "O que é aprovar tokens?", + "content": "Aprovações de tokens funcionam como permissões de sua carteira a um determinado [dApp](https://ethereum.org/en/developers/docs/dapps/) para movimentar os tokens. Ao aprovar tokens, você permite que nosso contrato inteligente acesse e execute as transações na sua carteira web3." + }, + { + "title": "O que é o lock na rede?", + "content": "\"Travamento\" na rede é uma forma de especificar um tempo para retirada dos ativos digitais. O contrato inteligente do p2pix 'trava' os tokens enviados para a rede por 24 horas. Só depois de transcorridas essas 24h que o saque dos tokens estará liberado. Isso ocorre para garantir uma transação segura para os vendedores." + }, + { + "title": "Como retirar a oferta?", + "content": "Caso você desista da sua oferta, você pode invalidar sua ordem de venda e impedir um novo ‘lock’ na rede." + } + ] + } +] \ No newline at end of file diff --git a/src/views/FaqView.vue b/src/views/FaqView.vue index 632b5fa..7624e09 100644 --- a/src/views/FaqView.vue +++ b/src/views/FaqView.vue @@ -2,69 +2,9 @@ import type { Faq } from "@/model/Faq"; import { ref } from "vue"; import { marked } from "marked"; +import faqContent from "@/utils/files/faqContent.json"; -const faq = ref([ - { - name: "1. Como Começar", - items: [ - { - title: "O que é uma carteira (wallet)", - content: - "# Lorem ipsum dolor sit **amet** consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.", - }, - { - title: "O que é uma carteira (wallet)", - content: - "Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.", - }, - { - title: "O que é uma carteira (wallet)", - content: - "Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.", - }, - ], - }, - { - name: "2. Comprar tokens", - items: [ - { - title: "O que é um endereço de carteira (wallet address)", - content: - "Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.", - }, - { - title: "O que é um endereço de carteira (wallet address)", - content: - "Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.", - }, - { - title: "O que é um endereço de carteira (wallet address)", - content: - "Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.", - }, - ], - }, - { - name: "3. Vender tokens", - items: [ - { - title: "Como conectar a carteira ao p2pix", - content: - "Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.", - }, - { - title: "Como conectar a carteira ao p2pix", - content: - "Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.", - }, - { - title: "Como conectar a carteira ao p2pix", - content: - "Lorem ipsum dolor sit amet consectetur. Neque libero magna mi purus. Aliquam vitae feugiat quis sapien. Pharetra gravida nisi donec bibendum mauris aliquam molestie. Et nunc placerat in ac integer maecenas arcu. Lotuam tincidunt morbi ac sed fames habitasse velit et nunc.", - }, - ], - }, -]); +const faq = ref(faqContent); const selectedSection = ref(0); @@ -76,9 +16,15 @@ const openItem = (index: number) => { faq.value[selectedSection.value].items[index].isOpen = !faq.value[selectedSection.value].items[index].isOpen; + marked.setOptions({ + breaks: true, + gfm: true, + }); + faq.value[selectedSection.value].items[index].content = marked( faq.value[selectedSection.value].items[index].content ); + console.log(marked(faq.value[selectedSection.value].items[index].content)); }; @@ -127,11 +73,7 @@ const openItem = (index: number) => { />

{{ item.title }}

-
+
@@ -154,6 +96,23 @@ const openItem = (index: number) => { @apply flex flex-col items-center justify-center w-full mt-16; } +div.content { + padding-top: 24px; + color: white; +} + +.content :deep(ul) { + @apply list-disc m-2 p-3; +} + +.content :deep(ol) { + @apply list-decimal m-2 p-3; +} + +.content :deep(ol ul) { + @apply list-disc m-1 p-1; +} + .hr { border: 1px solid #1f2937; margin: 24px 0;