From f5f7b7ee2a99ec940a73e263fb12e9378d139734 Mon Sep 17 00:00:00 2001
From: Francisco Ramos <jscriptcoder@gmail.com>
Date: Thu, 30 Mar 2023 16:30:06 +0200
Subject: [PATCH] feat(bridge-ui): more informative processing fee (#13488)

---
 packages/bridge-ui/src/app.css                |   1 -
 packages/bridge-ui/src/bridge/ERC20Bridge.ts  |  17 +--
 packages/bridge-ui/src/bridge/ETHBridge.ts    |  24 ++-
 .../src/components/ChainDropdown.svelte       |   1 -
 .../src/components/TaikoBanner.svelte         |   1 -
 .../src/components/Transactions.svelte        |  58 -------
 .../InsufficientBalanceTooltip.svelte         |   2 +-
 .../MessageStatusTooltip.svelte               |  14 +-
 .../{ => Transactions}/Transaction.svelte     | 142 ++++++++++--------
 .../TransactionDetail.svelte                  |   9 +-
 .../Transactions/Transactions.svelte          |  75 +++++++++
 .../src/components/Transactions/index.ts      |   1 +
 .../src/components/buttons/Button.svelte      |  16 ++
 .../src/components/form/BridgeForm.svelte     |  43 +++---
 .../bridge-ui/src/components/form/Memo.svelte |   1 -
 .../src/components/form/ProcessingFee.svelte  | 108 -------------
 .../form/ProcessingFee/ProcessingFee.svelte   | 107 +++++++++++++
 .../ProcessingFee/ProcessingFeeTooltip.svelte |  31 ++++
 .../components/form/ProcessingFee/index.ts    |   1 +
 .../src/components/modals/Modal.svelte        |  15 +-
 .../src/components/modals/NoticeModal.svelte  |  68 +++++++++
 packages/bridge-ui/src/config.ts              |   3 +
 packages/bridge-ui/src/domain/bridge.ts       |   5 +-
 packages/bridge-ui/src/domain/button.ts       |   5 +
 packages/bridge-ui/src/domain/fee.ts          |   1 +
 packages/bridge-ui/src/domain/message.ts      |   5 +-
 packages/bridge-ui/src/domain/relayerApi.ts   |  26 +++-
 packages/bridge-ui/src/domain/transactions.ts |   5 +-
 packages/bridge-ui/src/fee/processingFees.ts  |   3 +
 packages/bridge-ui/src/pages/home/Home.svelte |   3 +-
 .../src/relayer-api/RelayerAPIService.ts      |   6 +-
 .../src/storage/StorageService.spec.ts        |  10 +-
 .../bridge-ui/src/storage/StorageService.ts   |   5 +-
 packages/bridge-ui/src/store/fee.ts           |   6 -
 packages/bridge-ui/src/store/userToken.ts     |   2 +-
 .../src/utils/switchChainAndSetSigner.ts      |  26 ++++
 packages/bridge-ui/tailwind.config.cjs        |   1 -
 37 files changed, 516 insertions(+), 331 deletions(-)
 delete mode 100644 packages/bridge-ui/src/components/Transactions.svelte
 rename packages/bridge-ui/src/components/{ => Transactions}/InsufficientBalanceTooltip.svelte (87%)
 rename packages/bridge-ui/src/components/{ => Transactions}/MessageStatusTooltip.svelte (72%)
 rename packages/bridge-ui/src/components/{ => Transactions}/Transaction.svelte (68%)
 rename packages/bridge-ui/src/components/{ => Transactions}/TransactionDetail.svelte (89%)
 create mode 100644 packages/bridge-ui/src/components/Transactions/Transactions.svelte
 create mode 100644 packages/bridge-ui/src/components/Transactions/index.ts
 create mode 100644 packages/bridge-ui/src/components/buttons/Button.svelte
 delete mode 100644 packages/bridge-ui/src/components/form/ProcessingFee.svelte
 create mode 100644 packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
 create mode 100644 packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFeeTooltip.svelte
 create mode 100644 packages/bridge-ui/src/components/form/ProcessingFee/index.ts
 create mode 100644 packages/bridge-ui/src/components/modals/NoticeModal.svelte
 create mode 100644 packages/bridge-ui/src/config.ts
 create mode 100644 packages/bridge-ui/src/domain/button.ts
 delete mode 100644 packages/bridge-ui/src/store/fee.ts
 create mode 100644 packages/bridge-ui/src/utils/switchChainAndSetSigner.ts

diff --git a/packages/bridge-ui/src/app.css b/packages/bridge-ui/src/app.css
index f1e9de666c..fba7e9c29e 100644
--- a/packages/bridge-ui/src/app.css
+++ b/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 {
diff --git a/packages/bridge-ui/src/bridge/ERC20Bridge.ts b/packages/bridge-ui/src/bridge/ERC20Bridge.ts
index 2e79e42fac..e00a1e3581 100644
--- a/packages/bridge-ui/src/bridge/ERC20Bridge.ts
+++ b/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);
diff --git a/packages/bridge-ui/src/bridge/ETHBridge.ts b/packages/bridge-ui/src/bridge/ETHBridge.ts
index 8aceb3b834..c82f6407ab 100644
--- a/packages/bridge-ui/src/bridge/ETHBridge.ts
+++ b/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,7 +21,7 @@ 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,
@@ -30,7 +29,7 @@ export class ETHBridge implements Bridge {
     );
 
     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);
diff --git a/packages/bridge-ui/src/components/ChainDropdown.svelte b/packages/bridge-ui/src/components/ChainDropdown.svelte
index db6d8e8c48..453e62a642 100644
--- a/packages/bridge-ui/src/components/ChainDropdown.svelte
+++ b/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';
diff --git a/packages/bridge-ui/src/components/TaikoBanner.svelte b/packages/bridge-ui/src/components/TaikoBanner.svelte
index f04b21d13b..0e38aa0702 100644
--- a/packages/bridge-ui/src/components/TaikoBanner.svelte
+++ b/packages/bridge-ui/src/components/TaikoBanner.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { _ } from 'svelte-i18n';
   import SelectChain from './form/SelectChain.svelte';
 </script>
 
diff --git a/packages/bridge-ui/src/components/Transactions.svelte b/packages/bridge-ui/src/components/Transactions.svelte
deleted file mode 100644
index 67bd281025..0000000000
--- a/packages/bridge-ui/src/components/Transactions.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-  import { transactions } from '../store/transactions';
-  import Transaction from './Transaction.svelte';
-  import TransactionDetail from './TransactionDetail.svelte';
-  import MessageStatusTooltip from './MessageStatusTooltip.svelte';
-  import InsufficientBalanceTooltip from './InsufficientBalanceTooltip.svelte';
-  import type { BridgeTransaction } from '../domain/transactions';
-  import { chains } from '../chain/chains';
-
-  let selectedTransaction: BridgeTransaction;
-  let showMessageStatusTooltip: boolean;
-  let showInsufficientBalance: boolean;
-</script>
-
-<div class="my-4 md:px-4">
-  {#if $transactions.length}
-    <table class="table-auto">
-      <thead>
-        <tr class="text-transaction-table">
-          <th>From</th>
-          <th>To</th>
-          <th>Amount</th>
-          <th>Status</th>
-          <th>Details</th>
-        </tr>
-      </thead>
-      <tbody class="text-sm md:text-base">
-        {#each $transactions as transaction}
-          <Transaction
-            onTooltipClick={(showInsufficientBalanceMessage = false) => {
-              if (showInsufficientBalanceMessage) {
-                showInsufficientBalance = true;
-              } else {
-                showMessageStatusTooltip = true;
-              }
-            }}
-            onShowTransactionDetailsClick={() => {
-              selectedTransaction = transaction;
-            }}
-            toChain={chains[transaction.toChainId]}
-            fromChain={chains[transaction.fromChainId]}
-            {transaction} />
-        {/each}
-      </tbody>
-    </table>
-  {:else}
-    No transactions
-  {/if}
-
-  {#if selectedTransaction}
-    <TransactionDetail
-      transaction={selectedTransaction}
-      onClose={() => (selectedTransaction = null)} />
-  {/if}
-
-  <MessageStatusTooltip bind:show={showMessageStatusTooltip} />
-  <InsufficientBalanceTooltip bind:show={showInsufficientBalance} />
-</div>
diff --git a/packages/bridge-ui/src/components/InsufficientBalanceTooltip.svelte b/packages/bridge-ui/src/components/Transactions/InsufficientBalanceTooltip.svelte
similarity index 87%
rename from packages/bridge-ui/src/components/InsufficientBalanceTooltip.svelte
rename to packages/bridge-ui/src/components/Transactions/InsufficientBalanceTooltip.svelte
index f5a5dc6064..68415e8460 100644
--- a/packages/bridge-ui/src/components/InsufficientBalanceTooltip.svelte
+++ b/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>
diff --git a/packages/bridge-ui/src/components/MessageStatusTooltip.svelte b/packages/bridge-ui/src/components/Transactions/MessageStatusTooltip.svelte
similarity index 72%
rename from packages/bridge-ui/src/components/MessageStatusTooltip.svelte
rename to packages/bridge-ui/src/components/Transactions/MessageStatusTooltip.svelte
index e98c856b45..e6a9df8181 100644
--- a/packages/bridge-ui/src/components/MessageStatusTooltip.svelte
+++ b/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
diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
similarity index 68%
rename from packages/bridge-ui/src/components/Transaction.svelte
rename to packages/bridge-ui/src/components/Transactions/Transaction.svelte
index 749cfc1ab5..a83ec3d1b0 100644
--- a/packages/bridge-ui/src/components/Transaction.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
@@ -1,43 +1,45 @@
 <script lang="ts">
-  import type { BridgeTransaction } from '../domain/transactions';
-  import type { Chain } from '../domain/chain';
+  import { createEventDispatcher } from 'svelte';
+  import type { BridgeTransaction } from '../../domain/transactions';
   import { ArrowTopRightOnSquare } from 'svelte-heros-v2';
-  import { MessageStatus } from '../domain/message';
+  import { MessageStatus } from '../../domain/message';
   import { Contract, ethers } from 'ethers';
-  import { signer } from '../store/signer';
-  import { pendingTransactions } from '../store/transactions';
+  import { signer } from '../../store/signer';
+  import { pendingTransactions } from '../../store/transactions';
   import { _ } from 'svelte-i18n';
-  import {
-    fromChain as fromChainStore,
-    toChain as toChainStore,
-  } from '../store/chain';
-  import { BridgeType } from '../domain/bridge';
+  import { fromChain } from '../../store/chain';
+  import { BridgeType } from '../../domain/bridge';
   import { onDestroy, onMount } from 'svelte';
 
   import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
-  import { errorToast, successToast } from './Toast.svelte';
-  import HeaderSyncABI from '../constants/abi/HeaderSync';
-  import { fetchSigner, switchNetwork } from '@wagmi/core';
-  import BridgeABI from '../constants/abi/Bridge';
-  import ButtonWithTooltip from './ButtonWithTooltip.svelte';
-  import TokenVaultABI from '../constants/abi/TokenVault';
-  import { chains, mainnetChain, taikoChain } from '../chain/chains';
-  import { providers } from '../provider/providers';
-  import { bridges } from '../bridge/bridges';
-  import { tokenVaults } from '../vault/tokenVaults';
-  import { isOnCorrectChain } from '../utils/isOnCorrectChain';
+  import { errorToast, successToast } from '../Toast.svelte';
+  import HeaderSyncABI from '../../constants/abi/HeaderSync';
+  import BridgeABI from '../../constants/abi/Bridge';
+  import ButtonWithTooltip from '../ButtonWithTooltip.svelte';
+  import TokenVaultABI from '../../constants/abi/TokenVault';
+  import { chains } from '../../chain/chains';
+  import { providers } from '../../provider/providers';
+  import { bridges } from '../../bridge/bridges';
+  import { tokenVaults } from '../../vault/tokenVaults';
+  import { isOnCorrectChain } from '../../utils/isOnCorrectChain';
+  import Button from '../buttons/Button.svelte';
+  import { switchChainAndSetSigner } from '../../utils/switchChainAndSetSigner';
 
   export let transaction: BridgeTransaction;
-  export let fromChain: Chain;
-  export let toChain: Chain;
 
-  export let onTooltipClick: (showInsufficientBalanceMessage: boolean) => void;
-  export let onShowTransactionDetailsClick: () => void;
+  const dispatch = createEventDispatcher<{
+    tooltipClick: void;
+    insufficientBalance: void;
+    transactionDetailsClick: BridgeTransaction;
+    relayerAutoClaim: (informed: boolean) => Promise<void>;
+  }>();
 
   let loading: boolean;
-
   let processable: boolean = false;
   let interval: ReturnType<typeof setInterval>;
+  let txToChain = chains[transaction.toChainId];
+  let txFromChain = chains[transaction.fromChainId];
+  let alreadyInformedAboutClaim = false;
 
   onMount(async () => {
     processable = await isProcessable();
@@ -50,30 +52,35 @@
     }
   });
 
-  async function switchChainAndSetSigner(chain: Chain) {
-    await switchNetwork({
-      chainId: chain.id,
-    });
-    const provider = new ethers.providers.Web3Provider(window.ethereum);
-    await provider.send('eth_requestAccounts', []);
-
-    fromChainStore.set(chain);
-    if (chain === mainnetChain) {
-      toChainStore.set(taikoChain);
+  async function onClaimClick() {
+    // Has the user sent processing fees?. We also check if the user
+    // has already been informed about the relayer auto-claim.
+    const processingFee = transaction.message?.processingFee.toString();
+    if (processingFee && processingFee !== '0' && !alreadyInformedAboutClaim) {
+      dispatch(
+        'relayerAutoClaim',
+        // TODO: this is a hack. The idea is to move all these
+        //       functions outside of the component, where they
+        //       make more sense. We don't need to repeat the same
+        //       logic per transaction.
+        async (informed) => {
+          alreadyInformedAboutClaim = informed;
+          await claim(transaction);
+        },
+      );
     } else {
-      toChainStore.set(mainnetChain);
+      await claim(transaction);
     }
-    const wagmiSigner = await fetchSigner();
-    signer.set(wagmiSigner);
   }
 
+  // TODO: move outside of component
   async function claim(bridgeTx: BridgeTransaction) {
     try {
       loading = true;
       // if the current "from chain", ie, the chain youre connected to, is not the destination
       // of the bridge transaction, we need to change chains so your wallet is pointed
       // to the right network.
-      if ($fromChainStore.id !== bridgeTx.toChainId) {
+      if ($fromChain.id !== bridgeTx.toChainId) {
         const chain = chains[bridgeTx.toChainId];
         await switchChainAndSetSigner(chain);
       }
@@ -88,7 +95,7 @@
       // TODO: estimate Claim transaction
       const userBalance = await $signer.getBalance('latest');
       if (!userBalance.gt(ethers.utils.parseEther('0.0001'))) {
-        onTooltipClick(true);
+        dispatch('insufficientBalance');
         return;
       }
 
@@ -110,6 +117,7 @@
       });
 
       successToast($_('toast.transactionSent'));
+      // TODO: keep the MessageStatus as contract and use another way.
       transaction.status = MessageStatus.ClaimInProgress;
     } catch (e) {
       console.error(e);
@@ -119,10 +127,11 @@
     }
   }
 
+  // TODO: move outside of component
   async function releaseTokens(bridgeTx: BridgeTransaction) {
     try {
       loading = true;
-      if (fromChain.id !== bridgeTx.fromChainId) {
+      if (txFromChain.id !== bridgeTx.fromChainId) {
         const chain = chains[bridgeTx.fromChainId];
         await switchChainAndSetSigner(chain);
       }
@@ -161,6 +170,7 @@
     }
   }
 
+  // TODO: this could also live in an utility: isTransactionProcessable?
   async function isProcessable() {
     if (!transaction.receipt) return false;
     if (!transaction.message) return false;
@@ -180,6 +190,7 @@
     return transaction.receipt.blockNumber <= srcBlock.number;
   }
 
+  // TODO: web worker?
   function startInterval() {
     return setInterval(async () => {
       processable = await isProcessable();
@@ -234,14 +245,15 @@
 
 <tr class="text-transaction-table">
   <td>
-    <svelte:component this={fromChain.icon} height={18} width={18} />
-    <span class="ml-2 hidden md:inline-block">{fromChain.name}</span>
+    <svelte:component this={txFromChain.icon} height={18} width={18} />
+    <span class="ml-2 hidden md:inline-block">{txFromChain.name}</span>
   </td>
   <td>
-    <svelte:component this={toChain.icon} height={18} width={18} />
-    <span class="ml-2 hidden md:inline-block">{toChain.name}</span>
+    <svelte:component this={txToChain.icon} height={18} width={18} />
+    <span class="ml-2 hidden md:inline-block">{txToChain.name}</span>
   </td>
   <td>
+    <!-- TODO: function to check is we're dealing with ETH or ERC20? -->
     {transaction.message &&
     (transaction.message?.data === '0x' || !transaction.message?.data)
       ? ethers.utils.formatEther(
@@ -254,11 +266,9 @@
   </td>
 
   <td>
-    <ButtonWithTooltip onClick={() => onTooltipClick(false)}>
+    <ButtonWithTooltip onClick={() => dispatch('tooltipClick')}>
       <span slot="buttonText">
-        {#if transaction.receipt && transaction.receipt.status !== 1}
-          <span class="border border-transparent p-0">Failed</span>
-        {:else if !processable}
+        {#if !processable}
           Pending
         {:else if (!transaction.receipt && transaction.status === MessageStatus.New) || loading}
           <div class="inline-block">
@@ -274,29 +284,35 @@
               controlsLayout={[]} />
           </div>
         {:else if transaction.receipt && [MessageStatus.New, MessageStatus.ClaimInProgress].includes(transaction.status)}
-          <button
-            class="cursor-pointer border rounded p-1 btn btn-sm border-white disabled:border-gray-800"
-            on:click={async () => await claim(transaction)}
+          <!-- 
+            TODO: we need some destructuring here. 
+                  We keep on accessing transaction props
+                  over and over again.
+          -->
+          <Button
+            type="accent"
+            size="sm"
+            on:click={onClaimClick}
             disabled={transaction.status === MessageStatus.ClaimInProgress}>
             Claim
-          </button>
+          </Button>
         {:else if transaction.status === MessageStatus.Retriable}
-          <button
-            class="cursor-pointer border rounded p-1 btn btn-sm border-white"
-            on:click={async () => await claim(transaction)}>
-            Retry
-          </button>
+          <Button type="accent" size="sm" on:click={onClaimClick}>Retry</Button>
         {:else if transaction.status === MessageStatus.Failed}
           <!-- todo: releaseTokens() on src bridge with proof from destBridge-->
-          <button
-            class="cursor-pointer border rounded p-1 btn btn-sm border-white"
+          <Button
+            type="accent"
+            size="sm"
             on:click={async () => await releaseTokens(transaction)}>
             Release
-          </button>
+          </Button>
         {:else if transaction.status === MessageStatus.Done}
           <span class="border border-transparent p-0">Claimed</span>
         {:else if transaction.status === MessageStatus.FailedReleased}
           <span class="border border-transparent p-0">Released</span>
+        {:else if transaction.receipt && transaction.receipt.status !== 1}
+          <!-- TODO: make sure this is now respecting the correct flow -->
+          <span class="border border-transparent p-0">Failed</span>
         {/if}
       </span>
     </ButtonWithTooltip>
@@ -305,7 +321,7 @@
   <td>
     <button
       class="cursor-pointer inline-block"
-      on:click={onShowTransactionDetailsClick}>
+      on:click={() => dispatch('transactionDetailsClick', transaction)}>
       <ArrowTopRightOnSquare />
     </button>
   </td>
diff --git a/packages/bridge-ui/src/components/TransactionDetail.svelte b/packages/bridge-ui/src/components/Transactions/TransactionDetail.svelte
similarity index 89%
rename from packages/bridge-ui/src/components/TransactionDetail.svelte
rename to packages/bridge-ui/src/components/Transactions/TransactionDetail.svelte
index e5f3868acc..d3a9f88246 100644
--- a/packages/bridge-ui/src/components/TransactionDetail.svelte
+++ b/packages/bridge-ui/src/components/Transactions/TransactionDetail.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
   import { ethers } from 'ethers';
   import { ArrowTopRightOnSquare } from 'svelte-heros-v2';
-  import { truncateString } from '../utils/truncateString';
-  import Modal from './modals/Modal.svelte';
-  import type { BridgeTransaction } from '../domain/transactions';
-  import { addressSubsection } from '../utils/addressSubsection';
-  import { chains } from '../chain/chains';
+  import Modal from '../modals/Modal.svelte';
+  import type { BridgeTransaction } from '../../domain/transactions';
+  import { addressSubsection } from '../../utils/addressSubsection';
+  import { chains } from '../../chain/chains';
 
   // TODO: can we always guarantee that this object is defined?
   //       in which case we need to guard => transaction?.prop
diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
new file mode 100644
index 0000000000..13b34ff3e4
--- /dev/null
+++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { transactions } from '../../store/transactions';
+  import Transaction from './Transaction.svelte';
+  import TransactionDetail from './TransactionDetail.svelte';
+  import MessageStatusTooltip from './MessageStatusTooltip.svelte';
+  import InsufficientBalanceTooltip from './InsufficientBalanceTooltip.svelte';
+  import type { BridgeTransaction } from '../../domain/transactions';
+  import NoticeModal from '../modals/NoticeModal.svelte';
+
+  let selectedTransaction: BridgeTransaction;
+  let showMessageStatusTooltip: boolean;
+  let showInsufficientBalance: boolean;
+  let showRelayerAutoclaimTooltip: boolean;
+
+  // TODO: temporary hack until we move the claim and release functions
+  //       outside of the Transaction component.
+  let confirmNotice: (informed: boolean) => Promise<void>;
+</script>
+
+<div class="my-4 md:px-4">
+  {#if $transactions.length}
+    <table class="table-auto">
+      <thead>
+        <tr class="text-transaction-table">
+          <th>From</th>
+          <th>To</th>
+          <th>Amount</th>
+          <th>Status</th>
+          <th>Details</th>
+        </tr>
+      </thead>
+      <tbody class="text-sm md:text-base">
+        {#each $transactions as transaction}
+          <Transaction
+            on:tooltipClick={() => (showMessageStatusTooltip = true)}
+            on:insufficientBalance={() => (showInsufficientBalance = true)}
+            on:relayerAutoClaim={({ detail }) => {
+              // We're passing the claiming of the transaction here, which
+              // will be called after confirming the notice.
+              confirmNotice = detail;
+              showRelayerAutoclaimTooltip = true;
+            }}
+            on:transactionDetailsClick={() => {
+              selectedTransaction = transaction;
+            }}
+            {transaction} />
+        {/each}
+      </tbody>
+    </table>
+  {:else}
+    No transactions
+  {/if}
+
+  {#if selectedTransaction}
+    <TransactionDetail
+      transaction={selectedTransaction}
+      onClose={() => (selectedTransaction = null)} />
+  {/if}
+
+  <MessageStatusTooltip bind:show={showMessageStatusTooltip} />
+
+  <InsufficientBalanceTooltip bind:show={showInsufficientBalance} />
+
+  <NoticeModal
+    bind:show={showRelayerAutoclaimTooltip}
+    onConfirm={confirmNotice}
+    name="RelayerAutoclaim">
+    <!-- TODO: translations? -->
+    <div class="text-center">
+      When bridging, you selected the <strong>Recommended</strong> or
+      <strong>Custom</strong> amount for the Processing Fee. You can wait for the
+      relayer to auto-claim the bridged token or manually claim it now.
+    </div>
+  </NoticeModal>
+</div>
diff --git a/packages/bridge-ui/src/components/Transactions/index.ts b/packages/bridge-ui/src/components/Transactions/index.ts
new file mode 100644
index 0000000000..5c914036b2
--- /dev/null
+++ b/packages/bridge-ui/src/components/Transactions/index.ts
@@ -0,0 +1 @@
+export { default } from './Transactions.svelte';
diff --git a/packages/bridge-ui/src/components/buttons/Button.svelte b/packages/bridge-ui/src/components/buttons/Button.svelte
new file mode 100644
index 0000000000..5c994c9d59
--- /dev/null
+++ b/packages/bridge-ui/src/components/buttons/Button.svelte
@@ -0,0 +1,16 @@
+<!--
+  TODO: this is a PoC. The idea would be to have a button component that can be
+  styled based on props following daisyUI classes.
+-->
+<script lang="ts">
+  import type { SizeButton, TypeButton } from '../../domain/button';
+
+  export let type: TypeButton = '';
+  export let size: SizeButton = 'md';
+
+  const classes = `btn ${`btn-${type}`} ${`btn-${size}`} ${$$props.class}`;
+</script>
+
+<button {...$$restProps} on:click class={classes}>
+  <slot />
+</button>
diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte
index 256ebd02ba..a485da0838 100644
--- a/packages/bridge-ui/src/components/form/BridgeForm.svelte
+++ b/packages/bridge-ui/src/components/form/BridgeForm.svelte
@@ -3,12 +3,11 @@
   import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
 
   import { token } from '../../store/token';
-  import { processingFee } from '../../store/fee';
   import { fromChain, toChain } from '../../store/chain';
   import { activeBridge, bridgeType } from '../../store/bridge';
   import { signer } from '../../store/signer';
   import { BigNumber, Contract, ethers, Signer } from 'ethers';
-  import ProcessingFee from './ProcessingFee.svelte';
+  import ProcessingFee from './ProcessingFee';
   import SelectToken from '../buttons/SelectToken.svelte';
 
   import type { Token } from '../../domain/token';
@@ -21,7 +20,6 @@
     transactioner,
     transactions as transactionsStore,
   } from '../../store/transactions';
-  import { ProcessingFeeMethod } from '../../domain/fee';
   import Memo from './Memo.svelte';
   import ERC20_ABI from '../../constants/abi/ERC20';
   import TokenVaultABI from '../../constants/abi/TokenVault';
@@ -39,20 +37,22 @@
   import { providers } from '../../provider/providers';
   import { tokenVaults } from '../../vault/tokenVaults';
   import { isOnCorrectChain } from '../../utils/isOnCorrectChain';
+  import { ProcessingFeeMethod } from '../../domain/fee';
+  import Button from '../buttons/Button.svelte';
 
   let amount: string;
   let amountInput: HTMLInputElement;
   let requiresAllowance: boolean = false;
   let btnDisabled: boolean = true;
   let tokenBalance: string;
-  let customFee: string = '0';
-  let recommendedFee: string = '0';
   let memo: string = '';
   let loading: boolean = false;
   let isFaucetModalOpen: boolean = false;
   let memoError: string;
   let to: string = '';
   let showTo: boolean = false;
+  let feeMethod: ProcessingFeeMethod = ProcessingFeeMethod.RECOMMENDED;
+  let feeAmount: string = '0';
 
   // TODO: too much going on here. We need to extract
   //       logic and unit test the hell out of all this.
@@ -333,10 +333,12 @@
           memo: memo,
           to: showTo && to ? to : await $signer.getAddress(),
         });
+
         const requiredGas = gasEstimate.mul(feeData.gasPrice);
         const userBalance = await $signer.getBalance('latest');
         const processingFee = getProcessingFee();
         let balanceAvailableForTx = userBalance.sub(requiredGas);
+
         if (processingFee) {
           balanceAvailableForTx = balanceAvailableForTx.sub(processingFee);
         }
@@ -362,17 +364,11 @@
   }
 
   function getProcessingFee() {
-    if ($processingFee === ProcessingFeeMethod.NONE) {
+    if (feeMethod === ProcessingFeeMethod.NONE) {
       return undefined;
     }
 
-    if ($processingFee === ProcessingFeeMethod.CUSTOM) {
-      return BigNumber.from(ethers.utils.parseEther(customFee));
-    }
-
-    if ($processingFee === ProcessingFeeMethod.RECOMMENDED) {
-      return BigNumber.from(ethers.utils.parseEther(recommendedFee));
-    }
+    return BigNumber.from(ethers.utils.parseEther(feeAmount));
   }
 
   $: getUserBalance($signer, $token, $fromChain);
@@ -458,12 +454,12 @@
 
 <To bind:showTo bind:to />
 
-<ProcessingFee bind:customFee bind:recommendedFee />
+<ProcessingFee bind:method={feeMethod} bind:amount={feeAmount} />
 
 <Memo bind:memo bind:memoError />
 
 {#if loading}
-  <button class="btn btn-accent w-full" disabled={true}>
+  <Button type="accent" size="lg" class="w-full" disabled={true}>
     <LottiePlayer
       src="/lottie/loader.json"
       autoplay={true}
@@ -474,21 +470,24 @@
       height={26}
       width={26}
       controlsLayout={[]} />
-  </button>
+  </Button>
 {:else if !requiresAllowance}
-  <button
-    class="btn btn-accent w-full mt-4"
+  <Button
+    type="accent"
+    size="lg"
+    class="w-full"
     on:click={bridge}
     disabled={btnDisabled}>
     {$_('home.bridge')}
-  </button>
+  </Button>
 {:else}
-  <button
-    class="btn btn-accent approve-btn w-full mt-4"
+  <Button
+    type="accent"
+    class="w-full"
     on:click={approve}
     disabled={btnDisabled}>
     {$_('home.approve')}
-  </button>
+  </Button>
 {/if}
 
 <style>
diff --git a/packages/bridge-ui/src/components/form/Memo.svelte b/packages/bridge-ui/src/components/form/Memo.svelte
index 0e21be6519..5c0347a706 100644
--- a/packages/bridge-ui/src/components/form/Memo.svelte
+++ b/packages/bridge-ui/src/components/form/Memo.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import TooltipModal from '../modals/TooltipModal.svelte';
-  import Tooltip from '../Tooltip.svelte';
   import ButtonWithTooltip from '../ButtonWithTooltip.svelte';
 
   export let memo: string = '';
diff --git a/packages/bridge-ui/src/components/form/ProcessingFee.svelte b/packages/bridge-ui/src/components/form/ProcessingFee.svelte
deleted file mode 100644
index 37de24a0a9..0000000000
--- a/packages/bridge-ui/src/components/form/ProcessingFee.svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-<script lang="ts">
-  import { _ } from 'svelte-i18n';
-  import { processingFee } from '../../store/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 TooltipModal from '../modals/TooltipModal.svelte';
-  import ButtonWithTooltip from '../ButtonWithTooltip.svelte';
-  import { processingFees } from '../../fee/processingFees';
-
-  export let customFee: string;
-  export let recommendedFee: string = '0';
-
-  let tooltipOpen: boolean = false;
-
-  $: recommendProcessingFee(
-    $toChain,
-    $fromChain,
-    $processingFee,
-    $token,
-    $signer,
-  )
-    .then((fee) => (recommendedFee = fee))
-    .catch((e) => console.error(e));
-
-  function selectProcessingFee(fee) {
-    $processingFee = fee;
-  }
-
-  function updateAmount(e: any) {
-    customFee = (e.target.value as number).toString();
-  }
-</script>
-
-<div class="my-10">
-  <div class="flex flex-row justify-between">
-    <ButtonWithTooltip onClick={() => (tooltipOpen = true)}>
-      <span slot="buttonText">{$_('bridgeForm.processingFeeLabel')}</span>
-    </ButtonWithTooltip>
-  </div>
-
-  {#if $processingFee === ProcessingFeeMethod.CUSTOM}
-    <label class="mt-2 input-group relative">
-      <input
-        type="number"
-        step="0.01"
-        placeholder="0.01"
-        min="0"
-        on:input={updateAmount}
-        class="input input-primary bg-dark-2 border-dark-2 input-md md:input-lg w-full focus:ring-0 !rounded-r-none"
-        name="amount" />
-      <span class="!rounded-r-lg bg-dark-2">ETH</span>
-    </label>
-  {:else if $processingFee === ProcessingFeeMethod.RECOMMENDED}
-    <div class="flex flex-row">
-      <span class="mt-2 text-sm">{recommendedFee} ETH</span>
-    </div>
-  {/if}
-
-  <div class="flex mt-2 space-x-2">
-    {#each Array.from(processingFees) as fee}
-      <button
-        class="{$processingFee === fee[0]
-          ? 'border-accent hover:border-accent'
-          : ''} btn btn-md text-xs font-semibold md:w-32 dark:bg-dark-5"
-        on:click={() => selectProcessingFee(fee[0])}
-        >{fee[1].displayText}</button>
-    {/each}
-  </div>
-</div>
-
-<TooltipModal title="Processing Fees" bind:isOpen={tooltipOpen}>
-  <span slot="body">
-    <div class="text-left">
-      The amount you pay the relayer to process your bridge message on the
-      destination chain.
-      <br /><br />
-      <ul class="list-disc ml-4">
-        <li>
-          <strong>Recommended</strong>: The recommended fee is the lowest fee
-          that will get your transaction processed in a reasonable amount of
-          time.
-        </li>
-        <li>
-          <strong>Custom</strong>: You can set a custom fee for the relayer to
-          incentivize them to prioritize your request. A lower fee may result in
-          longer processing time.
-        </li>
-        <li>
-          <strong>None</strong>: You can select no fee if you want to come back
-          here and claim the bridged asset yourself.
-        </li>
-      </ul>
-    </div>
-  </span>
-</TooltipModal>
-
-<style>
-  /* hide number input arrows */
-  input[type='number']::-webkit-outer-spin-button,
-  input[type='number']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-    -moz-appearance: textfield !important;
-  }
-</style>
diff --git a/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
new file mode 100644
index 0000000000..3d3dded098
--- /dev/null
+++ b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+  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 ButtonWithTooltip from '../../ButtonWithTooltip.svelte';
+  import { processingFees } from '../../../fee/processingFees';
+  import GeneralTooltip from './ProcessingFeeTooltip.svelte';
+  import NoticeModal from '../../modals/NoticeModal.svelte';
+
+  export let method: ProcessingFeeMethod = ProcessingFeeMethod.RECOMMENDED;
+  export let amount: string = '0';
+
+  let showProcessingFeeTooltip: boolean = false;
+  let showNoneFeeTooltip: boolean = false;
+
+  $: recommendProcessingFee($toChain, $fromChain, method, $token, $signer)
+    .then((recommendedFee) => (amount = recommendedFee))
+    .catch((e) => console.error(e));
+
+  function updateAmount(event: Event) {
+    const target = event.target as HTMLInputElement;
+    amount = target.value.toString();
+  }
+
+  function focus(input: HTMLInputElement) {
+    input.select();
+  }
+
+  function selectFee(selectedMethod: ProcessingFeeMethod) {
+    return () => {
+      method = selectedMethod;
+      if (selectedMethod === ProcessingFeeMethod.NONE) {
+        showNoneFeeTooltip = true;
+      }
+    };
+  }
+</script>
+
+<div class="my-10">
+  <div class="flex flex-row justify-between">
+    <ButtonWithTooltip onClick={() => (showProcessingFeeTooltip = true)}>
+      <span slot="buttonText">{$_('bridgeForm.processingFeeLabel')}</span>
+    </ButtonWithTooltip>
+  </div>
+
+  <!-- 
+    TODO: how about showing recommended also in a readonly input
+          and when clicking on Custom it becomes editable?
+    
+    TODO: transition between options
+   -->
+  {#if method === ProcessingFeeMethod.CUSTOM}
+    <label class="mt-2 input-group relative">
+      <input
+        use:focus
+        type="number"
+        step="0.01"
+        placeholder="0.01"
+        min="0"
+        on:input={updateAmount}
+        class="input input-primary bg-dark-2 border-dark-2 input-md md:input-lg w-full focus:ring-0 !rounded-r-none"
+        name="amount" />
+      <span class="!rounded-r-lg bg-dark-2">ETH</span>
+    </label>
+  {:else if method === ProcessingFeeMethod.RECOMMENDED}
+    <div class="flex flex-row">
+      <span class="mt-2 text-sm">{amount} ETH</span>
+    </div>
+  {/if}
+
+  <div class="flex mt-2 space-x-2">
+    {#each Array.from(processingFees) as fee}
+      {@const [feeMethod, { displayText }] = fee}
+      {@const selected = method === feeMethod}
+
+      <button
+        class="{selected
+          ? 'border-accent hover:border-accent'
+          : ''} btn btn-md text-xs font-semibold md:w-32 dark:bg-dark-5"
+        on:click={selectFee(feeMethod)}>{displayText}</button>
+    {/each}
+  </div>
+</div>
+
+<GeneralTooltip bind:show={showProcessingFeeTooltip} />
+
+<NoticeModal bind:show={showNoneFeeTooltip} name="NoneFeeTooltip">
+  <!-- TODO: translations? -->
+  <div class="text-center">
+    Selecting <strong>None</strong> means that you'll require ETH on the receiving
+    chain in otder to claim the bridged token. Pleas, come back later to manually
+    claim.
+  </div>
+</NoticeModal>
+
+<style>
+  /* hide number input arrows */
+  input[type='number']::-webkit-outer-spin-button,
+  input[type='number']::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+    -moz-appearance: textfield !important;
+  }
+</style>
diff --git a/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFeeTooltip.svelte b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFeeTooltip.svelte
new file mode 100644
index 0000000000..4bac37572c
--- /dev/null
+++ b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFeeTooltip.svelte
@@ -0,0 +1,31 @@
+<script>
+  import TooltipModal from '../../modals/TooltipModal.svelte';
+
+  export let show = false;
+</script>
+
+<TooltipModal title="Processing Fees" bind:isOpen={show}>
+  <span slot="body">
+    <div class="text-left">
+      The amount you pay the relayer to process your bridge message on the
+      destination chain.
+      <br /><br />
+      <ul class="list-disc ml-4">
+        <li>
+          <strong>Recommended</strong>: The recommended fee is the lowest fee
+          that will get your transaction processed in a reasonable amount of
+          time.
+        </li>
+        <li>
+          <strong>Custom</strong>: You can set a custom fee for the relayer to
+          incentivize them to prioritize your request. A lower fee may result in
+          longer processing time.
+        </li>
+        <li>
+          <strong>None</strong>: You can select no fee if you want to come back
+          here and claim the bridged asset yourself.
+        </li>
+      </ul>
+    </div>
+  </span>
+</TooltipModal>
diff --git a/packages/bridge-ui/src/components/form/ProcessingFee/index.ts b/packages/bridge-ui/src/components/form/ProcessingFee/index.ts
new file mode 100644
index 0000000000..645d7e0506
--- /dev/null
+++ b/packages/bridge-ui/src/components/form/ProcessingFee/index.ts
@@ -0,0 +1 @@
+export { default } from './ProcessingFee.svelte';
diff --git a/packages/bridge-ui/src/components/modals/Modal.svelte b/packages/bridge-ui/src/components/modals/Modal.svelte
index cf82cfaf6b..3e618fc827 100644
--- a/packages/bridge-ui/src/components/modals/Modal.svelte
+++ b/packages/bridge-ui/src/components/modals/Modal.svelte
@@ -1,23 +1,22 @@
 <script lang="ts">
   export let title: string = null;
   export let isOpen: boolean = false;
-  export let onClose: () => void = null;
   export let showXButton: boolean = true;
+  export let onClose: () => void = null;
 
   const onCloseClicked = () => {
     isOpen = false;
-    if (onClose) {
-      onClose();
-    }
+    onClose?.();
   };
-</script>
 
-<svelte:window
-  on:keydown={function (e) {
+  const onWindowKeydownPressed = (e) => {
     if (e.key === 'Escape') {
       onCloseClicked();
     }
-  }} />
+  };
+</script>
+
+<svelte:window on:keydown={onWindowKeydownPressed} />
 
 <div class="modal bg-black/60" class:modal-open={isOpen}>
   <div class="modal-box bg-dark-2">
diff --git a/packages/bridge-ui/src/components/modals/NoticeModal.svelte b/packages/bridge-ui/src/components/modals/NoticeModal.svelte
new file mode 100644
index 0000000000..65b15e4482
--- /dev/null
+++ b/packages/bridge-ui/src/components/modals/NoticeModal.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { localStoragePrefix } from '../../config';
+  import Button from '../buttons/Button.svelte';
+  import Modal from './Modal.svelte';
+
+  export let show = false;
+  export let name = 'NoticeModal';
+  export let title = 'Notice';
+  export let onConfirm: (noShowAgain: boolean) => void = null;
+
+  let noShowAgainLocalStorageKey = `${localStoragePrefix}_${name}_noShowAgain`;
+  let noShowAgainStorage = false;
+  let noShowAgainCheckbox = false;
+
+  onMount(() => {
+    // Has the user opted out of seeing this message?
+    noShowAgainStorage = Boolean(
+      localStorage.getItem(noShowAgainLocalStorageKey),
+    );
+    noShowAgainCheckbox = noShowAgainStorage;
+  });
+
+  function onConfirmNotice() {
+    if (noShowAgainCheckbox) {
+      // If checkbox is checked, store it in localStorage so
+      // the user doesn't see the message again.
+      localStorage.setItem(noShowAgainLocalStorageKey, 'true');
+      noShowAgainStorage = true;
+    }
+
+    show = false;
+
+    onConfirm?.(noShowAgainCheckbox);
+  }
+</script>
+
+<!-- 
+  TODO: we might want noShowAgainStorage to be dynamic, otherwise
+        the user will have to refresh the page to see the message again
+        if they delete the localStorage entry.
+-->
+<Modal {title} isOpen={show && !noShowAgainStorage} showXButton={false}>
+  <div
+    class="
+      flex
+      w-full
+      flex-col
+      justify-between
+      space-y-6
+    ">
+    <slot />
+
+    <div class="text-left flex items-center">
+      <input
+        style:border-radius="0.5rem"
+        type="checkbox"
+        id="noShowAgain_{name}"
+        bind:checked={noShowAgainCheckbox}
+        class="checkbox checkbox-secundary mr-2" />
+      <label for="noShowAgain_{name}">Do not show this message again</label>
+    </div>
+
+    <div class="flex justify-center">
+      <Button type="accent" on:click={onConfirmNotice}>Confirm</Button>
+    </div>
+  </div>
+</Modal>
diff --git a/packages/bridge-ui/src/config.ts b/packages/bridge-ui/src/config.ts
new file mode 100644
index 0000000000..f0b417feb5
--- /dev/null
+++ b/packages/bridge-ui/src/config.ts
@@ -0,0 +1,3 @@
+export const localStoragePrefix = 'bridge-ui';
+
+// Add more configuration items here
diff --git a/packages/bridge-ui/src/domain/bridge.ts b/packages/bridge-ui/src/domain/bridge.ts
index 9f467c22c2..2a69bd1b12 100644
--- a/packages/bridge-ui/src/domain/bridge.ts
+++ b/packages/bridge-ui/src/domain/bridge.ts
@@ -1,4 +1,5 @@
 import type { BigNumber, ethers, Transaction } from 'ethers';
+import type { ChainID } from './chain';
 import type { Message } from './message';
 
 export enum BridgeType {
@@ -19,8 +20,8 @@ export type BridgeOpts = {
   amountInWei: BigNumber;
   signer: ethers.Signer;
   tokenAddress: string;
-  fromChainId: number;
-  toChainId: number;
+  fromChainId: ChainID;
+  toChainId: ChainID;
   tokenVaultAddress?: string;
   bridgeAddress?: string;
   processingFeeInWei?: BigNumber;
diff --git a/packages/bridge-ui/src/domain/button.ts b/packages/bridge-ui/src/domain/button.ts
new file mode 100644
index 0000000000..3d9456c372
--- /dev/null
+++ b/packages/bridge-ui/src/domain/button.ts
@@ -0,0 +1,5 @@
+// TODO: still to figure out after design
+
+export type TypeButton = 'primary' | 'secondary' | 'accent' | ''; // TODO: daisyUI?
+
+export type SizeButton = 'sm' | 'md' | 'lg';
diff --git a/packages/bridge-ui/src/domain/fee.ts b/packages/bridge-ui/src/domain/fee.ts
index d27615c0b1..c68f0d0b0b 100644
--- a/packages/bridge-ui/src/domain/fee.ts
+++ b/packages/bridge-ui/src/domain/fee.ts
@@ -5,6 +5,7 @@ export enum ProcessingFeeMethod {
 }
 
 export interface ProcessingFeeDetails {
+  method: ProcessingFeeMethod;
   displayText: string;
   timeToConfirm: number;
 }
diff --git a/packages/bridge-ui/src/domain/message.ts b/packages/bridge-ui/src/domain/message.ts
index 2d01befb0c..fb50ca74a1 100644
--- a/packages/bridge-ui/src/domain/message.ts
+++ b/packages/bridge-ui/src/domain/message.ts
@@ -1,4 +1,5 @@
 import type { BigNumber } from 'ethers';
+import type { ChainID } from './chain';
 
 export enum MessageStatus {
   New,
@@ -12,8 +13,8 @@ export enum MessageStatus {
 export type Message = {
   id: number;
   sender: string;
-  srcChainId: BigNumber;
-  destChainId: BigNumber;
+  srcChainId: ChainID;
+  destChainId: ChainID;
   owner: string;
   to: string;
   refundAddress: string;
diff --git a/packages/bridge-ui/src/domain/relayerApi.ts b/packages/bridge-ui/src/domain/relayerApi.ts
index e323d67069..a7e64c35f0 100644
--- a/packages/bridge-ui/src/domain/relayerApi.ts
+++ b/packages/bridge-ui/src/domain/relayerApi.ts
@@ -1,3 +1,4 @@
+import type { Address, ChainID } from './chain';
 import type { BridgeTransaction } from './transactions';
 
 export interface RelayerAPI {
@@ -9,12 +10,31 @@ export interface RelayerAPI {
   getBlockInfo(): Promise<Map<number, RelayerBlockInfo>>;
 }
 
+export type TransactionData = {
+  Message: {
+    Id: number;
+    SrcChainId: ChainID;
+    DestChainId: ChainID;
+    To: string;
+    Memo: string;
+    Owner: Address;
+    Sender: Address;
+    GasLimit: number;
+    CallValue: number;
+    DepositValue: number;
+    ProcessingFee: number;
+    RefundAddress: Address;
+    Data: string;
+  };
+  Raw: {
+    transactionHash: string;
+  };
+};
+
 export type APIResponseTransaction = {
   id: number;
   name: string;
-  data: {
-    [key: string]: any;
-  };
+  data: TransactionData;
   status: number;
   eventType: number;
   chainID: number;
diff --git a/packages/bridge-ui/src/domain/transactions.ts b/packages/bridge-ui/src/domain/transactions.ts
index 6ea4aa3bc7..45ed00ebce 100644
--- a/packages/bridge-ui/src/domain/transactions.ts
+++ b/packages/bridge-ui/src/domain/transactions.ts
@@ -1,4 +1,5 @@
 import type { BigNumber, ethers } from 'ethers';
+import type { ChainID } from './chain';
 import type { Message, MessageStatus } from './message';
 
 export type BridgeTransaction = {
@@ -11,8 +12,8 @@ export type BridgeTransaction = {
   interval?: NodeJS.Timer;
   amountInWei?: BigNumber;
   symbol?: string;
-  fromChainId: number;
-  toChainId: number;
+  fromChainId: ChainID;
+  toChainId: ChainID;
 };
 
 export interface Transactioner {
diff --git a/packages/bridge-ui/src/fee/processingFees.ts b/packages/bridge-ui/src/fee/processingFees.ts
index 1991718a29..d61b17dd3f 100644
--- a/packages/bridge-ui/src/fee/processingFees.ts
+++ b/packages/bridge-ui/src/fee/processingFees.ts
@@ -6,6 +6,7 @@ export const processingFees: Map<ProcessingFeeMethod, ProcessingFeeDetails> =
     [
       ProcessingFeeMethod.RECOMMENDED,
       {
+        method: ProcessingFeeMethod.RECOMMENDED,
         displayText: 'Recommended',
         timeToConfirm: 15 * 60 * 1000,
       },
@@ -13,6 +14,7 @@ export const processingFees: Map<ProcessingFeeMethod, ProcessingFeeDetails> =
     [
       ProcessingFeeMethod.CUSTOM,
       {
+        method: ProcessingFeeMethod.CUSTOM,
         displayText: 'Custom',
         timeToConfirm: 15 * 60 * 1000,
       },
@@ -20,6 +22,7 @@ export const processingFees: Map<ProcessingFeeMethod, ProcessingFeeDetails> =
     [
       ProcessingFeeMethod.NONE,
       {
+        method: ProcessingFeeMethod.NONE,
         displayText: 'None',
         timeToConfirm: 15 * 60 * 1000,
       },
diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
index b4d1903f9d..744b102884 100644
--- a/packages/bridge-ui/src/pages/home/Home.svelte
+++ b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { _ } from 'svelte-i18n';
   import { location } from 'svelte-spa-router';
   import { transactions } from '../../store/transactions';
   import BridgeForm from '../../components/form/BridgeForm.svelte';
   import TaikoBanner from '../../components/TaikoBanner.svelte';
-  import Transactions from '../../components/Transactions.svelte';
+  import Transactions from '../../components/Transactions';
   import { Tabs, TabList, Tab, TabPanel } from '../../components/Tabs';
 
   let bridgeWidth: number;
diff --git a/packages/bridge-ui/src/relayer-api/RelayerAPIService.ts b/packages/bridge-ui/src/relayer-api/RelayerAPIService.ts
index 3430bd62cf..0acbe50135 100644
--- a/packages/bridge-ui/src/relayer-api/RelayerAPIService.ts
+++ b/packages/bridge-ui/src/relayer-api/RelayerAPIService.ts
@@ -94,9 +94,9 @@ export class RelayerAPIService implements RelayerAPI {
           owner: tx.data.Message.Owner,
           sender: tx.data.Message.Sender,
           gasLimit: BigNumber.from(tx.data.Message.GasLimit),
-          callValue: tx.data.Message.CallValue,
-          srcChainId: BigNumber.from(tx.data.Message.SrcChainId),
-          destChainId: BigNumber.from(tx.data.Message.DestChainId),
+          callValue: BigNumber.from(tx.data.Message.CallValue),
+          srcChainId: tx.data.Message.SrcChainId,
+          destChainId: tx.data.Message.DestChainId,
           depositValue: BigNumber.from(`${tx.data.Message.DepositValue}`),
           processingFee: BigNumber.from(`${tx.data.Message.ProcessingFee}`),
           refundAddress: tx.data.Message.RefundAddress,
diff --git a/packages/bridge-ui/src/storage/StorageService.spec.ts b/packages/bridge-ui/src/storage/StorageService.spec.ts
index d6252abd0d..d9e5e799ee 100644
--- a/packages/bridge-ui/src/storage/StorageService.spec.ts
+++ b/packages/bridge-ui/src/storage/StorageService.spec.ts
@@ -96,7 +96,7 @@ describe('storage tests', () => {
 
     const svc = new StorageService(mockStorage as any, providers);
 
-    const addresses = await svc.getAllByAddress('0x123', L2_CHAIN_ID);
+    const addresses = await svc.getAllByAddress('0x123');
 
     expect(addresses).toEqual([]);
   });
@@ -120,7 +120,7 @@ describe('storage tests', () => {
 
     const svc = new StorageService(mockStorage as any, providers);
 
-    const addresses = await svc.getAllByAddress('0x123', L1_CHAIN_ID);
+    const addresses = await svc.getAllByAddress('0x123');
 
     expect(addresses).toEqual([
       {
@@ -156,7 +156,7 @@ describe('storage tests', () => {
 
     const svc = new StorageService(mockStorage as any, providers);
 
-    const addresses = await svc.getAllByAddress('0x123', L1_CHAIN_ID);
+    const addresses = await svc.getAllByAddress('0x123');
 
     expect(addresses).toEqual([
       {
@@ -201,7 +201,7 @@ describe('storage tests', () => {
 
     const svc = new StorageService(mockStorage as any, providers);
 
-    const addresses = await svc.getAllByAddress('0x123', L1_CHAIN_ID);
+    const addresses = await svc.getAllByAddress('0x123');
 
     expect(addresses).toEqual([
       {
@@ -253,7 +253,7 @@ describe('storage tests', () => {
 
     const svc = new StorageService(mockStorage as any, providers);
 
-    const addresses = await svc.getAllByAddress('0x123', L2_CHAIN_ID);
+    const addresses = await svc.getAllByAddress('0x123');
 
     expect(addresses).toEqual([
       {
diff --git a/packages/bridge-ui/src/storage/StorageService.ts b/packages/bridge-ui/src/storage/StorageService.ts
index f632b61a7a..855699b5a6 100644
--- a/packages/bridge-ui/src/storage/StorageService.ts
+++ b/packages/bridge-ui/src/storage/StorageService.ts
@@ -23,10 +23,7 @@ export class StorageService implements Transactioner {
     this.providers = providers;
   }
 
-  async getAllByAddress(
-    address: string,
-    chainID?: number,
-  ): Promise<BridgeTransaction[]> {
+  async getAllByAddress(address: string): Promise<BridgeTransaction[]> {
     const txs: BridgeTransaction[] = JSON.parse(
       this.storage.getItem(`transactions-${address.toLowerCase()}`),
     );
diff --git a/packages/bridge-ui/src/store/fee.ts b/packages/bridge-ui/src/store/fee.ts
deleted file mode 100644
index 21d5a41bad..0000000000
--- a/packages/bridge-ui/src/store/fee.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { writable } from 'svelte/store';
-import { ProcessingFeeMethod } from '../domain/fee';
-
-export const processingFee = writable<ProcessingFeeMethod>(
-  ProcessingFeeMethod.RECOMMENDED,
-);
diff --git a/packages/bridge-ui/src/store/userToken.ts b/packages/bridge-ui/src/store/userToken.ts
index c415a14d01..e4556e7d7a 100644
--- a/packages/bridge-ui/src/store/userToken.ts
+++ b/packages/bridge-ui/src/store/userToken.ts
@@ -1,4 +1,4 @@
-import type { Token, TokenService } from 'src/domain/token';
+import type { Token, TokenService } from '../domain/token';
 import { writable } from 'svelte/store';
 
 const tokenService = writable<TokenService>();
diff --git a/packages/bridge-ui/src/utils/switchChainAndSetSigner.ts b/packages/bridge-ui/src/utils/switchChainAndSetSigner.ts
new file mode 100644
index 0000000000..11ec149070
--- /dev/null
+++ b/packages/bridge-ui/src/utils/switchChainAndSetSigner.ts
@@ -0,0 +1,26 @@
+import { fetchSigner, switchNetwork } from '@wagmi/core';
+import { ethers } from 'ethers';
+import { fromChain, toChain } from '../store/chain';
+import type { Chain } from '../domain/chain';
+import { mainnetChain, taikoChain } from '../chain/chains';
+import { signer } from '../store/signer';
+
+export async function switchChainAndSetSigner(chain: Chain) {
+  const chainId = chain.id;
+
+  await switchNetwork({ chainId });
+
+  const provider = new ethers.providers.Web3Provider(globalThis.ethereum);
+  await provider.send('eth_requestAccounts', []);
+
+  fromChain.set(chain);
+  if (chain.id === mainnetChain.id) {
+    toChain.set(taikoChain);
+  } else {
+    toChain.set(mainnetChain);
+  }
+
+  const wagmiSigner = await fetchSigner({ chainId });
+
+  signer.set(wagmiSigner);
+}
diff --git a/packages/bridge-ui/tailwind.config.cjs b/packages/bridge-ui/tailwind.config.cjs
index 548e97c5ef..b365f4b829 100644
--- a/packages/bridge-ui/tailwind.config.cjs
+++ b/packages/bridge-ui/tailwind.config.cjs
@@ -28,7 +28,6 @@ module.exports = {
   },
   daisyui: {
     styled: true,
-    themes: true,
     base: true,
     utils: true,
     logs: true,