Integrate Bridged Assets in your UI
With Wormhole Connect, integration with wormhole is easier than ever.
For the zero config quick start, simply include the script and style tags in the HTML of your web app.
- 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" />
- 2.Include the following div tag in the
<body>of the html where the plugin should be rendered:
<div id="wormhole-connect"></div>
- 3.(Optional) Touch Grass
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
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.
React
HTML Tags
Configure the Wormhole Connect React component by passing a
WormholeConnectConfig object as the config attributeimport { 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"]}' />
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;
};
};
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