Overview

Introdução O Wormhole Connect é um widget React que permite aos desenvolvedores oferecer uma interface fácil de usar para facilitar transferências de ativos entre diferentes blockchains via Wormhole diretamente em uma aplicação web. Confira o repositório do Wormhole Connect no GitHub.

O Wormhole TypeScript SDK permite implementar a mesma funcionalidade do widget Connect, mas com sua própria interface de usuário. Consulte a documentação para mais informações sobre como usar o SDK em vez do Connect.

Recursos O Wormhole Connect é fácil de personalizar para atender às necessidades da sua aplicação. Você pode especificar detalhes técnicos, como ativos suportados e RPCs personalizados, ou optar por não personalizar e usar o widget com todos os recursos já integrados. A interface de usuário do widget é altamente personalizável, com várias opções de estilo disponíveis, incluindo uma interface de estilo sem código para quem prefere uma abordagem visual no design. Os recursos do Wormhole Connect incluem:

  • Diversas formas de realizar a ponte de ativos (rotas)

  • Extensas opções de personalização de estilo da interface (incluindo a interface de estilo sem código)

  • Opções para configurar o conjunto de funcionalidades oferecidas

  • Capacidade de configurar qualquer token para ser transferido via Wormhole

  • Capacidade de adicionar uma quantidade de gas ao destino Para mais detalhes sobre os recursos do Wormhole Connect e um detalhamento dos recursos suportados por cada blockchain, não deixe de conferir a página de recursos.

Exemplos de DApp em Produção O Wormhole Connect está sendo usado em diversos aplicativos de produção. Aqui estão alguns exemplos:

  • Portal Bridge

  • Jupiter

  • Pancake Swap

Integrar o Connect

Importar Diretamente em uma Aplicação React Primeiro, instale o pacote npm do Wormhole Connect. Você pode ler mais sobre o pacote clicando no seguinte botão: versão npm

npm i @wormhole-foundation/wormhole-connect

Agora você pode importar o componente React:

import WormholeConnect from '@wormhole-foundation/wormhole-connect';

function App() {
  return <WormholeConnect />;
}

Usar a Versão Hospedada via CDN Se você não está usando React, ainda pode incorporar o Connect no seu site utilizando a versão hospedada. Esta versão utiliza pacotes pré-compilados (que incluem o React) servidos do NPM através do jsdelivr.net.

v1.x

import { wormholeConnectHosted } from '@wormhole-foundation/wormhole-connect';

// Elemento DOM existente onde você deseja montar o Connect
const container = document.getElementById('bridge-container');

wormholeConnectHosted(container);

v0.x Basta copiar e colar o seguinte código no corpo do seu HTML e substituir INSERT_WORMHOLE_CONNECT_VERSION pelos links da versão mais recente de Wormhole Connect. Você pode verificar a versão mais recente no NPM.

<!-- Ponto de montagem. Inclua no <body> -->
<div id="wormhole-connect"></div>

<!-- Dependências -->
<script
    type="module"
    src="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@INSERT_WORMHOLE_CONNECT_VERSION/dist/main.js"
    defer
></script>
<link
    rel="stylesheet"
    href="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@INSERT_WORMHOLE_CONNECT_VERSION/dist/main.css"
/>

Por exemplo, para a versão 0.3.13:

<!-- Ponto de montagem. Inclua no <body> -->
<div id="wormhole-connect"></div>

<!-- Dependências -->
<script
    type="module"
    src="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.3.13/dist/main.js"
    defer
></script>
<link
    rel="stylesheet"
    href="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.3.13/dist/main.css"
/>

Nota É importante atualizar periodicamente sua instância do Wormhole Connect para a versão mais recente, pois há atualizações frequentes de funcionalidades e segurança.

Configuração Esta é apenas uma visão geral do que é possível. Consulte a documentação de Configuração para detalhes sobre todas as opções de configuração.

A configuração padrão do Wormhole Connect pode não ser exatamente o que você precisa. Você pode querer:

  • Usar estilos personalizados

  • Restringir as chains que você permite na sua aplicação

  • Adicionar suporte para o token do seu projeto e eliminar tokens indesejados para reduzir o ruído

  • Configurar URLs RPC personalizadas (altamente recomendado, pois os RPCs públicos padrão são fortemente limitados)

  • Restringir as rotas disponíveis Para informações adicionais sobre as opções acima, consulte as opções de configuração e personalize seu widget como preferir.

PreviousConexãoNextRoutes

Last updated