Incrustando aplicaciones internas

También puedes incrustar otras DApps hechas con DexAppBuilder dentro de la tuya. Esto puede ayudarte a conectar otros proyectos tuyos (o de terceros) dentro de tu aplicación, dándole mayor diversidad.

El procedimiento es similar al de incrustar sitios web externos con ciertas diferencias. A continuación explicaremos cómo añadir una DApp [*.dexkit.app] dentro de la tuya:

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 conectada podrás ver tus DApps en la lista. Haz clic en el menú (los tres puntos a la derecha de tu DApp, dentro de la columna “Actions”) y haz clic en “Edit”.

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 fines de esta guía crearemos una nueva página llamada “Embedded” en la que pegaremos el componente “Code”. Ahora haz clic en el botón azul «New page».

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

1. Como puedes ver, ahora estamos dentro de la nueva página que creamos y está vacía. Vamos a añadir una sección predefinida de código para incrustar el sitio web de terceros. Hagamos clic en el botón "+ Add Section" que abrirá los componentes predefinidos que podemos usar.

1. Una vez que hagamos clic en el botón debemos buscar el componente “Code”, que está delineado en verde en la imagen ilustrativa a continuación

1. Al hacer clic en la opción "Code" se abrirá la siguiente pantalla en la que debes pegar el código fuente de la DApp. La sintaxis será la siguiente:

// Copia, modifica con el nombre de la DApp que quieres incrustar y pégalo 
en el componente de código
<div style="margin: 0 auto; width: 100%; height: 800px;">
    <iframe src="https://scaleswap.dexkit.app/embed?page=home&hideLayout=true" style="width: 100%; height: 100%; border: none;"></iframe>
</div>

Vamos a explicar la sintaxis del código:

// Necesitaremos abrir un componente div
<div style="margin: 0 auto; width: 100%; height: 800px;">
// El resto del código
<div>

// Dentro del componente div insertaremos un iframe
<iframe src="https://scaleswap.dexkit.app/embed?page=home&hideLayout=true" style="width: 100%; height: 100%; border: none;"></iframe>

Este iframe invocará la DApp que quieres mostrar en tu página. El src debería ser el enlace de la DApp elegida (en este ejemplo es https://scaleswap.dexkit.app). Luego necesitarás usar la opción embed y llamar al ?page dentro de la DApp que estás a punto de mostrar.

El hideLayout opción marcada como true eliminará el encabezado y el banner para esa DApp invocada (incrustada) específica.

Después de esas opciones necesitarás establecer el style para esto iframe.

1. Una vez que presionemos el botón guardar volvemos a la pantalla anterior donde podemos añadir más secciones o simplemente guardar. En este caso presionamos el botón azul "save"

1. Ahora coloquemos nuestra página recién creada en el menú superior haciendo clic en la opción "Navbar" dentro de la sección Layout.

1. Aquí podemos ver todos los enlaces que son parte del encabezado de nuestra DApp. Presionemos el botón "+ Add Menu"

1. Dentro del modal de creación del menú elegimos el tipo (en nuestro caso será página) y abajo seleccionamos la indicada, que en nuestro caso es "Embedded". Presionamos el botón azul "Save" una vez que terminemos de elegir.

1. Una vez que el menú aparezca en nuestra lista, presionamos el botón "Save" en la esquina inferior derecha para enviar los cambios a producción.

1. Hagamos clic en el botón "Open URL" para ver los cambios. Tendrás que esperar un par de minutos hasta que los cambios se vean reflejados.

1. Después de unos minutos podrás ver la nueva página en el menú superior de tu DApp, como en la imagen a continuación:

1. Hacemos clic en el enlace y, como puedes ver en la imagen a continuación, la DApp incrustada está activa en nuestra propia DApp 🤯