Gerador de formulários Web3

Interagir com Smart Contracts sem exigir habilidades avançadas de programação tornou-se uma realidade tangível. A DexKit desenvolveu uma ferramenta excepcionalmente valiosa que permite aos usuários aproveitar recursos de seus Contratos preferidos e incorporá-los em seus projetos criativos construído com DexAppBuilder.

Para entusiastas experientes de DeFi que já utilizaram anteriormente o Remix, esta ferramenta serve como uma versão simplificada que engloba suas funcionalidades mais significativas. Ela capacita novos desenvolvedores ou pessoas com experiência técnica limitada em web3 a criar produtos personalizados com facilidade, sem precisar escrever uma única linha de código.

Ao invocar funções dos seus contratos favoritos, você pode alcançar o seguinte:

• Receber doações em criptomoeda em sua DApp de forma simples clicando em qualquer um dos tokens escolhidos da rede suportada.

• Enviar airdrops para sua comunidade.

• Organizar rifas justas empregando completa aleatoriedade.

• Distribuir amplamente seu token para uma vasta base de clientes.

• Projetar e implantar jogos cripto.

• Monetizar seu conteúdo.

• E qualquer outra função que você possa extrair de qualquer smart contract verificado para concretizar suas ideias inovadoras.

Requisitos básicos

Para começar a usar esta ferramenta você deve criar sua DApp com o DexAppBuilder. Dessa forma você pode adicionar os formulários que criar aqui (aqueles que contêm as chamadas aos contratos que precisaremos para nosso app).

Primeiros passos

Se você já tem sua DApp criada, continue aqui para navegar diretamente ao construtor de formulários. É lá que criaremos nossas chamadas a smart contracts que mais tarde usaremos na nossa DApp.

Apresentando formulários

Nos referiremos a cada uma das chamadas ou funções extraídas dos smart contracts como "formulários." Esses formulários podem ser criados e armazenados para utilização futura.

Para ilustrar esse conceito, vamos considerar um cenário hipotético. Imagine que queremos estabelecer um sistema de doações que permita aos visitantes do nosso site contribuir com uma quantia específica de criptomoeda N com um único clique.

O termo "criptomoeda N" denota qualquer token permitido dentro das redes suportadas, das quais podemos extrair a função transfer e modificá-la de acordo com nossos requisitos.

Agora, vamos nos aprofundar no nosso caso hipotético. Suponha que queremos criar um botão de doação cripto para o token N, e desejamos que nossos visitantes doem uma quantia particular de um token específico para essa causa.

Neste cenário, temos dois formulários para extrair: primeiro, o formulário para comprar a quantia N dos tokens escolhidos, e em segundo lugar, o formulário com o botão para transferir os tokens para o endereço que escolhemos para esse fim.

Extraindo as funções

Uma vez que exibimos os endereços dos contratos dos nossos tokens favoritos (neste caso o que usaremos para o botão de doação) procedemos a escanear o endereço para obter as funções. Abaixo explicamos como fazê-lo e criar um widget para cada uma das chamadas de contrato ou “formulários”, como decidimos chamar de forma lacônica.

1. Acesse o site da plataforma e conecte sua carteira. Uma vez dentro, clique na seção “criar formulário personalizado”.

1. Ao clicar você verá a seguinte tela. Preencha todos os campos com as informações solicitadas:

   • Nome: o nome deste formulário.

   • Descrição: Descreva sobre o que é este formulário.

   • Rede: verifique redes disponíveis para a lista de compatibilidade.

   • Endereço do contrato: Cole aqui o endereço do contrato do token que você está prestes a usar para este fim. Desde que estejamos usando nosso próprio token, o estamos pegando dos endereços de contrato na ---Our token---seção desta documentação.

   • ABI: este campo será preenchido automaticamente quando colarmos um endereço de contrato compatível.

1. Agora é hora de verificar, nas funções exibidas pela plataforma, quais delas precisaremos para nosso propósito atual. Neste caso usaremos a função transfer que é responsável por, como o próprio nome diz, transferir tokens (neste caso será da carteira do doador para a organização).

Na imagem acima você pode ver as funções que pertencem ao contrato do nosso token $KIT. No nosso exemplo atual usaremos a função transfer, como mencionado acima. Em seguida, os campos contidos dentro da função devem ser preenchidos:

• Nome da função: O título público para seu componente. Você pode ocultá-lo marcando o botão «Ocultar rótulo»

• Rótulo da chamada: Este é o nome contido dentro do botão de chamada.

• Entradas

  • Destinatário: o(s) endereço(s) ERC-20 que receberão a doação.

    • Tipo de entrada

      • Padrão, para um único endereço de destinatário fixo 0x4e110...

      • Entrada de endereço (para vários endereços de destinatários ao mesmo tempo).

• Quantidade

  • Tipo de entrada

    • Quantidade padrão (insira dígito fixo. Por exemplo: 20)

    • Decimal formatado (insira a quantia e coloque os decimais, neste caso são 18 dígitos para este contrato específico).

Usando os componentes

Depois de criar seus componentes usando as funções dos seus Smart Contracts favoritos, é hora de implementá-los dentro do(s) seu(s) produto(s). Você pode adicioná-los muito facilmente em qualquer uma das suas DApps seguindo os passos abaixo:

1. Assumindo que você já criou sua DApp com o DexAppBuilder, navegue até o painel de administração. Agora clique no menu de três pontos à direita da sua DApp e clique em «editar».

1. Agora navegue até «Páginas» escolhendo a opção na seção vertical esquerda. Você verá agora sua página principal com todos os componentes dentro. Vamos criar uma nova página para nossos formulários clicando no botão «+ Criar nova página».

1. Vamos dar um nome à nossa nova página. Para este exemplo planejamos criar uma seção de doações para diferentes projetos e finalidades.

1. Nossa página “Doar” foi criada, como podemos ver na imagem abaixo. Não há componentes dentro dela, por isso vamos clicar na opção “+ Adicionar seção personalizada” porque lá encontraremos o widget que precisamos.

1. Uma vez dentro do editor de página personalizada, clique no ícone + localizado no centro (ou à direita da tela) para adicionar um novo widget/componente. Da lista vamos usar o chamado “Contrato a partir de formulário do usuário” que convocará todos os nossos formulários criados com as instruções acima.

1. Após colocar o componente na tela você verá seus formulários criados. Escolha aquele(s) que você precisa para o propósito.

1. Aqui está como ficará seu componente. Você pode ocultar o título e informações extras para esse componente marcando a opção «Ocultar info do formulário», como mostramos abaixo.

1. É assim que seu componente de doação ficará quando instalado. Você pode ser criativo com esta opção e adicionar conteúdo à página para garantir que ela toque o coração de seus leitores/espectadores e eles doem para sua causa.

Se você conseguir exibir corretamente o componente em sua DApp, como vemos no exemplo acima, parabéns! 🥳 Você conseguiu integrar sua primeira função personalizada!

Incentivamos você a continuar testando essa nova funcionalidade. As possibilidades são infinitas e somente você pode dar o melhor propósito a este novo produto.