0xtrails 0.1.13 → 0.2.1

package/src/widget/components/AccountIntentTransactionHistory.tsx

@@ -1,5 +1,5 @@
 import type React from "react"
-import { useState, useRef } from "react"
+import { useState, useRef, useMemo } from "react"
 import { useIntentTransactionHistory } from "../hooks/useIntentTransactionHistory.js"
 import type { IntentTransaction } from "../../transactions.js"
 import { TokenImage } from "./TokenImage.js"
@@ -7,6 +7,11 @@ import { ScreenHeader } from "./ScreenHeader.js"
 import { TransactionDetails } from "./TransactionDetails.js"
 import { formatRawAmount } from "../../tokenBalances.js"
 import { formatRelativeDate } from "../../time.js"
+import { SearchInputField } from "./SearchInputField.js"
+import { Identicon } from "./Identicon.js"
+import { truncateAddress } from "../../utils.js"
+import { useConnections, useAccount } from "wagmi"
+import { ChevronDown } from "lucide-react"
 
 interface AccountIntentTransactionHistoryProps {
   accountAddress?: string
@@ -18,17 +23,18 @@ const ExecutionStatusBadge: React.FC<{ status?: string }> = ({ status }) => {
   const getStatusColor = (status?: string) => {
     switch (status) {
       case "executed":
-        return "bg-green-100 text-green-800"
+      case "completed":
+        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
       case "processing":
-        return "bg-blue-100 text-blue-800"
+        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
       case "pending":
-        return "bg-yellow-100 text-yellow-800"
+        return "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
       case "failed":
-        return "bg-red-100 text-red-800"
+        return "bg-yellow-100 text-gray-800 dark:bg-yellow-900 dark:text-gray-200"
       case "created":
-        return "bg-gray-100 text-gray-800"
+        return "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
       default:
-        return "bg-gray-100 text-gray-800"
+        return "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
     }
   }
 
@@ -38,7 +44,7 @@ const ExecutionStatusBadge: React.FC<{ status?: string }> = ({ status }) => {
         status,
       )}`}
     >
-      {status || "unknown status"}
+      {status || "unknown"}
     </span>
   )
 }
@@ -52,17 +58,17 @@ const TransactionItem: React.FC<{
   const dateInfo = formatRelativeDate(transaction.createdAt)
 
   return (
-    <div className="border border-gray-200 rounded-lg p-3 hover:bg-gray-50 transition-colors">
+    <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
       {/* Header with status and metadata */}
       <div className="flex items-center justify-between mb-2">
         <div className="flex items-center gap-2">
-          <span className="text-xs font-medium text-gray-600">
+          <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
             #{index + 1}
           </span>
           <ExecutionStatusBadge status={transaction.executionStatus} />
           {dateInfo.relative && (
             <span
-              className="text-xs text-gray-500 cursor-help"
+              className="text-xs text-gray-500 dark:text-gray-400 cursor-help"
               title={dateInfo.full || undefined}
             >
               {dateInfo.relative}
@@ -74,7 +80,7 @@ const TransactionItem: React.FC<{
             href={`https://etherscan.io/tx/${transaction.txnHash}`}
             target="_blank"
             rel="noopener noreferrer"
-            className="text-blue-600 hover:text-blue-800 text-xs"
+            className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 text-xs"
           >
             View on Explorer ↗
           </a>
@@ -93,7 +99,7 @@ const TransactionItem: React.FC<{
                 chainId={transaction.originToken.chainId}
                 size={20}
               />
-              <span className="text-xs font-medium text-gray-900">
+              <span className="text-xs font-medium text-gray-900 dark:text-gray-100">
                 {formatRawAmount(
                   transaction.originTokenAmount || "0",
                   transaction.originToken.decimals,
@@ -129,7 +135,7 @@ const TransactionItem: React.FC<{
                 chainId={transaction.destinationToken.chainId}
                 size={20}
               />
-              <span className="text-xs font-medium text-gray-900">
+              <span className="text-xs font-medium text-gray-900 dark:text-gray-100">
                 {formatRawAmount(
                   transaction.destinationTokenAmount || "0",
                   transaction.destinationToken.decimals,
@@ -147,7 +153,7 @@ const TransactionItem: React.FC<{
           <button
             type="button"
             onClick={() => setIsExpanded(true)}
-            className="flex items-center justify-center gap-1 py-1 px-3 rounded-md transition-colors cursor-pointer text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-100"
+            className="flex items-center justify-center gap-1 py-1 px-3 rounded-md transition-colors cursor-pointer text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
             aria-label="Show more details"
           >
             <span>More Details</span>
@@ -176,13 +182,13 @@ const TransactionItem: React.FC<{
           isExpanded ? "max-h-[400px] opacity-100" : "max-h-0 opacity-0"
         }`}
       >
-        <div className="p-3 rounded-lg bg-gray-50">
+        <div className="p-3 rounded-lg bg-gray-50 dark:bg-gray-800">
           {/* Close Button - only visible when expanded, at top center */}
           <div className="flex justify-center mb-3 -mt-1">
             <button
               type="button"
               onClick={() => setIsExpanded(false)}
-              className="flex items-center gap-1 px-3 py-1 text-xs bg-gray-200 hover:bg-gray-300 rounded-md transition-colors duration-200 text-gray-600 hover:text-gray-700 cursor-pointer"
+              className="flex items-center gap-1 px-3 py-1 text-xs bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition-colors duration-200 text-gray-600 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer"
               aria-label="Close details"
             >
               <span>Close</span>
@@ -211,11 +217,48 @@ const TransactionItem: React.FC<{
   )
 }
 
-const ITEMS_PER_PAGE = 2
+const ITEMS_PER_PAGE = 10
 
 export const AccountIntentTransactionHistory: React.FC<
   AccountIntentTransactionHistoryProps
 > = ({ accountAddress, className = "", onBack }) => {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [statusFilter, setStatusFilter] = useState<string | null>(null)
+  const [isWalletDropdownOpen, setIsWalletDropdownOpen] = useState(false)
+  const [selectedWalletAddress, setSelectedWalletAddress] = useState<
+    string | null
+  >(null)
+  const walletDropdownRef = useRef<HTMLDivElement>(null)
+
+  const { address: currentAddress, connector } = useAccount()
+  const connections = useConnections()
+
+  // Get all connected wallets
+  const getConnectedWallets = () => {
+    const walletMap = new Map()
+
+    connections.forEach((connection) => {
+      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())
+  }
+
+  const connectedWallets = getConnectedWallets()
+
+  // Use selected wallet or fall back to accountAddress
+  const effectiveAccountAddress = selectedWalletAddress || accountAddress
+
   const {
     transactions,
     loading,
@@ -227,20 +270,99 @@ export const AccountIntentTransactionHistory: React.FC<
     prevPage,
     hasPrev,
   } = useIntentTransactionHistory({
-    accountAddress,
+    accountAddress: effectiveAccountAddress,
     pageSize: ITEMS_PER_PAGE,
-    enabled: !!accountAddress,
+    enabled: !!effectiveAccountAddress,
   })
 
+  // Filter transactions based on search query and status filter
+  const filteredTransactions = useMemo(() => {
+    let filtered = transactions
+
+    // Apply status filter
+    if (statusFilter) {
+      filtered = filtered.filter((tx) => {
+        const status = tx.executionStatus?.toLowerCase()
+        // "pending" filter includes both "pending" and "created" statuses
+        if (statusFilter === "pending") {
+          return status === "pending" || status === "created"
+        }
+        return status === statusFilter.toLowerCase()
+      })
+    }
+
+    // Apply search query filter
+    if (!searchQuery.trim()) {
+      return filtered
+    }
+
+    const query = searchQuery.toLowerCase()
+
+    return filtered.filter((tx) => {
+      // Search in addresses
+      if (
+        tx.originIntentAddress?.toLowerCase().includes(query) ||
+        tx.destinationIntentAddress?.toLowerCase().includes(query) ||
+        tx.mainSigner?.toLowerCase().includes(query) ||
+        tx.destinationToAddress?.toLowerCase().includes(query)
+      ) {
+        return true
+      }
+
+      // Search in transaction hashes
+      if (
+        tx.txnHash?.toLowerCase().includes(query) ||
+        tx.metaTxnId?.toLowerCase().includes(query) ||
+        tx.originIntentTxHash?.toLowerCase().includes(query) ||
+        tx.destinationIntentTxHash?.toLowerCase().includes(query) ||
+        tx.originIntentDepositTxHash?.toLowerCase().includes(query) ||
+        tx.destinationIntentDepositTxHash?.toLowerCase().includes(query)
+      ) {
+        return true
+      }
+
+      // Search in token addresses
+      if (
+        tx.originTokenAddress?.toLowerCase().includes(query) ||
+        tx.destinationTokenAddress?.toLowerCase().includes(query)
+      ) {
+        return true
+      }
+
+      // Search in token symbols
+      if (
+        tx.originToken?.symbol?.toLowerCase().includes(query) ||
+        tx.destinationToken?.symbol?.toLowerCase().includes(query)
+      ) {
+        return true
+      }
+
+      // Search in status
+      if (tx.executionStatus?.toLowerCase().includes(query)) {
+        return true
+      }
+
+      // Search in chain IDs
+      if (
+        tx.originChainId?.toString().includes(query) ||
+        tx.destinationChainId?.toString().includes(query)
+      ) {
+        return true
+      }
+
+      return false
+    })
+  }, [transactions, searchQuery, statusFilter])
+
   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 rounded-full flex items-center justify-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"
+              className="w-8 h-8 text-gray-400 dark:text-gray-500"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -253,10 +375,10 @@ export const AccountIntentTransactionHistory: React.FC<
               />
             </svg>
           </div>
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
+          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
             Connect Wallet
           </h3>
-          <p className="text-gray-600 max-w-sm">
+          <p className="text-gray-600 dark:text-gray-400 max-w-sm">
             Please connect your wallet to view your intent transaction history.
           </p>
         </div>
@@ -268,9 +390,9 @@ export const AccountIntentTransactionHistory: React.FC<
     return (
       <div className={`py-8 ${className}`}>
         <div className="text-center">
-          <div className="w-16 h-16 mx-auto mb-4 bg-red-100 rounded-full flex items-center justify-center">
+          <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"
+              className="w-8 h-8 text-red-400 dark:text-red-500"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -283,13 +405,13 @@ export const AccountIntentTransactionHistory: React.FC<
               />
             </svg>
           </div>
-          <h3 className="text-lg font-medium text-gray-900 mb-2">
+          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
             Error Loading Transactions
           </h3>
-          <p className="text-gray-600 mb-4">{error}</p>
+          <p className="text-gray-600 dark:text-gray-400 mb-4">{error}</p>
           <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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            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"
           >
             Try Again
           </button>
@@ -304,47 +426,176 @@ export const AccountIntentTransactionHistory: React.FC<
         onBack={onBack}
         headerContent="History"
         rightSideContent={
-          <button
-            onClick={refetch}
-            disabled={loading}
-            className={`p-2 rounded-md transition-colors cursor-pointer ${
-              loading
-                ? "opacity-50 cursor-not-allowed text-gray-400"
-                : "text-gray-600 hover:bg-gray-50 hover:text-gray-700"
-            } focus:outline-none focus:ring-2 focus:ring-blue-500`}
-            title="Refresh"
-          >
-            <svg
-              className={`w-4 h-4 ${loading ? "animate-spin" : ""}`}
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
+          <div className="flex items-center gap-2">
+            {/* Refresh Button */}
+            <button
+              onClick={refetch}
+              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"
             >
-              <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>
+              <svg
+                className={`w-4 h-4 ${loading ? "animate-spin" : ""}`}
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <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 && (
+              <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, 2)}
+                    </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={() => {
+                          setSelectedWalletAddress(wallet.address)
+                          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">
+        <SearchInputField
+          value={searchQuery}
+          onChange={setSearchQuery}
+          placeholder="Search history..."
+          rightAlignedComponent={
+            searchQuery && (
+              <button
+                onClick={() => setSearchQuery("")}
+                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"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            )
+          }
+        />
+
+        {/* Status Filter Buttons */}
+        <div className="flex items-center gap-2 mt-2">
+          <button
+            onClick={() =>
+              setStatusFilter(statusFilter === "completed" ? null : "completed")
+            }
+            className={`px-2 py-1.5 rounded-xl transition-colors cursor-pointer text-xs ${
+              statusFilter === "completed"
+                ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
+                : "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">Completed</span>
+          </button>
+          <button
+            onClick={() =>
+              setStatusFilter(statusFilter === "pending" ? null : "pending")
+            }
+            className={`px-2 py-1.5 rounded-xl transition-colors cursor-pointer text-xs ${
+              statusFilter === "pending"
+                ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
+                : "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">Pending</span>
+          </button>
+          <button
+            onClick={() =>
+              setStatusFilter(statusFilter === "failed" ? null : "failed")
+            }
+            className={`px-2 py-1.5 rounded-xl transition-colors cursor-pointer text-xs ${
+              statusFilter === "failed"
+                ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
+                : "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">Failed</span>
+          </button>
+        </div>
+
+        {(searchQuery || statusFilter) && transactions.length > 0 && (
+          <div className="text-xs text-gray-500 dark:text-gray-400 mt-2 px-1">
+            Showing {filteredTransactions.length} of {transactions.length}{" "}
+            transaction{transactions.length !== 1 ? "s" : ""}
+          </div>
+        )}
+      </div>
+
       <div className="flex-1 overflow-hidden flex flex-col">
         {loading && transactions.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 mb-4"></div>
-              <p className="text-gray-600">Loading intent transactions...</p>
+              <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>
         ) : transactions.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 rounded-full flex items-center justify-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"
+                  className="w-8 h-8 text-gray-400 dark:text-gray-500"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -357,18 +608,50 @@ export const AccountIntentTransactionHistory: React.FC<
                   />
                 </svg>
               </div>
-              <h3 className="text-lg font-medium text-gray-900 mb-2">
+              <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
                 No Intent Transactions
               </h3>
-              <p className="text-gray-600">
+              <p className="text-gray-600 dark:text-gray-400">
                 No intent transactions found for this account. Create your first
                 intent transaction to see it here.
               </p>
             </div>
           </div>
+        ) : filteredTransactions.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"
+                >
+                  <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">
+                {searchQuery && statusFilter
+                  ? `No ${statusFilter} transactions match "${searchQuery}".`
+                  : searchQuery
+                    ? `No transactions match your search "${searchQuery}".`
+                    : statusFilter
+                      ? `No ${statusFilter} transactions found.`
+                      : "No transactions found."}
+              </p>
+            </div>
+          </div>
         ) : (
           <div className="flex-1 overflow-y-auto space-y-3 pr-2">
-            {transactions.map((transaction, index) => (
+            {filteredTransactions.map((transaction, index) => (
               <TransactionItem
                 key={`${transaction.originIntentAddress}-${transaction.destinationIntentAddress}-${index}`}
                 transaction={transaction}
@@ -378,13 +661,13 @@ export const AccountIntentTransactionHistory: React.FC<
           </div>
         )}
 
-        {/* Pagination Controls - Always show unless no transactions on first page */}
-        {!(transactions.length === 0 && page === 0) && (
+        {/* Pagination Controls - Hide when searching, always show unless no transactions on first page */}
+        {!searchQuery && !(transactions.length === 0 && page === 0) && (
           <div className="flex items-center justify-center pt-2 mt-2 gap-4">
             <button
               onClick={prevPage}
               disabled={!hasPrev || loading}
-              className="p-2 rounded-full transition-colors text-gray-600 hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+              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"
@@ -404,7 +687,7 @@ export const AccountIntentTransactionHistory: React.FC<
             <button
               onClick={nextPage}
               disabled={!hasMore || loading}
-              className="p-2 rounded-full transition-colors text-gray-600 hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+              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"