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

packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte

@@ -19,7 +19,7 @@
     MessageStatus,
   } from '$libs/bridge';
   import type { ERC20Bridge } from '$libs/bridge/ERC20Bridge';
-  import { chainContractsMap, chains, chainUrlMap } from '$libs/chain';
+  import { chains, chainUrlMap, routingContractsMap } from '$libs/chain';
   import {
     ApproveError,
     InsufficientAllowanceError,
@@ -45,11 +45,10 @@
   let recipientComponent: Recipient;
   let processingFeeComponent: ProcessingFee;
 
-  function onNetworkChange(network: Network) {
-    if (network && chains.length === 2) {
-      // If there are only two chains, the destination chain will be the other one
-      const otherChain = chains.find((chain) => chain.id !== network.id);
-
+  function onNetworkChange(newNetwork: Network, oldNetwork: Network) {
+    // since we just show two networks we simply swap them
+    if (newNetwork) {
+      const otherChain = oldNetwork;
       if (otherChain) destNetwork.set(otherChain);
     }
   }
@@ -81,7 +80,7 @@
         throw new Error('token address not found');
       }
 
-      const spenderAddress = chainContractsMap[$network.id].tokenVaultAddress;
+      const spenderAddress = routingContractsMap[$network.id][$destNetwork.id].erc20VaultAddress;
 
       const txHash = await erc20Bridge.approve({
         tokenAddress,
@@ -156,7 +155,7 @@
         case TokenType.ETH: {
           // Specific arguments for ETH bridge:
           // - bridgeAddress
-          const bridgeAddress = chainContractsMap[$network.id].bridgeAddress;
+          const bridgeAddress = routingContractsMap[$network.id][$destNetwork.id].bridgeAddress;
           bridgeArgs = { ...bridgeArgs, bridgeAddress } as ETHBridgeArgs;
           break;
         }
@@ -176,7 +175,7 @@
             throw new Error('token address not found');
           }
 
-          const tokenVaultAddress = chainContractsMap[$network.id].tokenVaultAddress;
+          const tokenVaultAddress = routingContractsMap[$network.id][$destNetwork.id].erc20VaultAddress;
 
           const isTokenAlreadyDeployed = await isDeployedCrossChain({
             token: $selectedToken,
@@ -192,7 +191,12 @@
           } as ERC20BridgeArgs;
           break;
         }
-
+        case TokenType.ERC721:
+          // todo: implement
+          break;
+        case TokenType.ERC1155:
+          // todo: implement
+          break;
         default:
           throw new Error('invalid token type');
       }
@@ -280,12 +284,12 @@
 <Card class="w-full md:w-[524px]" title={$t('bridge.title.default')} text={$t('bridge.description')}>
   <div class="space-y-[35px]">
     <div class="f-between-center gap-4">
-      <ChainSelector class="flex-1 " value={$network} switchWallet />
+      <ChainSelector class="flex-1 " bind:value={$network} switchWallet />
 
       <SwitchChainsButton />
 
       <!-- TODO: should not be readOnly when multiple layers -->
-      <ChainSelector class="flex-1" value={$destNetwork} readOnly />
+      <ChainSelector class="flex-1" bind:value={$destNetwork} />
     </div>
 
     <TokenDropdown {tokens} bind:value={$selectedToken} />

packages/bridge-ui-v2/src/components/Icon/L3.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let size = 20;
+  export let width = size;
+  export let height = size;
+</script>
+
+<svg {width} {height} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Todo -->
+</svg>

packages/bridge-ui-v2/src/components/Icon/index.ts

@@ -2,4 +2,5 @@ export { default as BllIcon } from './BLL.svelte';
 export { default as EthIcon } from './ETH.svelte';
 export { default as HorseIcon } from './HORSE.svelte';
 export { default as Icon, type IconType } from './Icon.svelte';
+export { default as TaikoL3Icon } from './L3.svelte';
 export { default as TaikoIcon } from './Taiko.svelte';

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

@@ -2,7 +2,7 @@ import { getContract, type GetContractResult, type WalletClient } from '@wagmi/c
 import { type Hash, UserRejectedRequestError } from 'viem';
 
 import { bridgeABI } from '$abi';
-import { chainContractsMap } from '$libs/chain';
+import { routingContractsMap } from '$libs/chain';
 import { MessageStatusError, RetryError, WrongChainError, WrongOwnerError } from '$libs/error';
 import type { BridgeProver } from '$libs/proof';
 import { getLogger } from '$libs/util/logger';
@@ -42,7 +42,7 @@ export abstract class Bridge {
       throw new WrongOwnerError('user cannot process this as it is not their message');
     }
 
-    const destBridgeAddress = chainContractsMap[connectedChainId].bridgeAddress;
+    const destBridgeAddress = routingContractsMap[connectedChainId][destChainId].bridgeAddress;
 
     const destBridgeContract = getContract({
       address: destBridgeAddress,
@@ -93,7 +93,7 @@ export abstract class Bridge {
 
     // Before releasing we need to make sure the message has failed
     const destChainId = Number(message.destChainId);
-    const destBridgeAddress = chainContractsMap[destChainId].bridgeAddress;
+    const destBridgeAddress = routingContractsMap[srcChainId][destChainId].bridgeAddress;
 
     const destBridgeContract = getContract({
       address: destBridgeAddress,

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

@@ -3,7 +3,7 @@ import { UserRejectedRequestError } from 'viem';
 
 import { erc20ABI, tokenVaultABI } from '$abi';
 import { bridgeService } from '$config';
-import { chainContractsMap } from '$libs/chain';
+import { routingContractsMap } from '$libs/chain';
 import {
   ApproveError,
   InsufficientAllowanceError,
@@ -238,7 +238,7 @@ export class ERC20Bridge extends Bridge {
 
     const proof = await this._prover.generateProofToRelease(msgHash, srcChainId, destChainId);
 
-    const srcTokenVaultAddress = chainContractsMap[connectedChainId].tokenVaultAddress;
+    const srcTokenVaultAddress = routingContractsMap[connectedChainId][destChainId].erc20VaultAddress;
     const srcTokenVaultContract = getContract({
       walletClient: wallet,
       abi: tokenVaultABI,

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

@@ -3,7 +3,7 @@ import { UserRejectedRequestError } from 'viem';
 
 import { bridgeABI } from '$abi';
 import { bridgeService } from '$config';
-import { chainContractsMap } from '$libs/chain';
+import { routingContractsMap } from '$libs/chain';
 import { ProcessMessageError, ReleaseError, SendMessageError } from '$libs/error';
 import type { BridgeProver } from '$libs/proof';
 import { getLogger } from '$libs/util/logger';
@@ -149,7 +149,7 @@ export class ETHBridge extends Bridge {
 
     const proof = await this._prover.generateProofToRelease(msgHash, srcChainId, destChainId);
 
-    const srcBridgeAddress = chainContractsMap[connectedChainId].bridgeAddress;
+    const srcBridgeAddress = routingContractsMap[connectedChainId][destChainId].bridgeAddress;
     const srcBridgeContract = getContract({
       walletClient: wallet,
       abi: bridgeABI,

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

@@ -1,7 +1,7 @@
 import { getPublicClient } from '@wagmi/core';
 import { type Address, zeroAddress } from 'viem';
 
-import { chainContractsMap } from '$libs/chain';
+import { routingContractsMap } from '$libs/chain';
 import { InsufficientAllowanceError, InsufficientBalanceError, RevertedWithFailedError } from '$libs/error';
 import { getAddress, type Token, TokenType } from '$libs/token';
 import { isDeployedCrossChain } from '$libs/token/isDeployedCrossChain';
@@ -44,8 +44,7 @@ export async function checkBalanceToBridge({
   } as BridgeArgs;
 
   if (token.type === TokenType.ETH) {
-    const { bridgeAddress } = chainContractsMap[srcChainId];
-
+    const { bridgeAddress } = routingContractsMap[srcChainId][destChainId];
     try {
       estimatedCost = await estimateCostOfBridging(bridges.ETH, {
         ...bridgeArgs,
@@ -67,7 +66,7 @@ export async function checkBalanceToBridge({
       throw new InsufficientBalanceError('you do not have enough balance to bridge');
     }
   } else {
-    const { tokenVaultAddress } = chainContractsMap[srcChainId];
+    const { erc20VaultAddress } = routingContractsMap[srcChainId][destChainId];
     const tokenAddress = await getAddress({ token, srcChainId, destChainId });
 
     // since we are briding a token, we need the ETH balance of the wallet
@@ -84,7 +83,7 @@ export async function checkBalanceToBridge({
         amount,
         tokenAddress,
         ownerAddress: wallet.account.address,
-        spenderAddress: tokenVaultAddress,
+        spenderAddress: erc20VaultAddress,
       });
 
       if (allowance) {
@@ -105,7 +104,7 @@ export async function checkBalanceToBridge({
       estimatedCost = await estimateCostOfBridging(bridges.ERC20, {
         ...bridgeArgs,
         tokenAddress,
-        tokenVaultAddress,
+        tokenVaultAddress: erc20VaultAddress,
         isTokenAlreadyDeployed,
       } as ERC20BridgeArgs);
     } catch (err) {

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

@@ -1,6 +1,6 @@
 import type { Address } from 'viem';
 
-import { chainContractsMap } from '$libs/chain';
+import { routingContractsMap } from '$libs/chain';
 import { type Token, TokenType } from '$libs/token';
 import { getConnectedWallet } from '$libs/util/getConnectedWallet';
 import { getLogger } from '$libs/util/logger';
@@ -40,7 +40,7 @@ export async function getMaxAmountToBridge({
     }
 
     const wallet = await getConnectedWallet();
-    const { bridgeAddress } = chainContractsMap[srcChainId];
+    const { bridgeAddress } = routingContractsMap[srcChainId][destChainId];
 
     const bridgeArgs = {
       to,

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

@@ -1,7 +1,7 @@
 import { getContract } from '@wagmi/core';
 
 import { crossChainSyncABI } from '$abi';
-import { chainContractsMap } from '$libs/chain';
+import { routingContractsMap } from '$libs/chain';
 import { publicClient } from '$libs/wagmi';
 
 import { type BridgeTransaction, MessageStatus } from './types';
@@ -19,7 +19,7 @@ export async function isTransactionProcessable(bridgeTx: BridgeTransaction) {
   // TODO: do better job here as this is to make the UI happy
   if (status !== MessageStatus.NEW) return true;
 
-  const destCrossChainSyncAddress = chainContractsMap[Number(destChainId)].crossChainSyncAddress;
+  const destCrossChainSyncAddress = routingContractsMap[Number(srcChainId)][Number(destChainId)].crossChainSyncAddress;
 
   try {
     const destCrossChainSyncContract = getContract({

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

@@ -3,11 +3,12 @@ import { EventEmitter } from 'events';
 
 import { bridgeABI } from '$abi';
 import { bridgeTransactionPoller } from '$config';
-import { chainContractsMap } from '$libs/chain';
+import { routingContractsMap } from '$libs/chain';
 import { BridgeTxPollingError } from '$libs/error';
 import { getLogger } from '$libs/util/logger';
 import { nextTick } from '$libs/util/nextTick';
 
+import { srcChain } from './../../../../pos-dashboard/src/store/chain';
 import { isTransactionProcessable } from './isTransactionProcessable';
 import { type BridgeTransaction, MessageStatus } from './types';
 
@@ -64,7 +65,7 @@ export function startPolling(bridgeTx: BridgeTransaction, runImmediately = false
   let interval = hashIntervalMap[hash];
 
   // We are gonna be polling the destination bridge contract
-  const destBridgeAddress = chainContractsMap[Number(destChainId)].bridgeAddress;
+  const destBridgeAddress = routingContractsMap[Number(srcChain)][Number(destChainId)].bridgeAddress;
   const destBridgeContract = getContract({
     address: destBridgeAddress,
     abi: bridgeABI,