Generador de formularios Web3

Interactuar con Contratos Inteligentes sin requerir habilidades avanzadas de programación se ha convertido en una realidad tangible. DexKit ha desarrollado una herramienta excepcionalmente valiosa que permite a los usuarios aprovechar funciones de sus Contratos preferidos e incorporarlas en sus proyectos creativos construido con DexAppBuilder.

Para los entusiastas de DeFi con experiencia que han utilizado previamente Remix, esta herramienta sirve como una versión simplificada que abarca sus funcionalidades más importantes. Empodera a nuevos desarrolladores o a personas con conocimientos técnicos limitados en web3 para crear productos a medida sin esfuerzo, sin tener que escribir una sola línea de código.

Al invocar funciones de tus contratos favoritos, puedes lograr lo siguiente:

• Recibir donaciones en cripto en tu DApp sin esfuerzo simplemente haciendo clic en cualquiera de los tokens seleccionados de la red compatible.

• Enviar airdrops a tu comunidad.

• Organizar sorteos equitativos empleando aleatoriedad completa.

• Distribuir ampliamente tu token a una gran base de clientes.

• Diseñar y desplegar juegos cripto.

• Monetizar tu contenido.

• Y cualquier otra función que puedas extraer de cualquier contrato inteligente verificado para llevar a cabo tus ideas innovadoras.

Requisitos básicos

Para comenzar a usar esta herramienta debes crear tu DApp con DexAppBuilder. De esta manera puedes agregar los formularios que crees aquí (aquellos que contienen las llamadas a los contratos que necesitaremos para nuestra app).

Primeros pasos

Si ya tienes tu DApp creada, continúa aquí para navegar directamente al creador de formularios. Es allí donde crearemos nuestras llamadas a contratos inteligentes que luego utilizaremos en nuestra DApp.

Introduciendo los formularios

Nos referiremos a cada una de las llamadas o funciones extraídas de los contratos inteligentes como "formularios." Estos formularios pueden crearse y almacenarse para su utilización futura.

Para ilustrar este concepto, consideremos un escenario hipotético. Imagina que queremos establecer un sistema de donaciones que permita a los visitantes de nuestro sitio web contribuir una cantidad específica de la criptomoneda N con un solo clic.

El término "criptomoneda N" denota cualquier token permitido dentro de las redes compatibles, desde las cuales podemos extraer la función transfer y modificarla según nuestros requisitos.

Ahora, profundicemos más en nuestro caso hipotético. Supongamos que queremos crear un botón de donación cripto para el token N, y deseamos que nuestros visitantes donen una cantidad particular de un token específico para esta causa.

En este escenario, tenemos dos formularios para extraer: en primer lugar, el formulario para comprar la cantidad N de los tokens elegidos, y en segundo lugar, el formulario con el botón para transferir los tokens a la dirección que elegimos para tal fin.

Extrayendo las funciones

Una vez que hayamos mostrado las direcciones de contrato de nuestros tokens favoritos (en este caso el que usaremos para el botón de donación) procedemos a escanear la dirección para obtener las funciones. A continuación explicamos cómo hacerlo y crear un widget para cada una de las llamadas al contrato o “formularios”, como decidimos llamarlo lacónicamente.

1. Ingresa al sitio web de la plataforma y conecta tu billetera. Una vez dentro, haz clic en la sección “crear formulario personalizado”.

1. Una vez clicado verás la siguiente pantalla. Completa todos los campos con la información solicitada:

   • Nombre: el nombre para este formulario.

   • Descripción: Describe de qué trata este formulario.

   • Red: verifica redes disponibles para la lista de compatibilidad.

   • Dirección del contrato: Pega aquí la dirección del contrato del token que vas a usar para este propósito. Siempre que usemos nuestro propio token lo tomamos de las direcciones de contrato en la ---Our token---sección de esta documentación.

   • ABI: este campo se llenará automáticamente cuando peguemos una dirección de contrato compatible.

1. Ahora es momento de revisar, dentro de las funciones mostradas por la plataforma, cuáles de ellas necesitaremos para nuestro propósito actual. En este caso usaremos la función transfer que es responsable de, como su nombre indica, transferir tokens (en este caso será desde la billetera del donante hacia la organización).

En la imagen de arriba puedes ver las funciones que pertenecen al contrato de nuestro token $KIT. En nuestro ejemplo actual usaremos la función transfer, como se indicó anteriormente. A continuación, deben completarse los campos contenidos dentro de la función:

• Nombre de la función: El título público para tu componente. Puedes ocultarlo marcando el botón «Ocultar etiqueta»

• Etiqueta de la llamada: Este es el nombre contenido dentro del botón de llamada.

• Entradas

  • Destinatario: la(s) dirección(es) ERC-20 que recibirán la donación.

    • Tipo de entrada

      • Predeterminado, para una única dirección de destinatario fija 0x4e110...

      • Entrada de dirección (para varias direcciones de destinatarios al mismo tiempo).

• Cantidad

  • Tipo de entrada

    • Cantidad por defecto (ingresa dígito fijo. Por ejemplo: 20)

    • Decimal formateado (ingresa la cantidad y pon los decimales, en este caso son 18 dígitos para este contrato específico).

Usando los componentes

Después de haber creado tus componentes usando las funciones de tus Contratos Inteligentes favoritos, es momento de implementarlos dentro de tu(s) producto(s). Puedes agregarlos muy fácilmente en cualquiera de tus DApps siguiendo los pasos a continuación:

1. Asumiendo que ya has creado tu DApp con DexAppBuilder, navega al panel de administración. Ahora haz clic en el menú de tres puntos a la derecha de tu DApp y haz clic en «editar».

1. Ahora navega a «Páginas» seleccionando la opción en la sección vertical izquierda. Verás tu página principal con todos los componentes dentro. Vamos a crear una nueva página para nuestros formularios presionando el botón «+ Crear nueva página».

1. Démosle un nombre a nuestra nueva página. Para este ejemplo planeamos crear una sección de donaciones para diferentes proyectos y propósitos.

1. Nuestra página “Donar” ha sido creada, como podemos ver en la imagen abajo. No hay componentes dentro de ella, por lo que haremos clic en la opción “+ Agregar sección personalizada” porque allí encontraremos el widget que necesitamos.

1. Una vez dentro del editor de la página personalizada, haz clic en el ícono + ubicado en el centro (o a la derecha de la pantalla) para agregar un nuevo widget / componente. De la lista vamos a usar el llamado “Contrato desde formulario de usuario” que invocará todos nuestros formularios creados con las instrucciones anteriores.

1. Después de colocar el componente en la pantalla verás tus formularios creados. Elige el/los que necesites para el propósito.

1. Así se verá tu componente. Puedes ocultar el título y la información extra de ese componente marcando la opción «Ocultar info del formulario», como mostramos a continuación.

1. Así es como se vería tu componente de donación cuando esté instalado. Puedes ser creativo con esta opción y agregar contenido a la página para asegurarte de que toque el corazón de tus lectores/espectadores y donen a tu causa.

Si puedes mostrar correctamente el componente en tu DApp, como vemos en el ejemplo anterior, ¡felicidades! 🥳 ¡Has logrado integrar tu primera función personalizada!

Te animamos a que continúes probando esta nueva funcionalidad. Las posibilidades son infinitas y solo tú puedes darle el mejor propósito a este nuevo producto.