fix(bridge-ui): add chain icons

packages/bridge-ui/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "start": "pnpm run dev",
     "start:a3": "pnpm run dev --mode a3",
+    "start:l3": "pnpm run dev --mode l3",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",

packages/bridge-ui/src/chain/chains.ts

@@ -1,16 +1,16 @@
 import type { Chain as WagmiChain } from 'wagmi';
 
-import Eth from '../components/icons/ETH.svelte';
-import Taiko from '../components/icons/TKO.svelte';
 import {
   L1_BRIDGE_ADDRESS,
+  L1_CHAIN_ICON,
   L1_CHAIN_ID,
   L1_CHAIN_NAME,
   L1_CROSS_CHAIN_SYNC_ADDRESS,
   L1_EXPLORER_URL,
   L1_RPC,
   L1_SIGNAL_SERVICE_ADDRESS,
   L2_BRIDGE_ADDRESS,
+  L2_CHAIN_ICON,
   L2_CHAIN_ID,
   L2_CHAIN_NAME,
   L2_CROSS_CHAIN_SYNC_ADDRESS,
@@ -20,36 +20,36 @@ import {
 } from '../constants/envVars';
 import type { Chain, ChainID } from '../domain/chain';
 
-export const mainnetChain: Chain = {
+export const L1Chain: Chain = {
   id: L1_CHAIN_ID,
   name: L1_CHAIN_NAME,
   rpc: L1_RPC,
   enabled: true,
-  icon: Eth,
+  iconUrl: L1_CHAIN_ICON,
   bridgeAddress: L1_BRIDGE_ADDRESS,
   crossChainSyncAddress: L1_CROSS_CHAIN_SYNC_ADDRESS,
   explorerUrl: L1_EXPLORER_URL,
   signalServiceAddress: L1_SIGNAL_SERVICE_ADDRESS,
 };
 
-export const taikoChain: Chain = {
+export const L2Chain: Chain = {
   id: L2_CHAIN_ID,
   name: L2_CHAIN_NAME,
   rpc: L2_RPC,
   enabled: true,
-  icon: Taiko,
+  iconUrl: L2_CHAIN_ICON,
   bridgeAddress: L2_BRIDGE_ADDRESS,
   crossChainSyncAddress: L2_CROSS_CHAIN_SYNC_ADDRESS,
   explorerUrl: L2_EXPLORER_URL,
   signalServiceAddress: L2_SIGNAL_SERVICE_ADDRESS,
 };
 
 export const chains: Record<ChainID, Chain> = {
-  [L1_CHAIN_ID]: mainnetChain,
-  [L2_CHAIN_ID]: taikoChain,
+  [L1_CHAIN_ID]: L1Chain,
+  [L2_CHAIN_ID]: L2Chain,
 };
 
-// TODO: can we not merge this chain into mainnetChain?
+// TODO: can we not merge this chain into L1Chain?
 export const mainnetWagmiChain: WagmiChain = {
   id: L1_CHAIN_ID,
   name: L1_CHAIN_NAME,
@@ -67,7 +67,7 @@ export const mainnetWagmiChain: WagmiChain = {
   },
 };
 
-// TODO: same here, merge it into taikoChain
+// TODO: same here, merge it into L2Chain
 export const taikoWagmiChain: WagmiChain = {
   id: L2_CHAIN_ID,
   name: L2_CHAIN_NAME,

packages/bridge-ui/src/components/AddressDropdown.svelte

@@ -112,7 +112,7 @@
       class="dropdown-content rounded-box menu shadow bg-dark-2 w-48 mt-2 pb-2 text-sm">
       <div class="p-5 pb-0 flex flex-col items-center" transition:slide>
         {#if $srcChain && $signer}
-          <svelte:component this={$srcChain.icon} />
+          <img src={$srcChain.iconUrl} alt={$srcChain.name} />
           <div class="text-lg mt-2">
             {tokenBalance.length > 10
               ? `${truncateString(tokenBalance)}…`

packages/bridge-ui/src/components/BridgeForm/SelectChain.svelte

@@ -3,7 +3,7 @@
   import { ArrowRight } from 'svelte-heros-v2';
   import { UserRejectedRequestError } from 'wagmi';
 
-  import { mainnetChain, taikoChain } from '../../chain/chains';
+  import { L1Chain, L2Chain } from '../../chain/chains';
   import { destChain, srcChain } from '../../store/chain';
   import { signer } from '../../store/signer';
   import { pendingTransactions } from '../../store/transaction';
@@ -20,7 +20,7 @@
       return;
     }
 
-    const chain = $srcChain === mainnetChain ? taikoChain : mainnetChain;
+    const chain = $srcChain === L1Chain ? L2Chain : L1Chain;
 
     try {
       await switchNetwork(chain.id);
@@ -49,11 +49,11 @@
   class="flex items-center justify-between w-full px-4 md:px-7 py-6 text-sm md:text-lg">
   <div class="flex items-center w-2/5 justify-center">
     {#if $srcChain}
-      <svelte:component this={$srcChain.icon} />
+      <img src={$srcChain.iconUrl} alt={$srcChain.name} />
       <span class="ml-2">{$srcChain.name}</span>
     {:else}
-      <svelte:component this={mainnetChain.icon} />
-      <span class="ml-2">{mainnetChain.name}</span>
+      <img src={L1Chain.iconUrl} alt={L1Chain.name} />
+      <span class="ml-2">{L1Chain.name}</span>
     {/if}
   </div>
 
@@ -66,11 +66,11 @@
 
   <div class="flex items-center w-2/5 justify-center">
     {#if $destChain}
-      <svelte:component this={$destChain.icon} />
+      <img src={$destChain.iconUrl} alt={$destChain.name} />
       <span class="ml-2">{$destChain.name}</span>
     {:else}
-      <svelte:component this={taikoChain.icon} />
-      <span class="ml-2">{taikoChain.name}</span>
+      <img src={L2Chain.iconUrl} alt={L2Chain.name} />
+      <span class="ml-2">{L2Chain.name}</span>
     {/if}
   </div>
 </div>

packages/bridge-ui/src/components/ChainDropdown.svelte

@@ -3,7 +3,7 @@
   import { ChevronDown, ExclamationTriangle } from 'svelte-heros-v2';
   import { UserRejectedRequestError } from 'wagmi';
 
-  import { mainnetChain, taikoChain } from '../chain/chains';
+  import { L1Chain, L2Chain } from '../chain/chains';
   import type { Chain } from '../domain/chain';
   import { srcChain } from '../store/chain';
   import { signer } from '../store/signer';
@@ -49,8 +49,10 @@
   <button class="btn justify-around md:w-[194px]" disabled={cannotSwitch}>
     <span class="font-normal flex-1 text-left mr-2">
       {#if $srcChain}
-        <svelte:component this={$srcChain.icon} />
-        <span class="ml-2 hidden md:inline-block">{$srcChain.name}</span>
+        <span class="flex items-center">
+          <img src={$srcChain.iconUrl} alt={$srcChain.name} />
+          <span class="ml-2 hidden md:inline-block">{$srcChain.name}</span>
+        </span>
       {:else}
         <span class="ml-2 flex items-center">
           <ExclamationTriangle class="mr-2" size="20" />
@@ -67,17 +69,17 @@
     <li>
       <button
         class="flex items-center px-2 py-4 hover:bg-dark-5 rounded-sm"
-        on:click={() => switchChains(mainnetChain)}>
-        <svelte:component this={mainnetChain.icon} height={24} />
-        <span class="pl-1.5 text-left flex-1">{mainnetChain.name}</span>
+        on:click={() => switchChains(L1Chain)}>
+        <img src={L1Chain.iconUrl} alt={L1Chain.name} height={24} />
+        <span class="pl-1.5 text-left flex-1">{L1Chain.name}</span>
       </button>
     </li>
     <li>
       <button
         class="flex items-center px-2 py-4 hover:bg-dark-5 rounded-sm"
-        on:click={() => switchChains(taikoChain)}>
-        <svelte:component this={taikoChain.icon} height={24} />
-        <span class="pl-1.5 text-left flex-1">{taikoChain.name}</span>
+        on:click={() => switchChains(L2Chain)}>
+        <img src={L2Chain.iconUrl} alt={L2Chain.name} height={24} />
+        <span class="pl-1.5 text-left flex-1">{L2Chain.name}</span>
       </button>
     </li>
   </ul>

packages/bridge-ui/src/components/SwitchChainModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
 
-  import { mainnetChain, taikoChain } from '../chain/chains';
+  import { L1Chain, L2Chain } from '../chain/chains';
   import type { Chain } from '../domain/chain';
   import { isSwitchChainModalOpen } from '../store/modal';
   import { switchNetwork } from '../utils/switchNetwork';
@@ -30,18 +30,18 @@
       <button
         class="btn btn-dark-5 h-[60px] text-base"
         on:click={async () => {
-          await switchChain(mainnetChain);
+          await switchChain(L1Chain);
         }}>
-        <svelte:component this={mainnetChain.icon} /><span class="ml-2"
-          >{mainnetChain.name}</span>
+        <img src={L1Chain.iconUrl} alt={L1Chain.name} />
+        <span class="ml-2">{L1Chain.name}</span>
       </button>
       <button
         class="btn btn-dark-5 h-[60px] text-base"
         on:click={async () => {
-          await switchChain(taikoChain);
+          await switchChain(L2Chain);
         }}>
-        <svelte:component this={taikoChain.icon} /><span class="ml-2"
-          >{taikoChain.name}</span>
+        <img src={L2Chain.iconUrl} alt={L2Chain.name} />
+        <span class="ml-2">{L2Chain.name}</span>
       </button>
     </div>
   </div>

packages/bridge-ui/src/components/Transactions/Transaction.svelte

@@ -384,12 +384,24 @@
 
 <tr>
   <td>
-    <svelte:component this={txFromChain.icon} height={18} width={18} />
-    <span class="ml-2 hidden md:inline-block">{txFromChain.name}</span>
+    <div class="flex items-center">
+      <img
+        src={txFromChain.iconUrl}
+        alt={txFromChain.name}
+        height={18}
+        width={18} />
+      <span class="ml-2 hidden md:inline-block">{txFromChain.name}</span>
+    </div>
   </td>
   <td>
-    <svelte:component this={txToChain.icon} height={18} width={18} />
-    <span class="ml-2 hidden md:inline-block">{txToChain.name}</span>
+    <div class="flex items-center">
+      <img
+        src={txToChain.iconUrl}
+        alt={txToChain.name}
+        height={18}
+        width={18} />
+      <span class="ml-2 hidden md:inline-block">{txToChain.name}</span>
+    </div>
   </td>
   <td>
     {#if Boolean(transaction.message) && isETHByMessage(transaction.message)}

packages/bridge-ui/src/constants/__mocks__/envVars.ts

@@ -15,6 +15,8 @@ export const L1_CHAIN_ID = 31336;
 
 export const L1_CHAIN_NAME = 'Ethereum';
 
+export const L1_CHAIN_ICON = 'l1';
+
 export const L1_EXPLORER_URL = 'https://l1explorer.internal.taiko.xyz';
 
 export const L2_RPC = 'https://l2rpc.internal.taiko.xyz';
@@ -36,6 +38,8 @@ export const L2_CHAIN_ID = 167001;
 
 export const L2_CHAIN_NAME = 'Taiko';
 
+export const L2_CHAIN_ICON = 'l2';
+
 export const L2_EXPLORER_URL = 'https://l2explorer.internal.taiko.xyz';
 
 export const RELAYER_URL = 'https://relayer.internal.taiko.xyz/';

packages/bridge-ui/src/constants/envVars.ts

@@ -23,6 +23,8 @@ export const L1_CHAIN_ID: ChainID = parseInt(import.meta.env?.VITE_L1_CHAIN_ID);
 
 export const L1_CHAIN_NAME: string = import.meta.env?.VITE_L1_CHAIN_NAME;
 
+export const L1_CHAIN_ICON: string = import.meta.env?.VITE_L1_CHAIN_ICON;
+
 export const L1_EXPLORER_URL: string = import.meta.env?.VITE_L1_EXPLORER_URL;
 
 export const L2_RPC: string = import.meta.env?.VITE_L2_RPC_URL;
@@ -43,6 +45,8 @@ export const L2_CHAIN_ID: ChainID = parseInt(import.meta.env?.VITE_L2_CHAIN_ID);
 
 export const L2_CHAIN_NAME: string = import.meta.env?.VITE_L2_CHAIN_NAME;
 
+export const L2_CHAIN_ICON: string = import.meta.env?.VITE_L2_CHAIN_ICON;
+
 export const L2_EXPLORER_URL: string = import.meta.env?.VITE_L2_EXPLORER_URL;
 
 export const RELAYER_URL: string = import.meta.env?.VITE_RELAYER_URL;

packages/bridge-ui/src/domain/chain.ts

@@ -1,4 +1,3 @@
-import type { ComponentType } from 'svelte';
 import type { Address } from 'wagmi';
 
 export type ChainID = number;
@@ -8,7 +7,7 @@ export type Chain = {
   name: string;
   rpc: string;
   enabled?: boolean;
-  icon?: ComponentType;
+  iconUrl?: string;
   bridgeAddress: Address;
   crossChainSyncAddress: Address;
   explorerUrl: string;

packages/bridge-ui/src/token/tokens.ts

@@ -46,8 +46,10 @@ export const testERC20Tokens: Token[] = TEST_ERC20.map(
       [L2_CHAIN_ID]: '0x00',
     },
     decimals: 18,
+
+    // TODO: in the future the whole URL will come from env var
     logoComponent: symbolToLogoComponent[symbol] || Unknown,
-    logoUrl: logoUrl,
+    logoUrl, // TODO: this is not used yet
   }),
 );