Skip to content

Latest commit

 

History

History
 
 

bridge-ui-v2

Bridge UI v2

This package contains the Bridge UI built with svelte and wagmi

Development setup

Install all dependencies with

pnpm install

Set up environment variables

cp .env.example .env

Then update environment variables in .env

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/configuredEventIndexer.json NFT Indexer we can query to help with importing NFTs
/config/configuredCustomTokens.json Defines a list of tokens that should be available in the token dropdowns


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. 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.

Optional flags

pnpm export:config --<env> --<version>

You can store multiple configs in subfolders, currently the script accepts: --a5, --a6 for version and --dev, --prod for env

The folder structure should look like this then:

config/
|-- dev/
|   |-- a5/
|   |-- a6/
|-- prod/
|   |-- a5/
|   |-- a6/

More could be configured manually in scripts/exportJsonToEnv.js

Start a development server:

pnpm dev

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

# if you want to expose the IP to your network you can use this flag
pnpm dev --host

Building

To create a production version of your app:

pnpm run build

You can preview the production build with pnpm run preview.

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