This repository demonstrates the integration of Wormhole Connect in a React app for bridging tokens between the Sui and Fuji (Avalanche Testnet) networks. Using the @wormhole-foundation/wormhole-connect package, developers can easily embed a user interface for cross-chain token transfers with minimal configuration.
For a complete tutorial on building a Connect app from scratch, please refer to the Wormhole Connect Tutorial. This tutorial focuses on Sui but can be adapted for other compatible chains by following the Connect configuration guide.
- Cross-Chain Bridge - enables token transfers between Sui and Fuji (Avalanche Testnet)
- Customizable UI - displays a demo interface for token bridging with customizable UI options
- Node.js and npm installed on your system
- TypeScript installed globally:
npm install -g typescript - A funded wallet with Testnet tokens for deployment and transfers
- Clone the repository:
git clone https://github.com/wormhole-foundation/demo-basic-connect.git
cd demo-basic-connect- Install the dependencies:
npm install- Start the application:
npm startThe app should now be running on http://localhost:3000.
This repo also includes a CCTP-focused example with pre-configured CCTP routes.
npm run start:cctpThis starts the same app but loads src/App.cctp.tsx instead of the default src/App.tsx.
The main application logic is in App.tsx, configuring and rendering the WormholeConnect component. This component is imported from @wormhole-foundation/wormhole-connect and initialized with a basic configuration for the Testnet network, connecting Sui and Avalanche.
NOTE: when hosting this project for external use, keep in mind mandatory external API requests in your CORS policy by setting "Access-Control-Allow-Origin".
For more information on configuring Wormhole Connect, refer to the Wormhole Documentation, which provides detailed guidance on advanced configurations and supported features.