|
| 1 | +--- |
| 2 | +title: Transfer Tokens Cross-Chain with Connect |
| 3 | +description: Learn how to use Wormhole Connect to transfers tokens cross-chain seamlessly between Sui and Avalanche Fuji with this step-by-step guide. |
| 4 | +--- |
| 5 | + |
| 6 | +# Cross-Chain Token Transfers with Wormhole Connect |
| 7 | + |
| 8 | +## Introduction |
| 9 | + |
| 10 | +In this tutorial, we’ll explore how to integrate [Wormhole Connect](https://github.com/wormhole-foundation/wormhole-connect){target=\_blank} to enable cross-chain token transfers and interactions. Wormhole Connect offers a simplified interface for developers to facilitate seamless token transfers between blockchains. Using Wormhole Connect, you can easily bridge assets across multiple ecosystems without diving into the complex mechanics of cross-chain communication. |
| 11 | + |
| 12 | +While this tutorial will guide you through the process using a specific blockchain as an example, the principles and steps outlined here can be applied to any blockchain supported by Wormhole. In this example, we’ll work with Sui as our source blockchain and Avalanche Fuji as the destination blockchain. |
| 13 | + |
| 14 | +## Prerequisites |
| 15 | + |
| 16 | +To get started with Wormhole Connect, we'll first need to set up a basic environment that allows for cross-chain token transfers. |
| 17 | +Before starting this tutorial, ensure you have the following: |
| 18 | + |
| 19 | +- [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm){target=\_blank} installed on your machine |
| 20 | +- A [Sui wallet](https://suiwallet.com/){target=\_blank} set up and ready for use |
| 21 | +- A [compatible wallet](https://support.avax.network/en/articles/5520938-what-are-the-official-avalanche-wallets){target=\_blank} for Avalanche Fuji, such as [MetaMask](https://metamask.io/){target=\_blank} |
| 22 | +- Testnet tokens for [Sui](https://docs.sui.io/guides/developer/getting-started/get-coins){target=\_blank} and [Fuji](https://core.app/tools/testnet-faucet/?subnet=c&token=c){target=\_blank} to cover gas fees |
| 23 | + |
| 24 | +## Set Up Connect for Sui Transfers |
| 25 | + |
| 26 | +### Create a React Project |
| 27 | + |
| 28 | +Start by setting up your React app: |
| 29 | + |
| 30 | +1. Open your terminal and run the following command to create a new React app: |
| 31 | + |
| 32 | + ```bash |
| 33 | + npx create-react-app connect-tutorial |
| 34 | + ``` |
| 35 | + |
| 36 | +2. Navigate into the project directory: |
| 37 | + |
| 38 | + ```bash |
| 39 | + cd connect-tutorial |
| 40 | + ``` |
| 41 | + |
| 42 | +### Install Wormhole Connect |
| 43 | + |
| 44 | +Next, install the Wormhole Connect package as a dependency by running the following command inside your project directory: |
| 45 | + |
| 46 | +```bash |
| 47 | +npm install @wormhole-foundation/wormhole-connect |
| 48 | +``` |
| 49 | + |
| 50 | +### Integrate Connect into the Application |
| 51 | + |
| 52 | +Now, we need to modify the default `App.js` file to integrate Wormhole Connect. We are going to use [version V1.0](/docs/build/applications/connect/upgrade/){target=\_blank}, make sure to check which version of connect you are using. Open `src/App.js` and replace the content with the following code: |
| 53 | + |
| 54 | +=== "JavaScript" |
| 55 | + |
| 56 | + ```js |
| 57 | + import logo from './logo.svg'; |
| 58 | + import './App.css'; |
| 59 | + import WormholeConnect from '@wormhole-foundation/wormhole-connect'; |
| 60 | +
|
| 61 | + const config = { |
| 62 | + network: 'Testnet', |
| 63 | + chains: ['Sui', 'Avalanche'], |
| 64 | + }; |
| 65 | +
|
| 66 | + function App() { |
| 67 | + return <WormholeConnect config={config}/>; |
| 68 | + } |
| 69 | +
|
| 70 | + export default App; |
| 71 | + ``` |
| 72 | + |
| 73 | +=== "TypeScript" |
| 74 | + |
| 75 | + ```ts |
| 76 | + import './App.css'; |
| 77 | + import WormholeConnect, { |
| 78 | + WormholeConnectConfig, |
| 79 | + WormholeConnectTheme, |
| 80 | + } from '@wormhole-foundation/wormhole-connect'; |
| 81 | +
|
| 82 | + function App() { |
| 83 | + const config: WormholeConnectConfig = { |
| 84 | + network: 'Testnet', |
| 85 | + chains: ['Sui', 'Avalanche'], |
| 86 | +
|
| 87 | + ui: { |
| 88 | + title: 'SUI Connect TS Demo', |
| 89 | + }, |
| 90 | + }; |
| 91 | +
|
| 92 | + const theme: WormholeConnectTheme = { |
| 93 | + mode: 'dark', |
| 94 | + primary: '#78c4b6', |
| 95 | + }; |
| 96 | +
|
| 97 | + return <WormholeConnect config={config} theme={theme} />; |
| 98 | + } |
| 99 | +
|
| 100 | + export default App; |
| 101 | + ``` |
| 102 | + |
| 103 | +- Set `network` to `testnet` - this ensures that Wormhole Connect uses the testnet environment |
| 104 | +- Set `chains` to `['Sui', 'Avalanche']` - configures the app to allow transfers between Sui and Avalanche Fuji, the testnet for Avalanche |
| 105 | + |
| 106 | +### Customize Wormhole Connect |
| 107 | + |
| 108 | +To further customize Wormhole Connect for your application, such as adjusting the UI, adding custom tokens, or configuring specific chain settings, you can refer to the [Wormhole Connect Configuration guide](/docs/build/applications/connect/configuration/#introduction){target=\_blank}. |
| 109 | + |
| 110 | +### Run the Application |
| 111 | + |
| 112 | +Make sure you’re in the root directory of your React app, and run the following command to start the application: |
| 113 | + |
| 114 | +```bash |
| 115 | +npm start |
| 116 | +``` |
| 117 | + |
| 118 | +Now your React app should be up and running, and Wormhole Connect should be visible on [http://localhost:3000/](http://localhost:3000/){target=\_blank}. You should see the Wormhole Connect component, which will include a UI for selecting networks and tokens for cross-chain transfers. |
| 119 | + |
| 120 | +## Transfer Tokens from Sui to Fuji |
| 121 | + |
| 122 | +Before transferring token ensure you have enough testnet SUI and Fuji tokens to cover the gas fees for the transfer. |
| 123 | + |
| 124 | +To transfer tokens from Sui to Fuji in the Wormhole Connect interface: |
| 125 | + |
| 126 | +1. Select **Sui** as the source network, connect your Sui wallet, and choose **SUI** as the asset you wish to transfer |
| 127 | +2. Choose **Fuji** as the destination network and connect your wallet with the Fuji network |
| 128 | +3. Enter the amount of SUI tokens you wish to transfer |
| 129 | + |
| 130 | +  |
| 131 | + |
| 132 | +4. Choose to view other routes |
| 133 | + |
| 134 | +  |
| 135 | + |
| 136 | +5. Select the manual bridge option, which will require two transactions: one on the source chain (Sui) and one on the destination chain (Fuji) |
| 137 | + |
| 138 | + !!! note |
| 139 | + It is recommended to use the manual bridge option for this tutorial. The automatic bridge feature is currently undergoing improvements, while the manual bridge ensures that transfers complete successfully. |
| 140 | + |
| 141 | +  |
| 142 | + |
| 143 | +6. Review and confirm the transfer on Sui. This will lock your tokens on the Sui chain |
| 144 | + |
| 145 | +  |
| 146 | + |
| 147 | +7. Follow the on-screen prompts to approve the transaction. You will be asked to sign with your Sui wallet |
| 148 | + |
| 149 | +  |
| 150 | + |
| 151 | +Once the transaction has been submitted, Wormhole Connect will display the progress of the transfer. Monitor the status until you’re prompted to complete the transaction on the destination chain. You can also track your transactions on [Wormholescan](https://wormholescan.io/#/?network=Testnet){target=\_blank}. |
| 152 | + |
| 153 | +## Claim Tokens on Fuji |
| 154 | + |
| 155 | +After the Sui transaction is complete, confirm the final transaction on Fuji by claiming the wrapped tokens. You will be asked to confirm the transaction with your Fuji wallet. |
| 156 | + |
| 157 | + |
| 158 | + |
| 159 | +Once confirmed, check your Fuji wallet to verify that the wrapped SUI tokens have been successfully received. |
| 160 | + |
| 161 | + |
| 162 | + |
| 163 | +<!-- will update once the repos are on the wormhole github |
| 164 | +## Resources |
| 165 | + |
| 166 | +If you'd like to explore the complete project or need a reference while following this tutorial, you can find the complete codebase in the [Sui-Connect GitHub repository](){target=\_blank}. |
| 167 | +
|
| 168 | +--> |
0 commit comments