Deploy a UI for your Warp Route
A front-end for interchain token transfers
Last updated
A front-end for interchain token transfers
Last updated
After you Deploy a Warp Route, you may want to deploy a UI for it. You can use the and customize it to fit your needs.
Follow these for details on how to configure the UI's tokens and change the default branding assets/theme.
As mentioned in the , the UI repo contains a token list (see ./src/consts/tokens.ts)
which must be updated. Here's an example:
You can replace the tokens
entry with the output that was written to hyperlane-deploy/artifacts/warp-ui-token-list.ts
from the Deploy a Warp Route instructions.
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.
In addition, custom chains also need to be configured, in `./src/consts/chains.ts`. This should be the same configuration as the one used in the step when deploying Hyperlane and the when deploying the Warp Route. Here's an example:
Since the UI is a Next.js app, you can use your favorite hosting service to host it. We recommend , which works very well with Next. and are also a good options.
Sign up for
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 thetransfer the native gas token to the recipient.