From fac2869757d6f7168b0878f9654b5a1514560540 Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Tue, 19 Sep 2023 20:29:29 +0200
Subject: [PATCH 1/5] add dialog

---
 .../Transactions/InsufficientFunds.svelte     | 68 +++++++++++++++++++
 .../src/components/Transactions/Status.svelte |  7 +-
 packages/bridge-ui-v2/src/i18n/en.json        |  8 ++-
 3 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte

diff --git a/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte b/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte
new file mode 100644
index 00000000000..1e401ddced2
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  import { Button } from '$components/Button';
+  import { Icon } from '$components/Icon';
+  import { PUBLIC_GUIDE_URL } from '$env/static/public';
+  import { uid } from '$libs/util/uid';
+
+  let dialogId = `dialog-${uid()}`;
+  export let modalOpen = false;
+
+  function closeModal() {
+    removeEscKeyListener();
+    modalOpen = false;
+  }
+
+  let escKeyListener: (event: KeyboardEvent) => void;
+
+  const addEscKeyListener = () => {
+    escKeyListener = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closeModal();
+      }
+    };
+    window.addEventListener('keydown', escKeyListener);
+  };
+
+  const removeEscKeyListener = () => {
+    window.removeEventListener('keydown', escKeyListener);
+  };
+
+  onDestroy(() => {
+    removeEscKeyListener();
+  });
+
+  $: if (modalOpen) {
+    addEscKeyListener();
+  } else {
+    removeEscKeyListener();
+  }
+</script>
+
+<dialog id={dialogId} class="modal" class:modal-open={modalOpen}>
+  <div class="modal-box relative px-6 py-[35px] md:rounded-[20px] bg-neutral-background">
+    <button class="absolute right-6 top-[35px]" on:click={closeModal}>
+      <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
+    </button>
+    <div class="w-full space-y-6">
+      <h3 class="title-body-bold mb-7">{$t('transactions.actions.claim.dialog.title')}</h3>
+      <p class="body-regular text-secondary-content mb-3">
+        {@html $t('transactions.actions.claim.dialog.description', {
+          values: {
+            classes: 'link',
+            url: PUBLIC_GUIDE_URL,
+          },
+        })}
+      </p>
+      <Button
+        type="primary"
+        class="px-[28px] py-[10px] rounded-full w-full border-primary-brand"
+        hasBorder={true}
+        on:click={closeModal}>
+        <span class="body-bold">{$t('common.ok')}</span>
+      </Button>
+    </div>
+  </div>
+</dialog>
diff --git a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
index fa60111f37d..26a19f1b9f1 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
@@ -30,6 +30,7 @@
   import { account } from '$stores/account';
   import { network } from '$stores/network';
   import { pendingTransactions } from '$stores/pendingTransactions';
+  import InsufficientFunds from './InsufficientFunds.svelte';
 
   const log = getLogger('components:Status');
 
@@ -41,6 +42,8 @@
   let processable = false; // bridge tx state to be processed: claimed/retried/released
   let bridgeTxStatus: Maybe<MessageStatus>;
 
+  let modalOpen = false;
+
   // TODO: enum?
   let loading: 'claiming' | 'releasing' | false = false;
 
@@ -136,7 +139,7 @@
           warningToast($t('transactions.actions.claim.rejected'));
           break;
         case err instanceof InsufficientBalanceError:
-          errorToast($t('transactions.errors.insufficient_balance'));
+          modalOpen = true;
           break;
         case err instanceof InvalidProofError:
           errorToast($t('TODO: InvalidProofError'));
@@ -289,3 +292,5 @@
     <span>{$t('transactions.status.error.name')}</span>
   {/if}
 </div>
+
+<InsufficientFunds bind:modalOpen />
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
index e3988dc954a..d0c0b96b5e5 100644
--- a/packages/bridge-ui-v2/src/i18n/en.json
+++ b/packages/bridge-ui-v2/src/i18n/en.json
@@ -141,7 +141,11 @@
       "claim": {
         "tx": "Transaction sent to claim {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a> to see it in the explorer.",
         "success": "Transaction completed! Your funds have been successfully claimed on {network}.",
-        "rejected": "Request to claim rejected."
+        "rejected": "Request to claim rejected.",
+        "dialog": {
+          "title": "Please wait",
+          "description": "Insufficient balance to claim yourself. Please wait for the relayer to claim for you automatically. Refer to <a class=\"{classes}\" href=\"{url}\" target=\"_blank\"><b>our guide</b></a> for more information."
+        }
       },
       "release": {
         "tx": "Transaction sent to release {token} tokens. Click <a href=\"{url}\" target=\"_blank\"><b>here</b></a> to see it in the explorer.",
@@ -150,7 +154,7 @@
       }
     },
     "errors": {
-      "insufficient_balance": "Insufficient balance to claim. Please add some ETH to your wallet.",
+      "insufficient_balance": "Insufficient balance to claim yourself. Please wait for the relayer to claim for you automatically. Refer to our guide for more information.",
       "relayer_offline": "Relayer did not respond. Your transactions may only be loaded partially."
     }
   },

From 984ee896d905a2235718944b1c12b6d3367430d8 Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Tue, 19 Sep 2023 20:57:26 +0200
Subject: [PATCH 2/5] add link

---
 .../Transactions/InsufficientFunds.svelte     | 20 ++++++++++---------
 packages/bridge-ui-v2/src/i18n/en.json        |  3 ++-
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte b/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte
index 1e401ddced2..f19a30ba294 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/InsufficientFunds.svelte
@@ -7,9 +7,10 @@
   import { PUBLIC_GUIDE_URL } from '$env/static/public';
   import { uid } from '$libs/util/uid';
 
-  let dialogId = `dialog-${uid()}`;
   export let modalOpen = false;
 
+  let dialogId = `dialog-${uid()}`;
+
   function closeModal() {
     removeEscKeyListener();
     modalOpen = false;
@@ -48,14 +49,15 @@
     </button>
     <div class="w-full space-y-6">
       <h3 class="title-body-bold mb-7">{$t('transactions.actions.claim.dialog.title')}</h3>
-      <p class="body-regular text-secondary-content mb-3">
-        {@html $t('transactions.actions.claim.dialog.description', {
-          values: {
-            classes: 'link',
-            url: PUBLIC_GUIDE_URL,
-          },
-        })}
-      </p>
+      <div class="body-regular text-secondary-content mb-3 flex flex-col items-end">
+        <div>
+          {$t('transactions.actions.claim.dialog.description')}
+        </div>
+        <a href={PUBLIC_GUIDE_URL} target="_blank" class="flex link py-[10px]">
+          {$t('transactions.actions.claim.dialog.link')}<Icon type="arrow-top-right" />
+        </a>
+      </div>
+
       <Button
         type="primary"
         class="px-[28px] py-[10px] rounded-full w-full border-primary-brand"
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
index d0c0b96b5e5..a5943f0201f 100644
--- a/packages/bridge-ui-v2/src/i18n/en.json
+++ b/packages/bridge-ui-v2/src/i18n/en.json
@@ -144,7 +144,8 @@
         "rejected": "Request to claim rejected.",
         "dialog": {
           "title": "Please wait",
-          "description": "Insufficient balance to claim yourself. Please wait for the relayer to claim for you automatically. Refer to <a class=\"{classes}\" href=\"{url}\" target=\"_blank\"><b>our guide</b></a> for more information."
+          "description": "Insufficient balance to claim yourself. Please wait for the relayer to claim for you automatically. Refer to our guide for more information.",
+          "link": "Go to guide"
         }
       },
       "release": {

From 39343712505f4062c2c120bb4433120ee355321b Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Tue, 19 Sep 2023 21:01:34 +0200
Subject: [PATCH 3/5] linting

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

diff --git a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
index 26a19f1b9f1..8b5e370c9c7 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
@@ -30,6 +30,7 @@
   import { account } from '$stores/account';
   import { network } from '$stores/network';
   import { pendingTransactions } from '$stores/pendingTransactions';
+
   import InsufficientFunds from './InsufficientFunds.svelte';
 
   const log = getLogger('components:Status');

From b3012e3fc229c9dbedd27f59fad10c2f00ded7be Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Wed, 20 Sep 2023 12:35:46 +0200
Subject: [PATCH 4/5] update dialog and rename initiated status

---
 .../Transactions/MobileDetailsDialog.svelte   | 11 +++-
 .../src/components/Transactions/Status.svelte | 25 +++++----
 .../Transactions/StatusInfoDialog.svelte      |  4 +-
 .../Transactions/Transaction.svelte           | 53 +++++++++++++++----
 .../Transactions/Transactions.svelte          | 18 +------
 packages/bridge-ui-v2/src/i18n/en.json        |  6 +--
 6 files changed, 70 insertions(+), 47 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte b/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte
index b83f002d4ac..7d6642abe46 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/MobileDetailsDialog.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
   import { formatEther } from 'viem';
 
@@ -15,7 +16,9 @@
   export let closeDetails = noop;
   export let detailsOpen = false;
 
-  export let selectedItem: BridgeTransaction | null;
+  export let selectedItem: BridgeTransaction;
+
+  const dispatch = createEventDispatcher();
 
   let openStatusDialog = false;
 
@@ -29,6 +32,10 @@
   const handleStatusDialog = () => {
     openStatusDialog = !openStatusDialog;
   };
+
+  const handleInsufficientFunds = (e: CustomEvent) => {
+    dispatch('insufficientFunds', e.detail);
+  };
 </script>
 
 <dialog id={dialogId} class="modal modal-bottom" class:modal-open={detailsOpen}>
@@ -66,7 +73,7 @@
             </div>
           </h4>
           <div class="f-items-center space-x-1">
-            <Status bridgeTx={selectedItem} />
+            <Status bridgeTx={selectedItem} on:insufficientFunds={handleInsufficientFunds} />
           </div>
         </li>
         <li class="f-between-center">
diff --git a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
index 8b5e370c9c7..5b1425ad826 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/Status.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { type Address, fetchBalance, switchNetwork } from '@wagmi/core';
-  import { onDestroy, onMount } from 'svelte';
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { parseEther, UserRejectedRequestError } from 'viem';
 
@@ -31,11 +31,10 @@
   import { network } from '$stores/network';
   import { pendingTransactions } from '$stores/pendingTransactions';
 
-  import InsufficientFunds from './InsufficientFunds.svelte';
+  export let bridgeTx: BridgeTransaction;
 
   const log = getLogger('components:Status');
-
-  export let bridgeTx: BridgeTransaction;
+  const dispatch = createEventDispatcher();
 
   let polling: ReturnType<typeof startPolling>;
 
@@ -43,10 +42,12 @@
   let processable = false; // bridge tx state to be processed: claimed/retried/released
   let bridgeTxStatus: Maybe<MessageStatus>;
 
-  let modalOpen = false;
+  enum LoadingState {
+    CLAIMING = 'claiming',
+    RELEASING = 'releasing',
+  }
 
-  // TODO: enum?
-  let loading: 'claiming' | 'releasing' | false = false;
+  let loading: LoadingState | false = false;
 
   function onProcessable(isTxProcessable: boolean) {
     processable = isTxProcessable;
@@ -78,7 +79,7 @@
   async function claim() {
     if (!$network || !$account?.address) return;
 
-    loading = 'claiming';
+    loading = LoadingState.CLAIMING;
 
     try {
       const { msgHash, message } = bridgeTx;
@@ -140,7 +141,7 @@
           warningToast($t('transactions.actions.claim.rejected'));
           break;
         case err instanceof InsufficientBalanceError:
-          modalOpen = true;
+          dispatch('insufficientFunds', { tx: bridgeTx });
           break;
         case err instanceof InvalidProofError:
           errorToast($t('TODO: InvalidProofError'));
@@ -163,7 +164,7 @@
   async function release() {
     if (!$network || !$account?.address) return;
 
-    loading = 'releasing';
+    loading = LoadingState.RELEASING;
 
     try {
       const { msgHash, message } = bridgeTx;
@@ -266,7 +267,7 @@
 <div class="Status f-items-center space-x-1">
   {#if !processable}
     <StatusDot type="pending" />
-    <span>{$t('transactions.status.initiated.name')}</span>
+    <span>{$t('transactions.status.processing.name')}</span>
   {:else if loading}
     <div class="f-items-center space-x-2">
       <Spinner />
@@ -293,5 +294,3 @@
     <span>{$t('transactions.status.error.name')}</span>
   {/if}
 </div>
-
-<InsufficientFunds bind:modalOpen />
diff --git a/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte b/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte
index bfe860bcd6d..1febe5ae662 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/StatusInfoDialog.svelte
@@ -60,8 +60,8 @@
     <div class="inline-flex flex-col px-[37px] text-base">
       <br />
       {$t('transactions.status.dialog.description')}
-      <h4 class={classes.headline}>{$t('transactions.status.initiated.name')}</h4>
-      {$t('transactions.status.initiated.description')}
+      <h4 class={classes.headline}>{$t('transactions.status.processing.name')}</h4>
+      {$t('transactions.status.processing.description')}
       <h4 class={classes.headline}>{$t('transactions.status.claim.name')}</h4>
       {$t('transactions.status.claim.description')}
       <h4 class={classes.headline}>{$t('transactions.status.claimed.name')}</h4>
diff --git a/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte b/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
index 6a12fac7350..9e316003b16 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
@@ -1,27 +1,51 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
   import { formatEther } from 'viem';
 
-  import type { BridgeTransaction } from '$libs/bridge';
-
-  export let item: BridgeTransaction;
-
-  import { createEventDispatcher } from 'svelte';
-
   import { chainConfig } from '$chainConfig';
   import { DesktopOrLarger } from '$components/DesktopOrLarger';
   import { Icon } from '$components/Icon';
+  import { type BridgeTransaction, MessageStatus } from '$libs/bridge';
 
   import ChainSymbolName from './ChainSymbolName.svelte';
+  import InsufficientFunds from './InsufficientFunds.svelte';
+  import MobileDetailsDialog from './MobileDetailsDialog.svelte';
   import Status from './Status.svelte';
 
-  const dispatch = createEventDispatcher();
+  export let item: BridgeTransaction;
 
+  const dispatch = createEventDispatcher();
+  let insufficientModal = false;
+  let detailsOpen = false;
   let isDesktopOrLarger = false;
 
-  const handleClick = () => dispatch('click');
+  const handleClick = () => {
+    if (item?.status === MessageStatus.DONE) {
+      openDetails();
+    }
+    dispatch('click');
+  };
+
+  const handlePress = () => {
+    if (item?.status === MessageStatus.DONE) {
+      openDetails();
+    }
+    dispatch('press');
+  };
+
+  const closeDetails = () => {
+    detailsOpen = false;
+  };
+
+  const openDetails = () => {
+    detailsOpen = true;
+  };
 
-  const handlePress = () => dispatch('press');
+  const handleInsufficientFunds = () => {
+    insufficientModal = true;
+    openDetails();
+  };
 
   let attrs = isDesktopOrLarger ? {} : { role: 'button' };
 </script>
@@ -65,7 +89,11 @@
   {/if}
 
   <div class="sm:w-1/4 md:w-1/5 py-2 flex flex-col justify-center">
-    <Status bridgeTx={item} />
+    <Status
+      on:click={isDesktopOrLarger ? undefined : openDetails}
+      bridgeTx={item}
+      on:insufficientFunds={handleInsufficientFunds} />
+    <!-- <div class="btn btn-primary" on:click={isDesktopOrLarger ? undefined : openDetails}></div> -->
   </div>
   <div class="hidden md:flex w-1/5 py-2 flex flex-col justify-center">
     <a
@@ -77,4 +105,9 @@
     </a>
   </div>
 </div>
+
 <DesktopOrLarger bind:is={isDesktopOrLarger} />
+
+<MobileDetailsDialog {closeDetails} {detailsOpen} selectedItem={item} on:insufficientFunds={handleInsufficientFunds} />
+
+<InsufficientFunds bind:modalOpen={insufficientModal} />
diff --git a/packages/bridge-ui-v2/src/components/Transactions/Transactions.svelte b/packages/bridge-ui-v2/src/components/Transactions/Transactions.svelte
index 6f91ca3a9fb..b3b121a508b 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/Transactions.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/Transactions.svelte
@@ -15,7 +15,6 @@
   import { account, network } from '$stores';
   import type { Account } from '$stores/account';
 
-  import MobileDetailsDialog from './MobileDetailsDialog.svelte';
   import StatusInfoDialog from './StatusInfoDialog.svelte';
   import Transaction from './Transaction.svelte';
 
@@ -31,11 +30,8 @@
 
   let loadingTxs = false;
 
-  let detailsOpen = false;
   let isDesktopOrLarger: boolean;
 
-  let selectedItem: BridgeTransaction | null = null;
-
   const handlePageChange = (detail: number) => {
     isBlurred = true;
     setTimeout(() => {
@@ -67,16 +63,6 @@
     }
   };
 
-  const closeDetails = () => {
-    detailsOpen = false;
-    selectedItem = null;
-  };
-
-  const openDetails = (tx: BridgeTransaction) => {
-    detailsOpen = true;
-    selectedItem = tx;
-  };
-
   const updateTransactions = async (address: Address) => {
     const { mergedTransactions, outdatedLocalTransactions, error } = await fetchTransactions(address);
     transactions = mergedTransactions;
@@ -136,7 +122,7 @@
             class="flex flex-col items-center"
             style={isBlurred ? `filter: blur(5px); transition: filter ${transitionTime / 1000}s ease-in-out` : ''}>
             {#each transactionsToShow as item (item.hash)}
-              <Transaction {item} on:click={isDesktopOrLarger ? undefined : () => openDetails(item)} />
+              <Transaction {item} />
               <div class="h-sep" />
             {/each}
           </div>
@@ -156,8 +142,6 @@
   </div>
 </div>
 
-<MobileDetailsDialog {closeDetails} {detailsOpen} {selectedItem} />
-
 <OnAccount change={onAccountChange} />
 
 <DesktopOrLarger bind:is={isDesktopOrLarger} />
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
index a5943f0201f..0c569706904 100644
--- a/packages/bridge-ui-v2/src/i18n/en.json
+++ b/packages/bridge-ui-v2/src/i18n/en.json
@@ -102,9 +102,9 @@
       "release": "Release"
     },
     "status": {
-      "initiated": {
-        "name": "Initiated",
-        "description": "Transaction initiated"
+      "processing": {
+        "name": "Processing",
+        "description": "Transaction is processing. Depending on the pending blocks to be verified this can take up to several minutes."
       },
       "pending": {
         "name": "Pending",

From 7fba83d8fcbebaa4ac5c6e84a237451477ec2234 Mon Sep 17 00:00:00 2001
From: Korbinian Kasberger <korbi@taiko.xyz>
Date: Wed, 20 Sep 2023 12:44:39 +0200
Subject: [PATCH 5/5] cleanup

---
 .../src/components/Transactions/Transaction.svelte   | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte b/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
index 9e316003b16..18c0fc15209 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
@@ -21,16 +21,12 @@
   let isDesktopOrLarger = false;
 
   const handleClick = () => {
-    if (item?.status === MessageStatus.DONE) {
-      openDetails();
-    }
+    openDetails();
     dispatch('click');
   };
 
   const handlePress = () => {
-    if (item?.status === MessageStatus.DONE) {
-      openDetails();
-    }
+    openDetails();
     dispatch('press');
   };
 
@@ -39,7 +35,9 @@
   };
 
   const openDetails = () => {
-    detailsOpen = true;
+    if (item?.status === MessageStatus.DONE && !isDesktopOrLarger) {
+      detailsOpen = true;
+    }
   };
 
   const handleInsufficientFunds = () => {