# Setting up the bridging UI

Hyperlane provides a bridge UI. To set up the UI, first clone the [UI repository](https://github.com/hyperlane-xyz/hyperlane-warp-ui-template). 

{% hint style="info" %}
To support wallet connect, you must sign up for a wallet connect account at <https://cloud.walletconnect.com/app> and create a project ID.&#x20;
{% endhint %}

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

```typescript
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

```typescript
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&#x20;

```bash
yarn dev 
```

<figure><img src="/files/3Y0Kwx9F2QOpU9lx7LMn" alt=""><figcaption></figcaption></figure>

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](https://vercel.com/)
* Create a new project
* Connect it to your Git repo
* Hit Deploy!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.altlayer.io/altlayer-documentation/external-integrations/enabling-permissionless-interoperability-on-altlayer-rollup-with-hyperlane/setting-up-the-bridging-ui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.