Secciones por defecto

Añadiendo componentes

1. Ve a el siguiente enlace (que redirige a la gestión de la aplicación de DexAppBuilder) y conecta tu wallet haciendo clic en el botón "Connect wallet" ubicado en la esquina superior derecha de la pantalla.

1. Elige entre las conexiones disponibles. Recuerda que debes conectar la wallet donde has creado tu DApp para que aparezca en la sección de administración.

1. Una vez conectados podrás ver tus DApps en la lista. Haz clic en el lápiz a la derecha del dominio de tu DApp, dentro de la columna “Acciones”).

1. Una vez dentro de la página de administración de tu DApp, ve a la sección "Layout" en la izquierda haciendo clic en ella. Se mostrarán varias opciones, haz clic en "Pages" para gestionar la creación de páginas dentro de tu DApp.

1. Para los propósitos de esta guía crearemos una nueva página llamada “Alternative” en la que pegaremos el componente “Code”. Ahora haz clic en el botón azul «Nueva página».

1. Ahora vamos a crear el título de la página, recordando que usaremos "Alternative" para el ejemplo actual. Una vez que terminemos de escribirlo presionamos el botón azul «Guardar»

1. Ahora verás tu nueva página aparecer en la lista. Haz clic en ella para entrar en la página específica.

1. Puedes ver aquí que tu página está vacía. Esto significa que no contiene ningún componente ya que la acabamos de crear. Comencemos añadiendo algunos componentes predefinidos haciendo clic en el botón "+ Añadir sección"

1. Todos estos componentes pueden añadirse individualmente a cualquier página de tu DApp, incluso usando componentes personalizados. Ambos pueden mezclarse en cualquier página para ayudarte a diseñar mejor.

Vamos a definir cada uno de los componentes para que puedas conocer sus posibilidades y casos de uso.

Componentes de criptomonedas

Intercambio de tokens

¿Buscas promover la compra/venta de un token específico, incluso el tuyo propio? Con este componente puedes incrustar una ventana de intercambio en cualquier parte de tu DApp donde tus clientes y visitantes puedan obtener o vender el token que hayas predefinido.

Swap

Incrusta un componente de intercambio atómico altamente refinado e increíblemente eficiente donde tus clientes (y tú mismo) podrán acceder al API de liquidez 0x y cambiar criptomonedas rápidamente de la manera más segura, directamente desde tu billetera.

Hacer clic en el componente abrirá el modal de configuración. Vamos a profundizar en cada campo:

• Variante: Selecciona entre los aspectos visuales que ofrecemos para hacer tu componente único.

• Red por defecto: Elige la red por defecto para el componente cuando los visitantes entren en tu página sin conectar sus billeteras cripto.

• Red: Esta será la red por defecto tan pronto tus visitantes conecten sus billeteras.

• Buscar token de entrada por defecto (Tengo): Elige aquí el token de entrada para la vista/intercambio por defecto. Este es el token que estás pidiendo a tus clientes que usen, pero ellos pueden elegir cualquier otro de la lista.

• Buscar token de salida por defecto (Quiero): Elige aquí el par que estás vendiendo por defecto. Por ejemplo, si estás promoviendo tu propia moneda/token en las redes habilitadas, puedes elegirlo aquí como entrada. Recuerda que necesitas importar tu token antes de que pueda aparecer aquí en la lista.

• Deslizamiento por defecto: Este es el porcentaje de tolerancia para deslizamientos entre órdenes de liquidez. Cuanto más pequeño sea el número, más eficientes serán los intercambios. Recomendado entre 0-50%.

• Mostrar solo mis tokens en la búsqueda: Ideal para DApps de tokens en lista blanca, esta opción te permite hacer exactamente eso: mostrar en tu componente solo los tokens que decidas mostrar.

• Intercambios sin gas: Haz que la elección del usuario de usar intercambios sin gas sea la opción por defecto. Ten en cuenta que los usuarios podrán activar y desactivar esta opción directamente en el componente.

• Habilitar parámetros URL: Cada vez que haces una consulta usando el componente de swap (eligiendo la red en la que quieres operar, el token y la cantidad) el componente genera una URL inteligente con todos los datos del intercambio. Activa esto para que tus usuarios puedan ver esa URL, o déjalo desactivado para usar la misma URL enmascarada que tu DApp.

Exchange

También puedes añadir un componente de intercambio descentralizado predefinido que opera tan eficientemente como el componente de swap pero con una diferencia: a diferencia del componente de swap donde los intercambios son atómicos (instantáneos, o al precio de mercado), los usuarios podrán colocar órdenes limitadas dentro de la red 0x y obtener más de los intercambios comerciales.

• Red por defecto: Elige la red por defecto para el componente cuando los visitantes entren en tu página sin conectar sus billeteras cripto. Hacer clic en el lápiz resaltado en verde abrirá un modal para elegir todas las redes que quieras habilitar en tu exchange.

• Red: Al igual que el componente swap, esta será la red por defecto tan pronto tus visitantes conecten sus billeteras.

• Tokens destacados: Esta opción resaltará tokens para ti con el fin de facilitar a tus clientes elegirlos de la lista. Esos aparecerán en la parte superior de la lista 👇 (resaltados en verde)

• Token base: Elige aquí el token de entrada para la vista/intercambio por defecto. Este es el token que estás pidiendo a tus clientes que usen, pero ellos pueden elegir cualquier otro de la lista.

• Token cotizado: Elige aquí el par que estás vendiendo por defecto.

• Deslizamiento por defecto: Este es el porcentaje de tolerancia para deslizamientos entre órdenes de liquidez. Cuanto más pequeño sea el número, más eficientes serán los intercambios. Recomendado entre 0-50%.

• Dirección receptora de tarifas (dirección ERC20): Introduce aquí la dirección de la billetera donde quieres recibir las comisiones generadas por este componente de exchange. Asegúrate de que sea la correcta.

• Monto de la tarifa (%): Establece el porcentaje que quieres cobrar a tus clientes por cada intercambio que hagan en tu exchange. No seas avaro y usa porcentajes pequeños para fomentar el uso.

Billetera

Este es un componente de billetera simple, donde tus visitantes podrán consultar sus saldos de tokens en redes predefinidas, ver sus NFTs, e incluso enviar y recibir criptomonedas.

Componentes de tokens no fungibles (NFTs)

NFTs destacados

Destaca NFTs para que se vean geniales dentro del componente predefinido y así recibir ofertas de tus visitantes.

Hacer clic en el componente "NFTs destacados" abrirá el siguiente modal 👇

Importando elementos individuales

• Título: Escribe un título para este componente. Podrás subir varios NFTs a él, incluso de diferentes redes blockchain.

• Tipo de elemento: Elegir "asset" te permitirá importar elementos individuales si solo quieres mostrar algunos de ellos.

• Red: Selecciona la red donde está alojado el NFT.

• Dirección del contrato: Pega la dirección del contrato para el activo específico.

• ID del token: Esta es la identificación única para cada token. Introduce la del elemento específico.

• Título: Pon un título para este NFT específico.

Elegir desde tu colección

• Elige la colección que hayas importado previamente. Si aún no lo hiciste, por favor consulta la importación de colecciones sección en esta documentación.

• ID del token: Esta es la identificación única para cada token. Introduce la del elemento específico.

• Título: Pon un título para este NFT específico.

Tienda NFT

Si has abierto ofertas para tus NFTs, con este componente puedes mostrarlas fácilmente. Sirve para filtrar activos dentro de grandes colecciones mostrando solo aquellos que tienen ofertas abiertas.

• Cuenta de la tienda: Esta es la billetera que abrió los listados. Si creaste nuevos listados con una de tus billeteras pégala aquí y tus elementos aparecerán en la vista previa.

• Nombre: Este será el nombre público de este componente de tienda.

• Título: Escribe un título llamativo para esta selección específica.

• Descripción: ¿De qué trata esta selección? Sé específico aquí y atraerás más atención.

• Imagen de perfil: Coloca una PFP para este componente de tienda NFT.

• Imagen de fondo: La que va detrás de la PFP.

Pulsa «Guardar» cuando termines.

Colecciones

Muestra NFTs individuales o colecciones completas por grupos con este componente. El uso es muy similar al componente NFTs destacados. Hacer clic en el componente «Colecciones» abrirá un modal como el de abajo 👇 (haz clic en «+ AÑADIR ELEMENTO» para comenzar a agregar activos)

Importando elementos individuales (por activo)

• Título: Escribe un título para este componente. Podrás subir varios NFTs a él, incluso de diferentes redes blockchain.

• Tipo de elemento: Elegir "asset" te permitirá importar elementos individuales si solo quieres mostrar algunos de ellos.

• Red: Selecciona la red donde está alojado el NFT.

• Dirección del contrato: Pega la dirección del contrato para el activo específico.

• ID del token: Esta es la identificación única para cada token. Introduce la del elemento específico.

• Título: Pon un título para este NFT específico.

Importando una colección completa

• Título: Escribe un título para este componente. Podrás subir varios NFTs a él, incluso de diferentes redes blockchain.

• Tipo de elemento: En este caso, colección.

• Red: Selecciona la red donde está alojada la colección NFT.

• Dirección del contrato: Pega la dirección del contrato para la colección específica.

• Imagen: Sube una imagen por defecto para tu colección NFT.

• Título: Pon un título para esta colección específica.

• Subtítulo: Debería funcionar como una descripción para tu colección.

• Variante: Elige entre por defecto y simple.

• Destacado: Esta colección específica será etiquetada como destacada.

Componentes Web3

Formulario de contrato (función avanzada)

Con este componente puedes añadir funciones específicas de cierto contrato inteligente (el que especifiques) y así ahorrar tiempo e interacciones a tus visitantes filtrando acciones del contrato y usándolas en la interfaz de tu aplicación cripto. Usar esta función requiere conocimientos de Solidity (lenguaje de programación).

Hacer clic en el icono del componente abrirá el siguiente modal 👇

• Red: Elige la red del contrato que vas a usar. Usaremos Ethereum ya que importaremos el popular contrato USDt Tether, verificado en Etherscan.

• Dirección del contrato: Haz clic en la barra y pega la dirección del contrato. También puedes hacer clic en la barra de búsqueda abajo etiquetada con 🔍Buscar un contrato y escribe el nombre del contrato que estás buscando. Estamos usando 0xdAC17F958D2ee523a2206206994597C13D831ec7 para este ejemplo.

• ABI: Esta es una sección de solo lectura que escanea el ABI del contrato (Interfaz Binaria de Aplicación) y te muestra a continuación todas las funciones dentro del contrato.

Hacer clic en cualquiera de las funciones abrirá los detalles de esa función específica y creará una ventana en la vista previa 👇

Todo será personalizable en cada llamada de función, excepto la lógica. Esto garantizará que cada llamada de función sea segura, teniendo en cuenta que en esta ocasión usamos un contrato altamente auditado y seguro como el Tether uno.

Formulario de contrato de usuario

Después de crear formularios web3 puedes importarlos directamente en este componente y así ahorrar tiempo en implementaciones. En la foto de abajo verás los formularios web3 listados que has creado o clonado previamente en tu DApp. Hacer clic en cualquiera de ellos te lo mostrará en la vista previa a la derecha 👇

Recursos

Vídeo

Incrusta cualquier vídeo de YouTube en un componente curado para cualquier vista (escritorio, móvil, tabletas, refrigeradores, coches, etc.)

• Tipo de vídeo: Solo YouTube está habilitado para este componente. Habilitaremos más servicios de vídeo bajo demanda.

• Título: Escribe un buen título descriptivo para este vídeo.

• URL del vídeo: Pega el enlace del vídeo de YouTube.

Llamado a la acción (CTA)

Captura la atención de tus visitantes con un mensaje poderoso con un subtítulo y un botón con un enlace de navegación. Es la opción perfecta para promocionar productos relacionados o productos encontrados en sitios externos.

• Variante: Elige entre claro y oscuro.

• Título: Escribe el asunto o el título principal para este componente. Puedes ver en la imagen arriba que es el que tiene el tamaño de fuente más grande.

• Subtítulo: El tamaño de fuente más pequeño, encima del título.

• Título del botón: Este es el texto dentro del botón CTA.

• URL del botón: ¿A dónde irá el visitante que haga clic en el botón CTA?

• Abrir en nueva página: Marca esta opción para que la página se abra en una nueva pestaña. Esta opción se recomienda cuando la dirección se encuentra en un sitio externo a esta DApp.

Al mismo tiempo, podemos añadir NFTs o colecciones en un CTA para promoverlos y hacer que nuestros visitantes vayan directamente a ellos haciendo clic en el botón «+ AÑADIR ELEMENTO» 👇

Después de importar tus NFTs, la vista previa debería verse como la imagen abajo 👇

Low code

Markdown

Para los aficionados al contenido organizado, textos bien formateados e incluso para escribir documentación técnica, este componente ayuda a crear las páginas más estilizadas usando el popular y simple lenguaje Markdown.

Código

Incrusta virtualmente cualquier cosa usando este componente. Necesitarás marcado HTML, los scripts y los archivos CSS para que funcione correctamente.

Consulta incrustación de sitios externos para más información sobre cómo incrustar aplicaciones de terceros con este componente.