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.

Token Config Example​

Here's an example of a token config for a Warp Route that connects WETH on Goerli (chain ID 5). You can use Typescript, JSON, or YAML configs for your token configs.

{
  // The chain ID of the base chain
  chainId: 5,
  // The address of the underlying token
  address: '0xb4fbf271143f4fbf7b91a5ded31805e42b2208d6',
  // The address of the HypERC20Token contract
  hypCollateralAddress: '0x145de8760021c4ac6676376691b78038d3DE9097',
  // The type, either 'collateral' or 'native'
  type: 'collateral'
  // The base token name
  name: 'Weth',
  // The base token symbol
  symbol: 'WETH',
  // The base token decimals
  decimals: 18,
  // A path to a token logo image
  logoURI: '/logos/weth.png'
}

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: 'http://127.0.0.1:8545' }],
    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 very 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.

Stranded Whale Problem​

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 afterwords realize that they do not have the native gas token to move those tokens anywhere including back. You may consider modifying the UI to warn the users of this situation, or better faucet them some dust of native gas token so improve their experience. You can either do so by modifying the warp route contracts where it holds some balance of the native token and can share that with recipients, or you could build an off-chain service which just observes for ReceivedTransferRemote events and transfers the native gas token to the recipient.