From dfe1e6d692a51e81b02d51e0e395be9acc75b122 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 28 Mar 2023 11:04:40 +0200
Subject: [PATCH 01/24] ProcessingFee refactoring

---
 .../src/components/form/BridgeForm.svelte     |  23 ++--
 .../src/components/form/ProcessingFee.svelte  | 108 ------------------
 .../form/ProcessingFee/NoneFeeTooltip.svelte  |  52 +++++++++
 .../form/ProcessingFee/ProcessingFee.svelte   | 100 ++++++++++++++++
 .../ProcessingFee/ProcessingFeeTooltip.svelte |  31 +++++
 .../components/form/ProcessingFee/index.ts    |   1 +
 packages/bridge-ui/src/config.ts              |   3 +
 packages/bridge-ui/src/domain/fee.ts          |   1 +
 packages/bridge-ui/src/fee/processingFees.ts  |   3 +
 9 files changed, 200 insertions(+), 122 deletions(-)
 delete mode 100644 packages/bridge-ui/src/components/form/ProcessingFee.svelte
 create mode 100644 packages/bridge-ui/src/components/form/ProcessingFee/NoneFeeTooltip.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/config.ts

diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte
index 256ebd02baf..49a9e0613ab 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,21 @@
   import { providers } from '../../provider/providers';
   import { tokenVaults } from '../../vault/tokenVaults';
   import { isOnCorrectChain } from '../../utils/isOnCorrectChain';
+  import { ProcessingFeeMethod } from '../../domain/fee';
 
   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 +332,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 +363,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,7 +453,7 @@
 
 <To bind:showTo bind:to />
 
-<ProcessingFee bind:customFee bind:recommendedFee />
+<ProcessingFee bind:method={feeMethod} bind:amount={feeAmount} />
 
 <Memo bind:memo bind:memoError />
 
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 37de24a0a90..00000000000
--- 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/NoneFeeTooltip.svelte b/packages/bridge-ui/src/components/form/ProcessingFee/NoneFeeTooltip.svelte
new file mode 100644
index 00000000000..89fb4f0f448
--- /dev/null
+++ b/packages/bridge-ui/src/components/form/ProcessingFee/NoneFeeTooltip.svelte
@@ -0,0 +1,52 @@
+<script>
+  import { localStoragePrefix } from '../../../config';
+  import TooltipModal from '../../modals/TooltipModal.svelte';
+
+  export let show = false;
+
+  let noShowAgainLocalStorageKey = `${localStoragePrefix}_NoneFeeTooltip_noShowAgain`;
+  let noShowAgain = Boolean(localStorage.getItem(noShowAgainLocalStorageKey));
+
+  function onConfirmNotice() {
+    if (noShowAgain) {
+      localStorage.setItem(noShowAgainLocalStorageKey, 'true');
+    }
+    show = false;
+  }
+</script>
+
+<TooltipModal title="Notice" isOpen={show}>
+  <div slot="body" class="space-y-6">
+    <!-- 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>
+
+    <div class="text-left flex items-center">
+      <input
+        style:border-radius="0.5rem"
+        type="checkbox"
+        id="noShowAgain"
+        bind:checked={noShowAgain}
+        class="checkbox checkbox-secundary mr-2" />
+      <label for="noShowAgain">Do not show this message again</label>
+    </div>
+
+    <div class="flex justify-center">
+      <button
+        class="confirm btn btn-accent btn-md btn-wide"
+        on:click={onConfirmNotice}>
+        Confirm
+      </button>
+    </div>
+  </div>
+</TooltipModal>
+
+<style>
+  .confirm {
+    /* TODO: design needed for buttons */
+    height: 54px;
+  }
+</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 00000000000..1ac69ac1983
--- /dev/null
+++ b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
@@ -0,0 +1,100 @@
+<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 ButtonWithTooltip from '../../ButtonWithTooltip.svelte';
+  import { processingFees } from '../../../fee/processingFees';
+  import GeneralTooltip from './ProcessingFeeTooltip.svelte';
+  import NoneFeeTooltip from './NoneFeeTooltip.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} />
+<NoneFeeTooltip bind:show={showNoneFeeTooltip} />
+
+<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 00000000000..4bac37572cd
--- /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 00000000000..645d7e05066
--- /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/config.ts b/packages/bridge-ui/src/config.ts
new file mode 100644
index 00000000000..f0b417feb5d
--- /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/fee.ts b/packages/bridge-ui/src/domain/fee.ts
index d27615c0b17..c68f0d0b0b1 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/fee/processingFees.ts b/packages/bridge-ui/src/fee/processingFees.ts
index 1991718a298..d61b17dd3f2 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,
       },

From fa5a5041502d0f159b0846c123a498a9f48adb92 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 28 Mar 2023 11:25:13 +0200
Subject: [PATCH 02/24] Store value in localStorage

---
 .../form/ProcessingFee/NoneFeeTooltip.svelte  | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/bridge-ui/src/components/form/ProcessingFee/NoneFeeTooltip.svelte b/packages/bridge-ui/src/components/form/ProcessingFee/NoneFeeTooltip.svelte
index 89fb4f0f448..c57c348d76c 100644
--- a/packages/bridge-ui/src/components/form/ProcessingFee/NoneFeeTooltip.svelte
+++ b/packages/bridge-ui/src/components/form/ProcessingFee/NoneFeeTooltip.svelte
@@ -1,21 +1,40 @@
 <script>
+  import { onMount } from 'svelte';
   import { localStoragePrefix } from '../../../config';
   import TooltipModal from '../../modals/TooltipModal.svelte';
 
   export let show = false;
 
   let noShowAgainLocalStorageKey = `${localStoragePrefix}_NoneFeeTooltip_noShowAgain`;
-  let noShowAgain = Boolean(localStorage.getItem(noShowAgainLocalStorageKey));
+  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 (noShowAgain) {
+    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;
   }
 </script>
 
-<TooltipModal title="Notice" isOpen={show}>
+<!-- 
+  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.
+-->
+<TooltipModal title="Notice" isOpen={show && !noShowAgainStorage}>
   <div slot="body" class="space-y-6">
     <!-- TODO: translations? -->
     <div class="text-center">
@@ -29,7 +48,7 @@
         style:border-radius="0.5rem"
         type="checkbox"
         id="noShowAgain"
-        bind:checked={noShowAgain}
+        bind:checked={noShowAgainCheckbox}
         class="checkbox checkbox-secundary mr-2" />
       <label for="noShowAgain">Do not show this message again</label>
     </div>

From 764b0089bb9f0581c46d8bda9530e725ab5241fa Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 28 Mar 2023 11:52:47 +0200
Subject: [PATCH 03/24] Fix storing opt-in/out

---
 .../src/components/form/ProcessingFee/ProcessingFee.svelte  | 1 -
 packages/bridge-ui/src/store/fee.ts                         | 6 ------
 2 files changed, 7 deletions(-)
 delete mode 100644 packages/bridge-ui/src/store/fee.ts

diff --git a/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
index 1ac69ac1983..3572c381b68 100644
--- a/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
+++ b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
@@ -1,6 +1,5 @@
 <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';
diff --git a/packages/bridge-ui/src/store/fee.ts b/packages/bridge-ui/src/store/fee.ts
deleted file mode 100644
index 21d5a41bad0..00000000000
--- 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,
-);

From a429c5eaada65a0b39af61779c9808176a7d7134 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 28 Mar 2023 14:30:03 +0200
Subject: [PATCH 04/24] Add Button component

---
 packages/bridge-ui/src/app.css                |  1 -
 .../InsufficientBalanceTooltip.svelte         |  2 +-
 .../MessageStatusTooltip.svelte               |  2 +-
 .../{ => Transactions}/Transaction.svelte     | 62 ++++++++++---------
 .../TransactionDetail.svelte                  |  9 ++-
 .../{ => Transactions}/Transactions.svelte    |  6 +-
 .../src/components/Transactions/index.ts      |  1 +
 .../src/components/buttons/Button.svelte      | 27 ++++++++
 .../src/components/form/BridgeForm.svelte     | 20 +++---
 packages/bridge-ui/src/domain/button.ts       |  5 ++
 packages/bridge-ui/src/pages/home/Home.svelte |  2 +-
 packages/bridge-ui/tailwind.config.cjs        |  1 -
 12 files changed, 88 insertions(+), 50 deletions(-)
 rename packages/bridge-ui/src/components/{ => Transactions}/InsufficientBalanceTooltip.svelte (86%)
 rename packages/bridge-ui/src/components/{ => Transactions}/MessageStatusTooltip.svelte (96%)
 rename packages/bridge-ui/src/components/{ => Transactions}/Transaction.svelte (87%)
 rename packages/bridge-ui/src/components/{ => Transactions}/TransactionDetail.svelte (89%)
 rename packages/bridge-ui/src/components/{ => Transactions}/Transactions.svelte (90%)
 create mode 100644 packages/bridge-ui/src/components/Transactions/index.ts
 create mode 100644 packages/bridge-ui/src/components/buttons/Button.svelte
 create mode 100644 packages/bridge-ui/src/domain/button.ts

diff --git a/packages/bridge-ui/src/app.css b/packages/bridge-ui/src/app.css
index f1e9de666cd..fba7e9c29ed 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/components/InsufficientBalanceTooltip.svelte b/packages/bridge-ui/src/components/Transactions/InsufficientBalanceTooltip.svelte
similarity index 86%
rename from packages/bridge-ui/src/components/InsufficientBalanceTooltip.svelte
rename to packages/bridge-ui/src/components/Transactions/InsufficientBalanceTooltip.svelte
index 3697b54bf38..fcfbd76802d 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 96%
rename from packages/bridge-ui/src/components/MessageStatusTooltip.svelte
rename to packages/bridge-ui/src/components/Transactions/MessageStatusTooltip.svelte
index 4100d4f8a9a..de91ff7d7bf 100644
--- a/packages/bridge-ui/src/components/MessageStatusTooltip.svelte
+++ b/packages/bridge-ui/src/components/Transactions/MessageStatusTooltip.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/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
similarity index 87%
rename from packages/bridge-ui/src/components/Transaction.svelte
rename to packages/bridge-ui/src/components/Transactions/Transaction.svelte
index 749cfc1ab5c..368822cc192 100644
--- a/packages/bridge-ui/src/components/Transaction.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
@@ -1,31 +1,32 @@
 <script lang="ts">
-  import type { BridgeTransaction } from '../domain/transactions';
-  import type { Chain } from '../domain/chain';
+  import type { BridgeTransaction } from '../../domain/transactions';
+  import type { Chain } from '../../domain/chain';
   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';
+  } 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 { 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 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 Button from '../buttons/Button.svelte';
 
   export let transaction: BridgeTransaction;
   export let fromChain: Chain;
@@ -256,9 +257,7 @@
   <td>
     <ButtonWithTooltip onClick={() => onTooltipClick(false)}>
       <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 +273,34 @@
               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"
+          <Button
+            type="accent"
+            size="sm"
             on:click={async () => await claim(transaction)}
             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"
+          <Button
+            type="accent"
+            size="sm"
             on:click={async () => await claim(transaction)}>
             Retry
-          </button>
+          </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}
+          <span class="border border-transparent p-0">Failed</span>
         {/if}
       </span>
     </ButtonWithTooltip>
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 e5f3868acc5..d3a9f88246f 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.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
similarity index 90%
rename from packages/bridge-ui/src/components/Transactions.svelte
rename to packages/bridge-ui/src/components/Transactions/Transactions.svelte
index 67bd281025a..b7c39867b3a 100644
--- a/packages/bridge-ui/src/components/Transactions.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { transactions } from '../store/transactions';
+  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';
+  import type { BridgeTransaction } from '../../domain/transactions';
+  import { chains } from '../../chain/chains';
 
   let selectedTransaction: BridgeTransaction;
   let showMessageStatusTooltip: boolean;
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 00000000000..5c914036b27
--- /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 00000000000..f3151f0adfb
--- /dev/null
+++ b/packages/bridge-ui/src/components/buttons/Button.svelte
@@ -0,0 +1,27 @@
+<!--
+  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}`} ${
+    $$restProps.class ?? ''
+  }`;
+
+  const { class: _, ...restProps } = $$restProps; // remove class from rest of props
+</script>
+
+<!--
+  TODO: theme daisyUI and then use btn-${type}
+-->
+<button class={classes} {...restProps}>
+  <slot />
+</button>
+
+<style>
+  /* TODO: design needed. We're using daisyUI, how about theming? */
+</style>
diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte
index 49a9e0613ab..a485da08382 100644
--- a/packages/bridge-ui/src/components/form/BridgeForm.svelte
+++ b/packages/bridge-ui/src/components/form/BridgeForm.svelte
@@ -38,6 +38,7 @@
   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;
@@ -458,7 +459,7 @@
 <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}
@@ -469,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/domain/button.ts b/packages/bridge-ui/src/domain/button.ts
new file mode 100644
index 00000000000..4e4d965db4c
--- /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' | 'secundary' | 'accent' | ''; // TODO: daisyUI?
+
+export type SizeButton = 'sm' | 'md' | 'lg';
diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
index b4d1903f9d3..a4b3cabd056 100644
--- a/packages/bridge-ui/src/pages/home/Home.svelte
+++ b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -4,7 +4,7 @@
   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/tailwind.config.cjs b/packages/bridge-ui/tailwind.config.cjs
index 548e97c5efc..b365f4b8297 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,

From 2f79c3b7dd95c3f0cdcff3c6e358d06462e20a02 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 28 Mar 2023 15:08:45 +0200
Subject: [PATCH 05/24] Minor change

---
 .../src/components/buttons/Button.svelte         | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/bridge-ui/src/components/buttons/Button.svelte b/packages/bridge-ui/src/components/buttons/Button.svelte
index f3151f0adfb..f9dfb04ed54 100644
--- a/packages/bridge-ui/src/components/buttons/Button.svelte
+++ b/packages/bridge-ui/src/components/buttons/Button.svelte
@@ -7,21 +7,11 @@
 
   export let type: TypeButton = '';
   export let size: SizeButton = 'md';
+  export let disabled = false;
 
-  const classes = `btn ${`btn-${type}`} ${`btn-${size}`} ${
-    $$restProps.class ?? ''
-  }`;
-
-  const { class: _, ...restProps } = $$restProps; // remove class from rest of props
+  const classes = `btn ${`btn-${type}`} ${`btn-${size}`} ${$$props.class}`;
 </script>
 
-<!--
-  TODO: theme daisyUI and then use btn-${type}
--->
-<button class={classes} {...restProps}>
+<button {...$$restProps} class={classes} {disabled}>
   <slot />
 </button>
-
-<style>
-  /* TODO: design needed. We're using daisyUI, how about theming? */
-</style>

From 957d587fe269c69f6515fc6898c3e0c46d150d5d Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 28 Mar 2023 16:01:02 +0200
Subject: [PATCH 06/24] wip

---
 .../Transactions/MessageStatusTooltip.svelte      | 12 ++++--------
 .../src/components/buttons/Button.svelte          |  3 +--
 .../form/ProcessingFee/NoneFeeTooltip.svelte      |  5 ++++-
 .../bridge-ui/src/components/modals/Modal.svelte  | 15 +++++++--------
 .../src/components/modals/TooltipModal.svelte     |  3 ++-
 5 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/packages/bridge-ui/src/components/Transactions/MessageStatusTooltip.svelte b/packages/bridge-ui/src/components/Transactions/MessageStatusTooltip.svelte
index de91ff7d7bf..94377dbde9d 100644
--- a/packages/bridge-ui/src/components/Transactions/MessageStatusTooltip.svelte
+++ b/packages/bridge-ui/src/components/Transactions/MessageStatusTooltip.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { L1_CHAIN_NAME, L2_CHAIN_NAME } from '../../constants/envVars';
   import TooltipModal from '../modals/TooltipModal.svelte';
 
   export let show: boolean;
@@ -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 => {L1_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>Claimable</strong>: Your asset is ready to be claimed on the
diff --git a/packages/bridge-ui/src/components/buttons/Button.svelte b/packages/bridge-ui/src/components/buttons/Button.svelte
index f9dfb04ed54..5c994c9d590 100644
--- a/packages/bridge-ui/src/components/buttons/Button.svelte
+++ b/packages/bridge-ui/src/components/buttons/Button.svelte
@@ -7,11 +7,10 @@
 
   export let type: TypeButton = '';
   export let size: SizeButton = 'md';
-  export let disabled = false;
 
   const classes = `btn ${`btn-${type}`} ${`btn-${size}`} ${$$props.class}`;
 </script>
 
-<button {...$$restProps} class={classes} {disabled}>
+<button {...$$restProps} on:click class={classes}>
   <slot />
 </button>
diff --git a/packages/bridge-ui/src/components/form/ProcessingFee/NoneFeeTooltip.svelte b/packages/bridge-ui/src/components/form/ProcessingFee/NoneFeeTooltip.svelte
index c57c348d76c..1a159ba0fe4 100644
--- a/packages/bridge-ui/src/components/form/ProcessingFee/NoneFeeTooltip.svelte
+++ b/packages/bridge-ui/src/components/form/ProcessingFee/NoneFeeTooltip.svelte
@@ -34,7 +34,10 @@
         the user will have to refresh the page to see the message again
         if they delete the localStorage entry.
 -->
-<TooltipModal title="Notice" isOpen={show && !noShowAgainStorage}>
+<TooltipModal
+  title="Notice"
+  isOpen={show && !noShowAgainStorage}
+  showXButton={false}>
   <div slot="body" class="space-y-6">
     <!-- TODO: translations? -->
     <div class="text-center">
diff --git a/packages/bridge-ui/src/components/modals/Modal.svelte b/packages/bridge-ui/src/components/modals/Modal.svelte
index cf82cfaf6b7..3e618fc827b 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/TooltipModal.svelte b/packages/bridge-ui/src/components/modals/TooltipModal.svelte
index 29b9f8e7747..c7cadbe0ffe 100644
--- a/packages/bridge-ui/src/components/modals/TooltipModal.svelte
+++ b/packages/bridge-ui/src/components/modals/TooltipModal.svelte
@@ -3,9 +3,10 @@
 
   export let title: string;
   export let isOpen: boolean = false;
+  export let showXButton: boolean = true;
 </script>
 
-<Modal {title} bind:isOpen>
+<Modal {title} bind:isOpen {showXButton}>
   <div class="flex h-full min-h-tooltip-modal w-full flex-col justify-between">
     <div class="tip-body mb-4 flex-auto">
       <slot name="body" />

From 1345e676d461ba1772be90e9f40db22cd5d2e7b2 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 28 Mar 2023 17:00:26 +0200
Subject: [PATCH 07/24] Transaction refactoring

---
 .../Transactions/Transaction.svelte           | 67 ++++++++-----------
 .../Transactions/Transactions.svelte          | 13 +---
 .../src/utils/switchChainAndSetSigner.ts      | 23 +++++++
 3 files changed, 55 insertions(+), 48 deletions(-)
 create mode 100644 packages/bridge-ui/src/utils/switchChainAndSetSigner.ts

diff --git a/packages/bridge-ui/src/components/Transactions/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
index 368822cc192..2fcd795e4ff 100644
--- a/packages/bridge-ui/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
   import type { BridgeTransaction } from '../../domain/transactions';
   import type { Chain } from '../../domain/chain';
   import { ArrowTopRightOnSquare } from 'svelte-heros-v2';
@@ -7,38 +8,37 @@
   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 { fromChain, toChain } 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 { 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;
+  }>();
 
   let loading: boolean;
-
   let processable: boolean = false;
   let interval: ReturnType<typeof setInterval>;
+  let txToChain = chains[transaction.toChainId];
+  let txFromChain = chains[transaction.fromChainId];
 
   onMount(async () => {
     processable = await isProcessable();
@@ -51,30 +51,14 @@
     }
   });
 
-  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);
-    } else {
-      toChainStore.set(mainnetChain);
-    }
-    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);
       }
@@ -89,7 +73,7 @@
       // TODO: estimate Claim transaction
       const userBalance = await $signer.getBalance('latest');
       if (!userBalance.gt(ethers.utils.parseEther('0.0001'))) {
-        onTooltipClick(true);
+        dispatch('insufficientBalance');
         return;
       }
 
@@ -120,10 +104,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);
       }
@@ -162,6 +147,7 @@
     }
   }
 
+  // TODO: move outside of component: isTransactionProcessable?
   async function isProcessable() {
     if (!transaction.receipt) return false;
     if (!transaction.message) return false;
@@ -181,6 +167,7 @@
     return transaction.receipt.blockNumber <= srcBlock.number;
   }
 
+  // TODO: web worker?
   function startInterval() {
     return setInterval(async () => {
       processable = await isProcessable();
@@ -235,14 +222,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(
@@ -255,7 +243,7 @@
   </td>
 
   <td>
-    <ButtonWithTooltip onClick={() => onTooltipClick(false)}>
+    <ButtonWithTooltip onClick={() => dispatch('tooltipClick')}>
       <span slot="buttonText">
         {#if !processable}
           Pending
@@ -273,10 +261,13 @@
               controlsLayout={[]} />
           </div>
         {:else if transaction.receipt && [MessageStatus.New, MessageStatus.ClaimInProgress].includes(transaction.status)}
+          <!-- TODO: think about destructuring transaction -->
           <Button
             type="accent"
             size="sm"
-            on:click={async () => await claim(transaction)}
+            on:click={async () => {
+              await claim(transaction);
+            }}
             disabled={transaction.status === MessageStatus.ClaimInProgress}>
             Claim
           </Button>
@@ -309,7 +300,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/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
index b7c39867b3a..e83d8fa7f04 100644
--- a/packages/bridge-ui/src/components/Transactions/Transactions.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -27,18 +27,11 @@
       <tbody class="text-sm md:text-base">
         {#each $transactions as transaction}
           <Transaction
-            onTooltipClick={(showInsufficientBalanceMessage = false) => {
-              if (showInsufficientBalanceMessage) {
-                showInsufficientBalance = true;
-              } else {
-                showMessageStatusTooltip = true;
-              }
-            }}
-            onShowTransactionDetailsClick={() => {
+            on:tooltipClick={() => (showMessageStatusTooltip = true)}
+            on:insufficientBalance={() => (showInsufficientBalance = true)}
+            on:transactionDetailsClick={() => {
               selectedTransaction = transaction;
             }}
-            toChain={chains[transaction.toChainId]}
-            fromChain={chains[transaction.fromChainId]}
             {transaction} />
         {/each}
       </tbody>
diff --git a/packages/bridge-ui/src/utils/switchChainAndSetSigner.ts b/packages/bridge-ui/src/utils/switchChainAndSetSigner.ts
new file mode 100644
index 00000000000..0137b138044
--- /dev/null
+++ b/packages/bridge-ui/src/utils/switchChainAndSetSigner.ts
@@ -0,0 +1,23 @@
+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) {
+  await switchNetwork({
+    chainId: chain.id,
+  });
+  const provider = new ethers.providers.Web3Provider(window.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();
+  signer.set(wagmiSigner);
+}

From d424408c2763c093a4291511f1b8d372e27fdaba Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 28 Mar 2023 17:20:40 +0200
Subject: [PATCH 08/24] OptInOutTooltip component

---
 ...eTooltip.svelte => OptInOutTooltip.svelte} | 34 +++++--------------
 .../Transactions/Transactions.svelte          | 14 +++++++-
 .../form/ProcessingFee/ProcessingFee.svelte   | 11 ++++--
 .../src/utils/switchChainAndSetSigner.ts      | 13 ++++---
 4 files changed, 39 insertions(+), 33 deletions(-)
 rename packages/bridge-ui/src/components/{form/ProcessingFee/NoneFeeTooltip.svelte => OptInOutTooltip.svelte} (62%)

diff --git a/packages/bridge-ui/src/components/form/ProcessingFee/NoneFeeTooltip.svelte b/packages/bridge-ui/src/components/OptInOutTooltip.svelte
similarity index 62%
rename from packages/bridge-ui/src/components/form/ProcessingFee/NoneFeeTooltip.svelte
rename to packages/bridge-ui/src/components/OptInOutTooltip.svelte
index 1a159ba0fe4..8e2d352a0c1 100644
--- a/packages/bridge-ui/src/components/form/ProcessingFee/NoneFeeTooltip.svelte
+++ b/packages/bridge-ui/src/components/OptInOutTooltip.svelte
@@ -1,11 +1,14 @@
 <script>
   import { onMount } from 'svelte';
-  import { localStoragePrefix } from '../../../config';
-  import TooltipModal from '../../modals/TooltipModal.svelte';
+  import { localStoragePrefix } from '../config';
+  import TooltipModal from './modals/TooltipModal.svelte';
+  import Button from './buttons/Button.svelte';
 
   export let show = false;
+  export let name = 'OptInOutTooltip';
+  export let title = 'Notice';
 
-  let noShowAgainLocalStorageKey = `${localStoragePrefix}_NoneFeeTooltip_noShowAgain`;
+  let noShowAgainLocalStorageKey = `${localStoragePrefix}_${name}_noShowAgain`;
   let noShowAgainStorage = false;
   let noShowAgainCheckbox = false;
 
@@ -34,17 +37,9 @@
         the user will have to refresh the page to see the message again
         if they delete the localStorage entry.
 -->
-<TooltipModal
-  title="Notice"
-  isOpen={show && !noShowAgainStorage}
-  showXButton={false}>
+<TooltipModal {title} isOpen={show && !noShowAgainStorage} showXButton={false}>
   <div slot="body" class="space-y-6">
-    <!-- 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>
+    <slot />
 
     <div class="text-left flex items-center">
       <input
@@ -57,18 +52,7 @@
     </div>
 
     <div class="flex justify-center">
-      <button
-        class="confirm btn btn-accent btn-md btn-wide"
-        on:click={onConfirmNotice}>
-        Confirm
-      </button>
+      <Button type="accent" on:click={onConfirmNotice}>Confirm</Button>
     </div>
   </div>
 </TooltipModal>
-
-<style>
-  .confirm {
-    /* TODO: design needed for buttons */
-    height: 54px;
-  }
-</style>
diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
index e83d8fa7f04..3fa36824717 100644
--- a/packages/bridge-ui/src/components/Transactions/Transactions.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -5,11 +5,12 @@
   import MessageStatusTooltip from './MessageStatusTooltip.svelte';
   import InsufficientBalanceTooltip from './InsufficientBalanceTooltip.svelte';
   import type { BridgeTransaction } from '../../domain/transactions';
-  import { chains } from '../../chain/chains';
+  import OptInOutTooltip from '../OptInOutTooltip.svelte';
 
   let selectedTransaction: BridgeTransaction;
   let showMessageStatusTooltip: boolean;
   let showInsufficientBalance: boolean;
+  let showRelayerAutoclaimTooltip: boolean;
 </script>
 
 <div class="my-4 md:px-4">
@@ -48,4 +49,15 @@
 
   <MessageStatusTooltip bind:show={showMessageStatusTooltip} />
   <InsufficientBalanceTooltip bind:show={showInsufficientBalance} />
+
+  <OptInOutTooltip
+    bind:show={showRelayerAutoclaimTooltip}
+    name="RelayerAutoclaim">
+    <!-- TODO: translations? -->
+    <div class="text-center">
+      When bridging, you selected the <strong>Recommended</strong> amount or the
+      Processing Fee. You can wait the relayer to auto-claim then bridged token or
+      you can manually claim it now.
+    </div>
+  </OptInOutTooltip>
 </div>
diff --git a/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
index 3572c381b68..270623c7ab6 100644
--- a/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
+++ b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
@@ -8,7 +8,7 @@
   import ButtonWithTooltip from '../../ButtonWithTooltip.svelte';
   import { processingFees } from '../../../fee/processingFees';
   import GeneralTooltip from './ProcessingFeeTooltip.svelte';
-  import NoneFeeTooltip from './NoneFeeTooltip.svelte';
+  import OptInOutTooltip from '../../../components/OptInOutTooltip.svelte';
 
   export let method: ProcessingFeeMethod = ProcessingFeeMethod.RECOMMENDED;
   export let amount: string = '0';
@@ -86,7 +86,14 @@
 </div>
 
 <GeneralTooltip bind:show={showProcessingFeeTooltip} />
-<NoneFeeTooltip bind:show={showNoneFeeTooltip} />
+<OptInOutTooltip 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>
+</OptInOutTooltip>
 
 <style>
   /* hide number input arrows */
diff --git a/packages/bridge-ui/src/utils/switchChainAndSetSigner.ts b/packages/bridge-ui/src/utils/switchChainAndSetSigner.ts
index 0137b138044..11ec1490706 100644
--- a/packages/bridge-ui/src/utils/switchChainAndSetSigner.ts
+++ b/packages/bridge-ui/src/utils/switchChainAndSetSigner.ts
@@ -6,10 +6,11 @@ import { mainnetChain, taikoChain } from '../chain/chains';
 import { signer } from '../store/signer';
 
 export async function switchChainAndSetSigner(chain: Chain) {
-  await switchNetwork({
-    chainId: chain.id,
-  });
-  const provider = new ethers.providers.Web3Provider(window.ethereum);
+  const chainId = chain.id;
+
+  await switchNetwork({ chainId });
+
+  const provider = new ethers.providers.Web3Provider(globalThis.ethereum);
   await provider.send('eth_requestAccounts', []);
 
   fromChain.set(chain);
@@ -18,6 +19,8 @@ export async function switchChainAndSetSigner(chain: Chain) {
   } else {
     toChain.set(mainnetChain);
   }
-  const wagmiSigner = await fetchSigner();
+
+  const wagmiSigner = await fetchSigner({ chainId });
+
   signer.set(wagmiSigner);
 }

From a64c2334ef1d776b826a0643e2330b387c5348a3 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 28 Mar 2023 18:51:39 +0200
Subject: [PATCH 09/24] Add opt in/out to claim

---
 .../src/components/OptInOutTooltip.svelte     |  5 ++-
 .../Transactions/Transaction.svelte           | 38 +++++++++++++------
 .../Transactions/Transactions.svelte          | 12 +++++-
 .../form/ProcessingFee/ProcessingFee.svelte   |  1 +
 4 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/packages/bridge-ui/src/components/OptInOutTooltip.svelte b/packages/bridge-ui/src/components/OptInOutTooltip.svelte
index 8e2d352a0c1..ea66ea91710 100644
--- a/packages/bridge-ui/src/components/OptInOutTooltip.svelte
+++ b/packages/bridge-ui/src/components/OptInOutTooltip.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { onMount } from 'svelte';
   import { localStoragePrefix } from '../config';
   import TooltipModal from './modals/TooltipModal.svelte';
@@ -7,6 +7,7 @@
   export let show = false;
   export let name = 'OptInOutTooltip';
   export let title = 'Notice';
+  export let onConfirm: (noShowAgain: boolean) => void;
 
   let noShowAgainLocalStorageKey = `${localStoragePrefix}_${name}_noShowAgain`;
   let noShowAgainStorage = false;
@@ -29,6 +30,8 @@
     }
 
     show = false;
+
+    onConfirm?.(noShowAgainCheckbox);
   }
 </script>
 
diff --git a/packages/bridge-ui/src/components/Transactions/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
index 2fcd795e4ff..8806053f5f3 100644
--- a/packages/bridge-ui/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import type { BridgeTransaction } from '../../domain/transactions';
-  import type { Chain } from '../../domain/chain';
   import { ArrowTopRightOnSquare } from 'svelte-heros-v2';
   import { MessageStatus } from '../../domain/message';
   import { Contract, ethers } from 'ethers';
   import { signer } from '../../store/signer';
   import { pendingTransactions } from '../../store/transactions';
   import { _ } from 'svelte-i18n';
-  import { fromChain, toChain } from '../../store/chain';
+  import { fromChain } from '../../store/chain';
   import { BridgeType } from '../../domain/bridge';
   import { onDestroy, onMount } from 'svelte';
 
@@ -32,6 +31,7 @@
     tooltipClick: void;
     insufficientBalance: void;
     transactionDetailsClick: BridgeTransaction;
+    relayerAutoClaim: (informed: boolean) => Promise<void>;
   }>();
 
   let loading: boolean;
@@ -39,6 +39,7 @@
   let interval: ReturnType<typeof setInterval>;
   let txToChain = chains[transaction.toChainId];
   let txFromChain = chains[transaction.fromChainId];
+  let alreadyInformedAboutClaim = false;
 
   onMount(async () => {
     processable = await isProcessable();
@@ -51,6 +52,26 @@
     }
   });
 
+  async function onClaimClick() {
+    // Has the user sent processing fees?
+    const processingFee = transaction.message?.processingFee.toString();
+    if (processingFee && processingFee !== '0') {
+      // The user has sent processing fees, so we need to inform
+      // about the relayer and auto-claim.
+      dispatch(
+        'relayerAutoClaim',
+        // TODO: this is a hack. The idea is to move all these
+        //       functions outside of the component.
+        async (informed) => {
+          alreadyInformedAboutClaim = informed;
+          await claim(transaction);
+        },
+      );
+    } else {
+      await claim(transaction);
+    }
+  }
+
   // TODO: move outside of component
   async function claim(bridgeTx: BridgeTransaction) {
     try {
@@ -261,23 +282,16 @@
               controlsLayout={[]} />
           </div>
         {:else if transaction.receipt && [MessageStatus.New, MessageStatus.ClaimInProgress].includes(transaction.status)}
-          <!-- TODO: think about destructuring transaction -->
+          <!-- TODO: we need some destructuring here -->
           <Button
             type="accent"
             size="sm"
-            on:click={async () => {
-              await claim(transaction);
-            }}
+            on:click={onClaimClick}
             disabled={transaction.status === MessageStatus.ClaimInProgress}>
             Claim
           </Button>
         {:else if transaction.status === MessageStatus.Retriable}
-          <Button
-            type="accent"
-            size="sm"
-            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
diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
index 3fa36824717..3c79fcac562 100644
--- a/packages/bridge-ui/src/components/Transactions/Transactions.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -11,6 +11,10 @@
   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">
@@ -30,6 +34,10 @@
           <Transaction
             on:tooltipClick={() => (showMessageStatusTooltip = true)}
             on:insufficientBalance={() => (showInsufficientBalance = true)}
+            on:relayerAutoClaim={({ detail }) => {
+              confirmNotice = detail;
+              showRelayerAutoclaimTooltip = true;
+            }}
             on:transactionDetailsClick={() => {
               selectedTransaction = transaction;
             }}
@@ -48,14 +56,16 @@
   {/if}
 
   <MessageStatusTooltip bind:show={showMessageStatusTooltip} />
+
   <InsufficientBalanceTooltip bind:show={showInsufficientBalance} />
 
   <OptInOutTooltip
     bind:show={showRelayerAutoclaimTooltip}
+    onConfirm={confirmNotice}
     name="RelayerAutoclaim">
     <!-- TODO: translations? -->
     <div class="text-center">
-      When bridging, you selected the <strong>Recommended</strong> amount or the
+      When bridging, you selected the <strong>Recommended</strong> amount for the
       Processing Fee. You can wait the relayer to auto-claim then bridged token or
       you can manually claim it now.
     </div>
diff --git a/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
index 270623c7ab6..4a0e227632d 100644
--- a/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
+++ b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
@@ -86,6 +86,7 @@
 </div>
 
 <GeneralTooltip bind:show={showProcessingFeeTooltip} />
+
 <OptInOutTooltip bind:show={showNoneFeeTooltip} name="NoneFeeTooltip">
   <!-- TODO: translations? -->
   <div class="text-center">

From 2faaafd056397836e9dac2b11cf94a996049e180 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Tue, 28 Mar 2023 18:55:59 +0200
Subject: [PATCH 10/24] Minor fix

---
 packages/bridge-ui/src/components/OptInOutTooltip.svelte        | 2 +-
 .../bridge-ui/src/components/Transactions/Transaction.svelte    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bridge-ui/src/components/OptInOutTooltip.svelte b/packages/bridge-ui/src/components/OptInOutTooltip.svelte
index ea66ea91710..d0984725747 100644
--- a/packages/bridge-ui/src/components/OptInOutTooltip.svelte
+++ b/packages/bridge-ui/src/components/OptInOutTooltip.svelte
@@ -7,7 +7,7 @@
   export let show = false;
   export let name = 'OptInOutTooltip';
   export let title = 'Notice';
-  export let onConfirm: (noShowAgain: boolean) => void;
+  export let onConfirm: (noShowAgain: boolean) => void = null;
 
   let noShowAgainLocalStorageKey = `${localStoragePrefix}_${name}_noShowAgain`;
   let noShowAgainStorage = false;
diff --git a/packages/bridge-ui/src/components/Transactions/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
index 8806053f5f3..56445332faf 100644
--- a/packages/bridge-ui/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
@@ -55,7 +55,7 @@
   async function onClaimClick() {
     // Has the user sent processing fees?
     const processingFee = transaction.message?.processingFee.toString();
-    if (processingFee && processingFee !== '0') {
+    if (processingFee && processingFee !== '0' && !alreadyInformedAboutClaim) {
       // The user has sent processing fees, so we need to inform
       // about the relayer and auto-claim.
       dispatch(

From f28032af93472665c7773b20803a3f955de9fe42 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Wed, 29 Mar 2023 09:34:05 +0200
Subject: [PATCH 11/24] Add some comments

---
 .../Transactions/Transaction.svelte           | 20 ++++++++++++-------
 .../Transactions/Transactions.svelte          |  2 ++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/bridge-ui/src/components/Transactions/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
index 56445332faf..182e10caaab 100644
--- a/packages/bridge-ui/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
@@ -53,15 +53,16 @@
   });
 
   async function onClaimClick() {
-    // Has the user sent processing fees?
+    // 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) {
-      // The user has sent processing fees, so we need to inform
-      // about the relayer and auto-claim.
       dispatch(
         'relayerAutoClaim',
         // TODO: this is a hack. The idea is to move all these
-        //       functions outside of the component.
+        //       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);
@@ -168,7 +169,7 @@
     }
   }
 
-  // TODO: move outside of component: isTransactionProcessable?
+  // TODO: this could also live in an utility: isTransactionProcessable?
   async function isProcessable() {
     if (!transaction.receipt) return false;
     if (!transaction.message) return false;
@@ -251,7 +252,7 @@
     <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 -->
+    <!-- TODO: function to check is we're dealing with ETH or ERC20? -->
     {transaction.message &&
     (transaction.message?.data === '0x' || !transaction.message?.data)
       ? ethers.utils.formatEther(
@@ -282,7 +283,11 @@
               controlsLayout={[]} />
           </div>
         {:else if transaction.receipt && [MessageStatus.New, MessageStatus.ClaimInProgress].includes(transaction.status)}
-          <!-- TODO: we need some destructuring here -->
+          <!-- 
+            TODO: we need some destructuring here. 
+                  We keep on accessing transaction props
+                  over and over again.
+          -->
           <Button
             type="accent"
             size="sm"
@@ -305,6 +310,7 @@
         {: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>
diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
index 3c79fcac562..58677114565 100644
--- a/packages/bridge-ui/src/components/Transactions/Transactions.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -35,6 +35,8 @@
             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;
             }}

From c4ca359efcf8671d425870460f62d4c5bec3d54d Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Wed, 29 Mar 2023 10:11:58 +0200
Subject: [PATCH 12/24] Improve types

---
 packages/bridge-ui/src/bridge/ERC20Bridge.ts  | 17 ++++++------
 packages/bridge-ui/src/bridge/ETHBridge.ts    | 24 ++++++++---------
 .../src/components/ChainDropdown.svelte       |  1 -
 packages/bridge-ui/src/domain/bridge.ts       |  5 ++--
 packages/bridge-ui/src/domain/message.ts      |  5 ++--
 packages/bridge-ui/src/domain/relayerApi.ts   | 26 ++++++++++++++++---
 packages/bridge-ui/src/domain/transactions.ts |  5 ++--
 .../src/relayer-api/RelayerAPIService.ts      |  6 ++---
 8 files changed, 54 insertions(+), 35 deletions(-)

diff --git a/packages/bridge-ui/src/bridge/ERC20Bridge.ts b/packages/bridge-ui/src/bridge/ERC20Bridge.ts
index 2e79e42faca..e00a1e35813 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 8aceb3b8341..761f6b1a587 100644
--- a/packages/bridge-ui/src/bridge/ETHBridge.ts
+++ b/packages/bridge-ui/src/bridge/ETHBridge.ts
@@ -7,9 +7,8 @@ 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 { Message, MessageStatus } from '../domain/message';
 import BridgeABI from '../constants/abi/Bridge';
 import { chains } from '../chain/chains';
 
@@ -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 db6d8e8c485..453e62a6421 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/domain/bridge.ts b/packages/bridge-ui/src/domain/bridge.ts
index 9f467c22c27..2a69bd1b129 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/message.ts b/packages/bridge-ui/src/domain/message.ts
index 2d01befb0c4..fb50ca74a17 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 e323d670695..a7e64c35f00 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 6ea4aa3bc75..45ed00ebce9 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/relayer-api/RelayerAPIService.ts b/packages/bridge-ui/src/relayer-api/RelayerAPIService.ts
index 3430bd62cf0..0acbe50135c 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,

From 8a185905470382c0546aae0029e25bb39fd9a512 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Wed, 29 Mar 2023 10:13:22 +0200
Subject: [PATCH 13/24] Correct notice message

---
 .../src/components/Transactions/Transactions.svelte         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
index 58677114565..67decb8af07 100644
--- a/packages/bridge-ui/src/components/Transactions/Transactions.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -67,9 +67,9 @@
     name="RelayerAutoclaim">
     <!-- TODO: translations? -->
     <div class="text-center">
-      When bridging, you selected the <strong>Recommended</strong> amount for the
-      Processing Fee. You can wait the relayer to auto-claim then bridged token or
-      you can manually claim it now.
+      When bridging, you selected the <strong>Recommended</strong> or
+      <string>Custom</string> amount for the Processing Fee. You can wait the relayer
+      to auto-claim then bridged token or you can manually claim it now.
     </div>
   </OptInOutTooltip>
 </div>

From b17d23a9287e6c23e36c11088d14ab3d9c64ec12 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Wed, 29 Mar 2023 10:23:13 +0200
Subject: [PATCH 14/24] Rename component

---
 .../{OptInOutTooltip.svelte => NoticeTooltip.svelte}        | 2 +-
 .../src/components/Transactions/Transactions.svelte         | 6 +++---
 .../src/components/form/ProcessingFee/ProcessingFee.svelte  | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)
 rename packages/bridge-ui/src/components/{OptInOutTooltip.svelte => NoticeTooltip.svelte} (97%)

diff --git a/packages/bridge-ui/src/components/OptInOutTooltip.svelte b/packages/bridge-ui/src/components/NoticeTooltip.svelte
similarity index 97%
rename from packages/bridge-ui/src/components/OptInOutTooltip.svelte
rename to packages/bridge-ui/src/components/NoticeTooltip.svelte
index d0984725747..a3bd6f36285 100644
--- a/packages/bridge-ui/src/components/OptInOutTooltip.svelte
+++ b/packages/bridge-ui/src/components/NoticeTooltip.svelte
@@ -5,7 +5,7 @@
   import Button from './buttons/Button.svelte';
 
   export let show = false;
-  export let name = 'OptInOutTooltip';
+  export let name = 'NoticeTooltip';
   export let title = 'Notice';
   export let onConfirm: (noShowAgain: boolean) => void = null;
 
diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
index 67decb8af07..f30d6e08aab 100644
--- a/packages/bridge-ui/src/components/Transactions/Transactions.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -5,7 +5,7 @@
   import MessageStatusTooltip from './MessageStatusTooltip.svelte';
   import InsufficientBalanceTooltip from './InsufficientBalanceTooltip.svelte';
   import type { BridgeTransaction } from '../../domain/transactions';
-  import OptInOutTooltip from '../OptInOutTooltip.svelte';
+  import NoticeTooltip from '../NoticeTooltip.svelte';
 
   let selectedTransaction: BridgeTransaction;
   let showMessageStatusTooltip: boolean;
@@ -61,7 +61,7 @@
 
   <InsufficientBalanceTooltip bind:show={showInsufficientBalance} />
 
-  <OptInOutTooltip
+  <NoticeTooltip
     bind:show={showRelayerAutoclaimTooltip}
     onConfirm={confirmNotice}
     name="RelayerAutoclaim">
@@ -71,5 +71,5 @@
       <string>Custom</string> amount for the Processing Fee. You can wait the relayer
       to auto-claim then bridged token or you can manually claim it now.
     </div>
-  </OptInOutTooltip>
+  </NoticeTooltip>
 </div>
diff --git a/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
index 4a0e227632d..b40f765f365 100644
--- a/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
+++ b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
@@ -8,7 +8,7 @@
   import ButtonWithTooltip from '../../ButtonWithTooltip.svelte';
   import { processingFees } from '../../../fee/processingFees';
   import GeneralTooltip from './ProcessingFeeTooltip.svelte';
-  import OptInOutTooltip from '../../../components/OptInOutTooltip.svelte';
+  import NoticeTooltip from '../../NoticeTooltip.svelte';
 
   export let method: ProcessingFeeMethod = ProcessingFeeMethod.RECOMMENDED;
   export let amount: string = '0';
@@ -87,14 +87,14 @@
 
 <GeneralTooltip bind:show={showProcessingFeeTooltip} />
 
-<OptInOutTooltip bind:show={showNoneFeeTooltip} name="NoneFeeTooltip">
+<NoticeTooltip 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>
-</OptInOutTooltip>
+</NoticeTooltip>
 
 <style>
   /* hide number input arrows */

From f5727b9961bcef4ee1ec0916f7f6721097896722 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Wed, 29 Mar 2023 10:58:21 +0200
Subject: [PATCH 15/24] Minor changes

---
 packages/bridge-ui/src/bridge/ETHBridge.ts        |  2 +-
 .../bridge-ui/src/components/NoticeTooltip.svelte | 15 +++++++++++----
 packages/bridge-ui/src/store/userToken.ts         |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/bridge-ui/src/bridge/ETHBridge.ts b/packages/bridge-ui/src/bridge/ETHBridge.ts
index 761f6b1a587..c82f6407ab5 100644
--- a/packages/bridge-ui/src/bridge/ETHBridge.ts
+++ b/packages/bridge-ui/src/bridge/ETHBridge.ts
@@ -8,9 +8,9 @@ import type {
   ReleaseOpts,
 } from '../domain/bridge';
 import type { Prover } from '../domain/proof';
-import { Message, 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;
diff --git a/packages/bridge-ui/src/components/NoticeTooltip.svelte b/packages/bridge-ui/src/components/NoticeTooltip.svelte
index a3bd6f36285..b8675bb4f71 100644
--- a/packages/bridge-ui/src/components/NoticeTooltip.svelte
+++ b/packages/bridge-ui/src/components/NoticeTooltip.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { localStoragePrefix } from '../config';
-  import TooltipModal from './modals/TooltipModal.svelte';
   import Button from './buttons/Button.svelte';
+  import Modal from './modals/Modal.svelte';
 
   export let show = false;
   export let name = 'NoticeTooltip';
@@ -40,8 +40,15 @@
         the user will have to refresh the page to see the message again
         if they delete the localStorage entry.
 -->
-<TooltipModal {title} isOpen={show && !noShowAgainStorage} showXButton={false}>
-  <div slot="body" class="space-y-6">
+<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">
@@ -58,4 +65,4 @@
       <Button type="accent" on:click={onConfirmNotice}>Confirm</Button>
     </div>
   </div>
-</TooltipModal>
+</Modal>
diff --git a/packages/bridge-ui/src/store/userToken.ts b/packages/bridge-ui/src/store/userToken.ts
index c415a14d019..e4556e7d7a7 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>();

From c9fd2064e4f450444ea371506beb2771f2566d71 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Wed, 29 Mar 2023 10:59:20 +0200
Subject: [PATCH 16/24] Revert change on TooltipModal

---
 packages/bridge-ui/src/components/modals/TooltipModal.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/bridge-ui/src/components/modals/TooltipModal.svelte b/packages/bridge-ui/src/components/modals/TooltipModal.svelte
index c7cadbe0ffe..29b9f8e7747 100644
--- a/packages/bridge-ui/src/components/modals/TooltipModal.svelte
+++ b/packages/bridge-ui/src/components/modals/TooltipModal.svelte
@@ -3,10 +3,9 @@
 
   export let title: string;
   export let isOpen: boolean = false;
-  export let showXButton: boolean = true;
 </script>
 
-<Modal {title} bind:isOpen {showXButton}>
+<Modal {title} bind:isOpen>
   <div class="flex h-full min-h-tooltip-modal w-full flex-col justify-between">
     <div class="tip-body mb-4 flex-auto">
       <slot name="body" />

From ef02d79cb8cd2cfca9c8d384446be86d88e90129 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Wed, 29 Mar 2023 11:20:25 +0200
Subject: [PATCH 17/24] Rename Notice modal

---
 .../src/components/Transactions/Transactions.svelte       | 6 +++---
 .../components/form/ProcessingFee/ProcessingFee.svelte    | 6 +++---
 .../{NoticeTooltip.svelte => modals/NoticeModal.svelte}   | 8 ++++----
 3 files changed, 10 insertions(+), 10 deletions(-)
 rename packages/bridge-ui/src/components/{NoticeTooltip.svelte => modals/NoticeModal.svelte} (90%)

diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
index f30d6e08aab..140df340b06 100644
--- a/packages/bridge-ui/src/components/Transactions/Transactions.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -5,7 +5,7 @@
   import MessageStatusTooltip from './MessageStatusTooltip.svelte';
   import InsufficientBalanceTooltip from './InsufficientBalanceTooltip.svelte';
   import type { BridgeTransaction } from '../../domain/transactions';
-  import NoticeTooltip from '../NoticeTooltip.svelte';
+  import NoticeModal from '../modals/NoticeModal.svelte';
 
   let selectedTransaction: BridgeTransaction;
   let showMessageStatusTooltip: boolean;
@@ -61,7 +61,7 @@
 
   <InsufficientBalanceTooltip bind:show={showInsufficientBalance} />
 
-  <NoticeTooltip
+  <NoticeModal
     bind:show={showRelayerAutoclaimTooltip}
     onConfirm={confirmNotice}
     name="RelayerAutoclaim">
@@ -71,5 +71,5 @@
       <string>Custom</string> amount for the Processing Fee. You can wait the relayer
       to auto-claim then bridged token or you can manually claim it now.
     </div>
-  </NoticeTooltip>
+  </NoticeModal>
 </div>
diff --git a/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
index b40f765f365..3d3dded0985 100644
--- a/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
+++ b/packages/bridge-ui/src/components/form/ProcessingFee/ProcessingFee.svelte
@@ -8,7 +8,7 @@
   import ButtonWithTooltip from '../../ButtonWithTooltip.svelte';
   import { processingFees } from '../../../fee/processingFees';
   import GeneralTooltip from './ProcessingFeeTooltip.svelte';
-  import NoticeTooltip from '../../NoticeTooltip.svelte';
+  import NoticeModal from '../../modals/NoticeModal.svelte';
 
   export let method: ProcessingFeeMethod = ProcessingFeeMethod.RECOMMENDED;
   export let amount: string = '0';
@@ -87,14 +87,14 @@
 
 <GeneralTooltip bind:show={showProcessingFeeTooltip} />
 
-<NoticeTooltip bind:show={showNoneFeeTooltip} name="NoneFeeTooltip">
+<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>
-</NoticeTooltip>
+</NoticeModal>
 
 <style>
   /* hide number input arrows */
diff --git a/packages/bridge-ui/src/components/NoticeTooltip.svelte b/packages/bridge-ui/src/components/modals/NoticeModal.svelte
similarity index 90%
rename from packages/bridge-ui/src/components/NoticeTooltip.svelte
rename to packages/bridge-ui/src/components/modals/NoticeModal.svelte
index b8675bb4f71..7634722b771 100644
--- a/packages/bridge-ui/src/components/NoticeTooltip.svelte
+++ b/packages/bridge-ui/src/components/modals/NoticeModal.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { localStoragePrefix } from '../config';
-  import Button from './buttons/Button.svelte';
-  import Modal from './modals/Modal.svelte';
+  import { localStoragePrefix } from '../../config';
+  import Button from '../buttons/Button.svelte';
+  import Modal from './Modal.svelte';
 
   export let show = false;
-  export let name = 'NoticeTooltip';
+  export let name = 'NoticeModal';
   export let title = 'Notice';
   export let onConfirm: (noShowAgain: boolean) => void = null;
 

From a2c901d8ad5de0fa520403b2cf40599f38be257f Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Wed, 29 Mar 2023 12:03:46 +0200
Subject: [PATCH 18/24] Typo

---
 .../bridge-ui/src/components/Transactions/Transactions.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
index 140df340b06..7619006fdcc 100644
--- a/packages/bridge-ui/src/components/Transactions/Transactions.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -68,7 +68,7 @@
     <!-- TODO: translations? -->
     <div class="text-center">
       When bridging, you selected the <strong>Recommended</strong> or
-      <string>Custom</string> amount for the Processing Fee. You can wait the relayer
+      <strong>Custom</strong> amount for the Processing Fee. You can wait the relayer
       to auto-claim then bridged token or you can manually claim it now.
     </div>
   </NoticeModal>

From 44007586fa04c0ff8e564dfa737b881465f37af3 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Wed, 29 Mar 2023 12:07:02 +0200
Subject: [PATCH 19/24] Minor change

---
 .../bridge-ui/src/components/Transactions/Transactions.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bridge-ui/src/components/Transactions/Transactions.svelte b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
index 7619006fdcc..13b34ff3e46 100644
--- a/packages/bridge-ui/src/components/Transactions/Transactions.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transactions.svelte
@@ -68,8 +68,8 @@
     <!-- 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 the relayer
-      to auto-claim then bridged token or you can manually claim it now.
+      <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>

From 7404a3120b44804e35bf11ba9da5ad460f564db9 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Wed, 29 Mar 2023 12:09:25 +0200
Subject: [PATCH 20/24] Fix label association

---
 packages/bridge-ui/src/components/modals/NoticeModal.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bridge-ui/src/components/modals/NoticeModal.svelte b/packages/bridge-ui/src/components/modals/NoticeModal.svelte
index 7634722b771..65b15e44826 100644
--- a/packages/bridge-ui/src/components/modals/NoticeModal.svelte
+++ b/packages/bridge-ui/src/components/modals/NoticeModal.svelte
@@ -55,10 +55,10 @@
       <input
         style:border-radius="0.5rem"
         type="checkbox"
-        id="noShowAgain"
+        id="noShowAgain_{name}"
         bind:checked={noShowAgainCheckbox}
         class="checkbox checkbox-secundary mr-2" />
-      <label for="noShowAgain">Do not show this message again</label>
+      <label for="noShowAgain_{name}">Do not show this message again</label>
     </div>
 
     <div class="flex justify-center">

From 8b49ac4ebe3ea4e2034aa076b55ee5d239ade45d Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Thu, 30 Mar 2023 08:26:18 +0200
Subject: [PATCH 21/24] Typo

---
 packages/bridge-ui/src/domain/button.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bridge-ui/src/domain/button.ts b/packages/bridge-ui/src/domain/button.ts
index 4e4d965db4c..3d9456c3726 100644
--- a/packages/bridge-ui/src/domain/button.ts
+++ b/packages/bridge-ui/src/domain/button.ts
@@ -1,5 +1,5 @@
 // TODO: still to figure out after design
 
-export type TypeButton = 'primary' | 'secundary' | 'accent' | ''; // TODO: daisyUI?
+export type TypeButton = 'primary' | 'secondary' | 'accent' | ''; // TODO: daisyUI?
 
 export type SizeButton = 'sm' | 'md' | 'lg';

From e7db7651522f39ff4414b669476c2b66e784a69b Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Thu, 30 Mar 2023 09:27:07 +0200
Subject: [PATCH 22/24] Fix wrong constant

---
 .../src/components/Transactions/MessageStatusTooltip.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bridge-ui/src/components/Transactions/MessageStatusTooltip.svelte b/packages/bridge-ui/src/components/Transactions/MessageStatusTooltip.svelte
index 19c3c4c887b..e6a9df8181d 100644
--- a/packages/bridge-ui/src/components/Transactions/MessageStatusTooltip.svelte
+++ b/packages/bridge-ui/src/components/Transactions/MessageStatusTooltip.svelte
@@ -13,7 +13,7 @@
       <ul class="list-disc ml-4">
         <li class="mb-2">
           <strong>Pending</strong>: Your asset is not ready to be bridged. Taiko
-          A2 => {L1_CHAIN_NAME} bridging can take several hours before being ready.
+          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>

From f255e720c1b272520e2db1686d75b2a6bb55531a Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Thu, 30 Mar 2023 09:34:42 +0200
Subject: [PATCH 23/24] Add TODO

---
 .../bridge-ui/src/components/Transactions/Transaction.svelte     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/bridge-ui/src/components/Transactions/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
index 182e10caaab..a83ec3d1b06 100644
--- a/packages/bridge-ui/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
@@ -117,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);

From 2ba787123b2d2a18fc1115a0f55f60d836e4bc97 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Thu, 30 Mar 2023 09:41:05 +0200
Subject: [PATCH 24/24] Fix some eslint warnigs

---
 packages/bridge-ui/src/components/TaikoBanner.svelte  |  1 -
 packages/bridge-ui/src/components/form/Memo.svelte    |  1 -
 packages/bridge-ui/src/pages/home/Home.svelte         |  1 -
 packages/bridge-ui/src/storage/StorageService.spec.ts | 10 +++++-----
 packages/bridge-ui/src/storage/StorageService.ts      |  5 +----
 5 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/bridge-ui/src/components/TaikoBanner.svelte b/packages/bridge-ui/src/components/TaikoBanner.svelte
index f04b21d13bc..0e38aa07021 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/form/Memo.svelte b/packages/bridge-ui/src/components/form/Memo.svelte
index 0e21be6519f..5c0347a7060 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/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
index a4b3cabd056..744b102884e 100644
--- a/packages/bridge-ui/src/pages/home/Home.svelte
+++ b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -1,5 +1,4 @@
 <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';
diff --git a/packages/bridge-ui/src/storage/StorageService.spec.ts b/packages/bridge-ui/src/storage/StorageService.spec.ts
index d6252abd0df..d9e5e799ee7 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 f632b61a7a9..855699b5a66 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()}`),
     );