Hyperlane Warp Route UI Template

This repo contains an example web interface for interchain tokens built with Hyperlane Warp Route. Warp is a framework to permissionlessly bridge tokens to any chain.

Architecture

This app is built with Next & React, Wagmi, RainbowKit, and the Hyperlane SDK.

• Constants that you may want to change are in ./src/consts/, see the following Customization section for details.
• The index page is located at ./src/pages/index.tsx
• The primary features are implemented in ./src/features/

Customization

See CUSTOMIZE.md for details about adjusting the tokens and branding of this app.

Development

Setup

Configure

You need a projectId from the WalletConnect Cloud to run the Hyperlane Warp Route UI. Sign up to WalletConnect Cloud to create a new project.

Build

# Install dependencies
pnpm install

# Build Next project
pnpm run build

Run

You can add .env.local file next to .env.example where you set projectId copied from WalletConnect Cloud.

# Start the Next dev server
pnpm run dev
# Or with a custom projectId
NEXT_PUBLIC_WALLET_CONNECT_ID=<projectId> pnpm run dev

Test

# Lint check code
pnpm run lint

# Check code types
pnpm run typecheck

Format

# Format code using Prettier
pnpm run prettier

Clean / Reset

# Delete build artifacts to start fresh
pnpm run clean

Local package linking to hyperlane-monorepo

If you have to make changes to the widgets package to edit e.g. the Connect Button or other components linking the widgets package locally to test it is necessary. To do that you can run the following commands

# Link monorepo packages with the warp-ui
pnpm link:monorepo
# Unlink packages again after testing
pnpm unlink:monorepo

Deployment

The easiest hosting solution for this Next.JS app is to create a project on Vercel.

Learn more

For more information, see the Hyperlane documentation.