Overview

Summary

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 Github repository!

The Wormhole Typescript SDK allows you to implement the same functionality as the Connect widget, but in your own UI. For more information on using the SDK instead of Connect check out the docs.

Features

This is just an overview of what features are available. For details about each, check here.

multiple ways to bridge assets ("routes")
extensive ways to style the UI (also try the codeless styler interface!)
ways to configure what feature set to offer
ability to configure any token to bridge via Wormhole
drop off some gas at the destination

Demo

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

Integrate Connect

Option 1: import directly into a React app

First, install the npm package.

npm i @wormhole-foundation/wormhole-connect

Now you can import the React component:

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

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

Option 2: hosted version via CDN (for any website)

If you're not using React, you can still embed Connect on your website by using the hosted version. The sample code below uses the popular and free unpkg.com CDN from which your app will load the widget.

Simply copy and paste the following into your HTML body, and replace the {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@{WORMHOLE_CONNECT_VERSION}/dist/main.js" defer></script>
<link rel="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@{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/[email protected]/dist/main.js" defer></script>
<link rel="https://www.unpkg.com/@wormhole-foundation/[email protected]/dist/main.css" />

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. For details about all the configuration options, check here.

The default configuration of Wormhole Connect may not be what you want to use. 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 (do this - default public RPCs are heavily throttled)
restrict the routes that are available

Check the configuration options and customize your widget however you like!

Last updated 24 days ago