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ão NextRoutes

Last updated 5 months ago

import { wormholeConnectHosted } from '@wormhole-foundation/wormhole-connect'; // Elemento DOM existente onde você deseja montar o Connect const container = document.getElementById('bridge-container'); wormholeConnectHosted(container);

 <div id="wormhole-connect"></div>  <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" />

 <div id="wormhole-connect"></div>  <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" />