chore(bridge-ui-v2): cherrypick hotfixes (#14763)

lefthook.yml

@@ -5,9 +5,9 @@ pre-commit:
     # bridge-ui:
     #   glob: "packages/bridge-ui/**.{js,svelte,ts}"
     #   run: pnpm -F bridge-ui lint:fix && git add {staged_files}
-    # bridge-ui-v2:
-    #   glob: "packages/bridge-ui-v2/**.{js,ts,css,svelte}"
-    #   run: pnpm -F bridge-ui-v2 svelte:check && pnpm -F bridge-ui-v2 lint:fix && git add {staged_files}
+    bridge-ui-v2:
+      glob: "packages/bridge-ui-v2/**.{js,ts,css,svelte}"
+      run: pnpm -F bridge-ui-v2 svelte:check && pnpm -F bridge-ui-v2 lint:fix && git add {staged_files}
     protocol_sol:
       glob: "packages/protocol/**.{sol}"
       run: pnpm -F protocol lint:sol && git add {staged_files}

packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte

@@ -296,6 +296,9 @@
       }
     }
   }
+  $: if ($selectedToken && amountComponent) {
+    amountComponent.validateAmount();
+  }
 </script>
 
 <Card class="w-full md:w-[524px]" title={$t('bridge.title.default')} text={$t('bridge.description')}>

packages/bridge-ui-v2/src/components/Bridge/ProcessingFee/NoneOption.svelte

@@ -11,8 +11,8 @@
   export let calculating = false;
   export let error = false;
 
-  async function compute(token: Maybe<Token>, userAddress?: Address, srcChainId?: number, destChainId?: number) {
-    if (!token || !userAddress || !srcChainId || !destChainId) {
+  async function compute(token: Maybe<Token>, userAddress?: Address, srcChain?: number, destChain?: number) {
+    if (!token || !userAddress || !srcChain || !destChain) {
       enoughEth = false;
       return;
     }
@@ -25,14 +25,14 @@
       // Get the balance of the user on the destination chain
       destBalance = await getBalance({
         userAddress,
-        srcChainId: destChainId,
+        srcChainId: destChain,
       });
 
       // Calculate the recommended amount of ETH needed for processMessage call
       const recommendedAmount = await recommendProcessingFee({
         token,
-        destChainId,
-        srcChainId,
+        destChainId: destChain,
+        srcChainId: srcChain,
       });
 
       // Does the user have enough ETH to claim manually on the destination chain?

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

@@ -61,8 +61,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",

packages/bridge-ui-v2/src/libs/token/getBalance.test.ts

@@ -64,7 +64,10 @@ describe('getBalance', () => {
 
     expect(balance).toEqual(mockBalanceForETH);
     expect(getAddress).not.toHaveBeenCalled();
-    expect(fetchBalance).toHaveBeenCalledWith({ address: mockWalletClient.account.address });
+    expect(fetchBalance).toHaveBeenCalledWith({
+      address: mockWalletClient.account.address,
+      chainId: Number(PUBLIC_L1_CHAIN_ID),
+    });
   });
 
   it('should return the balance of ERC20 token', async () => {

packages/bridge-ui-v2/src/libs/token/getBalance.ts

@@ -20,7 +20,7 @@ export async function getBalance({ userAddress, token, srcChainId, destChainId }
 
   if (!token || token.type === TokenType.ETH) {
     // If no token is passed in, we assume is ETH
-    tokenBalance = await fetchBalance({ address: userAddress });
+    tokenBalance = await fetchBalance({ address: userAddress, chainId: srcChainId });
   } else {
     // We need at least the source chain to find the address
     if (!srcChainId) return;