diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
index a9909313c22..6d0e3ef7da5 100644
--- a/packages/bridge-ui/src/App.svelte
+++ b/packages/bridge-ui/src/App.svelte
@@ -14,9 +14,9 @@
   import Home from './pages/home/Home.svelte';
   import { setupI18n } from './i18n';
   import { BridgeType } from './domain/bridge';
-  import { ETHBridge } from './eth/ETHBridge';
+  import { ETHBridge } from './bridge/ETHBridge';
+  import { ERC20Bridge } from './bridge/ERC20Bridge';
   import { bridges, chainIdToTokenVaultAddress } from './store/bridge';
-  import { ERC20Bridge } from './erc20/ERC20Bridge';
   import {
     pendingTransactions,
     transactioner,
@@ -28,15 +28,6 @@
   import { wagmiClient } from './store/wagmi';
 
   setupI18n({ withLocale: 'en' });
-  import {
-    chains,
-    CHAIN_ID_MAINNET,
-    CHAIN_ID_TAIKO,
-    CHAIN_MAINNET,
-    CHAIN_TKO,
-    mainnet,
-    taiko,
-  } from './domain/chain';
   import SwitchEthereumChainModal from './components/modals/SwitchEthereumChainModal.svelte';
   import { ProofService } from './proof/ProofService';
   import { ethers } from 'ethers';
@@ -53,24 +44,32 @@
   import { RelayerAPIService } from './relayer-api/RelayerAPIService';
   import type { RelayerAPI } from './domain/relayerApi';
   import { relayerApi, relayerBlockInfoMap } from './store/relayerApi';
+  import {
+    L1_CHAIN_ID,
+    L1_TOKEN_VAULT_ADDRESS,
+    L2_CHAIN_ID,
+    L2_TOKEN_VAULT_ADDRESS,
+  } from './constants/envVars';
+  import {
+    chainsRecord,
+    mainnetWagmiChain,
+    taikoWagmiChain,
+  } from './chain/chains';
 
-  const providerMap: Map<number, ethers.providers.JsonRpcProvider> = new Map<
-    number,
-    ethers.providers.JsonRpcProvider
-  >();
+  const providerMap = new Map<number, ethers.providers.JsonRpcProvider>();
 
   providerMap.set(
-    CHAIN_ID_MAINNET,
+    L1_CHAIN_ID,
     new ethers.providers.JsonRpcProvider(import.meta.env.VITE_L1_RPC_URL),
   );
   providerMap.set(
-    CHAIN_ID_TAIKO,
+    L2_CHAIN_ID,
     new ethers.providers.JsonRpcProvider(import.meta.env.VITE_L2_RPC_URL),
   );
   providers.set(providerMap);
 
   const { chains: wagmiChains, provider } = configureChains(
-    [mainnet, taiko],
+    [mainnetWagmiChain, taikoWagmiChain],
     [
       publicProvider(),
       jsonRpcProvider({
@@ -115,11 +114,8 @@
   });
 
   chainIdToTokenVaultAddress.update((store) => {
-    store.set(CHAIN_TKO.id, import.meta.env.VITE_TAIKO_TOKEN_VAULT_ADDRESS);
-    store.set(
-      CHAIN_MAINNET.id,
-      import.meta.env.VITE_MAINNET_TOKEN_VAULT_ADDRESS,
-    );
+    store.set(L2_CHAIN_ID, L2_TOKEN_VAULT_ADDRESS);
+    store.set(L1_CHAIN_ID, L1_TOKEN_VAULT_ADDRESS);
     return store;
   });
 
@@ -221,7 +217,7 @@
             if (!tx.msgHash) return;
 
             const contract = new ethers.Contract(
-              chains[tx.toChainId].bridgeAddress,
+              chainsRecord[tx.toChainId].bridgeAddress,
               BridgeABI,
               provider,
             );
diff --git a/packages/bridge-ui/src/erc20/ERC20Bridge.spec.ts b/packages/bridge-ui/src/bridge/ERC20Bridge.spec.ts
similarity index 92%
rename from packages/bridge-ui/src/erc20/ERC20Bridge.spec.ts
rename to packages/bridge-ui/src/bridge/ERC20Bridge.spec.ts
index 67637621de0..aa4b356aee3 100644
--- a/packages/bridge-ui/src/erc20/ERC20Bridge.spec.ts
+++ b/packages/bridge-ui/src/bridge/ERC20Bridge.spec.ts
@@ -1,13 +1,8 @@
 import { BigNumber, ethers, Wallet } from 'ethers';
-import {
-  CHAIN_ID_MAINNET,
-  CHAIN_ID_TAIKO,
-  mainnet,
-  taiko,
-} from '../domain/chain';
 import type { ApproveOpts, Bridge, BridgeOpts } from '../domain/bridge';
 import { ERC20Bridge } from './ERC20Bridge';
 import { Message, MessageStatus } from '../domain/message';
+import { L1_CHAIN_ID, L2_CHAIN_ID } from '../constants/envVars';
 
 const mockSigner = {
   getAddress: jest.fn(),
@@ -48,8 +43,8 @@ const opts: BridgeOpts = {
   amountInWei: BigNumber.from(1),
   signer: wallet,
   tokenAddress: '0xtoken',
-  fromChainId: mainnet.id,
-  toChainId: taiko.id,
+  fromChainId: L1_CHAIN_ID,
+  toChainId: L2_CHAIN_ID,
   tokenVaultAddress: '0x456',
   processingFeeInWei: BigNumber.from(2),
   memo: 'memo',
@@ -226,8 +221,8 @@ describe('bridge tests', () => {
       amountInWei: BigNumber.from(1),
       signer: wallet,
       tokenAddress: '0xtoken',
-      fromChainId: mainnet.id,
-      toChainId: taiko.id,
+      fromChainId: L1_CHAIN_ID,
+      toChainId: L2_CHAIN_ID,
       tokenVaultAddress: '0x456',
       to: await wallet.getAddress(),
     };
@@ -261,8 +256,8 @@ describe('bridge tests', () => {
     await expect(
       bridge.Claim({
         message: {
-          srcChainId: BigNumber.from(CHAIN_ID_TAIKO),
-          destChainId: BigNumber.from(CHAIN_ID_MAINNET),
+          srcChainId: BigNumber.from(L2_CHAIN_ID),
+          destChainId: BigNumber.from(L1_CHAIN_ID),
           gasLimit: BigNumber.from(1),
         } as unknown as Message,
         msgHash: '0x',
@@ -285,8 +280,8 @@ describe('bridge tests', () => {
     await expect(
       bridge.Claim({
         message: {
-          srcChainId: BigNumber.from(CHAIN_ID_TAIKO),
-          destChainId: BigNumber.from(CHAIN_ID_MAINNET),
+          srcChainId: BigNumber.from(L2_CHAIN_ID),
+          destChainId: BigNumber.from(L1_CHAIN_ID),
           gasLimit: BigNumber.from(1),
         } as unknown as Message,
         msgHash: '0x',
@@ -314,8 +309,8 @@ describe('bridge tests', () => {
       bridge.Claim({
         message: {
           owner: '0x',
-          srcChainId: BigNumber.from(CHAIN_ID_TAIKO),
-          destChainId: BigNumber.from(CHAIN_ID_MAINNET),
+          srcChainId: BigNumber.from(L2_CHAIN_ID),
+          destChainId: BigNumber.from(L1_CHAIN_ID),
           gasLimit: BigNumber.from(1),
         } as unknown as Message,
         msgHash: '0x',
@@ -348,8 +343,8 @@ describe('bridge tests', () => {
     await bridge.Claim({
       message: {
         owner: '0x',
-        srcChainId: BigNumber.from(CHAIN_ID_TAIKO),
-        destChainId: BigNumber.from(CHAIN_ID_MAINNET),
+        srcChainId: BigNumber.from(L2_CHAIN_ID),
+        destChainId: BigNumber.from(L1_CHAIN_ID),
         sender: '0x01',
         gasLimit: BigNumber.from(1),
       } as unknown as Message,
@@ -384,8 +379,8 @@ describe('bridge tests', () => {
     await bridge.Claim({
       message: {
         owner: '0x',
-        srcChainId: BigNumber.from(CHAIN_ID_TAIKO),
-        destChainId: BigNumber.from(CHAIN_ID_MAINNET),
+        srcChainId: BigNumber.from(L2_CHAIN_ID),
+        destChainId: BigNumber.from(L1_CHAIN_ID),
         sender: '0x01',
         gasLimit: BigNumber.from(1),
       } as unknown as Message,
@@ -421,8 +416,8 @@ describe('bridge tests', () => {
       bridge.ReleaseTokens({
         message: {
           owner: '0x',
-          srcChainId: BigNumber.from(CHAIN_ID_TAIKO),
-          destChainId: BigNumber.from(CHAIN_ID_MAINNET),
+          srcChainId: BigNumber.from(L2_CHAIN_ID),
+          destChainId: BigNumber.from(L1_CHAIN_ID),
           sender: '0x01',
           gasLimit: BigNumber.from(1),
         } as unknown as Message,
@@ -456,8 +451,8 @@ describe('bridge tests', () => {
     await bridge.ReleaseTokens({
       message: {
         owner: '0x',
-        srcChainId: BigNumber.from(CHAIN_ID_TAIKO),
-        destChainId: BigNumber.from(CHAIN_ID_MAINNET),
+        srcChainId: BigNumber.from(L2_CHAIN_ID),
+        destChainId: BigNumber.from(L1_CHAIN_ID),
         sender: '0x01',
         gasLimit: BigNumber.from(1),
       } as unknown as Message,
diff --git a/packages/bridge-ui/src/erc20/ERC20Bridge.ts b/packages/bridge-ui/src/bridge/ERC20Bridge.ts
similarity index 94%
rename from packages/bridge-ui/src/erc20/ERC20Bridge.ts
rename to packages/bridge-ui/src/bridge/ERC20Bridge.ts
index 3cc484d0a91..b2c701f1a54 100644
--- a/packages/bridge-ui/src/erc20/ERC20Bridge.ts
+++ b/packages/bridge-ui/src/bridge/ERC20Bridge.ts
@@ -12,7 +12,7 @@ import ERC20 from '../constants/abi/ERC20';
 import type { Prover } from '../domain/proof';
 import { MessageStatus } from '../domain/message';
 import BridgeABI from '../constants/abi/Bridge';
-import { chains } from '../domain/chain';
+import { chainsRecord } from '../chain/chains';
 
 export class ERC20Bridge implements Bridge {
   private readonly prover: Prover;
@@ -179,9 +179,9 @@ export class ERC20Bridge implements Bridge {
         srcBridgeAddress: opts.srcBridgeAddress,
         destChain: opts.message.destChainId.toNumber(),
         destHeaderSyncAddress:
-          chains[opts.message.destChainId.toNumber()].headerSyncAddress,
+          chainsRecord[opts.message.destChainId.toNumber()].headerSyncAddress,
         srcSignalServiceAddress:
-          chains[opts.message.srcChainId.toNumber()].signalServiceAddress,
+          chainsRecord[opts.message.srcChainId.toNumber()].signalServiceAddress,
       });
 
       if (opts.message.gasLimit.gt(BigNumber.from(2500000))) {
@@ -224,9 +224,9 @@ export class ERC20Bridge implements Bridge {
         destBridgeAddress: opts.destBridgeAddress,
         destChain: opts.message.destChainId.toNumber(),
         destHeaderSyncAddress:
-          chains[opts.message.destChainId.toNumber()].headerSyncAddress,
+          chainsRecord[opts.message.destChainId.toNumber()].headerSyncAddress,
         srcHeaderSyncAddress:
-          chains[opts.message.srcChainId.toNumber()].headerSyncAddress,
+          chainsRecord[opts.message.srcChainId.toNumber()].headerSyncAddress,
       };
 
       const proof = await this.prover.GenerateReleaseProof(proofOpts);
diff --git a/packages/bridge-ui/src/eth/ETHBridge.spec.ts b/packages/bridge-ui/src/bridge/ETHBridge.spec.ts
similarity index 90%
rename from packages/bridge-ui/src/eth/ETHBridge.spec.ts
rename to packages/bridge-ui/src/bridge/ETHBridge.spec.ts
index 14051ad5de8..334f926d2ad 100644
--- a/packages/bridge-ui/src/eth/ETHBridge.spec.ts
+++ b/packages/bridge-ui/src/bridge/ETHBridge.spec.ts
@@ -1,13 +1,8 @@
 import { BigNumber, ethers, Wallet } from 'ethers';
-import {
-  CHAIN_ID_MAINNET,
-  CHAIN_ID_TAIKO,
-  mainnet,
-  taiko,
-} from '../domain/chain';
 import type { Bridge, BridgeOpts } from '../domain/bridge';
 import { ETHBridge } from './ETHBridge';
 import { Message, MessageStatus } from '../domain/message';
+import { L1_CHAIN_ID, L2_CHAIN_ID } from '../constants/envVars';
 
 const mockSigner = {
   getAddress: jest.fn(),
@@ -79,8 +74,8 @@ describe('bridge tests', () => {
       amountInWei: BigNumber.from(1),
       signer: wallet,
       tokenAddress: '',
-      fromChainId: mainnet.id,
-      toChainId: taiko.id,
+      fromChainId: L1_CHAIN_ID,
+      toChainId: L2_CHAIN_ID,
       tokenVaultAddress: '0x456',
       processingFeeInWei: BigNumber.from(2),
       memo: 'memo',
@@ -113,8 +108,8 @@ describe('bridge tests', () => {
       amountInWei: BigNumber.from(1),
       signer: wallet,
       tokenAddress: '',
-      fromChainId: mainnet.id,
-      toChainId: taiko.id,
+      fromChainId: L1_CHAIN_ID,
+      toChainId: L2_CHAIN_ID,
       tokenVaultAddress: '0x456',
       to: await wallet.getAddress(),
     };
@@ -143,8 +138,8 @@ describe('bridge tests', () => {
     await expect(
       bridge.Claim({
         message: {
-          srcChainId: BigNumber.from(CHAIN_ID_TAIKO),
-          destChainId: BigNumber.from(CHAIN_ID_MAINNET),
+          srcChainId: BigNumber.from(L2_CHAIN_ID),
+          destChainId: BigNumber.from(L1_CHAIN_ID),
           gasLimit: BigNumber.from(1),
         } as unknown as Message,
         msgHash: '0x',
@@ -172,8 +167,8 @@ describe('bridge tests', () => {
       bridge.Claim({
         message: {
           owner: '0x',
-          srcChainId: BigNumber.from(CHAIN_ID_TAIKO),
-          destChainId: BigNumber.from(CHAIN_ID_MAINNET),
+          srcChainId: BigNumber.from(L2_CHAIN_ID),
+          destChainId: BigNumber.from(L1_CHAIN_ID),
           gasLimit: BigNumber.from(1),
         } as unknown as Message,
         msgHash: '0x',
@@ -206,8 +201,8 @@ describe('bridge tests', () => {
     await bridge.Claim({
       message: {
         owner: '0x',
-        srcChainId: BigNumber.from(CHAIN_ID_TAIKO),
-        destChainId: BigNumber.from(CHAIN_ID_MAINNET),
+        srcChainId: BigNumber.from(L2_CHAIN_ID),
+        destChainId: BigNumber.from(L1_CHAIN_ID),
         sender: '0x01',
         gasLimit: BigNumber.from(1),
       } as unknown as Message,
@@ -242,8 +237,8 @@ describe('bridge tests', () => {
     await bridge.Claim({
       message: {
         owner: '0x',
-        srcChainId: BigNumber.from(CHAIN_ID_TAIKO),
-        destChainId: BigNumber.from(CHAIN_ID_MAINNET),
+        srcChainId: BigNumber.from(L2_CHAIN_ID),
+        destChainId: BigNumber.from(L1_CHAIN_ID),
         sender: '0x01',
         gasLimit: BigNumber.from(1),
       } as unknown as Message,
@@ -279,8 +274,8 @@ describe('bridge tests', () => {
       bridge.ReleaseTokens({
         message: {
           owner: '0x',
-          srcChainId: BigNumber.from(CHAIN_ID_TAIKO),
-          destChainId: BigNumber.from(CHAIN_ID_MAINNET),
+          srcChainId: BigNumber.from(L2_CHAIN_ID),
+          destChainId: BigNumber.from(L1_CHAIN_ID),
           sender: '0x01',
           gasLimit: BigNumber.from(1),
         } as unknown as Message,
@@ -314,8 +309,8 @@ describe('bridge tests', () => {
     await bridge.ReleaseTokens({
       message: {
         owner: '0x',
-        srcChainId: BigNumber.from(CHAIN_ID_TAIKO),
-        destChainId: BigNumber.from(CHAIN_ID_MAINNET),
+        srcChainId: BigNumber.from(L2_CHAIN_ID),
+        destChainId: BigNumber.from(L1_CHAIN_ID),
         sender: '0x01',
         gasLimit: BigNumber.from(1),
       } as unknown as Message,
diff --git a/packages/bridge-ui/src/eth/ETHBridge.ts b/packages/bridge-ui/src/bridge/ETHBridge.ts
similarity index 93%
rename from packages/bridge-ui/src/eth/ETHBridge.ts
rename to packages/bridge-ui/src/bridge/ETHBridge.ts
index 0bbb9439ae4..6c590584aab 100644
--- a/packages/bridge-ui/src/eth/ETHBridge.ts
+++ b/packages/bridge-ui/src/bridge/ETHBridge.ts
@@ -11,7 +11,7 @@ import TokenVault from '../constants/abi/TokenVault';
 import type { Prover } from '../domain/proof';
 import { MessageStatus } from '../domain/message';
 import BridgeABI from '../constants/abi/Bridge';
-import { chains } from '../domain/chain';
+import { chainsRecord } from '../chain/chains';
 
 export class ETHBridge implements Bridge {
   private readonly prover: Prover;
@@ -127,9 +127,9 @@ export class ETHBridge implements Bridge {
         srcBridgeAddress: opts.srcBridgeAddress,
         destChain: opts.message.destChainId.toNumber(),
         destHeaderSyncAddress:
-          chains[opts.message.destChainId.toNumber()].headerSyncAddress,
+          chainsRecord[opts.message.destChainId.toNumber()].headerSyncAddress,
         srcSignalServiceAddress:
-          chains[opts.message.srcChainId.toNumber()].signalServiceAddress,
+          chainsRecord[opts.message.srcChainId.toNumber()].signalServiceAddress,
       };
 
       const proof = await this.prover.GenerateProof(proofOpts);
@@ -168,9 +168,9 @@ export class ETHBridge implements Bridge {
         destBridgeAddress: opts.destBridgeAddress,
         destChain: opts.message.destChainId.toNumber(),
         destHeaderSyncAddress:
-          chains[opts.message.destChainId.toNumber()].headerSyncAddress,
+          chainsRecord[opts.message.destChainId.toNumber()].headerSyncAddress,
         srcHeaderSyncAddress:
-          chains[opts.message.srcChainId.toNumber()].headerSyncAddress,
+          chainsRecord[opts.message.srcChainId.toNumber()].headerSyncAddress,
       };
 
       const proof = await this.prover.GenerateReleaseProof(proofOpts);
diff --git a/packages/bridge-ui/src/chain/chains.ts b/packages/bridge-ui/src/chain/chains.ts
new file mode 100644
index 00000000000..6e98495421b
--- /dev/null
+++ b/packages/bridge-ui/src/chain/chains.ts
@@ -0,0 +1,87 @@
+import type { Chain as WagmiChain } from '@wagmi/core';
+import {
+  L1_BRIDGE_ADDRESS,
+  L1_CHAIN_ID,
+  L1_CHAIN_NAME,
+  L1_EXPLORER_URL,
+  L1_HEADER_SYNC_ADDRESS,
+  L1_RPC,
+  L1_SIGNAL_SERVICE_ADDRESS,
+  L2_BRIDGE_ADDRESS,
+  L2_CHAIN_ID,
+  L2_CHAIN_NAME,
+  L2_EXPLORER_URL,
+  L2_HEADER_SYNC_ADDRESS,
+  L2_RPC,
+  L2_SIGNAL_SERVICE_ADDRESS,
+} from '../constants/envVars';
+import type { Chain } from '../domain/chain';
+import Eth from '../components/icons/ETH.svelte';
+import Taiko from '../components/icons/TKO.svelte';
+
+export const mainnetChain: Chain = {
+  id: L1_CHAIN_ID,
+  name: L1_CHAIN_NAME,
+  rpc: L1_RPC,
+  enabled: true,
+  icon: Eth,
+  bridgeAddress: L1_BRIDGE_ADDRESS,
+  headerSyncAddress: L1_HEADER_SYNC_ADDRESS,
+  explorerUrl: L1_EXPLORER_URL,
+  signalServiceAddress: L1_SIGNAL_SERVICE_ADDRESS,
+};
+
+export const taikoChain: Chain = {
+  id: L2_CHAIN_ID,
+  name: L2_CHAIN_NAME,
+  rpc: L2_RPC,
+  enabled: true,
+  icon: Taiko,
+  bridgeAddress: L2_BRIDGE_ADDRESS,
+  headerSyncAddress: L2_HEADER_SYNC_ADDRESS,
+  explorerUrl: L2_EXPLORER_URL,
+  signalServiceAddress: L2_SIGNAL_SERVICE_ADDRESS,
+};
+
+export const chainsRecord: Record<number, Chain> = {
+  [L1_CHAIN_ID]: mainnetChain,
+  [L2_CHAIN_ID]: taikoChain,
+};
+
+// TODO: can we not merge this chain into mainnetChain?
+export const mainnetWagmiChain: WagmiChain = {
+  id: L1_CHAIN_ID,
+  name: L1_CHAIN_NAME,
+  network: '',
+  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+  rpcUrls: {
+    default: {
+      http: [L1_RPC],
+    },
+  },
+  blockExplorers: {
+    default: {
+      name: 'Main',
+      url: L1_EXPLORER_URL,
+    },
+  },
+};
+
+// TODO: same here, merge it into taikoChain
+export const taikoWagmiChain: WagmiChain = {
+  id: L2_CHAIN_ID,
+  name: L2_CHAIN_NAME,
+  network: '',
+  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+  rpcUrls: {
+    default: {
+      http: [L2_RPC],
+    },
+  },
+  blockExplorers: {
+    default: {
+      name: 'Main',
+      url: L2_EXPLORER_URL,
+    },
+  },
+};
diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte
index 6e036a487ce..db6d8e8c485 100644
--- a/packages/bridge-ui/src/components/ChainDropdown.svelte
+++ b/packages/bridge-ui/src/components/ChainDropdown.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
   import { fromChain, toChain } from '../store/chain';
-  import { CHAIN_MAINNET, CHAIN_TKO } from '../domain/chain';
   import type { Chain } from '../domain/chain';
   import { ethers } from 'ethers';
   import { signer } from '../store/signer';
   import { switchNetwork } from '@wagmi/core';
   import { ChevronDown, ExclamationTriangle } from 'svelte-heros-v2';
+  import { mainnetChain, taikoChain } from '../chain/chains';
+
   const changeChain = async (chain: Chain) => {
     await switchNetwork({
       chainId: chain.id,
@@ -15,17 +16,21 @@
     await provider.send('eth_requestAccounts', []);
 
     fromChain.set(chain);
-    if (chain === CHAIN_MAINNET) {
-      toChain.set(CHAIN_TKO);
+    if (chain === mainnetChain) {
+      toChain.set(taikoChain);
     } else {
-      toChain.set(CHAIN_MAINNET);
+      toChain.set(mainnetChain);
     }
     signer.set(provider.getSigner());
   };
 </script>
 
 <div class="dropdown dropdown-end mr-4">
-  <label tabindex="0" class="btn btn-md justify-around md:w-[194px]">
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label
+    role="button"
+    tabindex="0"
+    class="btn btn-md justify-around md:w-[194px]">
     <span class="font-normal flex-1 text-left mr-2">
       {#if $fromChain}
         <svelte:component this={$fromChain.icon} />
@@ -40,26 +45,27 @@
     <ChevronDown size="20" />
   </label>
   <ul
+    role="listbox"
     tabindex="0"
     class="dropdown-content address-dropdown-content flex my-2 menu p-2 shadow bg-dark-2 rounded-sm w-[194px]">
     <li>
       <button
         class="flex items-center px-2 py-4 hover:bg-dark-5 rounded-xl justify-around"
         on:click={async () => {
-          await changeChain(CHAIN_MAINNET);
+          await changeChain(mainnetChain);
         }}>
-        <svelte:component this={CHAIN_MAINNET.icon} height={24} />
-        <span class="pl-1.5 text-left flex-1">{CHAIN_MAINNET.name}</span>
+        <svelte:component this={mainnetChain.icon} height={24} />
+        <span class="pl-1.5 text-left flex-1">{mainnetChain.name}</span>
       </button>
     </li>
     <li>
       <button
         class="flex items-center px-2 py-4 hover:bg-dark-5 rounded-xl justify-around"
         on:click={async () => {
-          await changeChain(CHAIN_TKO);
+          await changeChain(taikoChain);
         }}>
-        <svelte:component this={CHAIN_TKO.icon} height={24} />
-        <span class="pl-1.5 text-left flex-1">{CHAIN_TKO.name}</span>
+        <svelte:component this={taikoChain.icon} height={24} />
+        <span class="pl-1.5 text-left flex-1">{taikoChain.name}</span>
       </button>
     </li>
   </ul>
diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte
index 86a897e4193..aa2df2c1055 100644
--- a/packages/bridge-ui/src/components/Transaction.svelte
+++ b/packages/bridge-ui/src/components/Transaction.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { BridgeTransaction } from '../domain/transactions';
-  import { chains, CHAIN_MAINNET, CHAIN_TKO } from '../domain/chain';
   import type { Chain } from '../domain/chain';
   import { ArrowTopRightOnSquare } from 'svelte-heros-v2';
   import { MessageStatus } from '../domain/message';
@@ -24,6 +23,7 @@
   import Bridge from '../constants/abi/Bridge';
   import ButtonWithTooltip from './ButtonWithTooltip.svelte';
   import TokenVault from '../constants/abi/TokenVault';
+  import { chainsRecord, mainnetChain, taikoChain } from '../chain/chains';
 
   export let transaction: BridgeTransaction;
   export let fromChain: Chain;
@@ -47,10 +47,10 @@
     await provider.send('eth_requestAccounts', []);
 
     fromChainStore.set(chain);
-    if (chain === CHAIN_MAINNET) {
-      toChainStore.set(CHAIN_TKO);
+    if (chain === mainnetChain) {
+      toChainStore.set(taikoChain);
     } else {
-      toChainStore.set(CHAIN_MAINNET);
+      toChainStore.set(mainnetChain);
     }
     const wagmiSigner = await fetchSigner();
     signer.set(wagmiSigner);
@@ -60,7 +60,7 @@
     try {
       loading = true;
       if (fromChain.id !== bridgeTx.message.destChainId.toNumber()) {
-        const chain = chains[bridgeTx.message.destChainId.toNumber()];
+        const chain = chainsRecord[bridgeTx.message.destChainId.toNumber()];
         await switchChainAndSetSigner(chain);
       }
       const tx = await $bridges
@@ -70,9 +70,9 @@
           message: bridgeTx.message,
           msgHash: bridgeTx.msgHash,
           destBridgeAddress:
-            chains[bridgeTx.message.destChainId.toNumber()].bridgeAddress,
+            chainsRecord[bridgeTx.message.destChainId.toNumber()].bridgeAddress,
           srcBridgeAddress:
-            chains[bridgeTx.message.srcChainId.toNumber()].bridgeAddress,
+            chainsRecord[bridgeTx.message.srcChainId.toNumber()].bridgeAddress,
         });
 
       pendingTransactions.update((store) => {
@@ -93,7 +93,7 @@
     try {
       loading = true;
       if (fromChain.id !== bridgeTx.message.srcChainId.toNumber()) {
-        const chain = chains[bridgeTx.message.srcChainId.toNumber()];
+        const chain = chainsRecord[bridgeTx.message.srcChainId.toNumber()];
         await switchChainAndSetSigner(chain);
       }
       const tx = await $bridges
@@ -103,9 +103,9 @@
           message: bridgeTx.message,
           msgHash: bridgeTx.msgHash,
           destBridgeAddress:
-            chains[bridgeTx.message.destChainId.toNumber()].bridgeAddress,
+            chainsRecord[bridgeTx.message.destChainId.toNumber()].bridgeAddress,
           srcBridgeAddress:
-            chains[bridgeTx.message.srcChainId.toNumber()].bridgeAddress,
+            chainsRecord[bridgeTx.message.srcChainId.toNumber()].bridgeAddress,
           destProvider: $providers.get(bridgeTx.message.destChainId.toNumber()),
           srcTokenVaultAddress: $chainIdToTokenVaultAddress.get(
             bridgeTx.message.srcChainId.toNumber(),
@@ -132,14 +132,18 @@
     if (transaction.status !== MessageStatus.New) return true;
 
     const contract = new Contract(
-      chains[transaction.message.destChainId.toNumber()].headerSyncAddress,
+      chainsRecord[
+        transaction.message.destChainId.toNumber()
+      ].headerSyncAddress,
       HeaderSync,
-      $providers.get(chains[transaction.message.destChainId.toNumber()].id),
+      $providers.get(
+        chainsRecord[transaction.message.destChainId.toNumber()].id,
+      ),
     );
 
     const latestSyncedHeader = await contract.getLatestSyncedHeader();
     const srcBlock = await $providers
-      .get(chains[transaction.message.srcChainId.toNumber()].id)
+      .get(chainsRecord[transaction.message.srcChainId.toNumber()].id)
       .getBlock(latestSyncedHeader);
     return transaction.receipt.blockNumber <= srcBlock.number;
   }
@@ -147,9 +151,11 @@
   const interval = setInterval(async () => {
     processable = await isProcessable();
     const contract = new ethers.Contract(
-      chains[transaction.toChainId].bridgeAddress,
+      chainsRecord[transaction.toChainId].bridgeAddress,
       Bridge,
-      $providers.get(chains[transaction.message.destChainId.toNumber()].id),
+      $providers.get(
+        chainsRecord[transaction.message.destChainId.toNumber()].id,
+      ),
     );
 
     transaction.status = await contract.getMessageStatus(transaction.msgHash);
@@ -158,7 +164,9 @@
         const srcTokenVaultContract = new ethers.Contract(
           $chainIdToTokenVaultAddress.get(transaction.fromChainId),
           TokenVault,
-          $providers.get(chains[transaction.message.srcChainId.toNumber()].id),
+          $providers.get(
+            chainsRecord[transaction.message.srcChainId.toNumber()].id,
+          ),
         );
         const { token, amount } = await srcTokenVaultContract.messageDeposits(
           transaction.msgHash,
@@ -168,9 +176,11 @@
         }
       } else {
         const srcBridgeContract = new ethers.Contract(
-          chains[transaction.fromChainId].bridgeAddress,
+          chainsRecord[transaction.fromChainId].bridgeAddress,
           Bridge,
-          $providers.get(chains[transaction.message.srcChainId.toNumber()].id),
+          $providers.get(
+            chainsRecord[transaction.message.srcChainId.toNumber()].id,
+          ),
         );
         const isFailedMessageResolved = await srcBridgeContract.isEtherReleased(
           transaction.msgHash,
diff --git a/packages/bridge-ui/src/components/TransactionDetail.svelte b/packages/bridge-ui/src/components/TransactionDetail.svelte
index 3f9bf22a713..23cdb8f8074 100644
--- a/packages/bridge-ui/src/components/TransactionDetail.svelte
+++ b/packages/bridge-ui/src/components/TransactionDetail.svelte
@@ -3,8 +3,8 @@
   import { ArrowTopRightOnSquare } from 'svelte-heros-v2';
   import { truncateString } from '../utils/truncateString';
   import Modal from './modals/Modal.svelte';
-  import { chains } from '../domain/chain';
   import type { BridgeTransaction } from '../domain/transactions';
+  import { chainsRecord } from '../chain/chains';
 
   // TODO: can we always guarantee that this object is defined?
   //       in which case we need to guard => transaction?.prop
@@ -22,7 +22,7 @@
           class="link flex items-center justify-end"
           target="_blank"
           rel="noreferrer"
-          href={`${chains[transaction.fromChainId].explorerUrl}/tx/${
+          href={`${chainsRecord[transaction.fromChainId].explorerUrl}/tx/${
             transaction.hash
           }`}>
           <span class="mr-2">{truncateString(transaction.hash)}</span>
diff --git a/packages/bridge-ui/src/components/Transactions.svelte b/packages/bridge-ui/src/components/Transactions.svelte
index 8797190ffff..2bc5b882c08 100644
--- a/packages/bridge-ui/src/components/Transactions.svelte
+++ b/packages/bridge-ui/src/components/Transactions.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { chains } from '../domain/chain';
   import { transactions } from '../store/transactions';
   import Transaction from './Transaction.svelte';
   import TransactionDetail from './TransactionDetail.svelte';
   import MessageStatusTooltip from './MessageStatusTooltip.svelte';
   import type { BridgeTransaction } from '../domain/transactions';
+  import { chainsRecord } from '../chain/chains';
 
   let selectedTransaction: BridgeTransaction;
   let showMessageStatusTooltip: boolean;
@@ -31,8 +31,8 @@
             onShowTransactionDetailsClick={() => {
               selectedTransaction = transaction;
             }}
-            toChain={chains[transaction.toChainId]}
-            fromChain={chains[transaction.fromChainId]}
+            toChain={chainsRecord[transaction.toChainId]}
+            fromChain={chainsRecord[transaction.fromChainId]}
             {transaction} />
         {/each}
       </tbody>
diff --git a/packages/bridge-ui/src/components/buttons/Connect.svelte b/packages/bridge-ui/src/components/buttons/Connect.svelte
index 655d189418e..ec6cc8b0d84 100644
--- a/packages/bridge-ui/src/components/buttons/Connect.svelte
+++ b/packages/bridge-ui/src/components/buttons/Connect.svelte
@@ -13,7 +13,6 @@
     getAccount,
   } from '@wagmi/core';
 
-  import { CHAIN_MAINNET, CHAIN_TKO } from '../../domain/chain';
   import { fromChain, toChain } from '../../store/chain';
   import { isSwitchEthereumChainModalOpen } from '../../store/modal';
   import { errorToast, successToast } from '../../utils/toast';
@@ -23,16 +22,17 @@
   import WalletConnect from '../icons/WalletConnect.svelte';
   import CoinbaseWallet from '../icons/CoinbaseWallet.svelte';
   import { transactioner, transactions } from '../../store/transactions';
+  import { mainnetChain, taikoChain } from '../../chain/chains';
 
   export let isConnectWalletModalOpen = false;
 
   const changeChain = async (chainId: number) => {
-    if (chainId === CHAIN_TKO.id) {
-      fromChain.set(CHAIN_TKO);
-      toChain.set(CHAIN_MAINNET);
-    } else if (chainId === CHAIN_MAINNET.id) {
-      fromChain.set(CHAIN_MAINNET);
-      toChain.set(CHAIN_TKO);
+    if (chainId === taikoChain.id) {
+      fromChain.set(taikoChain);
+      toChain.set(mainnetChain);
+    } else if (chainId === mainnetChain.id) {
+      fromChain.set(mainnetChain);
+      toChain.set(taikoChain);
     } else {
       isSwitchEthereumChainModalOpen.set(true);
     }
diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte
index f18a94c8b78..522d0406e2e 100644
--- a/packages/bridge-ui/src/components/buttons/SelectToken.svelte
+++ b/packages/bridge-ui/src/components/buttons/SelectToken.svelte
@@ -2,7 +2,6 @@
   import { getProvider } from '@wagmi/core';
   import { token } from '../../store/token';
   import { bridgeType } from '../../store/bridge';
-  import { ETH, tokens } from '../../domain/token';
   import type { Token } from '../../domain/token';
   import { BridgeType, type HTMLBridgeForm } from '../../domain/bridge';
   import { ChevronDown, PlusCircle } from 'svelte-heros-v2';
@@ -14,6 +13,7 @@
   import { fromChain, toChain } from '../../store/chain';
   import Erc20 from '../icons/ERC20.svelte';
   import AddCustomErc20 from '../form/AddCustomERC20.svelte';
+  import { ETHToken, tokens } from '../../token/tokens';
 
   let dropdownElement: HTMLDivElement;
   let showAddressField = false;
@@ -24,7 +24,7 @@
 
     token.set(t);
 
-    if (t.symbol.toLowerCase() === ETH.symbol.toLowerCase()) {
+    if (t.symbol.toLowerCase() === ETHToken.symbol.toLowerCase()) {
       bridgeType.set(BridgeType.ETH);
     } else {
       bridgeType.set(BridgeType.ERC20);
diff --git a/packages/bridge-ui/src/components/form/AddCustomERC20.svelte b/packages/bridge-ui/src/components/form/AddCustomERC20.svelte
index acbaad92022..ee8d15f4075 100644
--- a/packages/bridge-ui/src/components/form/AddCustomERC20.svelte
+++ b/packages/bridge-ui/src/components/form/AddCustomERC20.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { ETH } from '../../domain/token';
-  import type { Token, TokenDetails } from '../../domain/token';
+  import { getProvider } from '@wagmi/core';
   import { Trash } from 'svelte-heros-v2';
+  import type { Token, TokenDetails } from '../../domain/token';
   import { signer } from '../../store/signer';
   import { token as tokenStore } from '../../store/token';
   import { userTokens, tokenService } from '../../store/userToken';
@@ -11,7 +11,7 @@
   import { ethers } from 'ethers';
   import ERC20 from '../../constants/abi/ERC20';
   import { errorToast } from '../../utils/toast';
-  import { getProvider } from '@wagmi/core';
+  import { ETHToken } from '../../token/tokens';
 
   export let showAddressField: boolean = false;
   export let addERC20: (event: SubmitEvent) => Promise<void>;
@@ -28,7 +28,7 @@
     const address = await $signer.getAddress();
     const updatedTokensList = $tokenService.RemoveToken(token, address);
     userTokens.set(updatedTokensList);
-    tokenStore.set(ETH);
+    tokenStore.set(ETHToken);
   }
 
   $: onAddressChange(tokenAddress);
diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte
index 95363a3f924..6b11922d906 100644
--- a/packages/bridge-ui/src/components/form/BridgeForm.svelte
+++ b/packages/bridge-ui/src/components/form/BridgeForm.svelte
@@ -13,12 +13,10 @@
   import { signer } from '../../store/signer';
   import { BigNumber, Contract, ethers, Signer } from 'ethers';
   import ProcessingFee from './ProcessingFee.svelte';
-  import { ETH } from '../../domain/token';
   import SelectToken from '../buttons/SelectToken.svelte';
 
   import type { Token } from '../../domain/token';
   import type { BridgeOpts, BridgeType } from '../../domain/bridge';
-  import { chains } from '../../domain/chain';
 
   import type { Chain } from '../../domain/chain';
   import { truncateString } from '../../utils/truncateString';
@@ -39,6 +37,8 @@
   import { providers } from '../../store/providers';
   import { checkIfTokenIsDeployedCrossChain } from '../../utils/checkIfTokenIsDeployedCrossChain';
   import To from './To.svelte';
+  import { ETHToken } from '../../token/tokens';
+  import { chainsRecord } from '../../chain/chains';
 
   let amount: string;
   let amountInput: HTMLInputElement;
@@ -60,7 +60,7 @@
     let addr = $token.addresses.find(
       (t) => t.chainId === $fromChain.id,
     ).address;
-    if ($token.symbol !== ETH.symbol && (!addr || addr === '0x00')) {
+    if ($token.symbol !== ETHToken.symbol && (!addr || addr === '0x00')) {
       const srcChainAddr = $token.addresses.find(
         (t) => t.chainId === $toChain.id,
       ).address;
@@ -86,7 +86,7 @@
     fromChain: Chain,
   ) {
     if (signer && token) {
-      if (token.symbol == ETH.symbol) {
+      if (token.symbol == ETHToken.symbol) {
         const userBalance = await signer.getBalance('latest');
         tokenBalance = ethers.utils.formatEther(userBalance);
       } else {
@@ -147,7 +147,7 @@
     if (!signer) return true;
     if (!tokenBalance) return true;
     const chainId = await signer.getChainId();
-    if (!chainId || !chains[chainId.toString()]) return true;
+    if (!chainId || !chainsRecord[chainId.toString()]) return true;
     if (!amount || ethers.utils.parseUnits(amount).eq(BigNumber.from(0)))
       return true;
     if (isNaN(parseFloat(amount))) return true;
@@ -208,7 +208,7 @@
 
       let balanceAvailableForTx = userBalance;
 
-      if ($token.symbol === ETH.symbol) {
+      if ($token.symbol === ETHToken.symbol) {
         balanceAvailableForTx = userBalance.sub(
           ethers.utils.parseEther(amount),
         );
@@ -318,7 +318,7 @@
   }
 
   async function useFullAmount() {
-    if ($token.symbol === ETH.symbol) {
+    if ($token.symbol === ETHToken.symbol) {
       try {
         const feeData = await fetchFeeData();
         const gasEstimate = await $activeBridge.EstimateGas({
diff --git a/packages/bridge-ui/src/components/form/ProcessingFee.svelte b/packages/bridge-ui/src/components/form/ProcessingFee.svelte
index 905746a73ae..e12187b9891 100644
--- a/packages/bridge-ui/src/components/form/ProcessingFee.svelte
+++ b/packages/bridge-ui/src/components/form/ProcessingFee.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
   import { processingFee } from '../../store/fee';
-  import { ProcessingFeeMethod, PROCESSING_FEE_META } from '../../domain/fee';
+  import { ProcessingFeeMethod } from '../../domain/fee';
   import { toChain, fromChain } from '../../store/chain';
   import { token } from '../../store/token';
   import { signer } from '../../store/signer';
   import { recommendProcessingFee } from '../../utils/recommendProcessingFee';
-  import Tooltip from '../Tooltip.svelte';
   import TooltipModal from '../modals/TooltipModal.svelte';
   import ButtonWithTooltip from '../ButtonWithTooltip.svelte';
+  import { processingFeeMap } from '../../fee/processingFee';
 
   export let customFee: string;
   export let recommendedFee: string = '0';
@@ -60,7 +60,7 @@
   {/if}
 
   <div class="flex mt-2 space-x-2">
-    {#each Array.from(PROCESSING_FEE_META) as fee}
+    {#each Array.from(processingFeeMap) as fee}
       <button
         class="{$processingFee === fee[0]
           ? 'border-accent hover:border-accent'
diff --git a/packages/bridge-ui/src/components/form/SelectChain.svelte b/packages/bridge-ui/src/components/form/SelectChain.svelte
index a7aa47ec217..656d8126a52 100644
--- a/packages/bridge-ui/src/components/form/SelectChain.svelte
+++ b/packages/bridge-ui/src/components/form/SelectChain.svelte
@@ -1,15 +1,15 @@
 <script>
+  import { switchNetwork } from '@wagmi/core';
   import { ArrowRight } from 'svelte-heros-v2';
   import { fromChain, toChain } from '../../store/chain';
-  import { CHAIN_MAINNET, CHAIN_TKO } from '../../domain/chain';
   import { signer } from '../../store/signer';
   import { ethers } from 'ethers';
   import { errorToast, successToast } from '../../utils/toast';
-  import { switchNetwork } from '@wagmi/core';
+  import { mainnetChain, taikoChain } from '../../chain/chains';
 
   const toggleChains = async () => {
     try {
-      const chain = $fromChain === CHAIN_MAINNET ? CHAIN_TKO : CHAIN_MAINNET;
+      const chain = $fromChain === mainnetChain ? taikoChain : mainnetChain;
       await switchNetwork({
         chainId: chain.id,
       });
@@ -17,7 +17,7 @@
       await provider.send('eth_requestAccounts', []);
 
       fromChain.set(chain);
-      toChain.set(chain === CHAIN_MAINNET ? CHAIN_TKO : CHAIN_MAINNET);
+      toChain.set(chain === mainnetChain ? taikoChain : mainnetChain);
 
       signer.set(provider.getSigner());
       successToast('Successfully changed chain');
@@ -35,8 +35,8 @@
       <svelte:component this={$fromChain.icon} />
       <span class="ml-2">{$fromChain.name}</span>
     {:else}
-      <svelte:component this={CHAIN_MAINNET.icon} />
-      <span class="ml-2">{CHAIN_MAINNET.name}</span>
+      <svelte:component this={mainnetChain.icon} />
+      <span class="ml-2">{mainnetChain.name}</span>
     {/if}
   </div>
 
@@ -49,8 +49,8 @@
       <svelte:component this={$toChain.icon} />
       <span class="ml-2">{$toChain.name}</span>
     {:else}
-      <svelte:component this={CHAIN_TKO.icon} />
-      <span class="ml-2">{CHAIN_TKO.name}</span>
+      <svelte:component this={taikoChain.icon} />
+      <span class="ml-2">{taikoChain.name}</span>
     {/if}
   </div>
 </div>
diff --git a/packages/bridge-ui/src/components/modals/FaucetModal.svelte b/packages/bridge-ui/src/components/modals/FaucetModal.svelte
index f8c8572bf03..08dc305cbd3 100644
--- a/packages/bridge-ui/src/components/modals/FaucetModal.svelte
+++ b/packages/bridge-ui/src/components/modals/FaucetModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { BigNumber, ethers, Signer } from 'ethers';
+  import { BigNumber, ethers } from 'ethers';
   import { pendingTransactions } from '../../store/transactions';
   import { signer } from '../../store/signer';
   import { errorToast, successToast } from '../../utils/toast';
@@ -7,10 +7,10 @@
   import MintableERC20 from '../../constants/abi/MintableERC20';
   import { fromChain } from '../../store/chain';
   import { fetchSigner, switchNetwork } from '@wagmi/core';
-  import { CHAIN_MAINNET } from '../../domain/chain';
   import Modal from './Modal.svelte';
   import { onMount } from 'svelte';
   import { token } from '../../store/token';
+  import { L1_CHAIN_ID } from '../../constants/envVars';
 
   export let isOpen: boolean = false;
   export let onMint: () => Promise<void>;
@@ -49,7 +49,7 @@
     try {
       if ($fromChain.id !== $token.addresses[0].chainId) {
         await switchNetwork({
-          chainId: CHAIN_MAINNET.id,
+          chainId: L1_CHAIN_ID,
         });
         const wagmiSigner = await fetchSigner();
 
diff --git a/packages/bridge-ui/src/components/modals/SwitchEthereumChainModal.svelte b/packages/bridge-ui/src/components/modals/SwitchEthereumChainModal.svelte
index c41c9715f0d..edb060155bc 100644
--- a/packages/bridge-ui/src/components/modals/SwitchEthereumChainModal.svelte
+++ b/packages/bridge-ui/src/components/modals/SwitchEthereumChainModal.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
   import { fetchSigner, switchNetwork } from '@wagmi/core';
-  import { CHAIN_MAINNET, CHAIN_TKO } from '../../domain/chain';
   import type { Chain } from '../../domain/chain';
   import { isSwitchEthereumChainModalOpen } from '../../store/modal';
   import Modal from './Modal.svelte';
   import { signer } from '../../store/signer';
   import { errorToast, successToast } from '../../utils/toast';
+  import { mainnetChain, taikoChain } from '../../chain/chains';
 
   const switchChain = async (chain: Chain) => {
     try {
@@ -34,18 +34,18 @@
       <button
         class="btn btn-dark-5 h-[60px] text-base"
         on:click={async () => {
-          await switchChain(CHAIN_MAINNET);
+          await switchChain(mainnetChain);
         }}>
-        <svelte:component this={CHAIN_MAINNET.icon} /><span class="ml-2"
-          >{CHAIN_MAINNET.name}</span>
+        <svelte:component this={mainnetChain.icon} /><span class="ml-2"
+          >{mainnetChain.name}</span>
       </button>
       <button
         class="btn btn-dark-5 h-[60px] text-base"
         on:click={async () => {
-          await switchChain(CHAIN_TKO);
+          await switchChain(taikoChain);
         }}>
-        <svelte:component this={CHAIN_TKO.icon} /><span class="ml-2"
-          >{CHAIN_TKO.name}</span>
+        <svelte:component this={taikoChain.icon} /><span class="ml-2"
+          >{taikoChain.name}</span>
       </button>
     </div>
   </div>
diff --git a/packages/bridge-ui/src/constants/envVars.ts b/packages/bridge-ui/src/constants/envVars.ts
new file mode 100644
index 00000000000..12584bc72eb
--- /dev/null
+++ b/packages/bridge-ui/src/constants/envVars.ts
@@ -0,0 +1,72 @@
+// TODO: think about a way to blow up the build if env var is missing
+//       dotenv-safe ?
+// TODO: does it make sense to provide with defaults?
+// TODO: explain each of these env vars
+
+export const L1_RPC =
+  import.meta.env?.VITE_L1_RPC_URL ?? 'https://l1rpc.internal.taiko.xyz/';
+
+export const L1_TOKEN_VAULT_ADDRESS =
+  import.meta.env?.VITE_MAINNET_TOKEN_VAULT_ADDRESS ??
+  '0xAE4C9bD0f7AE5398Df05043079596E2BF0079CE9';
+
+export const L1_BRIDGE_ADDRESS =
+  import.meta.env?.VITE_MAINNET_BRIDGE_ADDRESS ??
+  '0xAE4C9bD0f7AE5398Df05043079596E2BF0079CE9';
+
+export const L1_HEADER_SYNC_ADDRESS =
+  import.meta.env?.VITE_MAINNET_HEADER_SYNC_ADDRESS ??
+  '0x9b557777Be33A8A2fE6aF93E017A0d139B439E5D';
+
+export const L1_SIGNAL_SERVICE_ADDRESS =
+  import.meta.env?.VITE_MAINNET_SIGNAL_SERVICE_ADDRESS ??
+  '0x162A36c9821eadeCFF9669A3940b7f72d055Cd1c';
+
+export const L1_CHAIN_ID = parseInt(
+  import.meta.env?.VITE_MAINNET_CHAIN_ID ?? '31336',
+);
+
+export const L1_CHAIN_NAME =
+  import.meta.env?.VITE_MAINNET_CHAIN_NAME ?? 'Ethereum A2';
+
+export const L1_EXPLORER_URL =
+  import.meta.env?.VITE_L1_EXPLORER_URL ??
+  'https://l1explorer.internal.taiko.xyz/';
+
+export const L2_RPC =
+  import.meta.env?.VITE_L2_RPC_URL ?? 'https://l2rpc.internal.taiko.xyz/';
+
+export const L2_TOKEN_VAULT_ADDRESS =
+  import.meta.env?.VITE_TAIKO_TOKEN_VAULT_ADDRESS ??
+  '0x0000777700000000000000000000000000000002';
+
+export const L2_BRIDGE_ADDRESS =
+  import.meta.env?.VITE_TAIKO_BRIDGE_ADDRESS ??
+  '0x0000777700000000000000000000000000000004';
+
+export const L2_HEADER_SYNC_ADDRESS =
+  import.meta.env?.VITE_TAIKO_HEADER_SYNC_ADDRESS ??
+  '0x0000777700000000000000000000000000000001';
+
+export const L2_SIGNAL_SERVICE_ADDRESS =
+  import.meta.env?.VITE_TAIKO_SIGNAL_SERVICE_ADDRESS ??
+  '0x0000777700000000000000000000000000000007';
+
+export const L2_CHAIN_ID = parseInt(
+  import.meta.env?.VITE_TAIKO_CHAIN_ID ?? '167001',
+);
+
+export const L2_CHAIN_NAME =
+  import.meta.env?.VITE_TAIKO_CHAIN_NAME ?? 'Taiko A2';
+
+export const L2_EXPLORER_URL =
+  import.meta.env?.VITE_L2_EXPLORER_URL ??
+  'https://l2explorer.internal.taiko.xyz/';
+
+export const RELAYER_URL =
+  import.meta.env?.VITE_RELAYER_URL ?? 'https://relayer.internal.taiko.xyz/';
+
+export const TEST_ERC20 = JSON.parse(
+  import.meta.env?.VITE_TEST_ERC20 ??
+    '[{"address": "0xAED64948E0d09f4eb07d8B76A65Cd3d517c6Fb15", "symbol": "HORSE", "name": "Horse Token"}]',
+);
diff --git a/packages/bridge-ui/src/domain/block.ts b/packages/bridge-ui/src/domain/block.ts
index 55b43953c61..684581e5bcb 100644
--- a/packages/bridge-ui/src/domain/block.ts
+++ b/packages/bridge-ui/src/domain/block.ts
@@ -1,4 +1,4 @@
-type Block = {
+export type Block = {
   number: number;
   hash: string;
   parentHash: string;
@@ -22,7 +22,7 @@ type Block = {
   mixHash: string;
 };
 
-type BlockHeader = {
+export type BlockHeader = {
   parentHash: string;
   ommersHash: string;
   beneficiary: string;
@@ -40,5 +40,3 @@ type BlockHeader = {
   nonce: number;
   baseFeePerGas: number;
 };
-
-export { Block, BlockHeader };
diff --git a/packages/bridge-ui/src/domain/bridge.ts b/packages/bridge-ui/src/domain/bridge.ts
index 94e2d07bf72..1ed1bfa0396 100644
--- a/packages/bridge-ui/src/domain/bridge.ts
+++ b/packages/bridge-ui/src/domain/bridge.ts
@@ -1,21 +1,21 @@
 import type { BigNumber, ethers, Transaction } from 'ethers';
 import type { Message } from './message';
 
-enum BridgeType {
+export enum BridgeType {
   ERC20 = 'ERC20',
   ETH = 'ETH',
   ERC721 = 'ERC721',
   ERC1155 = 'ERC1155',
 }
 
-type ApproveOpts = {
+export type ApproveOpts = {
   amountInWei: BigNumber;
   contractAddress: string;
   signer: ethers.Signer;
   spenderAddress: string;
 };
 
-type BridgeOpts = {
+export type BridgeOpts = {
   amountInWei: BigNumber;
   signer: ethers.Signer;
   tokenAddress: string;
@@ -29,7 +29,7 @@ type BridgeOpts = {
   to: string;
 };
 
-type ClaimOpts = {
+export type ClaimOpts = {
   message: Message;
   msgHash: string;
   signer: ethers.Signer;
@@ -37,7 +37,7 @@ type ClaimOpts = {
   srcBridgeAddress: string;
 };
 
-type ReleaseOpts = {
+export type ReleaseOpts = {
   message: Message;
   msgHash: string;
   signer: ethers.Signer;
@@ -47,7 +47,7 @@ type ReleaseOpts = {
   srcTokenVaultAddress: string;
 };
 
-interface Bridge {
+export interface Bridge {
   RequiresAllowance(opts: ApproveOpts): Promise<boolean>;
   Approve(opts: ApproveOpts): Promise<Transaction>;
   Bridge(opts: BridgeOpts): Promise<Transaction>;
@@ -56,16 +56,7 @@ interface Bridge {
   ReleaseTokens(opts: ReleaseOpts): Promise<Transaction>;
 }
 
-interface HTMLBridgeForm extends HTMLFormElement {
+// TODO: this should not be here
+export interface HTMLBridgeForm extends HTMLFormElement {
   customTokenAddress: HTMLInputElement;
 }
-
-export {
-  ApproveOpts,
-  BridgeOpts,
-  BridgeType,
-  Bridge,
-  ClaimOpts,
-  ReleaseOpts,
-  HTMLBridgeForm,
-};
diff --git a/packages/bridge-ui/src/domain/chain.ts b/packages/bridge-ui/src/domain/chain.ts
index dd0ea097293..9e6fc013a7c 100644
--- a/packages/bridge-ui/src/domain/chain.ts
+++ b/packages/bridge-ui/src/domain/chain.ts
@@ -1,56 +1,5 @@
-import type { Chain as WagmiChain } from '@wagmi/core';
-import { BigNumber } from 'ethers';
 import type { ComponentType } from 'svelte';
 
-import Eth from '../components/icons/ETH.svelte';
-import Taiko from '../components/icons/TKO.svelte';
-
-export const CHAIN_ID_MAINNET = import.meta.env
-  ? BigNumber.from(import.meta.env.VITE_MAINNET_CHAIN_ID).toNumber()
-  : 31336;
-
-export const CHAIN_ID_TAIKO = import.meta.env
-  ? BigNumber.from(import.meta.env.VITE_TAIKO_CHAIN_ID).toNumber()
-  : 167001;
-
-const L1_RPC =
-  import.meta.env?.VITE_L1_RPC_URL ?? 'https://l1rpc.internal.taiko.xyz/';
-
-const L2_RPC =
-  import.meta.env?.VITE_L2_RPC_URL ?? 'https://l2rpc.internal.taiko.xyz/';
-
-const L1_BRIDGE_ADDRESS =
-  import.meta.env?.VITE_MAINNET_BRIDGE_ADDRESS ??
-  '0xAE4C9bD0f7AE5398Df05043079596E2BF0079CE9';
-
-const L2_BRIDGE_ADDRESS =
-  import.meta.env?.VITE_TAIKO_BRIDGE_ADDRESS ??
-  '0x0000777700000000000000000000000000000004';
-
-const L1_HEADER_SYNC_ADDRESS =
-  import.meta.env?.VITE_MAINNET_HEADER_SYNC_ADDRESS ??
-  '0x9b557777Be33A8A2fE6aF93E017A0d139B439E5D';
-
-const L2_HEADER_SYNC_ADDRESS =
-  import.meta.env?.VITE_TAIKO_HEADER_SYNC_ADDRESS ??
-  '0x0000777700000000000000000000000000000001';
-
-const L1_SIGNAL_SERVICE_ADDRESS =
-  import.meta.env?.VITE_MAINNET_SIGNAL_SERVICE_ADDRESS ??
-  '0x162A36c9821eadeCFF9669A3940b7f72d055Cd1c';
-
-const L2_SIGNAL_SERVICE_ADDRESS =
-  import.meta.env?.VITE_TAIKO_SIGNAL_SERVICE_ADDRESS ??
-  '0x0000777700000000000000000000000000000007';
-
-const L1_EXPLORER_URL =
-  import.meta.env?.VITE_L1_EXPLORER_URL ??
-  'https://l1explorer.internal.taiko.xyz/';
-
-const L2_EXPLORER_URL =
-  import.meta.env?.VITE_L2_EXPLORER_URL ??
-  'https://l2explorer.internal.taiko.xyz/';
-
 export type Chain = {
   id: number;
   name: string;
@@ -62,78 +11,3 @@ export type Chain = {
   explorerUrl: string;
   signalServiceAddress: string;
 };
-
-export const CHAIN_MAINNET = {
-  id: CHAIN_ID_MAINNET,
-  name: import.meta.env
-    ? import.meta.env.VITE_MAINNET_CHAIN_NAME
-    : 'Ethereum A1',
-  rpc: L1_RPC,
-  enabled: true,
-  icon: Eth,
-  bridgeAddress: L1_BRIDGE_ADDRESS,
-  headerSyncAddress: L1_HEADER_SYNC_ADDRESS,
-  explorerUrl: L1_EXPLORER_URL,
-  signalServiceAddress: L1_SIGNAL_SERVICE_ADDRESS,
-};
-
-export const CHAIN_TKO = {
-  id: CHAIN_ID_TAIKO,
-  name: import.meta.env ? import.meta.env.VITE_TAIKO_CHAIN_NAME : 'Taiko A2',
-  rpc: L2_RPC,
-  enabled: true,
-  icon: Taiko,
-  bridgeAddress: L2_BRIDGE_ADDRESS,
-  headerSyncAddress: L2_HEADER_SYNC_ADDRESS,
-  explorerUrl: L2_EXPLORER_URL,
-  signalServiceAddress: L2_SIGNAL_SERVICE_ADDRESS,
-};
-
-export const chains: Record<string, Chain> = {
-  [CHAIN_ID_MAINNET]: CHAIN_MAINNET,
-  [CHAIN_ID_TAIKO]: CHAIN_TKO,
-};
-
-export const mainnet: WagmiChain = {
-  id: CHAIN_ID_MAINNET,
-  name: import.meta.env
-    ? import.meta.env.VITE_MAINNET_CHAIN_NAME
-    : 'Ethereum A2',
-  network: '',
-  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-  rpcUrls: {
-    default: {
-      http: [L1_RPC],
-    },
-  },
-  blockExplorers: {
-    default: {
-      name: 'Main',
-      url: L1_EXPLORER_URL,
-    },
-  },
-  // ens: {
-  //   address: "0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e",
-  // },
-};
-
-export const taiko: WagmiChain = {
-  id: CHAIN_ID_TAIKO,
-  name: import.meta.env ? import.meta.env.VITE_TAIKO_CHAIN_NAME : 'Taiko A2',
-  network: '',
-  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
-  rpcUrls: {
-    default: {
-      http: [L2_RPC],
-    },
-  },
-  blockExplorers: {
-    default: {
-      name: 'Main',
-      url: L2_EXPLORER_URL,
-    },
-  },
-  // ens: {
-  //   address: "0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e",
-  // },
-};
diff --git a/packages/bridge-ui/src/domain/fee.ts b/packages/bridge-ui/src/domain/fee.ts
index 9fbcf31b00e..d27615c0b17 100644
--- a/packages/bridge-ui/src/domain/fee.ts
+++ b/packages/bridge-ui/src/domain/fee.ts
@@ -1,37 +1,10 @@
-enum ProcessingFeeMethod {
+export enum ProcessingFeeMethod {
   RECOMMENDED = 'recommended',
   CUSTOM = 'custom',
   NONE = 'none',
 }
 
-interface ProcessingFeeDetails {
+export interface ProcessingFeeDetails {
   displayText: string;
   timeToConfirm: number;
 }
-
-const PROCESSING_FEE_META: Map<ProcessingFeeMethod, ProcessingFeeDetails> =
-  new Map([
-    [
-      ProcessingFeeMethod.RECOMMENDED,
-      {
-        displayText: 'Recommended',
-        timeToConfirm: 15 * 60 * 1000,
-      },
-    ],
-    [
-      ProcessingFeeMethod.CUSTOM,
-      {
-        displayText: 'Custom',
-        timeToConfirm: 15 * 60 * 1000,
-      },
-    ],
-    [
-      ProcessingFeeMethod.NONE,
-      {
-        displayText: 'None',
-        timeToConfirm: 15 * 60 * 1000,
-      },
-    ],
-  ]);
-
-export { ProcessingFeeDetails, ProcessingFeeMethod, PROCESSING_FEE_META };
diff --git a/packages/bridge-ui/src/domain/message.ts b/packages/bridge-ui/src/domain/message.ts
index 9a13809c58c..0b7c1350d1a 100644
--- a/packages/bridge-ui/src/domain/message.ts
+++ b/packages/bridge-ui/src/domain/message.ts
@@ -1,6 +1,6 @@
 import type { BigNumber } from 'ethers';
 
-enum MessageStatus {
+export enum MessageStatus {
   New,
   Retriable,
   Done,
@@ -8,7 +8,7 @@ enum MessageStatus {
   FailedReleased,
 }
 
-type Message = {
+export type Message = {
   id: number;
   sender: string;
   srcChainId: BigNumber;
@@ -23,5 +23,3 @@ type Message = {
   data: string;
   memo: string;
 };
-
-export { Message, MessageStatus };
diff --git a/packages/bridge-ui/src/domain/proof.ts b/packages/bridge-ui/src/domain/proof.ts
index 3e772455090..0b9ef1c0469 100644
--- a/packages/bridge-ui/src/domain/proof.ts
+++ b/packages/bridge-ui/src/domain/proof.ts
@@ -1,10 +1,10 @@
-type StorageEntry = {
+export type StorageEntry = {
   key: string;
   value: string;
   proof: string[]; // Array of rlp-serialized MerkleTree-Nodes, starting with the storageHash-Node,
 };
 
-type EthGetProofResponse = {
+export type EthGetProofResponse = {
   balance: string;
   codeHash: string;
   nonce: string;
@@ -13,7 +13,7 @@ type EthGetProofResponse = {
   storageProof: StorageEntry[];
 };
 
-type GenerateProofOpts = {
+export type GenerateProofOpts = {
   msgHash: string;
   sender: string;
   srcBridgeAddress: string;
@@ -23,7 +23,7 @@ type GenerateProofOpts = {
   srcSignalServiceAddress: string;
 };
 
-type GenerateReleaseProofOpts = {
+export type GenerateReleaseProofOpts = {
   msgHash: string;
   sender: string;
   destBridgeAddress: string;
@@ -33,15 +33,7 @@ type GenerateReleaseProofOpts = {
   srcChain: number;
 };
 
-interface Prover {
+export interface Prover {
   GenerateProof(opts: GenerateProofOpts): Promise<string>;
   GenerateReleaseProof(opts: GenerateReleaseProofOpts): Promise<string>;
 }
-
-export {
-  GenerateProofOpts,
-  Prover,
-  StorageEntry,
-  EthGetProofResponse,
-  GenerateReleaseProofOpts,
-};
diff --git a/packages/bridge-ui/src/domain/token.ts b/packages/bridge-ui/src/domain/token.ts
index c627d0bffd7..f45b817227a 100644
--- a/packages/bridge-ui/src/domain/token.ts
+++ b/packages/bridge-ui/src/domain/token.ts
@@ -1,10 +1,4 @@
-import Eth from '../components/icons/ETH.svelte';
 import type { ComponentType } from 'svelte';
-import Tko from '../components/icons/TKO.svelte';
-import { CHAIN_MAINNET, CHAIN_TKO } from './chain';
-import Horse from '../components/icons/Horse.svelte';
-import Bull from '../components/icons/Bull.svelte';
-import Unknown from '../components/icons/Unknown.svelte';
 
 type Address = {
   chainId: number;
@@ -27,78 +21,8 @@ export type TokenDetails = {
   userTokenBalance: string;
 };
 
-export const ETH: Token = {
-  name: 'Ethereum',
-  addresses: [
-    {
-      chainId: CHAIN_MAINNET.id,
-      address: '0x00',
-    },
-    {
-      chainId: CHAIN_TKO.id,
-      address: '0x00',
-    },
-  ],
-  decimals: 18,
-  symbol: 'ETH',
-  logoComponent: Eth,
-};
-
-export const TKO: Token = {
-  name: 'Taiko',
-  addresses: [
-    {
-      chainId: CHAIN_MAINNET.id,
-      address: '0x00',
-    },
-    {
-      chainId: CHAIN_TKO.id,
-      address: '0x00',
-    },
-  ],
-  decimals: 18,
-  symbol: 'TKO',
-  logoComponent: Tko,
-};
-
-export const symbolToLogoComponent = {
-  BLL: Bull,
-  HORSE: Horse,
-  // Add more symbols
-};
-
-export const TEST_ERC20: Token[] = JSON.parse(
-  import.meta.env?.VITE_TEST_ERC20 ??
-    // default erc20 token
-    `
-    [{
-      "address": "0x3435A6180fBB1BAEc87bDC49915282BfBC328C70",
-      "symbol": "BLL",
-      "name": "Bull Token"
-    }]
-    `,
-).map(({ name, address, symbol }) => ({
-  name,
-  symbol,
-
-  addresses: [
-    {
-      chainId: CHAIN_MAINNET.id,
-      address,
-    },
-    {
-      chainId: CHAIN_TKO.id,
-      address: '0x00',
-    },
-  ],
-  decimals: 18,
-  logoComponent: symbolToLogoComponent[symbol] || Unknown,
-}));
-
 export interface TokenService {
   StoreToken(token: Token, address: string): Promise<Token[]>;
   GetTokens(address: string): Token[];
   RemoveToken(token: Token, address: string): Token[];
 }
-
-export const tokens = [ETH, ...TEST_ERC20];
diff --git a/packages/bridge-ui/src/fee/processingFee.ts b/packages/bridge-ui/src/fee/processingFee.ts
new file mode 100644
index 00000000000..3f4bf39780b
--- /dev/null
+++ b/packages/bridge-ui/src/fee/processingFee.ts
@@ -0,0 +1,26 @@
+import { type ProcessingFeeDetails, ProcessingFeeMethod } from '../domain/fee';
+
+export const processingFeeMap: Map<ProcessingFeeMethod, ProcessingFeeDetails> =
+  new Map([
+    [
+      ProcessingFeeMethod.RECOMMENDED,
+      {
+        displayText: 'Recommended',
+        timeToConfirm: 15 * 60 * 1000,
+      },
+    ],
+    [
+      ProcessingFeeMethod.CUSTOM,
+      {
+        displayText: 'Custom',
+        timeToConfirm: 15 * 60 * 1000,
+      },
+    ],
+    [
+      ProcessingFeeMethod.NONE,
+      {
+        displayText: 'None',
+        timeToConfirm: 15 * 60 * 1000,
+      },
+    ],
+  ]);
diff --git a/packages/bridge-ui/src/relayer-api/RelayerAPIService.ts b/packages/bridge-ui/src/relayer-api/RelayerAPIService.ts
index 16e5cf794ca..3797e5e592e 100644
--- a/packages/bridge-ui/src/relayer-api/RelayerAPIService.ts
+++ b/packages/bridge-ui/src/relayer-api/RelayerAPIService.ts
@@ -3,13 +3,13 @@ import { BigNumber, Contract, ethers } from 'ethers';
 import Bridge from '../constants/abi/Bridge';
 import ERC20 from '../constants/abi/ERC20';
 import TokenVault from '../constants/abi/TokenVault';
-import { chains } from '../domain/chain';
 import { MessageStatus } from '../domain/message';
 
 import type { BridgeTransaction } from '../domain/transactions';
 import { chainIdToTokenVaultAddress } from '../store/bridge';
 import { get } from 'svelte/store';
-import type { RelayerAPI, RelayerBlockInfo } from 'src/domain/relayerApi';
+import type { RelayerAPI, RelayerBlockInfo } from '../domain/relayerApi';
+import { chainsRecord } from '../chain/chains';
 
 export class RelayerAPIService implements RelayerAPI {
   private readonly providerMap: Map<number, ethers.providers.JsonRpcProvider>;
@@ -87,9 +87,9 @@ export class RelayerAPIService implements RelayerAPI {
 
         tx.receipt = receipt;
 
-        const destBridgeAddress = chains[destChainId].bridgeAddress;
+        const destBridgeAddress = chainsRecord[destChainId].bridgeAddress;
 
-        const srcBridgeAddress = chains[tx.fromChainId].bridgeAddress;
+        const srcBridgeAddress = chainsRecord[tx.fromChainId].bridgeAddress;
 
         const destContract: Contract = new Contract(
           destBridgeAddress,
diff --git a/packages/bridge-ui/src/storage/StorageService.spec.ts b/packages/bridge-ui/src/storage/StorageService.spec.ts
index b4e31254110..62bd45bc210 100644
--- a/packages/bridge-ui/src/storage/StorageService.spec.ts
+++ b/packages/bridge-ui/src/storage/StorageService.spec.ts
@@ -1,9 +1,10 @@
 import { BigNumber, BigNumberish, ethers } from 'ethers';
-import { TKO } from '../domain/token';
-import { CHAIN_ID_MAINNET, CHAIN_ID_TAIKO } from '../domain/chain';
 import { MessageStatus } from '../domain/message';
 import { StorageService } from './StorageService';
 import type { BridgeTransaction } from '../domain/transactions';
+import { L1_CHAIN_ID, L2_CHAIN_ID } from '../constants/envVars';
+import { TKOToken } from '../token/tokens';
+
 const mockStorage = {
   getItem: jest.fn(),
 };
@@ -35,11 +36,11 @@ const providerMap: Map<number, ethers.providers.JsonRpcProvider> = new Map<
 >();
 
 providerMap.set(
-  CHAIN_ID_MAINNET,
+  L1_CHAIN_ID,
   mockProvider as unknown as ethers.providers.JsonRpcProvider,
 );
 providerMap.set(
-  CHAIN_ID_TAIKO,
+  L2_CHAIN_ID,
   mockProvider as unknown as ethers.providers.JsonRpcProvider,
 );
 
@@ -47,8 +48,8 @@ const mockTx: BridgeTransaction = {
   hash: '0x123',
   from: '0x123',
   status: MessageStatus.New,
-  fromChainId: CHAIN_ID_MAINNET,
-  toChainId: CHAIN_ID_TAIKO,
+  fromChainId: L1_CHAIN_ID,
+  toChainId: L2_CHAIN_ID,
 };
 
 const mockTxs: BridgeTransaction[] = [mockTx];
@@ -101,12 +102,12 @@ describe('storage tests', () => {
     });
 
     mockContract.symbol.mockImplementation(() => {
-      return TKO.symbol;
+      return TKOToken.symbol;
     });
 
     const svc = new StorageService(mockStorage as any, providerMap);
 
-    const addresses = await svc.GetAllByAddress('0x123', CHAIN_ID_TAIKO);
+    const addresses = await svc.GetAllByAddress('0x123', L2_CHAIN_ID);
 
     expect(addresses).toEqual([]);
   });
@@ -125,20 +126,20 @@ describe('storage tests', () => {
     });
 
     mockContract.symbol.mockImplementation(() => {
-      return TKO.symbol;
+      return TKOToken.symbol;
     });
 
     const svc = new StorageService(mockStorage as any, providerMap);
 
-    const addresses = await svc.GetAllByAddress('0x123', CHAIN_ID_MAINNET);
+    const addresses = await svc.GetAllByAddress('0x123', L1_CHAIN_ID);
 
     expect(addresses).toEqual([
       {
         from: '0x123',
         hash: '0x123',
-        fromChainId: CHAIN_ID_MAINNET,
+        fromChainId: L1_CHAIN_ID,
         status: 0,
-        toChainId: CHAIN_ID_TAIKO,
+        toChainId: L2_CHAIN_ID,
       },
     ]);
   });
@@ -161,23 +162,23 @@ describe('storage tests', () => {
     });
 
     mockContract.symbol.mockImplementation(() => {
-      return TKO.symbol;
+      return TKOToken.symbol;
     });
 
     const svc = new StorageService(mockStorage as any, providerMap);
 
-    const addresses = await svc.GetAllByAddress('0x123', CHAIN_ID_MAINNET);
+    const addresses = await svc.GetAllByAddress('0x123', L1_CHAIN_ID);
 
     expect(addresses).toEqual([
       {
         from: '0x123',
         hash: '0x123',
-        fromChainId: CHAIN_ID_MAINNET,
+        fromChainId: L1_CHAIN_ID,
         receipt: {
           blockNumber: 1,
         },
         status: 0,
-        toChainId: CHAIN_ID_TAIKO,
+        toChainId: L2_CHAIN_ID,
       },
     ]);
   });
@@ -206,12 +207,12 @@ describe('storage tests', () => {
     );
 
     mockContract.symbol.mockImplementation(() => {
-      return TKO.symbol;
+      return TKOToken.symbol;
     });
 
     const svc = new StorageService(mockStorage as any, providerMap);
 
-    const addresses = await svc.GetAllByAddress('0x123', CHAIN_ID_MAINNET);
+    const addresses = await svc.GetAllByAddress('0x123', L1_CHAIN_ID);
 
     expect(addresses).toEqual([
       {
@@ -226,15 +227,15 @@ describe('storage tests', () => {
         },
         msgHash: '0x456',
         status: 0,
-        fromChainId: CHAIN_ID_MAINNET,
-        toChainId: CHAIN_ID_TAIKO,
+        fromChainId: L1_CHAIN_ID,
+        toChainId: L2_CHAIN_ID,
         symbol: 'TKO',
       },
     ]);
   });
 
   it('gets all transactions by address, CHAIN_TKO', async () => {
-    mockTx.toChainId = CHAIN_ID_TAIKO;
+    mockTx.toChainId = L2_CHAIN_ID;
     mockStorage.getItem.mockImplementation(() => {
       return JSON.stringify(mockTxs);
     });
@@ -258,12 +259,12 @@ describe('storage tests', () => {
     );
 
     mockContract.symbol.mockImplementation(() => {
-      return TKO.symbol;
+      return TKOToken.symbol;
     });
 
     const svc = new StorageService(mockStorage as any, providerMap);
 
-    const addresses = await svc.GetAllByAddress('0x123', CHAIN_ID_TAIKO);
+    const addresses = await svc.GetAllByAddress('0x123', L2_CHAIN_ID);
 
     expect(addresses).toEqual([
       {
@@ -279,8 +280,8 @@ describe('storage tests', () => {
         msgHash: '0x456',
         status: 0,
         symbol: 'TKO',
-        fromChainId: CHAIN_ID_MAINNET,
-        toChainId: CHAIN_ID_TAIKO,
+        fromChainId: L1_CHAIN_ID,
+        toChainId: L2_CHAIN_ID,
       },
     ]);
   });
diff --git a/packages/bridge-ui/src/storage/StorageService.ts b/packages/bridge-ui/src/storage/StorageService.ts
index c0463f85132..56922edb9e7 100644
--- a/packages/bridge-ui/src/storage/StorageService.ts
+++ b/packages/bridge-ui/src/storage/StorageService.ts
@@ -1,12 +1,12 @@
 import type { BridgeTransaction, Transactioner } from '../domain/transactions';
 import { BigNumber, Contract, ethers } from 'ethers';
 import Bridge from '../constants/abi/Bridge';
-import { chains } from '../domain/chain';
 import TokenVault from '../constants/abi/TokenVault';
 import { chainIdToTokenVaultAddress } from '../store/bridge';
 import { get } from 'svelte/store';
 import ERC20 from '../constants/abi/ERC20';
 import { MessageStatus } from '../domain/message';
+import { chainsRecord } from '../chain/chains';
 
 export class StorageService implements Transactioner {
   private readonly storage: Storage;
@@ -53,9 +53,9 @@ export class StorageService implements Transactioner {
 
           tx.receipt = receipt;
 
-          const destBridgeAddress = chains[destChainId].bridgeAddress;
+          const destBridgeAddress = chainsRecord[destChainId].bridgeAddress;
 
-          const srcBridgeAddress = chains[tx.fromChainId].bridgeAddress;
+          const srcBridgeAddress = chainsRecord[tx.fromChainId].bridgeAddress;
 
           const destContract: Contract = new Contract(
             destBridgeAddress,
diff --git a/packages/bridge-ui/src/store/fee.ts b/packages/bridge-ui/src/store/fee.ts
index 4b3f09821cc..21d5a41bad0 100644
--- a/packages/bridge-ui/src/store/fee.ts
+++ b/packages/bridge-ui/src/store/fee.ts
@@ -1,6 +1,4 @@
-import { derived, writable } from 'svelte/store';
-import { ethers } from 'ethers';
-
+import { writable } from 'svelte/store';
 import { ProcessingFeeMethod } from '../domain/fee';
 
 export const processingFee = writable<ProcessingFeeMethod>(
diff --git a/packages/bridge-ui/src/store/providers.ts b/packages/bridge-ui/src/store/providers.ts
index e2030ce5d46..4bb2fc01222 100644
--- a/packages/bridge-ui/src/store/providers.ts
+++ b/packages/bridge-ui/src/store/providers.ts
@@ -1,6 +1,6 @@
 import type { ethers } from 'ethers';
 import { writable } from 'svelte/store';
 
-export const providers = writable<
-  Map<number, ethers.providers.JsonRpcProvider>
->(new Map<number, ethers.providers.JsonRpcProvider>());
+export const providers = writable(
+  new Map<number, ethers.providers.JsonRpcProvider>(),
+);
diff --git a/packages/bridge-ui/src/store/token.ts b/packages/bridge-ui/src/store/token.ts
index 83bcf71fd3d..ee6db01ffd3 100644
--- a/packages/bridge-ui/src/store/token.ts
+++ b/packages/bridge-ui/src/store/token.ts
@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store';
-import { ETH } from '../domain/token';
+import { ETHToken } from '../token/tokens';
 import type { Token } from '../domain/token';
 
-export const token = writable<Token>(ETH);
+export const token = writable<Token>(ETHToken);
diff --git a/packages/bridge-ui/src/token/tokens.ts b/packages/bridge-ui/src/token/tokens.ts
new file mode 100644
index 00000000000..fbd35a9d537
--- /dev/null
+++ b/packages/bridge-ui/src/token/tokens.ts
@@ -0,0 +1,69 @@
+import Bull from '../components/icons/Bull.svelte';
+import Eth from '../components/icons/ETH.svelte';
+import Horse from '../components/icons/Horse.svelte';
+import Tko from '../components/icons/TKO.svelte';
+import Unknown from '../components/icons/Unknown.svelte';
+import { L1_CHAIN_ID, L2_CHAIN_ID, TEST_ERC20 } from '../constants/envVars';
+import type { Token } from '../domain/token';
+
+export const ETHToken: Token = {
+  name: 'Ethereum',
+  addresses: [
+    {
+      chainId: L1_CHAIN_ID,
+      address: '0x00',
+    },
+    {
+      chainId: L2_CHAIN_ID,
+      address: '0x00',
+    },
+  ],
+  decimals: 18,
+  symbol: 'ETH',
+  logoComponent: Eth,
+};
+
+export const TKOToken: Token = {
+  name: 'Taiko',
+  addresses: [
+    {
+      chainId: L1_CHAIN_ID,
+      address: '0x00',
+    },
+    {
+      chainId: L2_CHAIN_ID,
+      address: '0x00',
+    },
+  ],
+  decimals: 18,
+  symbol: 'TKO',
+  logoComponent: Tko,
+};
+
+const symbolToLogoComponent = {
+  BLL: Bull,
+  HORSE: Horse,
+  // Add more symbols
+};
+
+export const testERC20Tokens: Token[] = TEST_ERC20.map(
+  ({ name, address, symbol }) => ({
+    name,
+    symbol,
+
+    addresses: [
+      {
+        chainId: L1_CHAIN_ID,
+        address,
+      },
+      {
+        chainId: L2_CHAIN_ID,
+        address: '0x00',
+      },
+    ],
+    decimals: 18,
+    logoComponent: symbolToLogoComponent[symbol] || Unknown,
+  }),
+);
+
+export const tokens = [ETHToken, ...testERC20Tokens];
diff --git a/packages/bridge-ui/src/utils/checkIfTokenIsDeployedCrossChain.ts b/packages/bridge-ui/src/utils/checkIfTokenIsDeployedCrossChain.ts
index 193819bfdc6..925121def42 100644
--- a/packages/bridge-ui/src/utils/checkIfTokenIsDeployedCrossChain.ts
+++ b/packages/bridge-ui/src/utils/checkIfTokenIsDeployedCrossChain.ts
@@ -1,8 +1,8 @@
 import { ethers } from 'ethers';
+import { ETHToken } from '../token/tokens';
 import TokenVault from '../constants/abi/TokenVault';
 import type { Chain } from '../domain/chain';
 import type { Token } from '../domain/token';
-import { ETH } from '../domain/token';
 
 export const checkIfTokenIsDeployedCrossChain = async (
   token: Token,
@@ -11,7 +11,7 @@ export const checkIfTokenIsDeployedCrossChain = async (
   toChain: Chain,
   fromChain: Chain,
 ): Promise<boolean> => {
-  if (token.symbol !== ETH.symbol) {
+  if (token.symbol !== ETHToken.symbol) {
     const destTokenVaultContract = new ethers.Contract(
       destTokenVaultAddress,
       TokenVault,
diff --git a/packages/bridge-ui/src/utils/recommendProcessingFee.spec.ts b/packages/bridge-ui/src/utils/recommendProcessingFee.spec.ts
index fcd5b968f0e..a9213ce81ac 100644
--- a/packages/bridge-ui/src/utils/recommendProcessingFee.spec.ts
+++ b/packages/bridge-ui/src/utils/recommendProcessingFee.spec.ts
@@ -1,16 +1,12 @@
-const mockChainIdToTokenVaultAddress = jest.fn();
+// TODO: ??, feels like it's here to make the tests pass. Look into it
 jest.mock('../store/bridge', () => ({
-  chainIdToTokenVaultAddress: mockChainIdToTokenVaultAddress,
+  chainIdToTokenVaultAddress: jest.fn(),
 }));
 
-const mockGet = jest.fn();
-
 import { BigNumber, ethers, Signer } from 'ethers';
 import { chainIdToTokenVaultAddress } from '../store/bridge';
 import { get } from 'svelte/store';
-import { CHAIN_MAINNET, CHAIN_TKO } from '../domain/chain';
 import { ProcessingFeeMethod } from '../domain/fee';
-import { ETH, TEST_ERC20 } from '../domain/token';
 import { signer } from '../store/signer';
 import {
   erc20DeployedGasLimit,
@@ -18,7 +14,10 @@ import {
   ethGasLimit,
   recommendProcessingFee,
 } from './recommendProcessingFee';
-import type { ComponentType } from 'svelte';
+import { mainnetChain, taikoChain } from '../chain/chains';
+import { ETHToken, testERC20Tokens } from '../token/tokens';
+
+const mockGet = jest.fn();
 
 jest.mock('svelte/store', () => ({
   ...jest.requireActual('svelte/store'),
@@ -31,10 +30,6 @@ const mockContract = {
   canonicalToBridged: jest.fn(),
 };
 
-const mockProver = {
-  GenerateProof: jest.fn(),
-};
-
 jest.mock('ethers', () => ({
   /* eslint-disable-next-line */
   ...(jest.requireActual('ethers') as object),
@@ -44,11 +39,10 @@ jest.mock('ethers', () => ({
 }));
 
 const gasPrice = 2;
+
 const mockProvider = {
-  getGasPrice: () => {
-    return 2;
-  },
-};
+  getGasPrice: () => gasPrice,
+} as unknown as ethers.providers.JsonRpcProvider;
 
 const mockSigner = {} as Signer;
 
@@ -61,37 +55,37 @@ describe('recommendProcessingFee()', () => {
     expect(
       await recommendProcessingFee(
         null,
-        CHAIN_MAINNET,
+        mainnetChain,
         ProcessingFeeMethod.RECOMMENDED,
-        ETH,
+        ETHToken,
         get(signer),
       ),
     ).toStrictEqual('0');
 
     expect(
       await recommendProcessingFee(
-        CHAIN_MAINNET,
+        mainnetChain,
         null,
         ProcessingFeeMethod.RECOMMENDED,
-        ETH,
+        ETHToken,
         get(signer),
       ),
     ).toStrictEqual('0');
 
     expect(
       await recommendProcessingFee(
-        CHAIN_MAINNET,
-        CHAIN_TKO,
+        mainnetChain,
+        taikoChain,
         null,
-        ETH,
+        ETHToken,
         get(signer),
       ),
     ).toStrictEqual('0');
 
     expect(
       await recommendProcessingFee(
-        CHAIN_TKO,
-        CHAIN_MAINNET,
+        taikoChain,
+        mainnetChain,
         ProcessingFeeMethod.RECOMMENDED,
         null,
         get(signer),
@@ -100,10 +94,10 @@ describe('recommendProcessingFee()', () => {
 
     expect(
       await recommendProcessingFee(
-        CHAIN_TKO,
-        CHAIN_MAINNET,
+        taikoChain,
+        mainnetChain,
         ProcessingFeeMethod.RECOMMENDED,
-        ETH,
+        ETHToken,
         null,
       ),
     ).toStrictEqual('0');
@@ -112,16 +106,16 @@ describe('recommendProcessingFee()', () => {
   it('uses ethGasLimit if the token is ETH', async () => {
     mockGet.mockImplementationOnce(() =>
       new Map<number, ethers.providers.JsonRpcProvider>().set(
-        CHAIN_TKO.id,
-        mockProvider as unknown as ethers.providers.JsonRpcProvider,
+        taikoChain.id,
+        mockProvider,
       ),
     );
 
     const fee = await recommendProcessingFee(
-      CHAIN_TKO,
-      CHAIN_MAINNET,
+      taikoChain,
+      mainnetChain,
       ProcessingFeeMethod.RECOMMENDED,
-      ETH,
+      ETHToken,
       mockSigner as unknown as Signer,
     );
 
@@ -135,11 +129,11 @@ describe('recommendProcessingFee()', () => {
   it('uses erc20NotDeployedGasLimit if the token is not ETH and token is not deployed on dest layer', async () => {
     mockGet.mockImplementation((store: any) => {
       if (typeof store === typeof chainIdToTokenVaultAddress) {
-        return new Map<number, string>().set(CHAIN_MAINNET.id, '0x12345');
+        return new Map<number, string>().set(mainnetChain.id, '0x12345');
       } else {
         return new Map<number, ethers.providers.JsonRpcProvider>().set(
-          CHAIN_TKO.id,
-          mockProvider as unknown as ethers.providers.JsonRpcProvider,
+          taikoChain.id,
+          mockProvider,
         );
       }
     });
@@ -148,10 +142,10 @@ describe('recommendProcessingFee()', () => {
     );
 
     const fee = await recommendProcessingFee(
-      CHAIN_TKO,
-      CHAIN_MAINNET,
+      taikoChain,
+      mainnetChain,
       ProcessingFeeMethod.RECOMMENDED,
-      TEST_ERC20[0],
+      testERC20Tokens[0],
       mockSigner,
     );
 
@@ -165,11 +159,11 @@ describe('recommendProcessingFee()', () => {
   it('uses erc20NotDeployedGasLimit if the token is not ETH and token is not deployed on dest layer', async () => {
     mockGet.mockImplementation((store: any) => {
       if (typeof store === typeof chainIdToTokenVaultAddress) {
-        return new Map<number, string>().set(CHAIN_MAINNET.id, '0x12345');
+        return new Map<number, string>().set(mainnetChain.id, '0x12345');
       } else {
         return new Map<number, ethers.providers.JsonRpcProvider>().set(
-          CHAIN_TKO.id,
-          mockProvider as unknown as ethers.providers.JsonRpcProvider,
+          taikoChain.id,
+          mockProvider,
         );
       }
     });
@@ -177,10 +171,10 @@ describe('recommendProcessingFee()', () => {
     mockContract.canonicalToBridged.mockImplementationOnce(() => '0x123');
 
     const fee = await recommendProcessingFee(
-      CHAIN_TKO,
-      CHAIN_MAINNET,
+      taikoChain,
+      mainnetChain,
       ProcessingFeeMethod.RECOMMENDED,
-      TEST_ERC20[0],
+      testERC20Tokens[0],
       mockSigner,
     );
 
diff --git a/packages/bridge-ui/src/utils/recommendProcessingFee.ts b/packages/bridge-ui/src/utils/recommendProcessingFee.ts
index 8e974872494..2e6ecace52d 100644
--- a/packages/bridge-ui/src/utils/recommendProcessingFee.ts
+++ b/packages/bridge-ui/src/utils/recommendProcessingFee.ts
@@ -1,12 +1,12 @@
 import { BigNumber, Contract, ethers, Signer } from 'ethers';
+import { get } from 'svelte/store';
 import TokenVault from '../constants/abi/TokenVault';
 import type { Chain } from '../domain/chain';
 import type { ProcessingFeeMethod } from '../domain/fee';
 import type { Token } from '../domain/token';
-import { ETH } from '../domain/token';
 import { chainIdToTokenVaultAddress } from '../store/bridge';
 import { providers } from '../store/providers';
-import { get } from 'svelte/store';
+import { ETHToken } from '../token/tokens';
 
 export const ethGasLimit = 900000;
 export const erc20NotDeployedGasLimit = 3100000;
@@ -26,7 +26,7 @@ export async function recommendProcessingFee(
   // gasLimit for processMessage call for ETH is about ~800k.
   // to make it enticing, we say 900k.
   let gasLimit = ethGasLimit;
-  if (token.symbol.toLowerCase() !== ETH.symbol.toLowerCase()) {
+  if (token.symbol.toLowerCase() !== ETHToken.symbol.toLowerCase()) {
     let srcChainAddr = token.addresses.find(
       (t) => t.chainId === fromChain.id,
     ).address;
diff --git a/packages/bridge-ui/src/vite-env.d.ts b/packages/bridge-ui/src/vite-env.d.ts
index 7eed77ca647..44b716e5d2f 100644
--- a/packages/bridge-ui/src/vite-env.d.ts
+++ b/packages/bridge-ui/src/vite-env.d.ts
@@ -1,9 +1,7 @@
 /// <reference types="svelte" />
 /// <reference types="vite/client" />
-/// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_L1_RPC_URL: string;
   readonly VITE_L1_RPC_URL: string;
   readonly VITE_L2_RPC_URL: string;
   readonly VITE_L1_EXPLORER_URL: string;