Configuração

Wormhole Connect is a versatile React widget that facilitates seamless cross-chain asset transfers and enhances interoperability by leveraging Wormhole's robust infrastructure. It is designed for easy integration within decentralized applications (dApps), abstracting the complexities of cross-chain communication to deliver a user-friendly experience for both developers and end users.

This guide provides comprehensive instructions on configuring Wormhole Connect and highlights various customization options to meet your specific requirements, including integration of supported blockchains, tokens, and user interface modifications.

Note:

• For upgrading from Wormhole Connect v0 to v1, refer to the migration guide for detailed instructions.

• If you're utilizing an older version of Wormhole Connect (v0.x), please consult the v0.x configuration documentation.

Getting Started

To configure Wormhole Connect, pass a WormholeConnectConfig object as the config prop.

React Integration

import WormholeConnect, { WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';

const config: WormholeConnectConfig = {
  chains: ['Ethereum', 'Polygon', 'Solana'],
  tokens: ['ETH', 'WETH', 'MATIC', 'WMATIC'],
  rpcs: {
    Ethereum: 'https://rpc.ankr.com/eth',
    Solana: 'https://rpc.ankr.com/solana',
  },
};

<WormholeConnect config={config} />

Note: The complete type definition of WormholeConnectConfig can be found in the Wormhole Connect repository.

Example: Configuring Chains and RPC Endpoints

Wormhole Connect allows customization of supported chains to align with your project's requirements. It is recommended to use your own RPC endpoints, as the default public ones may lack essential functionalities, such as balance fetching.

Mainnet Configuration

import WormholeConnect, { WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';

const config: WormholeConnectConfig = {
  chains: ['Ethereum', 'Polygon', 'Solana'],
  rpcs: {
    Ethereum: 'https://rpc.ankr.com/eth',
    Solana: 'https://rpc.ankr.com/solana',
  },
};

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

Note: For a complete list of available chain names, refer to the Wormhole TypeScript SDK.

Configuring Routes

By default, Wormhole Connect supports two bridging protocols: the Token Bridge (for Wormhole wrapped tokens) and Circle’s CCTP (for native USDC). For more advanced use cases, you may need to configure additional routes. The routes property enables you to specify which protocols to include, as well as exclude unnecessary routes, such as default and third-party routes.

Available Route Plugins

The @wormhole-foundation/wormhole-connect package provides various route plugins to offer flexibility in managing different protocols. The following route exports are available for your integration:

• TokenBridgeRoute: Manual redemption Wormhole Token Bridge route.

• AutomaticTokenBridgeRoute: Automatically redeemed (relayed) Token Bridge route.

• CCTPRoute: Manual redemption Circle CCTP route.

• AutomaticCCTPRoute: Automatically redeemed (relayed) CCTP route.

• DEFAULT_ROUTES: An array of the above four routes (TokenBridgeRoute, AutomaticTokenBridgeRoute, CCTPRoute, AutomaticCCTPRoute).

• nttAutomaticRoute(nttConfig): Function that returns the automatically-redeemed (relayed) Native Token Transfer (NTT) route.

• nttManualRoute(nttConfig): Function that returns the manually-redeemed NTT route.

• nttRoutes(nttConfig): Function that returns both NTT routes as an array.

• MayanRoute: Route supporting multiple Mayan protocols.

• MayanRouteSWIFT: Route for Mayan's Swift protocol.

• MayanRouteMCTP: Route for Mayan's MCTP protocol.

• MayanRouteWH: Route for Mayan's original Wormhole transfer protocol.

Additionally, developers can create custom routes for Wormhole-based protocols. For examples, refer to the NTT and Mayan example repositories on GitHub.

For more details on the route plugin interface, consult the Wormhole TypeScript SDK route code.

Example: Offer Only CCTP Transfers

To configure Wormhole Connect to allow only USDC transfers via the CCTP route, use the following configuration:

import WormholeConnect, { AutomaticCCTPRoute, WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';

const config: WormholeConnectConfig = {
  routes: [AutomaticCCTPRoute],
};

<WormholeConnect config={config} />;

Exemplo: Oferecer Todas as Rotas Padrão e Plugins de Terceiros

Neste exemplo, o Wormhole Connect é configurado com rotas para protocolos padrão (Token Bridge e CCTP), além de protocolos de terceiros como Transferências de Token Nativo (NTT) e Mayan Swap.

import WormholeConnect, {
  DEFAULT_ROUTES,
  nttRoutes,
  MayanRouteSWIFT,
  WormholeConnectConfig,
} from '@wormhole-foundation/wormhole-connect';

import { myNttConfig } from './consts'; // Configuração personalizada de NTT

const config: WormholeConnectConfig = {
  routes: [...DEFAULT_ROUTES, ...nttRoutes(myNttConfig), MayanRouteSWIFT],
};

<WormholeConnect config={config} />;

Este plugin flexível permite combinar rotas padrão (como Token Bridge e CCTP) com protocolos de terceiros, oferecendo controle completo sobre as rotas disponíveis em seu aplicativo.

Adicionando Tokens Personalizados

A seção a seguir mostra como adicionar um token arbitrário ao seu deployment do Connect.

Nota Você precisará registrar seu token no Token Bridge para obter os endereços de contrato necessários para que ele funcione com esse protocolo.

Este exemplo de configuração adiciona o token BONK ao Connect. Observe a propriedade wrappedTokens, que é necessária para uso com o Token Bridge.

Veja a definição de tipo de TokensConfig no arquivo src/config/types.ts.

import WormholeConnect, {
  WormholeConnectConfig,
} from '@wormhole-foundation/wormhole-connect';

const config: WormholeConnectConfig = {
  tokensConfig: {
    BONK: {
      key: 'BONK',
      symbol: 'BONK',
      nativeChain: 'Ethereum',
      icon: Icon.ETH,
      tokenId: {
        chain: 'Ethereum',
        address: '0x1151CB3d861920e07a38e03eEAd12C32178567F6',
      },
      coinGeckoId: 'bonk',
      decimals: 18,
    },
  },
  wrappedTokens: {
    BONK: {
      Solana: 'DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263',
    },
  },
};

Listagem de Tokens

O Connect oferece uma lista de tokens internos por padrão. Você pode visualizar a lista abaixo:

• Tokens da Mainnet

• Tokens da Testnet

Usando a propriedade tokens, você pode personalizar os tokens exibidos na interface. No exemplo a seguir, adicionamos um token personalizado e restringimos o Connect para exibir apenas esse token, junto com os tokens nativos ETH e SOL.

import WormholeConnect, {
  WormholeConnectConfig,
} from '@wormhole-foundation/wormhole-connect';

const config: WormholeConnectConfig = {
  chains: ['Ethereum', 'Solana'],
  tokens: ['ETH', 'SOL', 'BONK'],
  rpcs: {
    Ethereum: 'https://rpc.ankr.com/eth',
    Solana: 'https://rpc.ankr.com/solana',
  },
  tokensConfig: {
    BONK: {
      key: 'BONK',
      symbol: 'BONK',
      nativeChain: 'Ethereum',
      icon: Icon.ETH,
      tokenId: {
        chain: 'Ethereum',
        address: '0x1151CB3d861920e07a38e03eEAd12C32178567F6',
      },
      coinGeckoId: 'bonk',
      decimals: 18,
    },
  },
  wrappedTokens: {
    BONK: {
      Solana: 'DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263',
    },
  },
};

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

Alterando o Esquema de Cores

Você pode personalizar o esquema de cores do Connect fornecendo uma propriedade theme.

Integração React Integração hospedada

import WormholeConnect, {
  WormholeConnectConfig,
  WormholeConnectTheme,
} from '@wormhole-foundation/wormhole-connect';

const config: WormholeConnectConfig = {
  /* Sua configuração... */
};

const theme: WormholeConnectTheme = {
  mode: 'dark',
  primary: '#78c4b6',
  font: 'Comic Sans; sans-serif',
};

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

O tipo WormholeConnectTheme suporta as seguintes propriedades:

Propriedade	Descrição	Exemplo
mode	Modo escuro ou modo claro. Obrigatório	"dark" ou "light"
input	Cor usada para campos de entrada e dropdowns	"#AABBCC"
primary	Cor primária usada para botões	"#AABBCC"
secondary	Cor secundária usada para alguns elementos da interface	"#AABBCC"
text	Cor primária usada para texto	"#AABBCC"
textSecondary	Cor secundária usada para textos mais apagados	"#AABBCC"
error	Cor usada para exibir erros, geralmente algum tom de vermelho	"#AABBCC"
success	Cor usada para exibir mensagens de sucesso	"#AABBCC"
badge	Cor de fundo usada para logotipos de redes	"#AABBCC"
font	Fonte usada na interface, pode ser uma fonte personalizada disponível no seu aplicativo	"Arial; sans-serif"

Mais Opções de Configuração

Configuração de Carteira

A rede blockchain selecionada determina as opções de carteira disponíveis ao usar o Wormhole Connect.

• Para cadeias EVM, carteiras como MetaMask e WalletConnect são suportadas.

• Para Solana, opções como Phantom, Torus e Coin98 estão disponíveis.

As opções de carteira são ajustadas automaticamente com base na cadeia selecionada, proporcionando uma experiência de usuário sem fricções e sem necessidade de configuração adicional.

Se você deseja oferecer o WalletConnect como uma opção de carteira, será necessário obter um ID de projeto no painel de controle do WalletConnect.

Desativando o Menu de Hambúrguer Ao definir a opção showHamburgerMenu como false, você pode desativar o menu de hambúrguer, o que posicionará os links na parte inferior.

Adicionar Entrada Extra ao Menu Ao configurar a opção showHamburgerMenu como false, você pode adicionar links extras. As seguintes propriedades são acessadas por meio da propriedade menu[] (por exemplo, menu[].label):

Propriedade	Descrição
label	Nome do link a ser exibido
href	URL ou URN de destino
target	Padrão de alvo do link, por padrão _blank
order	Ordem na qual o novo item deve ser injetado

import WormholeConnect, {
  WormholeConnectConfig,
} from '@wormhole-foundation/wormhole-connect';

const config: WormholeConnectConfig = {
  ui: {
    showHamburgerMenu: false,
    menu: [
      {
        label: 'Advance Tools',
        href: 'https://portalbridge.com',
        target: '_self',
        order: 1,
      },
    ],
  },
};

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

Chave de API do CoinGecko A API do CoinGecko pode ser usada para buscar dados de preços de tokens. Se você tiver um plano da API do CoinGecko, pode incluir a chave da API na configuração.

import WormholeConnect, {
  WormholeConnectConfig,
} from '@wormhole-foundation/wormhole-connect';

const config: WormholeConnectConfig = {
  coinGeckoApiKey: 'INSIRA_AQUI_A_CHAVE_DA_API',
};

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