fix: display sent and received txs in a single table

packages/arb-token-bridge-ui/src/components/App/AppContext.tsx

@@ -5,16 +5,14 @@ type AppContextState = {
     isTransferPanelVisible: boolean
     isTransferring: boolean
     isTransactionHistoryPanelVisible: boolean
-    isTransactionHistoryShowingSentTx: boolean
   }
 }
 
 const initialState: AppContextState = {
   layout: {
     isTransferPanelVisible: true,
     isTransferring: false,
-    isTransactionHistoryPanelVisible: false,
-    isTransactionHistoryShowingSentTx: true
+    isTransactionHistoryPanelVisible: false
   }
 }
 
@@ -27,7 +25,6 @@ type Action =
   | { type: 'layout.set_is_transfer_panel_visible'; payload: boolean }
   | { type: 'layout.set_is_transferring'; payload: boolean }
   | { type: 'layout.set_txhistory_panel_visible'; payload: boolean }
-  | { type: 'layout.set_txhistory_show_sent_tx'; payload: boolean }
 
 function reducer(state: AppContextState, action: Action) {
   switch (action.type) {
@@ -46,15 +43,6 @@ function reducer(state: AppContextState, action: Action) {
         }
       }
 
-    case 'layout.set_txhistory_show_sent_tx':
-      return {
-        ...state,
-        layout: {
-          ...state.layout,
-          isTransactionHistoryShowingSentTx: action.payload
-        }
-      }
-
     case 'layout.set_is_transferring':
       return {
         ...state,
@@ -99,23 +87,13 @@ export const useAppContextActions = (dispatchOverride?: Dispatch<Action>) => {
     dispatch({ type: 'layout.set_txhistory_panel_visible', payload: true })
   }
 
-  const showSentTransactions = () => {
-    dispatch({ type: 'layout.set_txhistory_show_sent_tx', payload: true })
-  }
-
-  const showReceivedTransactions = () => {
-    dispatch({ type: 'layout.set_txhistory_show_sent_tx', payload: false })
-  }
-
   const closeTransactionHistoryPanel = () => {
     dispatch({ type: 'layout.set_txhistory_panel_visible', payload: false })
   }
 
   return {
     setTransferring,
     openTransactionHistoryPanel,
-    closeTransactionHistoryPanel,
-    showSentTransactions,
-    showReceivedTransactions
+    closeTransactionHistoryPanel
   }
 }

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

@@ -1,5 +1,5 @@
 import { Tab } from '@headlessui/react'
-import { Dispatch, SetStateAction, useEffect, useMemo } from 'react'
+import { Dispatch, SetStateAction, useMemo } from 'react'
 import { useAccount, useNetwork } from 'wagmi'
 import { twMerge } from 'tailwind-merge'
 
@@ -18,7 +18,6 @@ import { isFailed, isPending } from '../../state/app/utils'
 import Image from 'next/image'
 import { TabButton } from '../common/Tab'
 import { useAccountType } from '../../hooks/useAccountType'
-import { useAppContextActions } from '../App/AppContext'
 import { useCctpFetching, useCctpState } from '../../state/cctpState'
 import { MergedTransaction } from '../../state/app/state'
 import dayjs from 'dayjs'
@@ -48,11 +47,8 @@ export const TransactionHistory = ({
   setDepositsPageParams: Dispatch<SetStateAction<PageParams>>
   setWithdrawalsPageParams: Dispatch<SetStateAction<PageParams>>
 }) => {
-  const { chain } = useNetwork()
   const { l1, l2 } = useNetworksAndSigners()
   const { isSmartContractWallet } = useAccountType()
-  const { showSentTransactions, showReceivedTransactions } =
-    useAppContextActions()
   const {
     pendingIds: pendingIdsCctp,
     transfers: transfersCctp,
@@ -124,40 +120,6 @@ export const TransactionHistory = ({
   const roundedTabClasses =
     'roundedTab ui-not-selected:arb-hover relative flex flex-row flex-nowrap items-center gap-0.5 md:gap-2 rounded-tl-lg rounded-tr-lg px-2 md:px-4 py-2 text-base ui-selected:bg-white ui-not-selected:text-white justify-center md:justify-start grow md:grow-0'
 
-  function handleSentOrReceivedTxForSCW(index: number) {
-    if (!isSmartContractWallet || !chain) {
-      return
-    }
-    const isDepositsTab = index === 0
-    const isConnectedToArbitrum = isNetwork(chain.id).isArbitrum
-    // SCW address is tied to a specific network, so we must ensure that:
-    if (isDepositsTab) {
-      // if showing deposits, we always show:
-      if (isConnectedToArbitrum) {
-        // - received txs if connected to L2
-        showReceivedTransactions()
-      } else {
-        // - sent txs if connected to L1
-        showSentTransactions()
-      }
-    } else {
-      // if showing withdrawals, we always show:
-      if (isConnectedToArbitrum) {
-        // - sent txs if connected to L2
-        showSentTransactions()
-      } else {
-        // - received txs if connected to L1
-        showReceivedTransactions()
-      }
-    }
-  }
-
-  useEffect(() => {
-    // this function runs every time the network tab is changed, and here it is also triggered when the page loads
-    // it sets the tab to 0 (deposits), which is the default tab
-    handleSentOrReceivedTxForSCW(0)
-  }, [isSmartContractWallet, chain])
-
   const displayCctp = transfersIds.length > 0 && !isOrbitChainSelected
 
   return (
@@ -179,7 +141,7 @@ export const TransactionHistory = ({
 
       {/* Transaction history table */}
       <div>
-        <Tab.Group onChange={handleSentOrReceivedTxForSCW} key={address}>
+        <Tab.Group key={address}>
           <Tab.List className={'flex flex-row whitespace-nowrap'}>
             <TabButton
               aria-label="show deposit transactions"

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

@@ -16,9 +16,7 @@ import { NoDataOverlay } from './NoDataOverlay'
 import { TableBodyLoading } from './TableBodyLoading'
 import { TableBodyError } from './TableBodyError'
 import { TableActionHeader } from './TableActionHeader'
-import { TableSentOrReceivedFundsSwitch } from './TableSentOrReceivedFundsSwitch'
 import { useAppState } from '../../../state'
-import { useAppContextState } from '../../App/AppContext'
 import { useNetworksAndSigners } from '../../../hooks/useNetworksAndSigners'
 import { ExternalLink } from '../../common/ExternalLink'
 import { getExplorerUrl } from '../../../util/networks'
@@ -183,10 +181,6 @@ export function TransactionsTable({
   const {
     app: { mergedTransactions: locallyStoredTransactions }
   } = useAppState()
-  const {
-    layout: { isTransactionHistoryShowingSentTx }
-  } = useAppContextState()
-  const { address } = useAccount()
 
   // don't want to update hooks on useAppState reference change. Just the exact value of localTransactions
   const localTransactionsKey = JSON.stringify(locallyStoredTransactions || [])
@@ -235,18 +229,6 @@ export function TransactionsTable({
     return [...newerTransactions.reverse(), ...subgraphTransactions]
   }, [transactions, localTransactionsKey])
 
-  const transactionsBySentOrReceivedFunds = useMemo(() => {
-    if (!address) return []
-    // both sent and received PENDING txs are stored together
-    // here we make sure we display a correct tx (sent or received)
-    return _transactions.filter(tx => {
-      if (isTransactionHistoryShowingSentTx) {
-        return tx.sender?.toLowerCase() === address.toLowerCase()
-      }
-      return tx.sender?.toLowerCase() !== address.toLowerCase()
-    })
-  }, [_transactions, address])
-
   const locallyStoredTransactionsMap = useMemo(() => {
     // map of all the locally-stored transactions (pending + recently executed)
     // so that tx rows can easily subscribe to live-local status without refetching table data
@@ -271,14 +253,12 @@ export function TransactionsTable({
 
   return (
     <>
-      {!isSmartContractWallet && <TableSentOrReceivedFundsSwitch />}
-
       {/* search and pagination buttons */}
       <TableActionHeader
         type={type}
         pageParams={pageParams}
         setPageParams={setPageParams}
-        transactions={transactionsBySentOrReceivedFunds}
+        transactions={_transactions}
         loading={loading}
         showSearch
       />
@@ -299,7 +279,7 @@ export function TransactionsTable({
           {/* when there are no transactions present */}
           {status === TableStatus.SUCCESS &&
             !noSearchResults &&
-            !transactionsBySentOrReceivedFunds.length && (
+            _transactions.length === 0 && (
               <EmptyTableRow>
                 <span className="text-sm font-medium">No transactions</span>
               </EmptyTableRow>
@@ -308,9 +288,8 @@ export function TransactionsTable({
           {/* finally, when transactions are present, show rows */}
           {status === TableStatus.SUCCESS &&
             !noSearchResults &&
-            transactionsBySentOrReceivedFunds.map((tx, index) => {
-              const isLastRow =
-                index === transactionsBySentOrReceivedFunds.length - 1
+            _transactions.map((tx, index) => {
+              const isLastRow = index === _transactions.length - 1
 
               // if transaction is present in local (pending + recently executed) transactions, subscribe to that in this row,
               // this will make sure the row updates with any updates in the local app state

packages/arb-token-bridge-ui/src/hooks/arbTokenBridge.types.ts

@@ -95,6 +95,7 @@ export type L2ToL1EventResultPlus = L2ToL1EventResult & {
 
 export type WithdrawalInitiated = EventArgs<WithdrawalInitiatedEvent> & {
   txHash: string
+  timestamp?: BigNumber
 }
 
 export interface PendingWithdrawalsMap {

packages/arb-token-bridge-ui/src/hooks/useDeposits.ts

@@ -1,9 +1,8 @@
 import { useMemo } from 'react'
 import useSWRImmutable from 'swr/immutable'
-import { useAccount } from 'wagmi'
+import { useAccount, useChainId } from 'wagmi'
 
 import { PageParams } from '../components/TransactionHistory/TransactionsTable/TransactionsTable'
-import { useAppContextState } from '../components/App/AppContext'
 import { MergedTransaction } from '../state/app/state'
 import { isPending, transformDeposits } from '../state/app/utils'
 import {
@@ -12,9 +11,10 @@ import {
 } from '../util/deposits/fetchDeposits'
 import { useNetworksAndSigners } from './useNetworksAndSigners'
 import { Transaction } from './useTransactions'
+import { useAccountType } from './useAccountType'
 import {
-  getQueryParamsForFetchingReceivedFunds,
-  getQueryParamsForFetchingSentFunds
+  shouldIncludeSentTxs,
+  shouldIncludeReceivedTxs
 } from '../util/SubgraphUtils'
 
 export type CompleteDepositData = {
@@ -46,16 +46,35 @@ export const fetchCompleteDepositData = async (
 
 export const useDeposits = (depositPageParams: PageParams) => {
   const { l1, l2 } = useNetworksAndSigners()
+  const { isSmartContractWallet, isLoading: isAccountTypeLoading } =
+    useAccountType()
+  const chainId = useChainId()
+
+  const isConnectedToParentChain = l1.network.id === chainId
 
   // only change l1-l2 providers (and hence, reload deposits) when the connected chain id changes
   // otherwise tx-history unnecessarily reloads on l1<->l2 network switch as well (#847)
   const l1Provider = useMemo(() => l1.provider, [l1.network.id])
   const l2Provider = useMemo(() => l2.provider, [l2.network.id])
 
   const { address: walletAddress } = useAccount()
-  const {
-    layout: { isTransactionHistoryShowingSentTx }
-  } = useAppContextState()
+
+  // sent and received txs are always displayed for EOA but not for SCW
+  const includeSentTxs = isAccountTypeLoading
+    ? false
+    : shouldIncludeSentTxs({
+        type: 'deposit',
+        isSmartContractWallet,
+        isConnectedToParentChain
+      })
+
+  const includeReceivedTxs = isAccountTypeLoading
+    ? false
+    : shouldIncludeReceivedTxs({
+        type: 'deposit',
+        isSmartContractWallet,
+        isConnectedToParentChain
+      })
 
   /* return the cached response for the complete pending transactions */
   return useSWRImmutable(
@@ -65,31 +84,29 @@ export const useDeposits = (depositPageParams: PageParams) => {
           walletAddress,
           l1Provider,
           l2Provider,
-          isTransactionHistoryShowingSentTx,
           depositPageParams.pageNumber,
           depositPageParams.pageSize,
-          depositPageParams.searchString
+          depositPageParams.searchString,
+          isAccountTypeLoading
         ]
       : null,
     ([
       ,
       _walletAddress,
       _l1Provider,
       _l2Provider,
-      _isTransactionHistoryShowingSentTx,
       _pageNumber,
       _pageSize,
       _searchString
     ]) =>
       fetchCompleteDepositData({
+        sender: includeSentTxs ? _walletAddress : undefined,
+        receiver: includeReceivedTxs ? _walletAddress : undefined,
         l1Provider: _l1Provider,
         l2Provider: _l2Provider,
         pageNumber: _pageNumber,
         pageSize: _pageSize,
-        searchString: _searchString,
-        ...(_isTransactionHistoryShowingSentTx
-          ? getQueryParamsForFetchingSentFunds(_walletAddress)
-          : getQueryParamsForFetchingReceivedFunds(_walletAddress))
+        searchString: _searchString
       })
   )
 }