Skip to main content

Deploy a UI for your Warp Route

After you've successfully deployed a Warp Route, you may want to deploy a front-end UI to faciliate interchain token transfers. You can fork the Hyperlane Warp UI template and customize it to fit your needs.

Configure & Customize the UI

Follow the customization instructions for details on how to configure the UI's tokens and change the default branding assets/theme.


By default, the app will use the canonical Hyperlane registry published on NPM. To use use a different registry, you can set a URL using the NEXT_PUBLIC_REGISTRY_URL environment variable.

Warp Route Config Example

Here's an example config for a Warp Route that connects USDC on Sepolia to Alfajores. You can use Typescript or YAML for your route configs.

tokens: [
// The ChainName of the token
chainName: 'sepolia',
// See
standard: TokenStandard.EvmHypCollateral,
// The token metadata (decimals, symbol, name)
decimals: 6,
symbol: 'USDC',
name: 'USD Coin',
// The router address
addressOrDenom: 'YOUR_ROUTER_ADDRESS_1',
// The address of the underlying collateral token
collateralAddress: '0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238',
// A path to a token logo image
logoURI: '/logos/usdc.png',
// The list of tokens this one is connected to
connections: [ { token: 'ethereum|alfajores|YOUR_ROUTER_ADDRESS_2' } ]
chainName: 'alfajores',
standard: TokenStandard.EvmHypSynthetic,
decimals: 6,
symbol: 'USDC',
name: 'USD Coin',
addressOrDenom: 'YOUR_ROUTER_ADDRESS_2',
logoURI: '/logos/weth.png',
connections: [ { token: 'ethereum|alfajores|YOUR_YOUR_ROUTER_ADDRESS_2' } ]

Chain Config Example

Chain metadata can also be configured as needed. These are the same configs as the those used with the CLI for any of its deploy or send command (for example, those from the deploy guide).

anvil1: {
chainId: 31337,
name: 'anvil1',
displayName: 'Anvil 1 Local',
nativeToken: { name: 'Ether', symbol: 'ETH', decimals: 18 },
publicRpcUrls: [{ http: '' }],
blocks: {
confirmations: 1,
reorgPeriod: 0,
estimateBlockTime: 10,
logoURI: '/logo.svg'

Deploy the UI

Since the UI is a Next.js app, you can use your favorite hosting service to host it. We recommend Vercel, which works well with Next. AWS Amplify is another popular option.

  • Sign up for Vercel
  • Create a new project
  • Connect it to your Git repo
  • Hit Deploy!

And that's it! Now you and your users can use the UI to send tokens from the collateral chain to remote chains, from one remote chain to another, and from any remote chain back to the collateral chain.

Return gas

A common problem with token bridges like Warp Routes is that a user may transfer a token like USDC to a new chain, but only afterwards realize that they do not have the native gas token to move those tokens anywhere including back.

Besides warning users in the UI about ensuring they have gas, you can also faucet them some native gas tokens to improve their initial experience. To achieve this faucet, you can modify the Warp Route contracts to hold some balance of the native token and share that with recipients. In addition, you could build an off-chain service which just observes for ReceivedTransferRemote events and transfers the native gas token to the recipient.


For developers looking to further customize the Warp UI for their own projects or build their own interchain applications, we encourage you to explore the Typescript SDK.

The SDK contains a growing set of a utilities and abstractions for interacting with Hyperlane across different protocols (EVM, Cosmos, Solana).