0xtrails 0.13.1 → 0.14.0

package/src/widget/components/AccountIntentTransactionHistory.tsx

@@ -1,756 +0,0 @@
-import { ChevronDown } from "lucide-react"
-import type React from "react"
-import { useEffect, useMemo, useRef, useState } from "react"
-import { createWalletClient, custom, type EIP1193Provider } from "viem"
-import { useAccount, useConnections } from "wagmi"
-import type { Connector } from "wagmi"
-import type { WalletClient } from "viem"
-import { getChainInfo } from "../../chains.js"
-import { logger } from "../../logger.js"
-import { useMeldServiceProviders } from "../../query/meld.hooks.js"
-import { useCommitIntent } from "../../mutations.js"
-import type { FlatTokenBalancesData } from "../../query/balance.fetchers.js"
-import { formatRawAmount } from "../../utils/format.js"
-import type { Token } from "../../tokens.js"
-import { isNativeToken, truncateAddress } from "../../utils/address.js"
-import { useCombinedHistory } from "../hooks/useCombinedHistory.js"
-import {
-  getHistoryEmptyMessage,
-  getIntentStatuses,
-  HISTORY_FILTER_OPTIONS,
-  type HistoryFilterType,
-} from "../utils/historyFilters.js"
-import Identicon from "./Identicon.js"
-import { OnrampHistoryRow } from "./OnrampHistoryRow.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import SearchInputField from "./SearchInputField.js"
-import TransactionHistoryItem from "./TransactionHistoryItem.js"
-
-interface AccountIntentTransactionHistoryProps {
-  accountAddress?: string
-  className?: string
-  onBack?: () => void
-}
-
-const ITEMS_PER_PAGE = 10
-
-interface HistoryHeaderProps {
-  onBack?: () => void
-  onRefresh: () => void
-  loading: boolean
-  effectiveAccountAddress: string | undefined
-  onWalletSelect: (wallet: { address: string; connector: Connector }) => void
-  searchInput: string
-  setSearchInput: (value: string) => void
-  statusFilter: HistoryFilterType
-  setStatusFilter: (filter: HistoryFilterType) => void
-  resetIntentPagination: () => void
-}
-
-const HistoryHeader: React.FC<HistoryHeaderProps> = ({
-  onBack,
-  onRefresh,
-  loading,
-  effectiveAccountAddress,
-  onWalletSelect,
-  searchInput,
-  setSearchInput,
-  statusFilter,
-  setStatusFilter,
-  resetIntentPagination,
-}) => {
-  // Wallet dropdown state (internal to this component)
-  const [isWalletDropdownOpen, setIsWalletDropdownOpen] = useState(false)
-  const walletDropdownRef = useRef<HTMLDivElement>(null)
-
-  const { address: currentAddress, connector } = useAccount()
-  const connections = useConnections()
-
-  // Get all connected wallets
-  const connectedWallets = useMemo(() => {
-    const walletMap = new Map()
-
-    connections.forEach((connection) => {
-      if (!connection || !connection.accounts) return
-      connection.accounts.forEach((account) => {
-        if (account && !walletMap.has(account)) {
-          walletMap.set(account, {
-            address: account,
-            connector: connection.connector,
-            isActive:
-              connection.connector.id === connector?.id &&
-              account === currentAddress,
-          })
-        }
-      })
-    })
-
-    return Array.from(walletMap.values())
-  }, [connections, connector, currentAddress])
-  return (
-    <>
-      <ScreenHeader
-        onBack={onBack}
-        headerContent="History"
-        rightSideContent={
-          <div className="flex items-center gap-2">
-            {/* Refresh Button */}
-            <button
-              type="button"
-              onClick={onRefresh}
-              disabled={loading}
-              className={`p-2 rounded-md transition-colors cursor-pointer ${
-                loading
-                  ? "opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-500"
-                  : "text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200"
-              } focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400`}
-              title="Refresh"
-            >
-              <svg
-                className={`w-4 h-4 ${loading ? "animate-spin" : ""}`}
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <title>Refresh</title>
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                />
-              </svg>
-            </button>
-
-            {/* Wallet Filter Dropdown */}
-            {connectedWallets.length > 1 && effectiveAccountAddress && (
-              <div className="relative" ref={walletDropdownRef}>
-                <button
-                  type="button"
-                  onClick={() => setIsWalletDropdownOpen(!isWalletDropdownOpen)}
-                  className="flex h-8 px-4 justify-between items-center gap-2 rounded-full border border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600"
-                  title="Filter by wallet"
-                >
-                  <div className="flex items-center gap-2">
-                    <Identicon value={effectiveAccountAddress} size={16} />
-                    <span className="text-xs text-gray-600 dark:text-gray-400 font-medium whitespace-nowrap">
-                      {truncateAddress(effectiveAccountAddress, 4, 4)}
-                    </span>
-                  </div>
-                  <ChevronDown className="w-4 h-4" />
-                </button>
-
-                {isWalletDropdownOpen && (
-                  <div className="absolute top-full right-0 mt-0.5 min-w-[140px] max-w-[180px] trails-bg-secondary border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-20 whitespace-nowrap">
-                    {connectedWallets.map((wallet) => (
-                      <button
-                        key={wallet.address}
-                        type="button"
-                        onClick={() => {
-                          onWalletSelect({
-                            address: wallet.address,
-                            connector: wallet.connector,
-                          })
-                          setIsWalletDropdownOpen(false)
-                        }}
-                        className={`w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer first:rounded-t-xl last:rounded-b-xl ${
-                          effectiveAccountAddress === wallet.address
-                            ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400"
-                            : "text-gray-700 dark:text-gray-300"
-                        }`}
-                      >
-                        <Identicon value={wallet.address} size={16} />
-                        <span className="text-xs font-mono">
-                          {truncateAddress(wallet.address, 4, 4)}
-                        </span>
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        }
-      />
-
-      {/* Search Input */}
-      <div className="py-2 border-b border-gray-200 dark:border-gray-700 mb-2">
-        <SearchInputField
-          value={searchInput}
-          onChange={setSearchInput}
-          placeholder="Search history or enter Intent ID (0x...)..."
-          rightAlignedComponent={
-            <div className="flex items-center gap-1">
-              {searchInput && (
-                <button
-                  type="button"
-                  onClick={() => setSearchInput("")}
-                  className="p-2 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors cursor-pointer"
-                  title="Clear search"
-                >
-                  <svg
-                    className="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <title>Clear</title>
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M6 18L18 6M6 6l12 12"
-                    />
-                  </svg>
-                </button>
-              )}
-            </div>
-          }
-        />
-      </div>
-
-      {/* Status Filter Buttons */}
-      <div className="py-2">
-        <div className="flex items-center gap-2 mt-2 overflow-x-auto scrollbar-hide">
-          {HISTORY_FILTER_OPTIONS.map((option) => (
-            <button
-              key={option.key}
-              type="button"
-              title={option.tooltip}
-              onClick={() => {
-                setStatusFilter(option.key)
-                resetIntentPagination()
-              }}
-              className={`px-2 py-1.5 rounded-xl transition-colors cursor-pointer text-xs ${
-                statusFilter === option.key
-                  ? option.activeClass
-                  : "trails-bg-secondary text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
-              }`}
-            >
-              <span className="text-xs font-medium whitespace-nowrap">
-                {option.label}
-              </span>
-            </button>
-          ))}
-        </div>
-      </div>
-    </>
-  )
-}
-
-interface PartialErrorBannerProps {
-  errors: {
-    intent?: string
-    onramp?: string
-  }
-  refetch: () => void
-}
-
-const PartialErrorBanner: React.FC<PartialErrorBannerProps> = ({
-  errors,
-  refetch,
-}) => {
-  // Check for partial errors
-  const hasPartialError =
-    (errors.intent || errors.onramp) && !(errors.intent && errors.onramp)
-
-  return (
-    <>
-      {hasPartialError && (
-        <div className="mx-4 mb-2 p-2 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg">
-          <p className="text-xs text-yellow-800 dark:text-yellow-200">
-            {errors.intent && !errors.onramp
-              ? "Unable to load intent history. Showing onramp transactions only."
-              : !errors.intent && errors.onramp
-                ? "Unable to load onramp history. Showing intent transactions only."
-                : "Some data could not be loaded."}
-            <button
-              type="button"
-              onClick={refetch}
-              className="ml-2 underline hover:no-underline cursor-pointer"
-            >
-              Retry
-            </button>
-          </p>
-        </div>
-      )}
-    </>
-  )
-}
-
-export const AccountIntentTransactionHistory: React.FC<
-  AccountIntentTransactionHistoryProps
-> = ({ accountAddress, className = "", onBack }) => {
-  const [searchInput, setSearchInput] = useState("")
-  const [statusFilter, setStatusFilter] = useState<HistoryFilterType>("all")
-  const [recentlyCommittedIntent, setRecentlyCommittedIntent] = useState<
-    string | null
-  >(null)
-  const [selectedWallet, setSelectedWallet] = useState<{
-    address: string
-    connector: Connector
-  } | null>(null)
-  const [selectedWalletClient, setSelectedWalletClient] =
-    useState<WalletClient | null>(null)
-  const connections = useConnections()
-  const scrollContainerRef = useRef<HTMLDivElement>(null)
-
-  // Hook for committing intent
-  const commitIntentMutation = useCommitIntent()
-
-  const { data: meldProviders = [] } = useMeldServiceProviders()
-
-  // Clear recently committed intent when search input changes
-  useEffect(() => {
-    if (recentlyCommittedIntent && recentlyCommittedIntent !== searchInput) {
-      setRecentlyCommittedIntent(null)
-    }
-  }, [searchInput, recentlyCommittedIntent])
-
-  const isIntentId =
-    searchInput.startsWith("0x") &&
-    /^0x[a-fA-F0-9]+$/.test(searchInput) &&
-    searchInput.length >= 42
-
-  const effectiveAccountAddress = selectedWallet?.address || accountAddress
-  const intentStatuses = useMemo(
-    () => getIntentStatuses(statusFilter),
-    [statusFilter],
-  )
-
-  useEffect(() => {
-    if (!selectedWallet) {
-      return
-    }
-
-    const isStillConnected = connections.some((connection) =>
-      connection?.accounts?.some(
-        (account) =>
-          account?.toLowerCase() === selectedWallet.address.toLowerCase(),
-      ),
-    )
-
-    if (!isStillConnected) {
-      setSelectedWallet(null)
-      setSelectedWalletClient(null)
-    }
-  }, [connections, selectedWallet])
-
-  useEffect(() => {
-    let cancelled = false
-
-    const loadSelectedWalletClient = async () => {
-      if (!selectedWallet) {
-        setSelectedWalletClient(null)
-        return
-      }
-
-      try {
-        const provider = (await selectedWallet.connector.getProvider()) as
-          | EIP1193Provider
-          | undefined
-        const chainId = await selectedWallet.connector.getChainId()
-        const chain = getChainInfo(chainId)
-
-        if (cancelled) {
-          return
-        }
-
-        if (!provider || !chain) {
-          setSelectedWalletClient(null)
-          return
-        }
-
-        const client = createWalletClient({
-          account: selectedWallet.address as `0x${string}`,
-          chain,
-          transport: custom(provider),
-        })
-
-        if (!cancelled) {
-          setSelectedWalletClient(client)
-        }
-      } catch (error) {
-        if (!cancelled) {
-          logger.console.error(
-            "[AccountIntentTransactionHistory] Failed to create selected wallet client",
-            {
-              address: selectedWallet.address,
-              connectorId: selectedWallet.connector.id,
-              error,
-            },
-          )
-          setSelectedWalletClient(null)
-        }
-      }
-    }
-
-    void loadSelectedWalletClient()
-
-    return () => {
-      cancelled = true
-    }
-  }, [selectedWallet])
-
-  logger.console.log(
-    "[AccountIntentTransactionHistory] Using account address:",
-    effectiveAccountAddress,
-  )
-
-  // Use the combined history hook
-  const {
-    items: combinedItems,
-    isLoading: loading,
-    errors,
-    refetch,
-    hasMore: hasMoreData,
-    nextPageIntent: nextPage,
-    prevPageIntent: prevPage,
-    hasPrevIntent: hasPrev,
-    currentIntentPage: page,
-    refetchIntent,
-    resetIntentPagination,
-    getFilteredAndSearchedItems,
-  } = useCombinedHistory({
-    accountAddress: effectiveAccountAddress,
-    intentPageSize: ITEMS_PER_PAGE,
-    enabled: !!effectiveAccountAddress,
-    intentStatuses,
-  })
-
-  const hasMore = hasMoreData.intent
-
-  // Convert server-side balance data (already on each IntentTransaction) into
-  // the balancesByIntentAddress shape that TransactionHistoryItem + useIntentRecoverWithBalances expect
-  const balancesByIntentAddress = useMemo(() => {
-    const result: Record<
-      string,
-      {
-        tokenBalancesData: FlatTokenBalancesData | undefined
-        isLoading: boolean
-        error: Error | null
-      }
-    > = {}
-
-    for (const item of combinedItems) {
-      if (item.type !== "intent" || !item.data.balances) continue
-      for (const addrBalance of item.data.balances) {
-        const addr = addrBalance.intentAddress.toLowerCase()
-        if (result[addr]) continue
-
-        const tokens: Token[] = addrBalance.tokens.map((t) => ({
-          symbol: t.symbol,
-          name: t.symbol,
-          decimals: t.decimals,
-          contractAddress: t.contractAddress,
-          chainId: t.chainId,
-          isNativeToken: isNativeToken(t.contractAddress),
-          balance: t.balance,
-          balanceFormatted: formatRawAmount(t.balance, t.decimals),
-        }))
-
-        result[addr] = {
-          tokenBalancesData: {
-            tokens,
-            nativeTokens: tokens.filter((t) => t.isNativeToken),
-            erc20Tokens: tokens.filter((t) => !t.isNativeToken),
-            page: { page: 1 },
-          },
-          isLoading: false,
-          error: null,
-        }
-      }
-    }
-    return result
-  }, [combinedItems])
-
-  // Check for total error (both intent and onramp failed)
-  const hasTotalError = errors.intent && errors.onramp
-  const error = hasTotalError ? errors.intent || errors.onramp : null
-
-  // Filter transactions based on search query and status filter
-  const filteredItems = useMemo(() => {
-    return getFilteredAndSearchedItems(statusFilter, searchInput)
-  }, [statusFilter, searchInput, getFilteredAndSearchedItems])
-
-  if (!accountAddress) {
-    return (
-      <div
-        className={`flex flex-col items-center justify-center py-12 ${className}`}
-      >
-        <div className="text-center">
-          <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-            <svg
-              className="w-8 h-8 text-gray-400 dark:text-gray-500"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <title>Wallet Lock Icon</title>
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-              />
-            </svg>
-          </div>
-          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
-            Connect Wallet
-          </h3>
-          <p className="text-gray-600 dark:text-gray-400 max-w-sm">
-            Please connect your wallet to view your intent transaction history.
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className={`flex flex-col h-full max-h-[600px] ${className}`}>
-      <HistoryHeader
-        onBack={onBack}
-        onRefresh={refetch}
-        loading={loading}
-        effectiveAccountAddress={effectiveAccountAddress}
-        onWalletSelect={setSelectedWallet}
-        searchInput={searchInput}
-        setSearchInput={setSearchInput}
-        statusFilter={statusFilter}
-        setStatusFilter={setStatusFilter}
-        resetIntentPagination={resetIntentPagination}
-      />
-
-      <PartialErrorBanner errors={errors} refetch={refetch} />
-
-      <div className="flex-1 overflow-hidden flex flex-col relative">
-        {/* Loading overlay for pagination - moved to parent container */}
-        {loading && combinedItems.length > 0 && (
-          <div className="absolute inset-0 bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm z-10 flex items-center justify-center">
-            <div className="flex flex-col items-center gap-2">
-              <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600 dark:border-blue-400"></div>
-              <span className="text-sm text-gray-600 dark:text-gray-400">
-                Loading...
-              </span>
-            </div>
-          </div>
-        )}
-
-        {error ? (
-          <div className="text-center flex-1 flex items-center justify-center px-6 py-8">
-            <div>
-              <div className="w-16 h-16 mx-auto mb-4 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center">
-                <svg
-                  className="w-8 h-8 text-red-400 dark:text-red-500"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <title>Error</title>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.464 0L4.34 16.5c-.77.833.192 2.5 1.732 2.5z"
-                  />
-                </svg>
-              </div>
-              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
-                Error Loading Transactions
-              </h3>
-              <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
-                {error}
-              </p>
-              <button
-                type="button"
-                onClick={refetch}
-                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer"
-              >
-                Try Again
-              </button>
-            </div>
-          </div>
-        ) : loading && combinedItems.length === 0 ? (
-          <div className="flex items-center justify-center flex-1">
-            <div className="flex flex-col items-center">
-              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 dark:border-blue-400 mb-4"></div>
-              <p className="text-gray-600 dark:text-gray-400">
-                Loading intent transactions...
-              </p>
-            </div>
-          </div>
-        ) : combinedItems.length === 0 ? (
-          <div className="text-center flex-1 flex items-center justify-center px-6 py-8">
-            <div>
-              <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-                <svg
-                  className="w-8 h-8 text-gray-400 dark:text-gray-500"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <title>No Transactions</title>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                  />
-                </svg>
-              </div>
-              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
-                {statusFilter === "quoted"
-                  ? "No Quoted Transactions"
-                  : "No Intent Transactions"}
-              </h3>
-              <p className="text-gray-600 dark:text-gray-400">
-                {statusFilter === "quoted"
-                  ? "No quoted transactions found for this account."
-                  : "No intent transactions found for this account. Create your first intent transaction to see it here."}
-              </p>
-            </div>
-          </div>
-        ) : filteredItems.length === 0 ? (
-          <div className="text-center flex-1 flex items-center justify-center">
-            <div>
-              <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-                <svg
-                  className="w-8 h-8 text-gray-400 dark:text-gray-500"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <title>No Results</title>
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                  />
-                </svg>
-              </div>
-              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
-                No Results Found
-              </h3>
-              <p className="text-gray-600 dark:text-gray-400">
-                {searchInput && statusFilter !== "all"
-                  ? statusFilter === "onramp"
-                    ? `No onramp transactions match "${searchInput}".`
-                    : `No ${statusFilter} transactions match "${searchInput}".`
-                  : searchInput
-                    ? `No transactions match your search "${searchInput}".`
-                    : getHistoryEmptyMessage(statusFilter)}
-              </p>
-            </div>
-          </div>
-        ) : (
-          <div
-            ref={scrollContainerRef}
-            className="flex-1 overflow-y-auto space-y-3 pr-2 relative trails-scrollbar"
-          >
-            {filteredItems.map((item, index) => {
-              if (item.type === "intent") {
-                return (
-                  <TransactionHistoryItem
-                    key={`intent-${item.data.intentId}-${index}`}
-                    transaction={item.data}
-                    index={page * ITEMS_PER_PAGE + index}
-                    onRefetch={refetch}
-                    commitIntentMutation={commitIntentMutation}
-                    balancesByIntentAddress={balancesByIntentAddress}
-                    selectedWalletClient={selectedWalletClient}
-                    onRefetchBalances={refetchIntent}
-                    onCommitSuccess={() => {
-                      // Track this intent as recently committed to keep it visible
-                      if (isIntentId) {
-                        setRecentlyCommittedIntent(searchInput)
-                        // Clear after 10 seconds to reset filtering behavior
-                        setTimeout(
-                          () => setRecentlyCommittedIntent(null),
-                          10000,
-                        )
-                      }
-                      // Refetch history after a short delay to ensure API is updated
-                      setTimeout(() => {
-                        refetch()
-                      }, 1000)
-                    }}
-                  />
-                )
-              } else {
-                return (
-                  <OnrampHistoryRow
-                    key={`onramp-${item.data.id}-${index}`}
-                    transaction={item.data}
-                    meldProviders={meldProviders}
-                  />
-                )
-              }
-            })}
-          </div>
-        )}
-
-        {/* Pagination Controls - Only show when there are multiple pages */}
-        {!searchInput && (hasPrev || hasMore) && statusFilter !== "onramp" && (
-          <div className="flex items-center justify-center pt-2 mt-2 pb-2 gap-4">
-            <button
-              type="button"
-              onClick={() => {
-                prevPage()
-                scrollContainerRef.current?.scrollTo({
-                  top: 0,
-                  behavior: "smooth",
-                })
-              }}
-              disabled={!hasPrev || loading}
-              className="p-2 rounded-full transition-colors text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
-            >
-              <svg
-                className="w-4 h-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <title>Previous Page</title>
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M15 19l-7-7 7-7"
-                />
-              </svg>
-            </button>
-
-            <button
-              type="button"
-              onClick={() => {
-                nextPage()
-                scrollContainerRef.current?.scrollTo({
-                  top: 0,
-                  behavior: "smooth",
-                })
-              }}
-              disabled={!hasMore || loading}
-              className="p-2 rounded-full transition-colors text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
-            >
-              <svg
-                className="w-4 h-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <title>Next Page</title>
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}