feat: add tx search ability to tx history

packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionHistory.tsx

@@ -2,7 +2,9 @@ import { create } from 'zustand'
 
 import { MergedTransaction } from '../../state/app/state'
 import { TransactionHistorySearchBar } from './TransactionHistorySearchBar'
-import { TransactionHistorySearchResults } from './TransactionHistorySearchResults'
+import { TransactionHistoryTxHashSearchResult } from './TransactionHistoryTxHashSearch/TransactionHistoryTxHashSearchResult'
+import { TransactionHistoryAddressSearchResults } from './TransactionHistoryAddressSearchResults'
+import { TransactionsTableDetails } from './TransactionsTableDetails'
 
 type TxDetailsStore = {
   tx: MergedTransaction | null
@@ -35,7 +37,11 @@ export const TransactionHistory = () => {
     <div className="m-auto w-full max-w-[100vw] border-y border-white/30 bg-[#191919] py-4 pl-4 md:max-w-[1000px] md:rounded md:border-x md:pr-4">
       <TransactionHistorySearchBar />
 
-      <TransactionHistorySearchResults />
+      <TransactionHistoryTxHashSearchResult />
+
+      <TransactionHistoryAddressSearchResults />
+
+      <TransactionsTableDetails />
     </div>
   )
 }

packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionHistoryAddressSearchResults.tsx

@@ -0,0 +1,152 @@
+import dayjs from 'dayjs'
+import { useEffect, useMemo } from 'react'
+import { Tab } from '@headlessui/react'
+
+import { MergedTransaction } from '../../state/app/state'
+import {
+  ContentWrapper,
+  TransactionHistoryTable
+} from './TransactionHistoryTable'
+import { TransactionStatusInfo } from './TransactionStatusInfo'
+import {
+  isTxClaimable,
+  isTxCompleted,
+  isTxExpired,
+  isTxFailed,
+  isTxPending
+} from './helpers'
+import { TabButton } from '../common/Tab'
+import { TransactionsTableDetails } from './TransactionsTableDetails'
+import { useTransactionHistory } from '../../hooks/useTransactionHistory'
+import { useTransactionHistoryAddressStore } from './TransactionHistorySearchBar'
+
+function useTransactionHistoryUpdater() {
+  const { sanitizedAddress } = useTransactionHistoryAddressStore()
+
+  const transactionHistoryProps = useTransactionHistory(sanitizedAddress, {
+    runFetcher: true
+  })
+
+  const { transactions, updatePendingTransaction } = transactionHistoryProps
+
+  const pendingTransactions = useMemo(() => {
+    return transactions.filter(isTxPending)
+  }, [transactions])
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      pendingTransactions.forEach(updatePendingTransaction)
+    }, 10_000)
+
+    return () => clearInterval(interval)
+  }, [pendingTransactions, updatePendingTransaction])
+
+  return transactionHistoryProps
+}
+
+const tabClasses =
+  'text-white px-3 mr-2 border-b-2 ui-selected:border-white ui-not-selected:border-transparent ui-not-selected:text-white/80 arb-hover'
+
+export function TransactionHistoryAddressSearchResults() {
+  const { sanitizedTxHash } = useTransactionHistoryAddressStore()
+  const props = useTransactionHistoryUpdater()
+  const { transactions } = props
+  const { searchError } = useTransactionHistoryAddressStore()
+
+  const oldestTxTimeAgoString = useMemo(() => {
+    return dayjs(transactions[transactions.length - 1]?.createdAt).toNow(true)
+  }, [transactions])
+
+  const groupedTransactions = useMemo(
+    () =>
+      transactions.reduce(
+        (acc, tx) => {
+          if (isTxCompleted(tx) || isTxExpired(tx)) {
+            acc.settled.push(tx)
+          }
+          if (isTxPending(tx)) {
+            acc.pending.push(tx)
+          }
+          if (isTxClaimable(tx)) {
+            acc.claimable.push(tx)
+          }
+          if (isTxFailed(tx)) {
+            acc.failed.push(tx)
+          }
+          return acc
+        },
+        {
+          settled: [] as MergedTransaction[],
+          pending: [] as MergedTransaction[],
+          claimable: [] as MergedTransaction[],
+          failed: [] as MergedTransaction[]
+        }
+      ),
+    [transactions]
+  )
+
+  const pendingTransactions = [
+    ...groupedTransactions.failed,
+    ...groupedTransactions.pending,
+    ...groupedTransactions.claimable
+  ]
+
+  const settledTransactions = groupedTransactions.settled
+
+  if (typeof sanitizedTxHash !== 'undefined') {
+    // show search by tx id results instead
+    return null
+  }
+
+  if (searchError) {
+    return (
+      <ContentWrapper>
+        <p>{searchError}</p>
+      </ContentWrapper>
+    )
+  }
+
+  return (
+    <>
+      <div className="pr-4 md:pr-0">
+        <TransactionStatusInfo />
+      </div>
+      <Tab.Group as="div" className="h-full overflow-hidden rounded md:pr-0">
+        <Tab.List className="mb-4 flex border-b border-white/30">
+          <TabButton
+            aria-label="show pending transactions"
+            className={tabClasses}
+          >
+            <span className="text-sm md:text-base">Pending transactions</span>
+          </TabButton>
+          <TabButton
+            aria-label="show settled transactions"
+            className={tabClasses}
+          >
+            <span className="text-sm md:text-base">Settled transactions</span>
+          </TabButton>
+        </Tab.List>
+
+        <Tab.Panels className="h-full w-full overflow-hidden">
+          <Tab.Panel className="h-full w-full">
+            <TransactionHistoryTable
+              {...props}
+              transactions={pendingTransactions}
+              selectedTabIndex={0}
+              oldestTxTimeAgoString={oldestTxTimeAgoString}
+            />
+          </Tab.Panel>
+          <Tab.Panel className="h-full w-full">
+            <TransactionHistoryTable
+              {...props}
+              transactions={settledTransactions}
+              selectedTabIndex={1}
+              oldestTxTimeAgoString={oldestTxTimeAgoString}
+            />
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+      <TransactionsTableDetails />
+    </>
+  )
+}

packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionHistorySearchBar.tsx

@@ -6,60 +6,89 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
 
 import { Button } from '../common/Button'
+import { isValidTxHash } from './helpers'
 
 export enum TransactionHistorySearchError {
   INVALID_ADDRESS = 'That doesn’t seem to be a valid address, please try again.'
 }
 
 type TransactionHistoryAddressStore = {
-  address: string
+  addressOrTxHash: string
   sanitizedAddress: Address | undefined
+  sanitizedTxHash: string | undefined
   searchError: TransactionHistorySearchError | undefined
-  setAddress: (address: string) => void
+  setAddressOrTxHash: (addressOrTxHash: string) => void
   setSanitizedAddress: (address: string) => void
+  setSanitizedTxHash: (txHash: string | undefined) => void
   setSearchError: (error: TransactionHistorySearchError | undefined) => void
 }
 
 export const useTransactionHistoryAddressStore =
   create<TransactionHistoryAddressStore>(set => ({
-    address: '',
+    addressOrTxHash: '',
     sanitizedAddress: undefined,
-    setAddress: (address: string) => set({ address }),
+    setAddressOrTxHash: (addressOrTxHash: string) => set({ addressOrTxHash }),
     setSanitizedAddress: (address: string) => {
       if (isAddress(address)) {
         set({ sanitizedAddress: address })
       }
     },
+    sanitizedTxHash: undefined,
+    setSanitizedTxHash: (txHash: string | undefined) => {
+      if (isValidTxHash(txHash)) {
+        set({
+          sanitizedTxHash: txHash
+        })
+      }
+
+      if (typeof txHash === 'undefined') {
+        set({
+          sanitizedTxHash: undefined
+        })
+      }
+    },
     searchError: undefined,
     setSearchError: (error: TransactionHistorySearchError | undefined) =>
       set({ searchError: error })
   }))
 
 export function TransactionHistorySearchBar() {
-  const { address, setAddress, setSanitizedAddress, setSearchError } =
-    useTransactionHistoryAddressStore()
+  const {
+    addressOrTxHash,
+    setAddressOrTxHash,
+    setSanitizedAddress,
+    setSanitizedTxHash,
+    setSearchError
+  } = useTransactionHistoryAddressStore()
   const { address: connectedAddress } = useAccount()
 
   useEffect(() => {
-    if (address === '' && connectedAddress) {
+    if (addressOrTxHash === '' && connectedAddress) {
       setSanitizedAddress(connectedAddress)
+      setSanitizedTxHash(undefined)
       setSearchError(undefined)
     }
-  }, [address, connectedAddress, setSanitizedAddress, setSearchError])
+  }, [addressOrTxHash, connectedAddress, setSanitizedAddress, setSearchError])
 
   const searchTxForAddress = useCallback(() => {
-    if (address === '') {
+    if (addressOrTxHash === '') {
+      return
+    }
+
+    if (isValidTxHash(addressOrTxHash)) {
+      setSanitizedTxHash(addressOrTxHash)
+      setSearchError(undefined)
       return
     }
 
-    if (!isAddress(address)) {
+    if (!isAddress(addressOrTxHash)) {
       setSearchError(TransactionHistorySearchError.INVALID_ADDRESS)
       return
     }
 
-    setSanitizedAddress(address)
+    setSanitizedAddress(addressOrTxHash)
     setSearchError(undefined)
-  }, [address, setSanitizedAddress, setSearchError])
+  }, [addressOrTxHash, setSanitizedAddress, setSanitizedTxHash, setSearchError])
 
   return (
     <div className="mb-4 flex flex-row items-stretch pr-4 md:pr-0">
@@ -72,10 +101,10 @@ export function TransactionHistorySearchBar() {
         <MagnifyingGlassIcon className="ml-3 mr-1 h-3 w-3" />
         <input
           type="text"
-          value={address}
-          onChange={event => setAddress(event.target.value)}
+          value={addressOrTxHash}
+          onChange={event => setAddressOrTxHash(event.target.value)}
           inputMode="search"
-          placeholder="Search by address"
+          placeholder="Search by address or transaction hash"
           aria-label="Transaction history wallet address input"
           className="h-full w-full bg-transparent py-1 pl-1 pr-3 text-sm font-light placeholder:text-white/60"
           // stop password managers from autofilling
@@ -91,7 +120,7 @@ export function TransactionHistorySearchBar() {
             'disabled:border-y-0 disabled:border-r-0 disabled:border-l-gray-dark'
           )}
           onClick={searchTxForAddress}
-          disabled={!address}
+          disabled={!addressOrTxHash}
         >
           Search
         </Button>

packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionHistoryTable.tsx

@@ -28,6 +28,7 @@ import { TransactionsTableRow } from './TransactionsTableRow'
 import { EmptyTransactionHistory } from './EmptyTransactionHistory'
 import { MergedTransaction } from '../../state/app/state'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
+import { TABLE_HEADER_HEIGHT, TABLE_ROW_HEIGHT } from './constants'
 
 export const BatchTransferNativeTokenTooltip = ({
   children,
@@ -65,7 +66,7 @@ export const ContentWrapper = forwardRef<
 
 ContentWrapper.displayName = 'ContentWrapper'
 
-const TableHeader = ({
+export const TableHeader = ({
   children,
   className
 }: PropsWithChildren<{ className?: string }>) => (
@@ -148,8 +149,6 @@ export const TransactionHistoryTable = (
     oldestTxTimeAgoString
   } = props
 
-  const TABLE_HEADER_HEIGHT = 52
-  const TABLE_ROW_HEIGHT = 60
   const isTxHistoryEmpty = transactions.length === 0
   const isPendingTab = selectedTabIndex === 0