Skip to content
Start on Wormhole

Integrating Wormhole Connect

Alright, you’ve got a basic React App up and running. Now it’s time to sprinkle in some Wormhole Connect SDK magic to kickstart your token bridging journey. 🌉✨

🌟 Initializing Wormhole Connect SDK 🌟

First things first, let’s initialize the Wormhole Connect SDK within our Bridge app directory.

In your app’s root directory, go ahead and install the Wormhole Connect SDK with the following command:

npm i @wormhole-foundation/wormhole-connect

integrate-1

🛠️ Crafting the Bridge 🛠️

Now, navigate to your src/App.tsx file and clear out its contents.

📦 Importing the SDK 📦

Start by importing the Wormhole Connect SDK into your React App. Simply add this line at the top of your file:

import WormholeBridge from "@wormhole-foundation/wormhole-connect";

🎨 Building the App Function 🎨

Once the SDK is imported, let’s create a function that renders the bridge element we just imported. Add the following code snippet:

function App() {
  return (
    <WormholeBridge />
  );
}

This should go right below your import statements.

🏁 The Final Lap: Exporting the Function 🏁

To render the App function on your webpage, you’ll need to export it. Add this line at the end of your code:

export default App;

If you’ve been following along, your code should look something like this:

import WormholeBridge from '@wormhole-foundation/wormhole-connect';

function App() {
  return (
    <WormholeBridge />
  );
}

export default App;

Save your changes, and your local server at http://localhost:3000/ should display something like this:

integrate-2

🎉 Woohoo! You’ve successfully built your very own token bridge, all thanks to the power of Wormhole. Feel free to bridge tokens and acquire wrapped assets on your network of choice.

For those interested, the code is also available on GitHub right here. 🌐