feat(bridge-ui): more informative processing fee

packages/bridge-ui/src/app.css

@@ -27,7 +27,6 @@
 .btn.btn-accent {
   background-color: hsla(var(--af) / var(--tw-bg-opacity, 1));
   border-color: hsla(var(--af) / var(--tw-bg-opacity, 1));
-  height: 60px;
 }
 
 .btn.btn-accent:hover {

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

@@ -173,15 +173,15 @@ export class ERC20Bridge implements Bridge {
 
     if (messageStatus === MessageStatus.New) {
       const proof = await this.prover.generateProof({
-        srcChain: opts.message.srcChainId.toNumber(),
+        srcChain: opts.message.srcChainId,
         msgHash: opts.msgHash,
         sender: opts.srcBridgeAddress,
         srcBridgeAddress: opts.srcBridgeAddress,
-        destChain: opts.message.destChainId.toNumber(),
+        destChain: opts.message.destChainId,
         destHeaderSyncAddress:
-          chains[opts.message.destChainId.toNumber()].headerSyncAddress,
+          chains[opts.message.destChainId].headerSyncAddress,
         srcSignalServiceAddress:
-          chains[opts.message.srcChainId.toNumber()].signalServiceAddress,
+          chains[opts.message.srcChainId].signalServiceAddress,
       });
 
       if (opts.message.gasLimit.gt(BigNumber.from(2500000))) {
@@ -234,15 +234,14 @@ export class ERC20Bridge implements Bridge {
 
     if (messageStatus === MessageStatus.Failed) {
       const proofOpts = {
-        srcChain: opts.message.srcChainId.toNumber(),
+        srcChain: opts.message.srcChainId,
         msgHash: opts.msgHash,
         sender: opts.srcBridgeAddress,
         destBridgeAddress: opts.destBridgeAddress,
-        destChain: opts.message.destChainId.toNumber(),
+        destChain: opts.message.destChainId,
         destHeaderSyncAddress:
-          chains[opts.message.destChainId.toNumber()].headerSyncAddress,
-        srcHeaderSyncAddress:
-          chains[opts.message.srcChainId.toNumber()].headerSyncAddress,
+          chains[opts.message.destChainId].headerSyncAddress,
+        srcHeaderSyncAddress: chains[opts.message.srcChainId].headerSyncAddress,
       };
 
       const proof = await this.prover.generateReleaseProof(proofOpts);

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

@@ -7,11 +7,10 @@ import type {
   ClaimOpts,
   ReleaseOpts,
 } from '../domain/bridge';
-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 '../chain/chains';
+import { type Message, MessageStatus } from '../domain/message';
 
 export class ETHBridge implements Bridge {
   private readonly prover: Prover;
@@ -22,15 +21,15 @@ export class ETHBridge implements Bridge {
 
   static async prepareTransaction(
     opts: BridgeOpts,
-  ): Promise<{ contract: Contract; message: any; owner: string }> {
+  ): Promise<{ contract: Contract; message: Message; owner: string }> {
     const contract: Contract = new Contract(
       opts.bridgeAddress,
       BridgeABI,
       opts.signer,
     );
 
     const owner = await opts.signer.getAddress();
-    const message = {
+    const message: Message = {
       sender: owner,
       srcChainId: opts.fromChainId,
       destChainId: opts.toChainId,
@@ -113,15 +112,15 @@ export class ETHBridge implements Bridge {
 
     if (messageStatus === MessageStatus.New) {
       const proofOpts = {
-        srcChain: opts.message.srcChainId.toNumber(),
+        srcChain: opts.message.srcChainId,
         msgHash: opts.msgHash,
         sender: opts.srcBridgeAddress,
         srcBridgeAddress: opts.srcBridgeAddress,
-        destChain: opts.message.destChainId.toNumber(),
+        destChain: opts.message.destChainId,
         destHeaderSyncAddress:
-          chains[opts.message.destChainId.toNumber()].headerSyncAddress,
+          chains[opts.message.destChainId].headerSyncAddress,
         srcSignalServiceAddress:
-          chains[opts.message.srcChainId.toNumber()].signalServiceAddress,
+          chains[opts.message.srcChainId].signalServiceAddress,
       };
 
       const proof = await this.prover.generateProof(proofOpts);
@@ -169,15 +168,14 @@ export class ETHBridge implements Bridge {
 
     if (messageStatus === MessageStatus.Failed) {
       const proofOpts = {
-        srcChain: opts.message.srcChainId.toNumber(),
+        srcChain: opts.message.srcChainId,
         msgHash: opts.msgHash,
         sender: opts.srcBridgeAddress,
         destBridgeAddress: opts.destBridgeAddress,
-        destChain: opts.message.destChainId.toNumber(),
+        destChain: opts.message.destChainId,
         destHeaderSyncAddress:
-          chains[opts.message.destChainId.toNumber()].headerSyncAddress,
-        srcHeaderSyncAddress:
-          chains[opts.message.srcChainId.toNumber()].headerSyncAddress,
+          chains[opts.message.destChainId].headerSyncAddress,
+        srcHeaderSyncAddress: chains[opts.message.srcChainId].headerSyncAddress,
       };
 
       const proof = await this.prover.generateReleaseProof(proofOpts);

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { _ } from 'svelte-i18n';
   import { fromChain, toChain } from '../store/chain';
   import type { Chain } from '../domain/chain';
   import { ethers } from 'ethers';

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

@@ -1,5 +1,4 @@
 <script>
-  import { _ } from 'svelte-i18n';
   import SelectChain from './form/SelectChain.svelte';
 </script>
 

packages/bridge-ui/src/components/InsufficientBalanceTooltip.svelte → packages/bridge-ui/src/components/Transactions/InsufficientBalanceTooltip.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import TooltipModal from './modals/TooltipModal.svelte';
+  import TooltipModal from '../modals/TooltipModal.svelte';
 
   export let show: boolean;
 </script>

packages/bridge-ui/src/components/MessageStatusTooltip.svelte → packages/bridge-ui/src/components/Transactions/MessageStatusTooltip.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import TooltipModal from './modals/TooltipModal.svelte';
+  import { L1_CHAIN_NAME, L2_CHAIN_NAME } from '../../constants/envVars';
+  import TooltipModal from '../modals/TooltipModal.svelte';
 
   export let show: boolean;
 </script>
@@ -12,14 +13,9 @@
       <ul class="list-disc ml-4">
         <li class="mb-2">
           <strong>Pending</strong>: Your asset is not ready to be bridged. Taiko
-          A2 => {import.meta.env
-            ? import.meta.env.VITE_MAINNET_CHAIN_NAME
-            : 'Ethereum A2'} bridging can take several hours before being ready.
-          {import.meta.env
-            ? import.meta.env.VITE_MAINNET_CHAIN_NAME
-            : 'Ethereum A2'} => {import.meta.env
-            ? import.meta.env.VITE_TAIKO_CHAIN_NAME
-            : 'Taiko A2'} should be available to claim within minutes.
+          A2 => {L2_CHAIN_NAME} bridging can take several hours before being ready.
+          {L1_CHAIN_NAME} => {L2_CHAIN_NAME} should be available to claim within
+          minutes.
         </li>
         <li class="mb-2">
           <strong>Claim</strong>: Your asset is ready to be claimed on the