From 49741c56be4dcd456b0e9f63aebb60b7c3d6aa22 Mon Sep 17 00:00:00 2001
From: Korbinian <KorbinianK@users.noreply.github.com>
Date: Sun, 5 Nov 2023 02:14:15 +0100
Subject: [PATCH] feat(bridge-ui-v2): NFT transaction page (#15084)

---
 .../Bridge/NFTBridgeSteps/ImportStep.svelte   |   1 +
 .../Bridge/NFTBridgeSteps/ReviewStep.svelte   |   1 +
 .../ChainSelector/ChainSelector.svelte        |   7 +-
 .../src/components/Header/Header.svelte       |   3 +-
 .../src/components/Icon/IconFlipper.svelte    |  10 +-
 .../src/components/NFTs/NFTInfoDialog.svelte  |   7 +-
 .../TokenDropdown/TokenDropdown.svelte        |   4 +-
 .../Transactions/StatusFilterDropdown.svelte  |  79 ++++++
 .../Transactions/Transaction.svelte           | 244 +++++++++++++-----
 .../Transactions/Transactions.svelte          |  75 ++++--
 packages/bridge-ui-v2/src/i18n/en.json        |  16 +-
 .../src/libs/token/fetchNFTImageUrl.ts        | 125 ++++-----
 .../src/libs/util/customActions.ts            |  41 +++
 .../src/libs/util/safeParseUrl.ts             |   4 +-
 14 files changed, 442 insertions(+), 175 deletions(-)
 create mode 100644 packages/bridge-ui-v2/src/components/Transactions/StatusFilterDropdown.svelte
 create mode 100644 packages/bridge-ui-v2/src/libs/util/customActions.ts

diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
index c6fe84559a7..0c8d4548507 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte
@@ -322,6 +322,7 @@ Automatic NFT Input
             </Button>
 
             <IconFlipper
+              type="swap-rotate"
               iconType1="list"
               iconType2="cards"
               selectedDefault="cards"
diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
index 41b9a3fce72..0360ed51a7a 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte
@@ -108,6 +108,7 @@ NFT List or Card View
     </div>
     <div class="flex gap-2">
       <IconFlipper
+        type="swap-rotate"
         iconType1="list"
         iconType2="cards"
         selectedDefault="list"
diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
index 7f07a55c5e6..09f108ced8f 100644
--- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
+++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
@@ -47,6 +47,7 @@
     small ? 'w-auto' : 'w-full',
     readOnly ? '' : 'dark:hover:bg-tertiary-interactive-hover',
     'flex justify-start content-center',
+    $$props.class,
   );
 
   let iconSize = small ? 'w-5 h-5' : 'w-7 h-7';
@@ -66,7 +67,7 @@
     // We want to inform the user that they need to connect
     // their wallet if they want to change the network
     if (!$account.isConnected) {
-      warningToast({title: $t('messages.account.required')});
+      warningToast({ title: $t('messages.account.required') });
       return;
     }
     addEscKeyListener();
@@ -89,10 +90,10 @@
       } catch (err) {
         console.error(err);
         if (err instanceof SwitchChainError) {
-          warningToast({title: $t('messages.network.pending')});
+          warningToast({ title: $t('messages.network.pending') });
         }
         if (err instanceof UserRejectedRequestError) {
-          warningToast({title: $t('messages.network.rejected')});
+          warningToast({ title: $t('messages.network.rejected') });
         }
       } finally {
         switchingNetwork = false;
diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte
index 7edba706b9a..abeaeaad69a 100644
--- a/packages/bridge-ui-v2/src/components/Header/Header.svelte
+++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte
@@ -9,6 +9,7 @@
   import { account } from '$stores/account';
 
   $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft';
+  $: isTransactionsPage = $page.route.id === '/transactions';
 </script>
 
 <header
@@ -31,7 +32,7 @@
   <LogoWithText width={77} height={21} class="md:hidden" textFillClass={'fill-primary-content'} />
 
   <div class="flex justify-end w-full">
-    {#if isBridgePage}
+    {#if isBridgePage || isTransactionsPage}
       <BridgeTabs class="hidden md:flex md:flex-1" />
     {/if}
 
diff --git a/packages/bridge-ui-v2/src/components/Icon/IconFlipper.svelte b/packages/bridge-ui-v2/src/components/Icon/IconFlipper.svelte
index c5bc98bf34d..6427010601c 100644
--- a/packages/bridge-ui-v2/src/components/Icon/IconFlipper.svelte
+++ b/packages/bridge-ui-v2/src/components/Icon/IconFlipper.svelte
@@ -11,16 +11,22 @@
 
   export let selectedDefault: IconType = iconType1;
 
+  export let flipped: boolean = false;
+
+  export let type: 'swap-rotate' | 'swap-flip' | '' = '';
+
   const dispatch = createEventDispatcher();
 
   function handleLabelClick() {
     selectedDefault = selectedDefault === iconType1 ? iconType2 : iconType1;
+    flipped = !flipped;
     dispatch('labelclick');
   }
 
-  $: isDefault = selectedDefault === iconType1;
+  // $: isDefault = selectedDefault === iconType1;
+  $: isDefault = !flipped;
 
-  $: classes = classNames('swap swap-rotate btn-neutral', $$props.class);
+  $: classes = classNames('swap  btn-neutral', type, $$props.class);
 </script>
 
 <div role="button" tabindex="0" class={classes} on:click={handleLabelClick} on:keypress={handleLabelClick}>
diff --git a/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte b/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte
index 45a7f40f8e8..3354a674230 100644
--- a/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte
+++ b/packages/bridge-ui-v2/src/components/NFTs/NFTInfoDialog.svelte
@@ -32,6 +32,8 @@
   };
 
   $: currentChain = $network?.id;
+
+  $: imgUrl = nft.metadata?.image || placeholderUrl;
 </script>
 
 <dialog id={dialogId} class="modal modal-bottom md:modal-middle" class:modal-open={modalOpen}>
@@ -41,10 +43,7 @@
     <div class="f-col w-full space-y-[30px]">
       <h3 class="title-body-bold">{$t('bridge.nft.step.import.nft_card.title')}</h3>
 
-      <img
-        alt="placeholder nft"
-        src={nft.metadata?.image || placeholderUrl}
-        class="rounded-[20px] self-center bg-white" />
+      <img alt="nft" src={imgUrl} class="rounded-[20px] self-center bg-white" />
       <div id="metadata">
         <div class="f-between-center">
           <div class="text-secondary-content">{$t('common.collection')}</div>
diff --git a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
index f03b5416170..4332aa2889f 100644
--- a/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
+++ b/packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte
@@ -69,7 +69,7 @@
     // In order to select a token, we only need the source chain to be selected,
     // unless it's an imported token...
     if (!chain) {
-      warningToast({title: $t('messages.network.required')});
+      warningToast({ title: $t('messages.network.required') });
       return;
     }
 
@@ -78,7 +78,7 @@
     if (token.imported) {
       // ... in the case of imported tokens, we also require the destination chain to be selected.    if (!destChain) {
       if (!destChain) {
-        warningToast({title: $t('messages.network.required_dest')});
+        warningToast({ title: $t('messages.network.required_dest') });
         return;
       }
 
diff --git a/packages/bridge-ui-v2/src/components/Transactions/StatusFilterDropdown.svelte b/packages/bridge-ui-v2/src/components/Transactions/StatusFilterDropdown.svelte
new file mode 100644
index 00000000000..ac1df983405
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Transactions/StatusFilterDropdown.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { t } from 'svelte-i18n';
+
+  import IconFlipper from '$components/Icon/IconFlipper.svelte';
+  import { MessageStatus } from '$libs/bridge';
+  import { classNames } from '$libs/util/classNames';
+  import { closeOnEscapeOrOutsideClick } from '$libs/util/customActions';
+
+  export let selectedStatus: MessageStatus | null = null;
+
+  let flipped = false;
+
+  let iconFlipperComponent: IconFlipper;
+
+  let menuOpen = false;
+
+  const options = [
+    { value: null, label: $t('transactions.filter.all') },
+    { value: MessageStatus.NEW, label: $t('transactions.filter.processing') },
+    { value: MessageStatus.RETRIABLE, label: $t('transactions.filter.retry') },
+    { value: MessageStatus.DONE, label: $t('transactions.filter.claimed') },
+    { value: MessageStatus.FAILED, label: $t('transactions.filter.failed') },
+  ];
+
+  const selectOption = (option: (typeof options)[0]) => {
+    selectedStatus = option.value;
+    menuOpen = false;
+  };
+
+  const toggleMenu = () => {
+    menuOpen = !menuOpen;
+    flipped = !flipped;
+  };
+
+  $: menuClasses = classNames(
+    'menu absolute right-0 w-[210px] p-3 mt-2 rounded-[10px] bg-neutral-background z-10  box-shadow-small',
+    menuOpen ? 'visible opacity-100' : 'invisible opacity-0',
+  );
+</script>
+
+<div class="relative">
+  <button
+    aria-haspopup="listbox"
+    aria-expanded={menuOpen}
+    class="f-between-center w-[210px] min-h-[36px] max-h-[36px] px-6 bg-neutral border-0 shadow-none outline-none rounded-[6px]"
+    on:click|stopPropagation={toggleMenu}>
+    <span class="text-primary-content font-bold">
+      {selectedStatus !== null
+        ? options.find((option) => option.value === selectedStatus)?.label
+        : $t('transactions.filter.all')}
+    </span>
+    <IconFlipper
+      bind:flipped
+      bind:this={iconFlipperComponent}
+      iconType1="chevron-left"
+      iconType2="chevron-down"
+      selectedDefault="chevron-left"
+      size={15} />
+  </button>
+
+  {#if menuOpen}
+    <ul
+      role="listbox"
+      class={menuClasses}
+      use:closeOnEscapeOrOutsideClick={{ enabled: menuOpen, callback: () => (menuOpen = false) }}>
+      {#each options as option (option.value)}
+        <li
+          role="option"
+          aria-selected={option.value === selectedStatus}
+          tabindex="0"
+          class="flex items-center h-[56px] px-3 cursor-pointer rounded-[6px]"
+          on:click={() => selectOption(option)}
+          on:keydown={() => selectOption(option)}>
+          <span class="flex w-full h-[56px] text-primary-content font-bold">{option.label}</span>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
diff --git a/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte b/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
index 63eef4127bb..84d617f50ed 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
@@ -1,13 +1,21 @@
 <script lang="ts">
+  import { fetchTransaction, type Hash } from '@wagmi/core';
   import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { formatEther, formatUnits } from 'viem';
+  import { decodeFunctionData, formatEther, formatUnits } from 'viem';
 
+  import { erc721VaultABI, erc1155VaultABI } from '$abi';
   import { chainConfig } from '$chainConfig';
   import { DesktopOrLarger } from '$components/DesktopOrLarger';
   import { Icon } from '$components/Icon';
+  import { LoadingText } from '$components/LoadingText';
+  import NftInfoDialog from '$components/NFTs/NFTInfoDialog.svelte';
+  import Spinner from '$components/Spinner/Spinner.svelte';
   import { type BridgeTransaction, MessageStatus } from '$libs/bridge';
-  import { TokenType } from '$libs/token';
+  import { type NFT, TokenType } from '$libs/token';
+  import { fetchNFTImageUrl } from '$libs/token/fetchNFTImageUrl';
+  import { getTokenWithInfoFromAddress } from '$libs/token/getTokenWithInfoFromAddress';
+  import { truncateString } from '$libs/util/truncateString';
 
   import ChainSymbolName from './ChainSymbolName.svelte';
   import InsufficientFunds from './InsufficientFunds.svelte';
@@ -16,11 +24,17 @@
 
   export let item: BridgeTransaction;
 
+  let token: NFT;
+
+  export let loading = false;
+
   const dispatch = createEventDispatcher();
   let insufficientModal = false;
   let detailsOpen = false;
   let isDesktopOrLarger = false;
 
+  let nftInfoOpen = false;
+
   const handleClick = () => {
     openDetails();
     dispatch('click');
@@ -46,75 +60,187 @@
     openDetails();
   };
 
+  async function analyzeTransactionInput(): Promise<void> {
+    if (item.tokenType === TokenType.ETH || item.tokenType === TokenType.ERC20) return; // no special treatment for ETH or ERC20
+    const hash = item.hash as Hash;
+    loading = true;
+    // Retrieve transaction data
+    const transactionData = await fetchTransaction({ hash, chainId: Number(item.srcChainId) });
+
+    const abi = (() => {
+      switch (item.tokenType) {
+        case TokenType.ERC721:
+          return erc721VaultABI;
+        case TokenType.ERC1155:
+          return erc1155VaultABI;
+        default:
+          throw new Error('Invalid token type');
+      }
+    })();
+
+    const { functionName, args: decodedInputData } = await decodeFunctionData({
+      abi,
+      data: transactionData.input,
+    });
+    if (!decodedInputData) throw new Error('Invalid input data');
+
+    if (functionName !== 'sendToken') throw new Error('Invalid function name');
+
+    const { token: tokenAddress, tokenIds } = decodedInputData[0];
+
+    token = (await getTokenWithInfoFromAddress({
+      contractAddress: tokenAddress,
+      srcChainId: Number(item.srcChainId),
+      owner: item.from,
+      tokenId: Number(tokenIds[0]),
+      type: item.tokenType,
+    })) as NFT;
+
+    token = await fetchNFTImageUrl(token);
+    loading = false;
+  }
+
+  $: analyzeTransactionInput();
+
   let attrs = isDesktopOrLarger ? {} : { role: 'button' };
+
+  const placeholderUrl = 'https://placehold.co/400x400.png';
+
+  $: imgUrl = token?.metadata?.image || placeholderUrl;
+
+  $: itemAmountDisplay = item.tokenType === TokenType.ERC721 ? '---' : item.amount;
 </script>
 
-<!-- We disable these warnings as we dynamically add the role -->
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-  {...attrs}
-  tabindex="0"
-  on:click={handleClick}
-  on:keydown={handlePress}
-  class="flex text-primary-content md:h-[80px] h-[45px] w-full">
-  {#if isDesktopOrLarger}
-    <div class="w-1/5 py-2 flex flex-row">
-      <ChainSymbolName chainId={item.srcChainId} />
-    </div>
-    <div class="w-1/5 py-2 flex flex-row">
-      <ChainSymbolName chainId={item.destChainId} />
-    </div>
-    <div class="w-1/5 py-2 flex flex-col justify-center">
-      {#if item.tokenType === TokenType.ERC20}
-        {formatUnits(item.amount ? item.amount : BigInt(0), item.decimals)}
-      {:else if item.tokenType === TokenType.ERC721}
-        {item.amount}
-      {:else if item.tokenType === TokenType.ERC1155}
-        {item.amount}
-      {:else if item.tokenType === TokenType.ETH}
-        {formatEther(item.amount ? item.amount : BigInt(0))}
-      {/if}
-      {item.symbol}
-    </div>
-  {:else}
-    <div class="flex text-primary-content h-[80px] w-full">
-      <div class="flex-col">
-        <div class="flex">
-          <ChainSymbolName chainId={item.srcChainId} />
-          <i role="img" aria-label="arrow to" class="mx-auto px-2">
-            <Icon type="arrow-right" />
-          </i>
-          <ChainSymbolName chainId={item.destChainId} />
-        </div>
-        <div class="py-2 flex flex-col justify-center">
+{#if [TokenType.ETH, TokenType.ERC20].includes(item.tokenType)}
+  <!-- We disable these warnings as we dynamically add the role -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    {...attrs}
+    tabindex="0"
+    on:click={handleClick}
+    on:keydown={handlePress}
+    class="flex text-primary-content md:h-[80px] h-[45px] w-full">
+    {#if isDesktopOrLarger}
+      <div class="w-1/5 py-2 flex flex-row">
+        <ChainSymbolName chainId={item.srcChainId} />
+      </div>
+      <div class="w-1/5 py-2 flex flex-row">
+        <ChainSymbolName chainId={item.destChainId} />
+      </div>
+      <div class="w-1/5 py-2 flex flex-col justify-center">
+        {#if item.tokenType === TokenType.ERC20}
+          {formatUnits(item.amount ? item.amount : BigInt(0), item.decimals)}
+        {:else if item.tokenType === TokenType.ETH}
           {formatEther(item.amount ? item.amount : BigInt(0))}
-          {item.symbol}
+        {/if}
+        {item.symbol}
+      </div>
+    {:else}
+      <div class="flex text-primary-content h-[80px] w-full">
+        <div class="flex-col">
+          <div class="flex">
+            <ChainSymbolName chainId={item.srcChainId} />
+            <i role="img" aria-label="arrow to" class="mx-auto px-2">
+              <Icon type="arrow-right" />
+            </i>
+            <ChainSymbolName chainId={item.destChainId} />
+          </div>
+          <div class="py-2 flex flex-col justify-center">
+            {formatEther(item.amount ? item.amount : BigInt(0))}
+            {item.symbol}
+          </div>
         </div>
       </div>
+    {/if}
+
+    <div class="sm:w-1/4 md:w-1/5 py-2 flex flex-col justify-center">
+      <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
+        class="flex justify-start py-3 link"
+        href={`${chainConfig[Number(item.srcChainId)].urls.explorer}/tx/${item.hash}`}
+        target="_blank">
+        {$t('transactions.link.explorer')}
+        <Icon type="arrow-top-right" fillClass="fill-primary-link" />
+      </a>
     </div>
-  {/if}
-
-  <div class="sm:w-1/4 md:w-1/5 py-2 flex flex-col justify-center">
-    <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
-      class="flex justify-start py-3 link"
-      href={`${chainConfig[Number(item.srcChainId)].urls.explorer}/tx/${item.hash}`}
-      target="_blank">
-      {$t('transactions.link.explorer')}
-      <Icon type="arrow-top-right" fillClass="fill-primary-link" />
-    </a>
+{:else if [TokenType.ERC1155, TokenType.ERC721].includes(item.tokenType)}
+  <!-- We disable these warnings as we dynamically add the role -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    {...attrs}
+    tabindex="0"
+    on:click={handleClick}
+    on:keydown={handlePress}
+    class="flex text-primary-content items-center md:h-[80px] h-[45px] w-full relative">
+    {#if isDesktopOrLarger}
+      <button class="w-2/6 py-2 flex flex-row space-x-[8px]" on:click={() => (nftInfoOpen = true)}>
+        {#if loading}
+          <div class="rounded-[10px] w-[50px] h-[50px] bg-neutral flex items-center justify-center">
+            <Spinner />
+          </div>
+          <div class="f-col text-left space-y-1">
+            <LoadingText mask="&nbsp;" class="min-w-[50px] max-w-[50px] h-4" />
+            <LoadingText mask="&nbsp;" class="min-w-[90px] max-w-[90px] h-4" />
+            <LoadingText mask="&nbsp;" class="min-w-[20px] max-w-[20px] h-4" />
+          </div>
+        {:else}
+          <img alt="nft" src={imgUrl} class="rounded-[10px] min-w-[50px] max-w-[50px] bg-neutral self-center" />
+          <div class="f-col text-left">
+            <div class="text-sm">{token?.name ? truncateString(token?.name, 15) : ''}</div>
+            <div class="text-sm text-secondary-content">
+              {token?.metadata?.name ? truncateString(token?.metadata?.name, 15) : ''}
+            </div>
+            <div class="text-sm text-secondary-content">{token?.tokenId}</div>
+          </div>
+        {/if}
+      </button>
+
+      <div class="w-1/6 py-2 flex flex-row">
+        <ChainSymbolName chainId={item.srcChainId} />
+      </div>
+      <div class="w-1/6 py-2 flex flex-row">
+        <ChainSymbolName chainId={item.destChainId} />
+      </div>
+      <div class="w-1/6 py-2 flex flex-col justify-center">
+        {itemAmountDisplay}
+      </div>
+    {:else}
+      TODO: mobile view
+    {/if}
+    <div class="sm:w-1/4 md:w-1/6 py-2 flex flex-col justify-center">
+      <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/6 py-2 flex flex-col justify-center">
+      <a
+        class="flex justify-start py-3 link"
+        href={`${chainConfig[Number(item.srcChainId)].urls.explorer}/tx/${item.hash}`}
+        target="_blank">
+        {$t('transactions.link.explorer')}
+        <Icon type="arrow-top-right" fillClass="fill-primary-link" />
+      </a>
+    </div>
   </div>
-</div>
+{/if}
 
 <DesktopOrLarger bind:is={isDesktopOrLarger} />
 
 <MobileDetailsDialog {closeDetails} {detailsOpen} selectedItem={item} on:insufficientFunds={handleInsufficientFunds} />
 
+{#if token}
+  <NftInfoDialog bind:modalOpen={nftInfoOpen} nft={token} viewOnly />
+{/if}
+
 <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 3009c29092d..96df6942274 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/Transactions.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/Transactions.svelte
@@ -2,6 +2,8 @@
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
 
+  import { activeBridge } from '$components/Bridge/state';
+  import { BridgeTypes } from '$components/Bridge/types';
   import { Card } from '$components/Card';
   import { ChainSelector } from '$components/ChainSelector';
   import { DesktopOrLarger } from '$components/DesktopOrLarger';
@@ -10,11 +12,13 @@
   import { Paginator } from '$components/Paginator';
   import { Spinner } from '$components/Spinner';
   import { transactionConfig } from '$config';
-  import { type BridgeTransaction, fetchTransactions } from '$libs/bridge';
+  import { type BridgeTransaction, fetchTransactions, MessageStatus } from '$libs/bridge';
   import { bridgeTxService } from '$libs/storage';
+  import { TokenType } from '$libs/token';
   import { account, network } from '$stores';
   import type { Account } from '$stores/account';
 
+  import StatusFilterDropdown from './StatusFilterDropdown.svelte';
   import StatusInfoDialog from './StatusInfoDialog.svelte';
   import Transaction from './Transaction.svelte';
 
@@ -63,52 +67,81 @@
     }
   };
 
+  let selectedStatus: MessageStatus | null = null; // null indicates no filter is applied
+
+  $: statusFilteredTransactions =
+    selectedStatus !== null ? transactions.filter((tx) => tx.status === selectedStatus) : transactions;
+
+  $: tokenAndStatusFilteredTransactions = statusFilteredTransactions.filter((tx) =>
+    displayTokenTypesBasedOnType.includes(tx.tokenType),
+  );
+
+  $: transactionsToShow = getTransactionsToShow(currentPage, pageSize, tokenAndStatusFilteredTransactions);
+
+  $: displayTokenTypesBasedOnType =
+    $activeBridge === BridgeTypes.FUNGIBLE ? [TokenType.ERC20, TokenType.ETH] : [TokenType.ERC721, TokenType.ERC1155];
+
+  $: filteredTransactions = transactions.filter((tx) => displayTokenTypesBasedOnType.includes(tx.tokenType));
+
   const updateTransactions = async (address: Address) => {
     const { mergedTransactions, outdatedLocalTransactions, error } = await fetchTransactions(address);
     transactions = mergedTransactions;
+
     if (outdatedLocalTransactions.length > 0) {
       await bridgeTxService.removeTransactions(address, outdatedLocalTransactions);
     }
     if (error) {
-      // Todo: handle different error scenarios
-      warningToast({title: $t('transactions.errors.relayer_offline')});
+      warningToast({ title: $t('transactions.errors.relayer_offline') });
     }
   };
 
   $: pageSize = isDesktopOrLarger ? transactionConfig.pageSizeDesktop : transactionConfig.pageSizeMobile;
 
-  $: transactionsToShow = getTransactionsToShow(currentPage, pageSize, transactions);
-
-  $: totalItems = transactions.length;
+  $: totalItems = filteredTransactions.length;
 
   // Some shortcuts to make the code more readable
   $: isConnected = $account?.isConnected;
-  $: hasTxs = transactions.length > 0;
+  $: hasTxs = filteredTransactions.length > 0;
 
   // Controls what we render on the page
   $: renderLoading = loadingTxs && isConnected;
   $: renderTransactions = !renderLoading && isConnected && hasTxs;
-  $: renderNoTransactions = !renderLoading && !renderTransactions;
+  $: renderNoTransactions = renderTransactions && transactionsToShow.length === 0;
 </script>
 
 <div class="flex flex-col justify-center w-full">
   <Card title={$t('transactions.title')} text={$t('transactions.description')}>
     <div class="space-y-[35px]">
-      <ChainSelector label={$t('chain_selector.currently_on')} value={$network} switchWallet small />
+      <div class="my-[30px] f-between-center max-h-[36px]">
+        <ChainSelector label={$t('chain_selector.currently_on')} value={$network} switchWallet small />
+        <StatusFilterDropdown bind:selectedStatus />
+      </div>
       <div class="flex flex-col" style={`min-height: calc(${transactionsToShow.length} * 80px);`}>
+        <div class="h-sep" />
         {#if isDesktopOrLarger}
-          <div class="h-sep" />
           <div class="text-primary-content flex">
-            <div class="w-1/5 py-2">{$t('transactions.header.from')}</div>
-            <div class="w-1/5 py-2">{$t('transactions.header.to')}</div>
-            <div class="w-1/5 py-2">{$t('transactions.header.amount')}</div>
-            <div class="w-1/5 py-2 flex flex-row">
-              {$t('transactions.header.status')}
-              <StatusInfoDialog />
-            </div>
-            <div class="w-1/5 py-2">{$t('transactions.header.explorer')}</div>
+            {#if $activeBridge === BridgeTypes.FUNGIBLE}
+              <div class="w-1/5 py-2 text-secondary-content">{$t('transactions.header.from')}</div>
+              <div class="w-1/5 py-2 text-secondary-content">{$t('transactions.header.to')}</div>
+              <div class="w-1/5 py-2 text-secondary-content">{$t('transactions.header.amount')}</div>
+              <div class="w-1/5 py-2 text-secondary-content flex flex-row">
+                {$t('transactions.header.status')}
+                <StatusInfoDialog />
+              </div>
+              <div class="w-1/5 py-2 text-secondary-content">{$t('transactions.header.explorer')}</div>
+            {:else if $activeBridge === BridgeTypes.NFT}
+              <div class="w-2/6 py-2 text-secondary-content">Item</div>
+              <div class="w-1/6 py-2 text-secondary-content">{$t('transactions.header.from')}</div>
+              <div class="w-1/6 py-2 text-secondary-content">{$t('transactions.header.to')}</div>
+              <div class="w-1/6 py-2 text-secondary-content">{$t('transactions.header.amount')}</div>
+              <div class="w-1/6 py-2 text-secondary-content flex flex-row">
+                {$t('transactions.header.status')}
+                <StatusInfoDialog />
+              </div>
+              <div class="w-1/6 py-2 text-secondary-content">{$t('transactions.header.explorer')}</div>
+            {/if}
           </div>
-          <div class="h-sep" />
+          <div class="h-sep !mb-0" />
         {/if}
 
         {#if renderLoading}
@@ -123,7 +156,9 @@
             style={isBlurred ? `filter: blur(5px); transition: filter ${transitionTime / 1000}s ease-in-out` : ''}>
             {#each transactionsToShow as item (item.hash)}
               <Transaction {item} />
-              <div class="h-sep" />
+              {#if item.tokenType === TokenType.ERC721 || item.tokenType === TokenType.ERC1155}
+                <div class="h-sep !mb-0" />
+              {/if}
             {/each}
           </div>
         {/if}
diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
index 8f173bf06ed..3803c4a5058 100644
--- a/packages/bridge-ui-v2/src/i18n/en.json
+++ b/packages/bridge-ui-v2/src/i18n/en.json
@@ -350,15 +350,25 @@
       "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."
     },
+    "filter": {
+      "all": "All transactions",
+      "claimed": "Claimed",
+      "failed": "Failed",
+      "processing": "Processing",
+      "retry": "Retriable"
+    },
     "header": {
       "amount": "Amount",
-      "explorer": "Explorer",
+      "explorer": "Explorer link",
       "from": "From",
       "status": "Status",
       "to": "To"
     },
-    "link.explorer": "View details",
-    "no_transactions": "No transactions yet",
+    "link": {
+      "explorer": "View details",
+      "explorer_short": "View"
+    },
+    "no_transactions": "No transactions found",
     "status": {
       "claim": {
         "description": "Your asset is now ready for claiming on the destination chain and requires a transaction. If you have set a processing fee, the relayer will automatically handle the claiming process on your behalf.",
diff --git a/packages/bridge-ui-v2/src/libs/token/fetchNFTImageUrl.ts b/packages/bridge-ui-v2/src/libs/token/fetchNFTImageUrl.ts
index 3e379ef16bc..b632eb8bd48 100644
--- a/packages/bridge-ui-v2/src/libs/token/fetchNFTImageUrl.ts
+++ b/packages/bridge-ui-v2/src/libs/token/fetchNFTImageUrl.ts
@@ -1,104 +1,71 @@
-import axios, { AxiosError, type AxiosResponse } from 'axios';
+import axios from 'axios';
 
-import { checkForAdblocker } from '$libs/util/checkForAdblock';
+// import { checkForAdblocker } from '$libs/util/checkForAdblock';
 import { extractIPFSCidFromUrl } from '$libs/util/extractIPFSCidFromUrl';
 import { fetchNFTMetadata } from '$libs/util/fetchNFTMetadata';
 import { getFileExtension } from '$libs/util/getFileExtension';
 import { getLogger } from '$libs/util/logger';
 import { safeParseUrl } from '$libs/util/safeParseUrl';
 
-import type { NFT, NFTMetadata } from './types';
+import type { NFT } from './types';
 
 const log = getLogger('libs:token:fetchNFTImageUrl');
 
-// TODO: very similar to fetchNFTMetadata, can we combine them?
-export const fetchNFTImageUrl = async (token: NFT): Promise<NFT> => {
-  try {
-    let metadata: NFTMetadata | null;
-    if (!token.metadata) {
-      metadata = await fetchNFTMetadata(token);
-    } else {
-      metadata = token.metadata;
-    }
-    if (!metadata?.image || metadata?.image === '') throw new Error('No image found');
-    else {
-      const url = safeParseUrl(metadata.image);
-      if (!url) throw new Error(`Invalid image URL: ${metadata.image}`);
-
-      let image;
-      try {
-        image = await axios.get(url);
-      } catch (err) {
-        const error = err as AxiosError;
-        log(`error fetching image for ${token.name} id: ${token.tokenId}`, error);
-        //todo: handle different error scenarios?
-        image = await retry(url, token.tokenId);
-      }
-      if (!image) {
-        const isBlocked = await checkForAdblocker(url);
-        if (isBlocked) {
-          log(`The resource at ${url} is blocked by an adblocker`);
-          image = await retry(url, token.tokenId);
-        } else {
-          throw new Error(`No image found for ${token.name} id: ${token.tokenId}`);
-        }
-      }
-
-      if (!image || image instanceof Error) {
-        // Handle errorx
-        throw new Error(`No image found for ${token.name} id: ${token.tokenId}`);
-      }
-      if (token.metadata) {
-        token.metadata.image = url;
-      } else {
-        token.metadata = {
-          description: '',
-          external_url: '',
-          image: url,
-          name: '',
-        };
-      }
-    }
-    return token;
-  } catch (error) {
-    return token;
+const retryRequest = async (url: string | null): Promise<string> => {
+  if (url === null) {
+    throw new Error('No URL provided for retry');
   }
-};
-
-// TODO: we could retry several times with different gateways
-const retry = async (url: string, tokenId: number): Promise<AxiosResponse | Error> => {
-  let newUrl;
-  tokenId !== undefined && tokenId !== null ? (newUrl = useGateway(url, tokenId)) : (newUrl = useGateway(url, tokenId));
-  if (newUrl) {
-    const result = await retryRequest(newUrl);
-    if (result instanceof Error) {
-      return result;
-    }
-    return result;
-  }
-  return new Error(`No image found for ${url}`);
-};
 
-const retryRequest = async (newUrl: string): Promise<AxiosResponse | Error> => {
   try {
-    log(`retrying with ${newUrl}`);
-    return await axios.get(newUrl);
+    await axios.get(url);
+    return url;
   } catch (error) {
     log('retrying failed', error);
-    throw new Error(`No image found for ${newUrl}`);
+    throw new Error(`No image found for ${url}`);
   }
 };
 
-//TODO: make this configurable via the config system?
-const useGateway = (url: string, tokenId: number) => {
+const useGateway = (url: string, tokenId: number): string | null => {
   const { cid } = extractIPFSCidFromUrl(url);
   const extension = getFileExtension(url);
-  let gateway: string;
   if (tokenId !== undefined && tokenId !== null && cid) {
-    gateway = `https://ipfs.io/ipfs/${cid}/${tokenId}.${extension}`;
+    return `https://ipfs.io/ipfs/${cid}/${tokenId}.${extension}`;
   } else {
-    log(`no valid CID found in ${url}`);
+    log(`No valid CID found in ${url}`);
     return null;
   }
-  return gateway;
+};
+
+const fetchImageUrl = async (url: string, tokenId: number): Promise<string> => {
+  try {
+    await axios.get(url);
+    return url;
+  } catch {
+    const newUrl = useGateway(url, tokenId);
+    if (newUrl) {
+      return await retryRequest(newUrl);
+    }
+    throw new Error(`No image found for ${url}`);
+  }
+};
+
+// Main function to fetch NFT image URL
+export const fetchNFTImageUrl = async (token: NFT): Promise<NFT> => {
+  try {
+    const metadata = token.metadata || (await fetchNFTMetadata(token)); // Assume fetchNFTMetadata is imported
+    if (!metadata?.image) throw new Error('No image found');
+
+    const url = safeParseUrl(metadata.image); // Assume safeParseUrl is defined elsewhere
+    if (!url) throw new Error(`Invalid image URL: ${metadata.image}`);
+
+    const imageUrl = await fetchImageUrl(url, token.tokenId);
+    token.metadata = {
+      ...metadata,
+      image: imageUrl,
+    };
+    return token;
+  } catch (error) {
+    log(`Error fetching image for ${token.name} id: ${token.tokenId}`, error);
+    return token; // Returning the original token if any error occurs
+  }
 };
diff --git a/packages/bridge-ui-v2/src/libs/util/customActions.ts b/packages/bridge-ui-v2/src/libs/util/customActions.ts
new file mode 100644
index 00000000000..96993854a6f
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/util/customActions.ts
@@ -0,0 +1,41 @@
+/**
+ * Svelte custom action to close a modal on escape or outside click
+ *
+ * Example usage:
+ * <div use:closeOnEscapeOrOutsideClick={{ enabled: modalIsOpen, callback: closeModal }}></div>
+ *
+ * @export
+ * @param {HTMLElement} node
+ * @param {{ enabled: boolean; callback: () => void }} { enabled, callback }
+ * @return {*}
+ */
+export function closeOnEscapeOrOutsideClick(
+  node: HTMLElement,
+  { enabled, callback }: { enabled: boolean; callback: () => void },
+) {
+  const handleClick = (event: Event) => {
+    if (enabled && !node.contains(event.target as Node)) {
+      callback();
+    }
+  };
+
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (enabled && event.key === 'Escape') {
+      callback();
+    }
+  };
+
+  document.addEventListener('click', handleClick);
+  document.addEventListener('keydown', handleKeydown);
+
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick);
+      document.removeEventListener('keydown', handleKeydown);
+    },
+    update({ enabled: newEnabled, callback: newCb }: { enabled: boolean; callback: () => void }) {
+      enabled = newEnabled;
+      callback = newCb;
+    },
+  };
+}
diff --git a/packages/bridge-ui-v2/src/libs/util/safeParseUrl.ts b/packages/bridge-ui-v2/src/libs/util/safeParseUrl.ts
index 0aeba083176..006059af8d1 100644
--- a/packages/bridge-ui-v2/src/libs/util/safeParseUrl.ts
+++ b/packages/bridge-ui-v2/src/libs/util/safeParseUrl.ts
@@ -1,11 +1,11 @@
 export const safeParseUrl = (uri: string) => {
   const IPFS_PREFIX = 'ipfs://';
-  
+
   if (uri && uri.startsWith(IPFS_PREFIX)) {
     // todo: multiple configurable ipfs gateways as fallback
     const ipfsPath = uri.replace(IPFS_PREFIX, '');
     return `https://ipfs.io/ipfs/${ipfsPath}`;
   }
-  
+
   return uri;
 };