Setting up the bridging UI

Hyperlane provides a bridge UI. To set up the UI, first clone the UI repository.

To support wallet connect, you must sign up for a wallet connect account at https://cloud.walletconnect.com/app and create a project ID.

After cloning the repository, modify src/consts/config.tswith L1 and L2 token information

import { ChainMap, ChainMetadata } from '@hyperlane-xyz/sdk';

export const chains: ChainMap<ChainMetadata> = {
  // ----------- Add your chains here -----------------
  sepolia: {
    name: 'sepolia',
    chainId: 11155111,
    nativeToken: {
      name: 'ether',
      symbol: 'ETH',
      decimals: 18,
    },
    publicRpcUrls: [
      {
        http: 'https://eth-sepolia.g.alchemy.com/v2/apikey',
      },
    ],
  },
  testnet: {
    name: 'testnet',
    chainId: 9997,
    nativeToken: {
      name: 'ALT',
      symbol: 'ALT',
      decimals: 18,
    },
    publicRpcUrls: [
      {
        http: 'https://testnet-rollup-api.altlayer.io',
      },
    ],
  },
};

Modify src/consts/tokens.ts with L1 and L2 token information

import { WarpTokenConfig } from '../features/tokens/types';

export const tokenList: WarpTokenConfig = [
  {
    type: 'collateral',
    chainId: 11155111,
    address: '0xe67abda0d43f7ac8f37876bbf00d1dfadbb93aaa',
    hypCollateralAddress: '0xffA5f94329f41b9353F4ccA74Ba59D3Faed75AAe',
    name: 'Weth10',
    symbol: 'WETH10',
    decimals: 18,
    logoURI: '/logos/weth.png', // See public/logos/
  },
];

To start the UI, run

yarn dev 

To deploy your UI, you can use hosting services like Vercel or Netlify. For Vercel, you can follow the following steps.

• Sign up for Vercel
• Create a new project

• Connect it to your Git repo

• Hit Deploy!