Skip to content

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:

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 version 

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. 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 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.