Tutorial de Conexão

O Wormhole Connect facilita a conexão do seu aplicativo a múltiplos ecossistemas de blockchain. Estes tutoriais irão ensinar como integrar o Connect aos seus projetos, simplificar interações cross-chain, facilitar o onboarding de usuários e oferecer uma experiência mais fluida no geral.

Integre o Connect em um DApp React

Aprenda a incorporar o Wormhole Connect em uma aplicação React. Este tutorial passo a passo orienta você na habilitação de transferências de tokens cross-chain e interações, na ponte de ativos entre redes e no aprimoramento da experiência do usuário com conectividade simplificada entre blockchains.

Neste tutorial, exploraremos como integrar o Wormhole Connect para habilitar transferências e interações de tokens cross-chain. O Wormhole Connect oferece uma interface simplificada para desenvolvedores facilitarem transferências de tokens entre blockchains de forma fluida. Usando o Wormhole Connect, você pode facilmente fazer a ponte de ativos entre múltiplos ecossistemas sem precisar se aprofundar na complexidade da comunicação cross-chain.

Embora este tutorial guie você pelo processo usando uma blockchain específica como exemplo, os princípios e passos aqui descritos podem ser aplicados a qualquer blockchain compatível com o Wormhole. Neste exemplo, trabalharemos com Sui como nossa blockchain de origem e Avalanche Fuji como a blockchain de destino.

Pré-requisitos

Para começar com o Wormhole Connect, precisaremos configurar um ambiente básico que permita transferências de tokens cross-chain. Antes de iniciar este tutorial, verifique se você possui os seguintes itens:

• Node.js e npm instalados em sua máquina

• Uma carteira Sui configurada e pronta para uso

• Uma carteira compatível com Avalanche Fuji, como o MetaMask

• Tokens de teste para Sui e Fuji para cobrir as taxas de transação

Configurar o Connect para Transferências de Sui

Criar um Projeto React

Comece configurando seu aplicativo React:

Abra o terminal e execute o seguinte comando para criar um novo aplicativo React:

bashCopiar códigonpx create-react-app connect-tutorial

Navegue até o diretório do projeto:

bashCopiar códigocd connect-tutorial

Instalar o Wormhole Connect

Em seguida, instale o pacote Wormhole Connect como dependência, executando o seguinte comando dentro do diretório do seu projeto:

bashCopiar códigonpm install @wormhole-foundation/wormhole-connect

Integrar o Connect no Aplicativo

Agora, precisamos modificar o arquivo padrão App.js para integrar o Wormhole Connect. Vamos usar a versão V1.0, certifique-se de verificar qual versão do Connect você está utilizando. Abra o arquivo src/App.js e substitua o conteúdo pelo seguinte código:

javascriptCopiar códigoimport logo from './logo.svg';
import './App.css';
import WormholeConnect from '@wormhole-foundation/wormhole-connect';

const config = {
    network: 'Testnet',
    chains: ['Sui', 'Avalanche'],
};

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

export default App;

• Configuração do network como testnet: isso garante que o Wormhole Connect utilize o ambiente de testnet.

• Configuração de chains como ['Sui', 'Avalanche']: configura o aplicativo para permitir transferências entre Sui e Avalanche Fuji, a testnet do Avalanche.

Personalizar o Wormhole Connect

Para personalizar ainda mais o Wormhole Connect para o seu aplicativo, como ajustar a interface do usuário, adicionar tokens personalizados ou configurar definições específicas de chains, você pode consultar o guia de configuração do Wormhole Connect.

Executar o Aplicativo

Certifique-se de que você está no diretório raiz do seu aplicativo React e execute o seguinte comando para iniciar o aplicativo:

bashCopiar códigonpm start

Agora, seu aplicativo React deve estar em execução, e o Wormhole Connect deve ser visível em http://localhost:3000/. Você verá o componente do Wormhole Connect, que incluirá uma interface para selecionar redes e tokens para transferências cross-chain.

Transferir Tokens de Sui para Fuji

Antes de realizar a transferência de tokens, verifique se você tem tokens de teste SUI e Fuji suficientes para cobrir as taxas de transação.

Para transferir tokens de Sui para Fuji na interface do Wormhole Connect:

1. Selecione Sui como a rede de origem, conecte sua carteira Sui e escolha SUI como o ativo que deseja transferir.

2. Escolha Fuji como a rede de destino e conecte sua carteira à rede Fuji.

3. Insira a quantidade de tokens SUI que deseja transferir.

1. Escolha visualizar outras rotas

1. Selecione a opção de ponte manual, que exigirá duas transações: uma na blockchain de origem (Sui) e uma na blockchain de destino (Fuji).

1. Revise e confirme a transferência em Sui. Isso bloqueará seus tokens na blockchain Sui.

1. Siga as instruções na tela para aprovar a transação. Você será solicitado a assinar com sua carteira Sui.

1. Após a transação ser submetida, o Wormhole Connect exibirá o progresso da transferência. Acompanhe o status até ser solicitado a completar a transação na blockchain de destino. Você também pode acompanhar suas transações no Wormholescan.

Claim Tokens na Fuji

Após a transação em Sui ser concluída, confirme a transação final em Fuji, reclamando os tokens embalados. Você será solicitado a confirmar a transação com sua carteira Fuji.

Após a confirmação, verifique sua carteira Fuji para garantir que os tokens SUI embalados foram recebidos com sucesso.

Recursos

Se você deseja explorar o projeto completo ou precisa de uma referência enquanto segue este tutorial, você pode encontrar todo o código no repositório Sui-Connect no GitHub. O repositório inclui uma integração do Wormhole Connect em um aplicativo React para fazer a ponte de tokens entre as redes Sui e Fuji (Avalanche Testnet).

Conclusão

Neste tutorial, você adquiriu experiência prática com a integração do Wormhole Connect para habilitar transferências de tokens cross-chain. Você aprendeu a configurar um aplicativo React para interações contínuas entre Sui e Avalanche Fuji, permitindo que os usuários façam a ponte de ativos entre chains com facilidade.

Seguindo esses passos, você aprendeu a:

• Configurar um projeto React direcionado para transferências cross-chain

• Instalar e configurar o Wormhole Connect para suportar múltiplas blockchains

• Implementar uma interface de usuário simplificada para selecionar chains de origem e destino, conectar carteiras e iniciar transferências

• Executar uma transferência de tokens de Sui para Avalanche Fuji, monitorando cada passo e confirmando a transação em ambas as redes

Com essas ferramentas e conhecimentos, você agora está pronto para construir poderosas aplicações cross-chain usando o Wormhole Connect, abrindo possibilidades para os usuários moverem ativos entre ecossistemas de forma segura e eficiente.

4o mini