LogoLogo
  • Introduction
  • Quick Start
    • Developing Cross Chain Dapps
      • Standard Relayer
      • Specialized Relayer
    • Tutorials
      • Hello Wormhole
        • Hello Wormhole Explained
        • Beyond Hello Wormhole
      • Hello Token
      • CCTP
        • USDC Transfers With Connect SDK
      • Simple Relayer
        • Advanced Relayer Example
    • Demos
    • Wormhole Connect: Bridging Made Easy
  • Explore Wormhole
    • Architecture
    • Security
    • Core Contracts
    • Guardians
    • VAAs
    • Relayers
    • Spy
    • Gateway
      • Onboarding
  • Reference
    • Constants Reference
    • Development Environment
      • Tilt
      • Tooling
    • Blockchain Platforms
      • Algorand
      • Aptos
      • CosmWasm
      • EVM
        • Relayer
      • Near
      • Solana
      • Sui
    • API Docs
      • Wormholescan API
    • SDK Docs
      • Legacy SDK
    • CLI Docs
    • Glossary
  • Wormhole Connect
    • Overview
    • Routes
    • Features
    • Configuration
  • Native Token Transfers
    • Overview
      • System Components
      • Deployment Models
    • Deployment
      • Installation
      • Deploy to EVM
      • Deploy to Solana
      • Post Deployment
    • Configuration
      • Rate Limiting
      • Access Control
    • Security
    • Custom Transceivers
    • Architecture
      • EVM Message Lifecycle
      • Solana Message Lifecycle
  • Queries
    • Overview
    • Getting Started
    • FAQs
  • MultiGov
    • Overview
    • Getting Started
    • Deployment
      • Configuration
    • Upgrading
    • Architecture
    • Guides
    • FAQs
  • External Links
    • Explorer
    • Ecosystem
    • Guardian Dashboard
    • Portal Bridge Docs
    • Discord
    • Twitter
    • Github
Powered by GitBook
On this page
  • Summary
  • Demo
  • Getting Started
  • Configuration

Was this helpful?

Edit on GitHub
  1. Quick Start

Wormhole Connect: Bridging Made Easy

Last updated 1 year ago

Was this helpful?

Summary

Wormhole Connect is a React widget that lets developers offer easy, customized access to Wormhole powered bridges directly in a web application. Connect supports multiple forms of bridging including native asset bridge, Portal wrapped asset bridge, CCTP USDC bridge, and many others. Connect augments each bridge with gas dropoff (a transaction that leaves a user with extra native token so they can pay gas for subsequent on chain interactions) and gasless transactions (Connect relayers pay gas on behalf of users).

Check out the !

Wormhole Connect Screenshot

Demo

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

Getting Started

It's very easy to add Wormhole Connect to an existing React app.

First, install the npm package.

npm i @wormhole-foundation/wormhole-connect

Now you can use the React component:

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

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

Alternative: 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. Simply copy and paste the following code into your HTML body:

<!-- 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" />

Configuration

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

Read about configuring Connect and more !

Wormhole Typescript SDK
check out the docs
Portal Bridge
Jupiter
Pancake Swap
Github repository
in the Connect docs