feat(bridge-ui-v2): insufficient funds modal

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">

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,22 +31,23 @@
   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>;
 
   // UI state
   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 />

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>

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

@@ -1,27 +1,49 @@
 <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 = () => {
+    openDetails();
+    dispatch('click');
+  };
+
+  const handlePress = () => {
+    openDetails();
+    dispatch('press');
+  };
+
+  const closeDetails = () => {
+    detailsOpen = false;
+  };
+
+  const openDetails = () => {
+    if (item?.status === MessageStatus.DONE && !isDesktopOrLarger) {
+      detailsOpen = true;
+    }
+  };
 
-  const handlePress = () => dispatch('press');
+  const handleInsufficientFunds = () => {
+    insufficientModal = true;
+    openDetails();
+  };
 
   let attrs = isDesktopOrLarger ? {} : { role: 'button' };
 </script>
@@ -65,7 +87,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 +103,9 @@
     </a>
   </div>
 </div>
+
 <DesktopOrLarger bind:is={isDesktopOrLarger} />
+
+<MobileDetailsDialog {closeDetails} {detailsOpen} selectedItem={item} on:insufficientFunds={handleInsufficientFunds} />
+
+<InsufficientFunds bind:modalOpen={insufficientModal} />

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} />

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",