Incorporando apps internos

Você também pode incorporar outros DApps feitos com o DexAppBuilder no seu. Isso pode ajudar a conectar outros projetos seus (ou de terceiros) dentro da sua aplicação, dando-lhe maior diversidade.

O procedimento é semelhante ao de incorporar sites externos, com certas diferenças. A seguir explicaremos como adicionar um DApp [*.dexkit.app] dentro do seu:

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 conectado você poderá ver seus DApps na lista. Clique no menu (os três pontos à direita do seu DApp, dentro da coluna “Actions”) e clique em “Edit”.

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 criaremos uma nova página chamada “Embedded” 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 "Embedded" para o exemplo atual. Depois de terminar de digitá-lo, pressione o botão azul «Save»

1. Como pode ver, agora estamos dentro da nova página que criamos e ela está vazia. Vamos adicionar uma seção de código predefinida para incorporar o site de terceiros. Clique no botão "+ Add Section" que abrirá os componentes predefinidos que podemos usar.

1. Ao clicar no botão devemos procurar o componente “Code”, que está delineado em verde na imagem ilustrativa abaixo

1. Clicar na opção "Code" abrirá a seguinte tela na qual você deve colar o código-fonte do DApp. A sintaxe será a seguinte:

// Copie, modifique com o nome do DApp que deseja incorporar e cole 
no 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 explicar a sintaxe do código:

// Precisaremos abrir um componente div
<div style="margin: 0 auto; width: 100%; height: 800px;">
// O resto do código
<div>

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

Este iframe invocará o DApp que você deseja mostrar em sua página. O src deve ser o link do DApp escolhido (neste exemplo é https://scaleswap.dexkit.app). Então você precisará usar a opção embed e chamar o ?page

O dentro do DApp que você está prestes a exibir. a opção hideLayout marcada como

true removerá o cabeçalho e o banner desse DApp específico invocado (incorporado). Depois dessas opções você precisará definir o iframe.

1. style

1. para este

1. Uma vez que pressionarmos o botão salvar retornamos à tela anterior onde podemos adicionar mais seções ou simplesmente salvar. Neste caso pressionamos o botão azul "save"

1. Agora vamos colocar nossa página recém-criada no menu superior clicando na opção "Navbar" dentro da seção Layout.

1. Aqui podemos ver todos os links que fazem parte do cabeçalho do nosso DApp. Vamos pressionar o botão "+ Add Menu"

1. Dentro do modal de criação de menu escolhemos o tipo (no nosso caso será page) e abaixo selecionamos o indicado, que no nosso caso é "Embedded". Pressionamos o botão azul "Save" quando terminarmos a escolha.

1. Uma vez que o menu apareça em nossa lista, pressionamos o botão "Save" no canto inferior direito para enviar as alterações para produção.

1. Vamos clicar no botão "Open URL" para ver as alterações. Você terá que esperar alguns minutos até que as mudanças sejam refletidas.