Wormhole Connect＃

Introduction＃

Wormhole Connect is a React widget that lets developers offer an easy-to-use interface to facilitate cross-chain asset transfers via Wormhole directly in a web application. Check out the Wormhole Connect GitHub repository.

The Wormhole TypeScript SDK allows you to implement the same functionality as the Connect widget but in your own UI. Check out the docs for more information on using the SDK instead of Connect.

Features＃

Wormhole Connect is easy to customize to suit your application's needs. You can specify technical details like supported assets and custom RPCs or forgo customization and have a full-featured widget. The widget UI is highly customizable, with extensive styling options available, including a user-friendly no code styling interface for those who prefer a more visual approach to design. The features of Wormhole Connect include:

Multiple ways to bridge assets (routes)
Extensive ways to style the UI (including the no code styling interface)
Ways to configure what feature set to offer
Ability to configure any token to bridge via Wormhole
Ability to drop off some gas at the destination

For more details about the features of Wormhole Connect and a breakdown of supported features by chain, be sure to check the features page.

Production DApp Examples＃

Wormhole Connect is deployed live in several production apps. Here are a few:

Integrate Connect＃

Import Directly into a React App＃

First, install the Wormhole Connect npm package. You can read more about the package by clicking on the following button:

npm i @wormhole-foundation/wormhole-connect

Now you can import the React component:

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

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

Use Hosted Version via CDN＃

If you're not using React, you can still embed Connect on your website by using the hosted version. This uses pre-built packages (which include React) served from NPM by jsdelivr.net.

v1.x

import { wormholeConnectHosted } from '@wormhole-foundation/wormhole-connect';

// Existing DOM element where you want to mount Connect
const container = document.getElementById('bridge-container');

wormholeConnectHosted(container);

v0.x

Simply copy and paste the following into your HTML body, and replace the INSERT_WORMHOLE_CONNECT_VERSION in the links with the most recent production version of Wormhole Connect. You can check what the most recent version is on NPM.

<!-- Mounting point. Include in <body> -->
<div id="wormhole-connect"></div>

<!-- Dependencies -->
<script
    type="module"
    src="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@INSERT_WORMHOLE_CONNECT_VERSION/dist/main.js"
    defer
></script>
<link
    rel="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@INSERT_WORMHOLE_CONNECT_VERSION/dist/main.css"
/>

For example, for 0.3.13:

<!-- Mounting point. Include in <body> -->
<div id="wormhole-connect"></div>

<!-- Dependencies -->
<script
    type="module"
    src="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.3.13/dist/main.js"
    defer
></script>
<link
    rel="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@0.3.13/dist/main.css"
/>

Note

It is important to periodically update your Wormhole Connect instance to the latest version, as there are frequent functionality and security releases.

Configuration＃

This is just an overview of what's possible. Check the Configuration docs for details about all the configuration options.

The default configuration of Wormhole Connect may not be exactly what you're looking for. You may want to:

Use custom styles
Restrict the chains that you allow in your app
Add support for your project's token, and eliminate tokens you don't want to reduce noise
Configuring custom RPC URLs (This is highly recommended as default public RPCs are heavily throttled)
Restrict the routes that are available

For additional information on the preceding options, check the configuration options and customize your widget however you like.