feat(bridge-ui-v2): allow bridging to all layers (#14525)

Co-authored-by: Francisco Ramos <[email protected]>
Co-authored-by: Daniel Wang <[email protected]>

packages/bridge-ui-v2/.env.example

@@ -1,84 +1,23 @@
-# Chain Names
-export PUBLIC_L1_CHAIN_NAME=""
-export PUBLIC_L2_CHAIN_NAME=""
-export PUBLIC_L3_CHAIN_NAME=""
-
-
-# Chain Ids
-export PUBLIC_L1_CHAIN_ID=
-export PUBLIC_L2_CHAIN_ID=
-export PUBLIC_L3_CHAIN_ID=
-
-
-# RPC Urls
-export PUBLIC_L1_RPC_URL=https://
-export PUBLIC_L2_RPC_URL=https://
-export PUBLIC_L3_RPC_URL=https://
-
-
-# Explorer Urls
-export PUBLIC_L1_EXPLORER_URL=https://
-export PUBLIC_L2_EXPLORER_URL=https://
-export PUBLIC_L3_EXPLORER_URL=https://
-
-
-# Relayer API
-export PUBLIC_RELAYER_URL=https://
-
+# Default explorer as fallback for the sidebar
+export PUBLIC_DEFAULT_EXPLORER=https://
 
 # Use the bridge guide Urls
 export PUBLIC_GUIDE_URL=https://
 
-
-# Cross Chain (Taiko) Contract address
-export PUBLIC_L1_CROSS_CHAIN_SYNC_ADDRESS=0x
-export PUBLIC_L2_CROSS_CHAIN_SYNC_ADDRESS=0x
-export PUBLIC_L3_CROSS_CHAIN_SYNC_ADDRESS=0x
-
-
-# Token Vault Contract address
-export PUBLIC_L1_TOKEN_VAULT_ADDRESS=0x
-export PUBLIC_L2_TOKEN_VAULT_ADDRESS=0x
-export PUBLIC_L3_TOKEN_VAULT_ADDRESS=0x
-
-# ERC721 Token Vault Contract address
-export PUBLIC_L1_ERC721_VAULT_ADDRESS=
-export PUBLIC_L2_ERC721_VAULT_ADDRESS=
-export PUBLIC_L3_ERC721_VAULT_ADDRESS=
-
-
-# ERC1155 Token Vault Contract address
-export PUBLIC_L1_ERC1155_VAULT_ADDRESS=
-export PUBLIC_L2_ERC1155_VAULT_ADDRESS=
-export PUBLIC_L3_ERC1155_VAULT_ADDRESS=
-
-
-# Bridge Contract address
-export PUBLIC_L1_BRIDGE_ADDRESS=0x
-export PUBLIC_L2_BRIDGE_ADDRESS=0x
-export PUBLIC_L3_BRIDGE_ADDRESS=0x
-
-
-# Signal Service Contract address
-export PUBLIC_L1_SIGNAL_SERVICE_ADDRESS=0x
-export PUBLIC_L2_SIGNAL_SERVICE_ADDRESS=0x
-export PUBLIC_L3_SIGNAL_SERVICE_ADDRESS=0x
-
-
-# Test token List
-export PUBLIC_TEST_ERC20=[]
-
-
 # WalletConnect Project ID
 export PUBLIC_WALLETCONNECT_PROJECT_ID=""
 
 # Enable NFT Bridge ("true" or "false")
 export PUBLIC_NFT_BRIDGE_ENABLED=""
 
-
 # Sentry
 export PUBLIC_SENTRY_DSN=https://
-
 export SENTRY_ORG=
 export SENTRY_PROJECT=
 export SENTRY_AUTH_TOKEN=
+
+# Config jsons in base64 (see ReadMe, these are generated via a script)
+export CONFIGURED_BRIDGES=
+export CONFIGURED_CHAINS=
+export CONFIGURED_CUSTOM_TOKEN=
+export CONFIGURED_RELAYER=

packages/bridge-ui-v2/.eslintignore

@@ -16,3 +16,5 @@ CHANGELOG.md
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+src/generated/*

packages/bridge-ui-v2/.gitignore

@@ -14,4 +14,4 @@ vite.config.ts.timestamp-*
 !/config/sample/
 !/config/schemas/
 
-src/generated/*
+src/generated/*

packages/bridge-ui-v2/README.md

@@ -1,26 +1,92 @@
 # Bridge UI v2
 
-## Developing
+This package contains the Bridge UI built with svelte and wagmi
 
-Installed dependencies with `pnpm install`
+- [Bridge UI v2](#bridge-ui-v2)
+  - [Development setup](#development-setup)
+    - [Set up environment variables](#set-up-environment-variables)
+    - [Set up configurations](#set-up-configurations)
+    - [Start a development server:](#start-a-development-server)
+  - [Building](#building)
 
-Set up environment variables
+## Development setup
+
+Install all dependencies with
+
+```bash
+pnpm install
+```
+
+### Set up environment variables
 
 ```bash
 cp .env.example .env
+```
 
-# update environment variables in .env
+Then update environment variables in .env
 
+```bash
 source .env
 ```
 
-start a development server:
+### 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
+
+<br/>
+
+**Detailed process**
+
+These are 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 availabe in the token dropdowns                  |
+
+---
+
+<br>
+
+To get started, open your terminal in `/packages/bridge-ui-v2/`
+
+1. Copy the config examples
+   ```bash
+   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
+   ```
+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. <br>For that they need to be encoded and appended to the .env file:
+
+   ```bash
+   pnpm export:config
+   ```
+
+   This command exports the json as base64 string to your .env file
+
+4. Now whenver a build is triggered it will generate the config files based on the .env file in `src/generated/`
+   <br>**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!**
+   <br>
+
+**Beware**, that if you make changes to the json files, you need to export them to the .env again via script.
+<br>
+
+### Start a development server:
 
 ```bash
-pnpm run dev
+pnpm dev
 
 # or start the server and open the app in a new browser tab
-pnpm run dev -- --open
+pnpm dev -- --open
 ```
 
 ## Building
@@ -33,4 +99,4 @@ npm run build
 
 You can preview the production build with `npm run preview`.
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

packages/bridge-ui-v2/config/sample/configuredBridges.example

@@ -0,0 +1,52 @@
+{
+  "configuredBridges": [
+    {
+      "source": "",
+      "destination": "",
+      "addresses": {
+        "bridgeAddress": "",
+        "erc20VaultAddress": "",
+        "erc721VaultAddress": "",
+        "erc1155VaultAddress": "",
+        "crossChainSyncAddress": "",
+        "signalServiceAddress": ""
+      }
+    },
+    {
+      "source": "",
+      "destination": "",
+      "addresses": {
+        "bridgeAddress": "",
+        "erc20VaultAddress": "",
+        "erc721VaultAddress": "",
+        "erc1155VaultAddress": "",
+        "crossChainSyncAddress": "",
+        "signalServiceAddress": ""
+      }
+    },
+    {
+      "source": "",
+      "destination": "",
+      "addresses": {
+        "bridgeAddress": "",
+        "erc20VaultAddress": "",
+        "erc721VaultAddress": "",
+        "erc1155VaultAddress": "",
+        "crossChainSyncAddress": "",
+        "signalServiceAddress": ""
+      }
+    },
+    {
+      "source": "",
+      "destination": "",
+      "addresses": {
+        "bridgeAddress": "",
+        "erc20VaultAddress": "",
+        "erc721VaultAddress": "",
+        "erc1155VaultAddress": "",
+        "crossChainSyncAddress": "",
+        "signalServiceAddress": ""
+      }
+    }
+  ]
+}

packages/bridge-ui-v2/config/sample/configuredChains.example

@@ -0,0 +1,37 @@
+{
+  "configuredChains": [
+    {
+      "123456": {
+        "name": "",
+        "type": "L1",
+        "icon": "path/or/url/to/icon",
+        "urls": {
+          "rpc": "",
+          "explorer": ""
+        }
+      }
+    },
+    {
+      "78910": {
+        "name": "",
+        "type": "L2",
+        "icon": "path/or/url/to/icon",
+        "urls": {
+          "rpc": "",
+          "explorer": ""
+        }
+      }
+    },
+    {
+      "98765": {
+        "name": "",
+        "type": "L3",
+        "icon": "path/or/url/to/icon",
+        "urls": {
+          "rpc": "",
+          "explorer": ""
+        }
+      }
+    }
+  ]
+}

packages/bridge-ui-v2/config/sample/configuredCustomToken.example

@@ -0,0 +1,26 @@
+[
+    {
+        "name": "Bull Token",
+        "addresses": {
+            "1234": "0x00...",
+            "4567": "0x00...",
+            "8910": "0x00..."
+        },
+        "symbol": "BLL",
+        "decimals": 18,
+        "type": "ERC20",
+        "logoURI": "http://example.com/logo.png"
+    },
+    {
+        "name": "Horse Token",
+        "addresses": {
+            "1234": "0x00...",
+            "4567": "0x00...",
+            "8910": "0x00..."
+        },
+        "symbol": "HORSE",
+        "decimals": 18,
+        "type": "ERC20",
+        "logoURI": "http://example.com/logo.png"
+    }
+]

packages/bridge-ui-v2/config/sample/configuredRelayer.example

@@ -0,0 +1,12 @@
+{
+  "configuredRelayer": [
+    {
+      "chainIds": [123456, 654321],
+      "url": "https://some/url.example"
+    },
+    {
+      "chainIds": [1, 11155111],
+      "url": "https://some/other/url.example"
+    }
+  ]
+}