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-tutorialNavegue até o diretório do projeto:
bashCopiar códigocd connect-tutorialInstalar 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-connectIntegrar 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 startAgora, 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:
Selecione Sui como a rede de origem, conecte sua carteira Sui e escolha SUI como o ativo que deseja transferir.
Escolha Fuji como a rede de destino e conecte sua carteira à rede Fuji.
Insira a quantidade de tokens SUI que deseja transferir.
Escolha visualizar outras rotas
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).
Revise e confirme a transferência em Sui. Isso bloqueará seus tokens na blockchain Sui.
Siga as instruções na tela para aprovar a transação. Você será solicitado a assinar com sua carteira Sui.
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
Last updated