Run Bridge UI

tip

This guide is fairly similar to the Deploy Bridge UI guide. The main difference is that this guide is focused on running the components of the Surge rollup on the Hoodi testnet, while the other one is for the devnet.

The Bridge UI is the user-facing interface for transferring assets between Layer 1 and Layer 2, enabling seamless interaction with Surge’s cross-chain functionality. It relies on the underlying Relayer and smart contracts to facilitate these transfers securely.

This guide walks you through running the Surge Bridge UI, including all necessary configurations and services.

To see how the Bridge UI fits into the overall system, refer to the Surge Architecture documentation.

1. Clone the Repository

First, clone the Surge Taiko Mono repository and navigate to the project directory:

git clone https://github.com/NethermindEth/surge-taiko-mono.git
cd surge-taiko-mono

2. Navigate to the Bridge UI Directory

cd packages/bridge-ui

3. Environment Configuration

Create your environment configuration file (.env) by copying the provided sample:

cp .env.hoodi .env

4. Set Up SSL Certificates

Navigate to the Bridge UI nginx directory and generate the SSL certificates:

cd ./nginx
chmod +x ./generate-certs.sh
./generate-certs.sh

5. Configure Nginx Reverse Proxy

Prerequisites

Ensure you have the following endpoints ready:

• L1 RPC URL
• L1 Blockscout URL
• L1 to L2 Relayer URL
• L2 RPC URL
• L2 Blockscout URL
• L2 to L1 Relayer URL

Update Configuration

Edit the ./nginx/nginx.conf file with your actual URLs. For example:

# L1 RPC endpoint
location /l1-rpc/ {
    proxy_pass http://your-l1-rpc-endpoint:32002/;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

warning

Ensure all URLs used in configuration files are accessible via HTTPS.

6. Configure Application Components

Create your network configuration file by copying the provided samples:

cd ..
cp ./config/hoodi/configuredBridges.json ./config/
cp ./config/hoodi/configuredChains.json ./config/
cp ./config/hoodi/configuredRelayer.json ./config/
cp ./config/hoodi/configuredCustomTokens.json ./config/
cp ./config/hoodi/configuredEventIndexer.json ./config/

7. Deploy Services

Use Docker Compose to deploy the Bridge UI and nginx services:

# Deploy Bridge UI
docker compose --profile bridge-ui up -d --build

# Deploy Nginx
docker compose --profile nginx up -d

Verification

Use the following commands to verify your services:

# Check container status
docker compose ps

# View Bridge UI logs
docker compose logs bridge-ui -f

# View Nginx logs
docker compose logs nginx -f

warning

Double-check that all URLs in your nginx config are secured and publicly accessible before deployment.