feat(bridge-ui-v2): L2 <-> L2 bridging with multi-hop (#15395)

Co-authored-by: xiaodino <[email protected]>

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

@@ -9,7 +9,7 @@ export PUBLIC_WALLETCONNECT_PROJECT_ID=""
 
 # Enable NFT Bridge ("true" or "false")
 export PUBLIC_NFT_BRIDGE_ENABLED=""
-PUBLIC_NFT_BATCH_TRANSFERS_ENABLED=""
+export PUBLIC_NFT_BATCH_TRANSFERS_ENABLED=""
 
 # Sentry
 export PUBLIC_SENTRY_DSN=https://

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

@@ -33,7 +33,14 @@
         "erc721VaultAddress": "",
         "erc1155VaultAddress": "",
         "crossChainSyncAddress": "",
-        "signalServiceAddress": ""
+        "signalServiceAddress": "",
+        "hops": [
+          {
+            "chaind: ,
+            "crossChainSyncAddress": "",
+            "signalServiceAddress": "",
+          }
+        ]
       }
     },
     {
@@ -45,7 +52,14 @@
         "erc721VaultAddress": "",
         "erc1155VaultAddress": "",
         "crossChainSyncAddress": "",
-        "signalServiceAddress": ""
+        "signalServiceAddress": "",
+        "hops": [
+          {
+            "chaind: ,
+            "crossChainSyncAddress": "",
+            "signalServiceAddress": "",
+          }
+        ]
       }
     }
   ]

packages/bridge-ui-v2/config/schemas/configuredBridges.schema.json

@@ -36,6 +36,25 @@
               },
               "signalServiceAddress": {
                 "type": "string"
+              },
+              "hops": {
+                "type": "array",
+                "default": [],
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "chainId": {
+                      "type": "number"
+                    },
+                    "crossChainSyncAddress": {
+                      "type": "string"
+                    },
+                    "signalServiceAddress": {
+                      "type": "string"
+                    }
+                  },
+                  "required": ["chainId", "crossChainSyncAddress", "signalServiceAddress"]
+                }
               }
             },
             "required": [

packages/bridge-ui-v2/scripts/vite-plugins/generateBridgeConfig.ts

@@ -136,10 +136,13 @@ async function buildBridgeConfig(sourceFile: SourceFile, configuredBridgesConfig
 }
 
 const _formatObjectToTsLiteral = (obj: RoutingMap): string => {
-  const formatValue = (value: string | number | boolean | null): string => {
+  const formatValue = (value: string | number | boolean | null | object): string => {
     if (typeof value === 'string') {
       return `"${value}"`;
     }
+    if (typeof value === 'object') {
+      return JSON.stringify(value);
+    }
     return String(value);
   };
 

packages/bridge-ui-v2/scripts/vite-plugins/generateChainConfig.ts

@@ -39,7 +39,7 @@ export function generateChainConfig() {
         const isValid = validateJsonAgainstSchema(configuredChainsConfigFile, configuredChainsSchema);
 
         if (!isValid) {
-          throw new Error('encoded configuredBridges.json is not valid.');
+          throw new Error('encoded configuredChains.json is not valid.');
         }
       } else {
         configuredChainsConfigFile = '';

packages/bridge-ui-v2/scripts/vite-plugins/generateCustomTokenConfig.ts

@@ -43,7 +43,7 @@ export function generateCustomTokenConfig() {
         const isValid = validateJsonAgainstSchema(configuredTokenConfigFile, configuredChainsSchema);
 
         if (!isValid) {
-          throw new Error('encoded configuredBridges.json is not valid.');
+          throw new Error('encoded generateCustomTokenConfig.json is not valid.');
         }
       }
       const tsFilePath = path.resolve(outputPath);

packages/bridge-ui-v2/scripts/vite-plugins/generateEventIndexerConfig.ts

@@ -44,7 +44,7 @@ export function generateEventIndexerConfig() {
         // Valide JSON against schema
         const isValid = validateJsonAgainstSchema(configuredEventIndexerConfigFile, configuredEventIndexerSchema);
         if (!isValid) {
-          throw new Error('encoded configuredBridges.json is not valid.');
+          throw new Error('encoded configuredEventIndexer.json is not valid.');
         }
       }
       // Path to where you want to save the generated Typ eScript file

packages/bridge-ui-v2/scripts/vite-plugins/generateRelayerConfig.ts

@@ -44,7 +44,7 @@ export function generateRelayerConfig() {
         // Valide JSON against schema
         const isValid = validateJsonAgainstSchema(configuredRelayerConfigFile, configuredRelayerSchema);
         if (!isValid) {
-          throw new Error('encoded configuredBridges.json is not valid.');
+          throw new Error('encoded configuredRelayer.json is not valid.');
         }
       }
       // Path to where you want to save the generated Typ eScript file

packages/bridge-ui-v2/src/libs/bridge/ERC1155Bridge.ts

@@ -189,6 +189,7 @@ export class ERC1155Bridge extends Bridge {
     const {
       to,
       wallet,
+      srcChainId,
       destChainId,
       token,
       fee,
@@ -214,6 +215,7 @@ export class ERC1155Bridge extends Bridge {
         : BigInt(0);
 
     const sendERC1155Args: NFTBridgeTransferOp = {
+      srcChainId: BigInt(srcChainId),
       destChainId: BigInt(destChainId),
       to,
       token,

packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts

@@ -32,7 +32,18 @@ const log = getLogger('ERC20Bridge');
 
 export class ERC20Bridge extends Bridge {
   private static async _prepareTransaction(args: ERC20BridgeArgs) {
-    const { to, amount, wallet, destChainId, token, fee, tokenVaultAddress, isTokenAlreadyDeployed, memo = '' } = args;
+    const {
+      to,
+      amount,
+      wallet,
+      srcChainId,
+      destChainId,
+      token,
+      fee,
+      tokenVaultAddress,
+      isTokenAlreadyDeployed,
+      memo = '',
+    } = args;
 
     const tokenVaultContract = getContract({
       walletClient: wallet,
@@ -49,6 +60,7 @@ export class ERC20Bridge extends Bridge {
         : BigInt(0);
 
     const sendERC20Args: BridgeTransferOp = {
+      srcChainId: BigInt(srcChainId),
       destChainId: BigInt(destChainId),
       to,
       token,

packages/bridge-ui-v2/src/libs/bridge/ERC721Bridge.ts

@@ -195,6 +195,7 @@ export class ERC721Bridge extends Bridge {
     const {
       to,
       wallet,
+      srcChainId,
       destChainId,
       token,
       fee,
@@ -220,6 +221,7 @@ export class ERC721Bridge extends Bridge {
         : BigInt(0);
 
     const sendERC721Args: NFTBridgeTransferOp = {
+      srcChainId: BigInt(srcChainId),
       destChainId: BigInt(destChainId),
       to,
       token,

packages/bridge-ui-v2/src/libs/bridge/types.ts

@@ -78,6 +78,7 @@ export type BridgeTransaction = {
 };
 
 export type BridgeTransferOp = {
+  srcChainId: bigint;
   destChainId: bigint;
   to: Address;
   token: Address;
@@ -89,6 +90,7 @@ export type BridgeTransferOp = {
 };
 
 export type NFTBridgeTransferOp = {
+  srcChainId: bigint;
   destChainId: bigint;
   to: Address;
   token: Address;
@@ -200,6 +202,13 @@ export type AddressConfig = {
   erc1155VaultAddress: Address;
   crossChainSyncAddress: Address;
   signalServiceAddress: Address;
+  hops?: Array<HopAddressConfig>;
+};
+
+export type HopAddressConfig = {
+  chainId: number;
+  crossChainSyncAddress: Address;
+  signalServiceAddress: Address;
 };
 
 export enum ContractType {

packages/bridge-ui-v2/src/libs/error/errors.ts

@@ -74,6 +74,10 @@ export class InvalidProofError extends Error {
   name = 'InvalidProofError';
 }
 
+export class WrongBridgeConfigError extends Error {
+  name = 'WrongBridgeConfigError';
+}
+
 export class MessageStatusError extends Error {
   name = 'MessageStatusError';
 }