bridge-ui-v2

Bridge UI v2

This package contains the Bridge UI built with svelte and wagmi

• Bridge UI v2
  • Development setup
    • Set up environment variables
    • Set up configurations
    • Start a development server:
  • Building

Development setup

Install all dependencies with

pnpm install

Set up environment variables

cp .env.example .env

Then, you must carefully update the .env file with the necessary environment variables. This step is crucial as several features, including WalletConnect integration, rely on specific variables like PUBLIC_WALLETCONNECT_PROJECT_ID.

# Open the .env file and fill in the required values
nano .env

After updating, source the .env file to load these variables into your environment:

source .env

Set up configurations

High-level flow:

1. Prepare .json config files
2. Export as base64 to .env
3. build/serve creates typescript configs for the app

Detailed process

These are the additional configuration files that have to be filled in:

Name	Description
/config/configuredBridges.json	Defines the chains that are connected via taiko bridges and lists the contract addresses
/config/configuredChains.json	Defines some metadata for the chains, such as name, icons, explorer URL, etc.
/config/configuredRelayer.json	If chains have a relayer, the URL and the chain IDs it covers are entered here
/config/configuredCustomTokens.json	Defines a list of tokens that should be available in the token dropdowns
/config/configuredEventIndexer.json	Defines the configuration for the event indexer including chain IDs and URLs

---

To get started, open your terminal in /packages/bridge-ui-v2/

1. Copy the config examples

   cp config/sample/configuredBridges.example config/configuredBridges.json
   cp config/sample/configuredChains.example config/configuredChains.json
   cp config/sample/configuredRelayer.example config/configuredRelayer.json
   cp config/sample/configuredCustomTokens.example config/configuredCustomTokens.json
   cp config/sample/configuredEventIndexer.example config/configuredEventIndexer.json

2. Change or fill in all the information that will be used by the bridge UI inside these files.

3. As the configurations are not committed directly, they will be loaded from the .env.
   For that they need to be encoded and appended to the .env file:

   pnpm export:config

   This command exports the json as base64 string to your .env file

4. Remember to source your .env file after exporting the configurations:

   source .env

5. Now whenever a build is triggered it will generate the config files based on the .env file in src/generated/
   Note: In the config/schemas folder are schemas that will validate the correct json format and report any errors in your initial json configurations, so check the log output for any errors!
   

Beware, that if you make changes to the json files, you need to export them to the .env again via script.

Start a development server:

pnpm dev

# or start the server and open the app in a new browser tab
pnpm dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.