Search
K

Integrate Bridged Assets in your UI

With Wormhole Connect, integration with wormhole is easier than ever.

Ultra Quick Start

For the zero config quick start, simply include the script and style tags in the HTML of your web app.
  1. 1.
    Include the following html tags in the <head> of the html
<script 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" />
  1. 2.
    Include the following div tag in the <body> of the html where the plugin should be rendered:
<div id="wormhole-connect"></div>
  1. 3.
    (Optional) Touch Grass

React App Integration

Getting Wormhole Connect added to your existing React app is straight forward.
First, install the npm package
npm install @wormhole-foundation/wormhole-connect
Next, import the component
import WormholeBridge from '@wormhole-foundation/wormhole-connect';
Finally, add the component to your app
function App() {
return (
<WormholeBridge />
)
}
If your app is running, you should see something like this
Wormhole Connect Screenshot

Configuration

The default configuration of Wormhole Connect may not be what you want to use. You may want to provide custom styles or restrict the chains that you allow in your app.
One important set of configuration parameters you should consider changing are the RPC URLs. By default public RPCs are used but they're heavily throttled, so for best user experience, these should be set to custom URLs.
More details on configuration options available is here
React
HTML Tags
Configure the Wormhole Connect React component by passing a WormholeConnectConfig object as the config attribute
import { WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';
const config: WormholeConnectConfig = {
env: "mainnet",
networks: ["ethereum", "polygon", "solana"],
tokens: ["ETH", "WETH", "MATIC", "WMATIC"],
rpc: {
ethereum: "https://rpc.ankr.com/eth",
solana: "https://rpc.ankr.com/solana",
}
}
// ...
<WormholeBridge config={config} />
The same config parameters that are available for the React component can be passed as a json string to the config attribute of the wormhole-connect container.
<div id="wormhole-connect" config='{"env":"mainnet","tokens":["ETH","WETH","WBTC","USDCeth"]}' />
Theme Options
More here
export type Theme = {
primary: PaletteColor;
secondary: PaletteColor;
divider: string;
background: {
default: string;
};
text: {
primary: string;
secondary: string;
};
error: PaletteColor;
info: PaletteColor;
success: PaletteColor;
warning: PaletteColor;
button: {
primary: string;
primaryText: string;
disabled: string;
disabledText: string;
action: string;
actionText: string;
hover: string;
};
options: {
hover: string;
select: string;
};
card: {
background: string;
elevation: string;
secondary: string;
};
popover: {
background: string;
elevation: string;
secondary: string;
};
modal: {
background: string;
};
font: {
primary: string;
header: string;
};
};
Configuration Options
More here
export type Rpcs = {
[chain in ChainName]?: string;
};
export interface BridgeDefaults {
fromNetwork?: ChainName;
toNetwork?: ChainName;
token?: string;
requiredNetwork?: ChainName;
}
export interface WormholeConnectConfig {
env?: 'mainnet' | 'testnet';
rpcs?: Rpcs;
networks?: ChainName[];
tokens?: string[];
mode?: 'dark' | 'light';
customTheme?: Theme;
cta?: {
text: string;
link: string;
};
bridgeDefaults?: BridgeDefaults;
}
Last modified 3mo ago