feat(bridge-ui): more detailed transactions view (#17899)

Co-authored-by: Daniel Wang <[email protected]>

packages/bridge-ui/src/components/ChainSelectors/ChainPill/ChainPill.svelte

@@ -21,7 +21,7 @@
 
   let classes = classNames('ChainPill relative', $$props.class);
 
-  let buttonClasses = `f-row body-regular bg-neutral-background px-2 py-[6px] !rounded-[10px] dark:hover:bg-primary-secondary-hover flex justify-start content-center ${$$props.class}`;
+  let buttonClasses = `f-row body-regular bg-neutral-background px-2 py-[6px] !rounded-full dark:hover:bg-primary-secondary-hover flex justify-start content-center ${$$props.class}`;
 
   let iconSize = 'min-w-5 max-w-5 min-h-5 max-h-5';
 

packages/bridge-ui/src/components/ConnectButton/ConnectButton.svelte

@@ -8,6 +8,7 @@
   import { web3modal } from '$libs/connect';
   import { refreshUserBalance, renderEthBalance } from '$libs/util/balance';
   import { noop } from '$libs/util/noop';
+  import { isMobile } from '$libs/util/responsiveCheck';
   import { shortenAddress } from '$libs/util/shortenAddress';
   import { account } from '$stores/account';
   import { ethBalance } from '$stores/balance';
@@ -43,15 +44,17 @@
 {#if connected}
   <button
     on:click={connectWallet}
-    class="rounded-full flex items-center pl-[8px] pr-[3px] md:max-h-[48px] max-h-[40px] min-h-[40px] wc-parent-glass !border-solid gap-2 font-bold">
+    class="rounded-full min-w-[140px] flex items-center justify-center md:pl-[8px] md:pr-[3px] md:max-h-[48px] max-h-[40px] min-h-[40px] wc-parent-glass !border-solid gap-2 font-bold {$$props.class}">
     <img
       alt="chain icon"
-      class="w-[24px]"
+      class="w-[24px] ml-[10px]"
       src={(currentChainId && getChainImage(currentChainId)) || 'chains/ethereum.svg'} />
-    <span class="flex items-center text-secondary-content justify-self-start gap-4 md:text-normal text-sm"
-      >{renderEthBalance(balance, 6)}
+    <span class="flex items-center text-secondary-content justify-self-start gap-4 md:text-normal text-sm">
+      {#if !$isMobile}
+        {renderEthBalance(balance, 6)}
+      {/if}
       <span
-        class="flex items-center text-tertiary-content btn-glass-bg rounded-full px-[10px] py-[4px] md:min-h-[38px] bg-tertiary-background">
+        class="flex items-center justify-center h-[35px] min-w-[133px] text-center text-tertiary-content btn-glass-bg rounded-full px-[10px] py-[4px] bg-tertiary-background">
         {shortenAddress(accountAddress, 4, 6)}
       </span>
     </span>

packages/bridge-ui/src/components/Dialogs/Shared/ClaimPreCheck.svelte

@@ -82,7 +82,7 @@
 
   $: txDestChainName = getChainName(Number(tx.destChainId));
 
-  $: correctChain = Number(tx.destChainId) === $connectedSourceChain.id;
+  $: correctChain = Number(tx.destChainId) === $connectedSourceChain?.id;
 
   $: successFullPreChecks = correctChain && hasEnoughEth && hasEnoughQuota;
 

packages/bridge-ui/src/components/ExplorerLink/ExplorerLink.svelte

@@ -2,18 +2,28 @@
   import type { Address, Hash } from 'viem';
 
   import { chainConfig } from '$chainConfig';
+  import { Icon } from '$components/Icon';
   import { classNames } from '$libs/util/classNames';
+  import { shortenAddress } from '$libs/util/shortenAddress';
 
-  type ExplorerCategory = 'address' | 'transaction' | 'token';
+  type ExplorerCategory = 'address' | 'tx' | 'token';
 
   export let urlParam: Hash | Address;
   export let chainId: number;
 
   export let category: ExplorerCategory;
+  export let linkText: string | null = null;
+
+  export let shorten: boolean = false;
 
   $: explorerLink = `${chainConfig[chainId]?.blockExplorers?.default.url}/${category}/${urlParam}`;
 </script>
 
-<a href={explorerLink} class={classNames('link', $$props.class)} target="_blank" rel="noopener noreferrer">
-  <slot />
+<a href={explorerLink} class={classNames('link f-row gap-1', $$props.class)} target="_blank" rel="noopener noreferrer">
+  {#if linkText}
+    <span>{linkText}</span>
+  {:else}
+    {shorten ? shortenAddress(urlParam, 8, 4) : urlParam}
+  {/if}
+  <Icon size={10} type="arrow-top-right" />
 </a>

packages/bridge-ui/src/components/Header/Header.svelte

@@ -2,11 +2,20 @@
   import { page } from '$app/stores';
   import BridgeTabs from '$components/Bridge/BridgeTabs.svelte';
   import { ConnectButton } from '$components/ConnectButton';
-  import { Icon } from '$components/Icon';
+  import { IconFlipper } from '$components/Icon';
+  import LogoWithText from '$components/Logo/LogoWithText.svelte';
   import { drawerToggleId } from '$components/SideNavigation';
   import { ThemeButton } from '$components/ThemeButton';
   import { account } from '$stores/account';
 
+  export let sideBarOpen = false;
+
+  const handleSideBarOpen = () => {
+    sideBarOpen = !sideBarOpen;
+  };
+
+  $: flipped = sideBarOpen;
+
   $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft';
   $: isTransactionsPage = $page.route.id === '/transactions';
 </script>
@@ -16,31 +25,40 @@
     sticky-top
     f-between-center
     justify-between
-    z-10
+    z-30
     px-4
     py-[20px]
-    border-b
-    border-b-divider-border
+
     glassy-background
     bg-grey-5/10
     dark:bg-grey-900/10
-    md:border-b-0
-    md:px-10
-    md:py-7
+    lg:px-10
+    lg:py-7
  ">
-  <div class="flex justify-end w-full">
+  <div class="flex justify-between items-center w-full">
+    <div class="lg:w-[226px] w-auto">
+      <LogoWithText class="md:w-[125px] w-[77px]" />
+    </div>
+
     {#if isBridgePage || isTransactionsPage}
-      <BridgeTabs class="hidden md:flex md:flex-1" />
+      <BridgeTabs class="hidden lg:flex md:flex-1" />
     {/if}
-
-    <ConnectButton connected={$account?.isConnected} />
-    <div class="hidden md:inline-flex">
-      <div class="v-sep my-auto mx-[8px] h-[24px]" />
-      <ThemeButton />
+    <div class="f-row">
+      <ConnectButton connected={$account?.isConnected} class="justify-self-end" />
+      <div class="hidden lg:inline-flex">
+        <div class="v-sep my-auto mx-[8px] h-[24px]" />
+        <ThemeButton />
+      </div>
     </div>
   </div>
-
-  <label for={drawerToggleId} class="ml-[10px] md:hidden">
-    <Icon type="bars-menu" />
+  <label for={drawerToggleId} class="ml-[10px] lg:hidden">
+    <IconFlipper
+      type="swap-rotate"
+      iconType1="bars-menu"
+      iconType2="x-close"
+      selectedDefault="bars-menu"
+      class="w-9 h-9 rounded-full"
+      bind:flipped
+      on:labelclick={handleSideBarOpen} />
   </label>
 </header>

packages/bridge-ui/src/components/Icon/Icon.svelte

@@ -18,6 +18,7 @@
     | 'check-circle'
     | 'info-circle'
     | 'plus-circle'
+    | 'status-circle'
     | 'circle'
     | 'arrow-right'
     | 'arrow-left'
@@ -163,6 +164,17 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="m10,1.98C5.57,1.98,1.98,5.57,1.98,10s3.59,8.02,8.02,8.02,8.02-3.59,8.02-8.02S14.43,1.98,10,1.98Zm.62,5.55c0-.34-.28-.62-.62-.62s-.62.28-.62.62v1.85h-1.85c-.34,0-.62.28-.62.62s.28.62.62.62h1.85v1.85c0,.34.28.62.62.62s.62-.28.62-.62v-1.85h1.85c.34,0,.62-.28.62-.62s-.28-.62-.62-.62h-1.85v-1.85Z" />
+  {:else if type === 'status-circle'}
+    <circle
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      class={fillClass}
+      opacity="0.2"
+      cx="10"
+      cy="10"
+      r="10"
+      fill="none" />
+    <circle fill-rule="evenodd" clip-rule="evenodd" class={fillClass} cx="10" cy="10" r="5" fill="none" />
   {:else if type === 'circle'}
     <circle class={fillClass} cx="10" cy="10" r="6" />
   {:else if type === 'arrow-right'}

packages/bridge-ui/src/components/Paginator/Paginator.svelte

@@ -28,7 +28,7 @@
     }
   }
 
-  const btnClass = 'btn btn-xs btn-ghost';
+  const btnClass = 'btn btn-xs btn-ghost disabled:bg-transparent disabled:cursor-not-allowed';
 
   // Computed flags for first and last page
   $: isFirstPage = currentPage === 1;
@@ -38,14 +38,13 @@
 {#if totalPages > 1}
   <!-- Show pagination buttons if needed -->
   <div class="pagination btn-group pt-4">
-    {#if !isFirstPage}
-      <!-- Button to go to previous page -->
-      <button class={btnClass} on:click={() => goToPage(currentPage - 1)}> <Icon type="chevron-left" /></button>
-    {/if}
+    <!-- Button to go to previous page -->
+    <button disabled={isFirstPage} class={btnClass} on:click={() => goToPage(currentPage - 1)}>
+      <Icon type="chevron-left" /></button>
     {$t('paginator.page')}
     <input
       type="number"
-      class="form-control mx-1 text-center rounded-md py-1 px-8"
+      class="form-control mx-1 text-center rounded-full bg-neutral-background border-none py-1 px-8"
       bind:value={currentPage}
       min={1}
       max={totalPages}
@@ -54,9 +53,8 @@
     {$t('paginator.of')}
     {totalPages}
     <!-- Button to go to next page -->
-    {#if !isLastPage}
-      <button class={btnClass} on:click={() => goToPage(currentPage + 1)}><Icon type="chevron-right" /></button>
-    {/if}
+    <button disabled={isLastPage} class={btnClass} on:click={() => goToPage(currentPage + 1)}
+      ><Icon type="chevron-right" /></button>
   </div>
 {/if}
 

packages/bridge-ui/src/components/Relayer/Relayer.svelte

@@ -6,8 +6,9 @@
   import ActionButton from '$components/Button/ActionButton.svelte';
   import Card from '$components/Card/Card.svelte';
   import OnAccount from '$components/OnAccount/OnAccount.svelte';
-  import Transaction from '$components/Transactions/Transaction.svelte';
+  import { FungibleTransactionRow, NftTransactionRow } from '$components/Transactions/Rows';
   import { type BridgeTransaction, fetchTransactions, MessageStatus } from '$libs/bridge';
+  import { TokenType } from '$libs/token';
   import { getLogger } from '$libs/util/logger';
   import { type Account, account } from '$stores/account';
 
@@ -20,7 +21,7 @@
   const onAccountChange = async (newAccount: Account, oldAccount?: Account) => {
     // We want to make sure that we are connected and only
     // fetch if the account has changed
-    if (newAccount.address && newAccount.address !== oldAccount?.address) {
+    if (newAccount && newAccount.address && newAccount.address !== oldAccount?.address) {
       reset();
     }
   };
@@ -80,6 +81,8 @@
   <div class="f-col space-y-[35px]">
     <span class="mt-[30px]">{$t('relayer_component.step1.title')}</span>
 
+    {transactions?.length}
+    {transactionsToShow?.length}
     <AddressInput
       labelText={$t('relayer_component.address_input_label')}
       isDisabled={inputDisabled}
@@ -101,10 +104,16 @@
       <div class="h-sep" />
     {/if}
   </div>
-  {#each transactionsToShow as tx}
-    {#if tx.status === MessageStatus.NEW}
-      <Transaction item={tx} {handleTransactionRemoved} bind:bridgeTxStatus={tx.status} />
+
+  {#each transactionsToShow as bridgeTx (bridgeTx.srcTxHash)}
+    {@const status = bridgeTx.msgStatus}
+    {@const isFungible = bridgeTx.tokenType === TokenType.ERC20 || bridgeTx.tokenType === TokenType.ETH}
+    {#if isFungible}
+      <FungibleTransactionRow bind:bridgeTx {handleTransactionRemoved} bridgeTxStatus={status} />
+    {:else}
+      <NftTransactionRow bind:bridgeTx {handleTransactionRemoved} bridgeTxStatus={status} />
     {/if}
+    <div class="h-sep !my-0 display-inline" />
   {/each}
 </Card>
 

packages/bridge-ui/src/components/SideNavigation/SideNavigation.svelte

@@ -10,7 +10,6 @@
   import BridgeTabs from '$components/Bridge/BridgeTabs.svelte';
   import { Icon } from '$components/Icon';
   import { LinkButton } from '$components/LinkButton';
-  import { LogoWithText } from '$components/Logo';
   import { ThemeButton } from '$components/ThemeButton';
   import {
     PUBLIC_DEFAULT_EXPLORER,
@@ -23,8 +22,12 @@
   let testnetName = PUBLIC_TESTNET_NAME || '';
   let drawerToggleElem: HTMLInputElement;
 
+  export let sideBarOpen: boolean;
+
   function closeDrawer() {
+    if (!drawerToggleElem) return;
     drawerToggleElem.checked = false;
+    sideBarOpen = false;
   }
 
   function onMenuKeydown(event: KeyboardEvent) {
@@ -40,63 +43,36 @@
   $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft';
   $: isFaucetPage = $page.route.id === '/faucet';
   $: isTransactionsPage = $page.route.id === '/transactions';
-
-  $: hasTestnetName = testnetName !== '';
 </script>
 
-<div class="drawer md:drawer-open">
+<div class=" drawer lg:drawer-open">
   <input id={drawerToggleId} type="checkbox" class="drawer-toggle" bind:this={drawerToggleElem} />
-
   <div class="drawer-content relative f-col w-full">
     <slot />
   </div>
 
-  <!-- Side drawer's z-index (20) must be greater than content's header (10)-->
-  <div class="drawer-side z-20">
+  <div class="drawer-side z-20 pt-[81px] lg:pt-[20px] h-full">
     <label for={drawerToggleId} class="drawer-overlay" />
 
     <!--
       Slow transitions can be pretty annoying after a while.
       Let's reduce it to 100ms for a better experience.
     -->
-    <div class="w-h-full !duration-100">
-      <header class="flex justify-between py-[20px] px-[16px] h-[76px] md:hidden border-b border-b-divider-border">
-        <div class="inline-block">
-          <a href="/" class="f-row gap-2">
-            <LogoWithText textFillClass="fill-primary-content" width={77} />
-            {#if hasTestnetName}
-              <span class="text-xs">{testnetName}</span>
-            {/if}
-          </a>
-        </div>
-        <button on:click={closeDrawer} class="h-9">
-          <Icon type="x-close" fillClass="fill-primary-icon" size={24} />
-        </button>
-      </header>
-
+    <div class="w-full !duration-100">
       <aside
         class="
         h-full
         px-[20px]
-        md:mt-0
-        md:px-4
-        md:py-8
-        md:w-[226px]
+        lg:mt-0
+        lg:px-4
+        lg:w-[226px]
       ">
-        <div class="hidden md:inline-block">
-          <a href="/" class="f-row gap-2">
-            <LogoWithText textFillClass="fill-primary-content" />
-            {#if hasTestnetName}
-              <span class="text-sm">{testnetName}</span>
-            {/if}
-          </a>
-        </div>
-
+        <div class="hidden lg:inline-block"></div>
         <div role="button" tabindex="0" on:click={closeDrawer} on:keypress={closeDrawer}>
-          <BridgeTabs class="md:hidden flex flex-1 mb-[40px] mt-[20px]" on:click={closeDrawer} />
+          <BridgeTabs class="lg:hidden flex flex-1 mb-[40px] mt-[20px]" on:click={closeDrawer} />
         </div>
         <div role="button" tabindex="0" on:click={closeDrawer} on:keydown={onMenuKeydown}>
-          <ul class="menu p-0 md:pt-10 space-y-2">
+          <ul class="menu p-0 space-y-2">
             <li>
               <LinkButton active={isBridgePage}>
                 <Icon type="bridge" fillClass={getIconFillClass(isBridgePage)} />
@@ -112,7 +88,7 @@
               </li>
             {/if}
             <li>
-              <LinkButton href="/transactions" active={isTransactionsPage}>
+              <LinkButton href="/transactions" active={isTransactionsPage} on:click={closeDrawer}>
                 <Icon type="transactions" fillClass={getIconFillClass(isTransactionsPage)} />
                 <span>{$t('nav.transactions')}</span>
               </LinkButton>
@@ -145,7 +121,7 @@
         </div>
         <ul class="">
           <li>
-            <div class="p-3 rounded-full flex md:hidden justify-start content-center">
+            <div class="p-3 rounded-full flex lg:hidden justify-start content-center">
               <Icon type="settings" />
               <div class="flex justify-between w-full pl-[6px]">
                 <span class="text-base">{$t('nav.theme')}</span>