Edit

Configuration

WIP

Configure the Wormhole Connect React component by passing a WormholeConnectConfig object as the config attribute

import WormholeConnect, { WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';

const config: WormholeConnectConfig = {
  networks: ["ethereum", "polygon", "solana"],
  tokens: ["ETH", "WETH", "MATIC", "WMATIC"],
  rpcs: {
    ethereum: "https://rpc.ankr.com/eth",
    solana: "https://rpc.ankr.com/solana",
  }
}

// ...

<WormholeConnect config={config} />

Examples

Below are some examples of different ways you can configure Connect.

See WormholeConnectConfig in src/config/index.ts for a full view of the supported config parameters.

Custom networks and RPC endpoints

Specify supported networks/tokens and custom RPC endpoints. Your users may encounter rate limits using public RPC endpoints if you do not provide your own

Fully customized theme

Environment

This shows how to run Connect on testnet.

Custom RPC Endpoint

This shows how to change which RPC provider Connect uses for a particular network.

Arbitrary Token

This shows how to add an arbitrary token to your deployment of Connect. Please note you will need to register your token with the Token Bridge to get the contract addresses necessary for it to work with Connect.

These example config limits Connect to the Solana and Ethereum networks, and a handful of tokens including BSKT which is not built in by default and provided under the tokensConfig key.

See src/config/types.ts for the type definition of TokensConfig.

More Configuration Options

Whitelisting Tokens (tokens):

You can provide a whitelist of tokens under tokens. By default, Connect will offer its full built-in list:

Mainnet
Testnet

ETH

ETH, ETHsepolia

WETH

WETH, WETHsepolia

USDCeth

USDCeth

WBTC

USDT

DAI

BUSD

MATIC

MATIC

WMATIC

WMATIC

USDCpolygon

BNB

BNB

WBNB

WBNB

USDCbnb

AVAX

AVAX

WAVAX

WAVAX

USDCavax

USDCavax

FTM

FTM

WFTM

WFTM

CELO

CELO

GLMR

GLMR

WGLMR

WGLMR

SOL

WSOL

PYTH

SUI

SUI

USDCsol

APT

APT

ETHarbitrum

ETHarbitrum, ETHarbitrum_sepolia

WETHarbitrum

WETHarbitrum, WETHarbitrum_sepolia

USDCarbitrum

USDCarbitrum

ETHoptimism

ETHoptimism, ETHoptimism_sepolia

WETHoptimism

WETHoptimism, WETHoptimism_sepolia

USDCoptimism

USDCoptimism

ETHbase

ETHbase, ETHbase_sepolia

WETHbase

WETHbase, WETHbase_sepolia

tBTC

tBTC

tBTCpolygon

tBTCpolygon

tBTCoptimism

tBTCoptimism

tBTCarbitrum

tBTCarbitrum

tBTCbase

tBTCbase

tBTCsol

tBTCsol

WETHpolygon

WETHbsc

wstETH

wstETH

wstETHarbitrum

wstETHoptimism

wstETHpolygon

wstETHbase

Routes (routes)

You can provide a whietlist of routes under routes. By default, Connect will offer its full built-in list:

Mainnet
Testnet

bridge

bridge

relay

relay

cctpManual

cctpManual

cctpRelay

cctpRelay

nttManual

nttManual

nttRelay

nttRelay

ethBridge

wstETHBridge

usdtBridge

cosmosGateway

cosmosGateway

tbtc

tbtc

Wallet Connect Project ID

Required in order to display Wallet Connect as a wallet option. You can get a project ID on https://cloud.walletconnect.com/.

Toggle Hamburguer Menu

By setting the showHamburgerMenu option to false, you can deactivate the hamburger menu, causing the links to be positioned at the bottom.

Add extra menu entry

By setting the showHamburgerMenu option to false, you can use the menu array to add extra links.

property
description

menu[].label

link name to show up

menu[].href

target url or urn

menu[].target

anchor standard target, by default _blank

menu[].order

order where the new item should be injected

Sample configuration

CoinGecko API Key

If you have a CoinGecko API Plan, you can include the API key in the configuration. In case you do not have the API key, follow this steps.

More Networks

Specify a set of extra networks to be displayed on the network selection modal, each of them linking to a different page/dApp/mobile app the user will be redirected to.

Property
description

moreNetworks.href

Default value for missing network hrefs

mandatory

moreNetworks.target

Default value for missing network link targets

optional, defaults to _self

moreNetworks.description

Brief description that should be displayed as tooltip when the user hover an more network icon. Used as default for missing network descriptions

optional

moreNetworks.networks[].icon

URL data encoded icon to display

mandatory

moreNetworks.networks[].href

Network href to redirect to. If present, the values {:sourceChain} and {:targetChain} are replaced with the selected currently selected chains before redirecting

optional

moreNetworks.networks[].label

Display text

mandatory

moreNetworks.networks[].name

Unique network key

optional, defaults to a snake_case version of the label

moreNetworks.networks[].description

Description value

optional, defaults to moreNetworks.description

moreNetworks.networks[].target

href target value

optional, defaults to moreNetworks.target

moreNetworks.networks[].showOpenInNewIcon

Disable top right open in new icon

optional, defaults to true if target is _blank or false if target is _self

More Tokens

Show a special entry on the select tokens modal which redirects the user to a different page/dApp/mobile app.

Property
description

moreTokens.label

Display text

mandatory

moreTokens.href

URL to redirect to. If present, the values {:sourceChain} and {:targetChain} are replaced with the selected currently selected chains before redirecting

mandatory

moreTokens.target

href target

optional, defaults to _self

Explorer

Enable explorer button to allow users to search for his transactions on a given explorer filtering by his wallet address

Property
description

explorer.label

Display text

optional, defaults to Transactions

explorer.href

URL of the explorer, for instance https://wormholescan.io/. If present, the values {:address} is replaced with the connected wallet address

mandatory

explorer.target

href target

optional, defaults to _blank

Last updated

Was this helpful?