Seções padrão

Adicionando componentes

1. Vá para o link a seguir (que redireciona para a gestão de aplicativos do DexAppBuilder) e conecte sua carteira clicando no botão "Connect wallet" localizado no canto superior direito da tela.

1. Escolha entre as conexões disponíveis. Lembre-se de que você deve conectar a carteira onde criou seu DApp para que ele apareça na seção de administração.

1. Uma vez conectados, você poderá ver seus DApps na lista. Clique no lápis à direita do domínio do seu DApp, na coluna “Ações”).

1. Dentro da página de administração do seu DApp, vá para a seção "Layout" à esquerda clicando nela. Várias opções serão exibidas; clique em "Pages" para gerenciar a criação de páginas dentro do seu DApp.

1. Para os propósitos deste guia vamos criar uma nova página chamada “Alternative” na qual colaremos o componente “Code”. Agora clique no botão azul «New page».

1. Agora vamos criar o título da página, lembrando que usaremos "Alternative" para o exemplo atual. Depois de digitá-lo, pressionamos o botão azul «Save»

1. Você verá agora sua nova página aparecer na lista. Clique nela para entrar na página específica.

1. Você pode ver aqui que sua página está vazia. Isso significa que ela não contém nenhum componente, já que acabamos de criá-la. Vamos começar adicionando alguns componentes predefinidos clicando no botão "+ Add section"

1. Todos esses componentes podem ser adicionados individualmente a qualquer página do seu DApp, inclusive usando componentes personalizados. Ambos podem ser misturados em qualquer página para ajudar você a projetar melhor.

Vamos definir cada um dos componentes para que você conheça suas possibilidades e casos de uso.

Componentes de criptomoeda

Troca de token

Quer promover a compra/venda de um token específico, até mesmo o seu? Usando este componente você pode incorporar uma janela de negociação em qualquer lugar do seu DApp onde seus clientes e visitantes possam obter ou vender o token que você predefiniu.

Swap

Ele incorpora um componente de atomic swap altamente refinado e incrivelmente eficiente onde seus clientes (e você mesmo) poderão acessar o API de liquidez 0x e trocar criptomoedas rapidamente da maneira mais segura, diretamente da sua carteira.

Clicar no componente abrirá o modal de configuração. Vamos examinar cada campo:

• Variante: Selecione entre as aparências visuais que oferecemos para tornar seu componente único.

• Rede padrão: Escolha a rede padrão para o componente quando os visitantes entrarem na sua página sem conectar suas carteiras cripto.

• Rede: Essa será a rede padrão assim que seus visitantes conectarem suas carteiras.

• Pesquisar token de entrada padrão (Eu tenho): Escolha aqui o token de entrada para a visualização / negociação padrão. Este é o token que você está pedindo aos seus clientes que usem, mas eles podem escolher quaisquer outros da lista.

• Pesquisar token de saída padrão (Eu quero): Escolha aqui o par que você está vendendo por padrão. Por exemplo, se você está promovendo sua própria moeda/token nas redes habilitadas, você pode escolhê-lo aqui como entrada. Lembre-se de que você precisa importar seu token antes que ele possa aparecer aqui na lista.

• Slippage padrão: Esta é a porcentagem de tolerância para slippages entre ordens de liquidez. Quanto menor o número, mais eficientes serão as trocas. Recomendado entre 0-50%.

• Mostrar apenas meus tokens na busca: Ideal para DApps com tokens em whitelist, esta opção permite fazer exatamente isso: exibir no seu componente apenas os tokens que você decide mostrar.

• Swaps sem gás: Defina como padrão a escolha do usuário sobre usar swaps sem gás. Note que os usuários poderão ligar e desligar essa opção diretamente no componente.

• Habilitar parâmetros de URL: Toda vez que você fizer uma consulta usando o componente de swap (escolhendo a rede em que deseja negociar, o token e a quantia) o componente de swap gera uma URL inteligente com todos os dados da negociação. Ative isso para que seus usuários possam ver essa URL, ou deixe desativado para usar a mesma URL disfarçada do seu DApp.

Exchange

Você também pode adicionar um componente de exchange descentralizada predefinido que opera com a mesma eficiência do componente de swap, mas com uma diferença: ao contrário do componente de swap, onde as trocas são atômicas (instantâneas, ou ao preço de mercado), os usuários poderão colocar ordens limit dentro da rede 0x e obter mais das trocas.

• Rede padrão: Escolha a rede padrão para o componente quando os visitantes entrarem na sua página sem conectar suas carteiras cripto. Clicar no lápis destacado em verde abrirá um modal para escolher todas as redes que você deseja habilitar na sua exchange.

• Rede: Como no componente de swap, essa será a rede padrão assim que seus visitantes conectarem suas carteiras.

• Tokens cotados: Esta opção destacará tokens para você a fim de facilitar para seus clientes escolhê-los na lista. Esses aparecerão no topo da lista 👇 (destacados em verde)

• Token base: Escolha aqui o token de entrada para a visualização / negociação padrão. Este é o token que você está pedindo aos seus clientes que usem, mas eles podem escolher quaisquer outros da lista.

• Token de cotação: Escolha aqui o par que você está vendendo por padrão.

• Slippage padrão: Esta é a porcentagem de tolerância para slippages entre ordens de liquidez. Quanto menor o número, mais eficientes serão as trocas. Recomendado entre 0-50%.

• Endereço do destinatário da taxa (endereço ERC20): Insira aqui o endereço da carteira onde você deseja receber as comissões geradas por este componente de exchange. Certifique-se de que seja o correto.

• Valor da taxa (%): Defina a porcentagem que você quer cobrar de seus clientes por cada negociação que fizerem na sua exchange. Não seja ganancioso e use percentuais pequenos para incentivar o uso.

Carteira

Este é um componente de carteira simples, onde seus visitantes poderão verificar seus saldos de tokens em redes predefinidas, ver seus NFTs e até enviar e receber criptomoedas.

Componentes de tokens não fungíveis (NFTs)

NFTs em destaque

Destaque NFTs para fazê-los parecer ótimos dentro do componente predefinido e assim receber ofertas dos seus visitantes.

Clicar no componente "Featured NFTs" abrirá o seguinte modal 👇

Importando itens individuais

• Título: Escreva um título para este componente. Você poderá carregar vários NFTs nele, até mesmo de diferentes redes blockchain.

• Tipo de item: Escolher "asset" permitirá importar itens individuais se você quiser apenas exibir alguns deles.

• Rede: Escolha a rede onde o NFT está hospedado.

• Endereço do contrato: Cole o endereço do contrato para o ativo específico.

• ID do token: Esta é a identificação única para cada token. Insira a do seu item específico.

• Título: Coloque um título para este NFT específico.

Escolhendo da sua coleção

• Escolha a coleção que você importou anteriormente. Se ainda não fez isso, consulte importação de coleções seção nesta documentação.

• ID do token: Esta é a identificação única para cada token. Insira a do seu item específico.

• Título: Coloque um título para este NFT específico.

Loja de NFT

Se você abriu ofertas para seus NFTs, usando este componente você pode facilmente exibi-los. Ele serve para refinar ativos entre grandes coleções mostrando apenas aqueles que têm ofertas abertas.

• Conta da loja: Esta é a carteira que abriu os anúncios. Se você criou novos anúncios com uma de suas carteiras, cole-a aqui e seus itens aparecerão na visualização.

• Nome: Este será o nome público deste componente de loja.

• Título: Escreva um título atraente para esta seleção específica.

• Descrição: Sobre o que é esta seleção? Seja específico aqui e você atrairá mais atenção.

• Imagem de perfil: Coloque um PFP para este componente de loja de NFT.

• Imagem de fundo: Aquela por trás do PFP.

Clique em «Save» quando terminar.

Coleções

Exiba NFTs individuais ou coleções completas por grupos com este componente. O uso é muito semelhante ao componente Featured NFTs. Clicar no componente «Collections» abrirá um modal como o abaixo 👇 (clique em «+ ADD ITEM» para começar a adicionar ativos)

Importando itens individuais (por asset)

• Título: Escreva um título para este componente. Você poderá carregar vários NFTs nele, até mesmo de diferentes redes blockchain.

• Tipo de item: Escolher "asset" permitirá importar itens individuais se você quiser apenas exibir alguns deles.

• Rede: Escolha a rede onde o NFT está hospedado.

• Endereço do contrato: Cole o endereço do contrato para o ativo específico.

• ID do token: Esta é a identificação única para cada token. Insira a do seu item específico.

• Título: Coloque um título para este NFT específico.

Importando uma coleção completa

• Título: Escreva um título para este componente. Você poderá carregar vários NFTs nele, até mesmo de diferentes redes blockchain.

• Tipo de item: Neste caso, coleção.

• Rede: Escolha a rede onde a coleção de NFT está hospedada.

• Endereço do contrato: Cole o endereço do contrato para a coleção específica.

• Imagem: Faça upload de uma imagem padrão para sua coleção de NFT.

• Título: Coloque um título para esta coleção específica.

• Subtítulo: Deve funcionar como uma descrição para sua coleção.

• Variante: Escolha entre padrão e simples.

• Destaque: Esta coleção específica será marcada como em destaque.

Componentes Web3

Formulário de contrato (recurso avançado)

Com este componente você pode adicionar funções específicas de um determinado contrato inteligente (aquele que você especificar) e assim economizar tempo e interações para seus visitantes filtrando ações do contrato e usando-as na interface do seu app cripto. Usar esta função requer conhecimento de Solidity (linguagem de programação).

Clicar no ícone do componente abrirá o seguinte modal 👇

• Rede: Escolha a rede do contrato que você vai usar. Usaremos Ethereum já que vamos importar o popular contrato USDt Tether, verificado no Etherscan.

• Endereço do contrato: Clique na barra e cole o endereço do contrato. Você também pode clicar na barra de busca abaixo marcada com 🔍Procurar por um contrato e digite o nome do contrato que você está procurando. Estamos usando 0xdAC17F958D2ee523a2206206994597C13D831ec7 para este exemplo.

• ABI: Esta é uma seção somente leitura que escaneia a ABI do contrato (Application Binary Interface) e mostra abaixo todas as funções dentro do contrato.

Clicar em qualquer uma das funções abrirá os detalhes dessa função específica e criará uma janela na pré-visualização 👇

Tudo será personalizável em cada chamada de função, exceto a lógica. Isso garantirá que cada chamada de função seja segura, levando em conta que nesta ocasião usamos um contrato altamente auditado e seguro como o Tether um.

Formulário de contrato do usuário

Após criar formulários web3 você pode importá-los diretamente para este componente e assim economizar tempo nas implementações. Na foto abaixo você verá os formulários web3 listados que você criou ou clonou previamente no seu DApp. Clicar em qualquer um deles mostrará na pré-visualização à direita 👇

Recursos

Vídeo

Incorpore qualquer vídeo do YouTube em um componente curado para qualquer visualização (desktop, mobile, tablets, geladeiras, carros, etc.)

• Tipo de vídeo: Apenas o YouTube está habilitado para este componente. Habilitaremos mais serviços de vídeo sob demanda.

• Título: Escreva um título descritivo agradável para este vídeo.

• URL do vídeo: Cole o link do vídeo do YouTube.

Call to action (CTA)

Chame a atenção dos seus visitantes com uma mensagem poderosa com um subtítulo e um botão com um link de navegação. É a opção perfeita para promover produtos relacionados ou produtos encontrados em sites externos.

• Variante: Escolha entre claro e escuro.

• Título: Escreva o assunto ou o título principal para este componente. Você pode ver na imagem acima que é o que tem o maior tamanho de fonte.

• Subtítulo: O menor tamanho de fonte, acima do título.

• Título do botão: Este é o texto dentro do botão CTA.

• URL do botão: Para onde irá o visitante que clicar no botão CTA?

• Abrir em nova página: Marque esta opção para que a página abra em uma nova guia. Esta opção é recomendada quando o endereço está localizado em um site externo a este DApp.

Ao mesmo tempo, podemos adicionar NFTs ou coleções em um CTA para promovê-los e fazer com que nossos visitantes acessem diretamente clicando no botão «+ ADD ITEM» 👇

Após importar seus NFTs, a pré-visualização deve ficar como a imagem abaixo 👇

Low code

Markdown

Para fãs de conteúdo organizado, textos bem formatados e até para escrever documentação técnica, este componente ajuda a criar as páginas mais estilizadas usando a popular e simples linguagem Markdown.

Código

Incorpore virtualmente qualquer coisa usando este componente. Você precisará de marcação HTML, os scripts e os arquivos CSS para que funcione bem.

Consulte incorporando sites externos para mais informações sobre como incorporar aplicativos de terceiros com este componente.