fix: display sent and received txs in a single table

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

@@ -16,7 +16,6 @@ type AppContextState = {
     isTransferPanelVisible: boolean
     isTransferring: boolean
     isTransactionHistoryPanelVisible: boolean
-    isTransactionHistoryShowingSentTx: boolean
     isTransactionHistoryShowingCctpDeposits: boolean
     transactionHistorySelectedTab: TransactionHistoryTab
   }
@@ -27,7 +26,6 @@ const initialState: AppContextState = {
     isTransferPanelVisible: true,
     isTransferring: false,
     isTransactionHistoryPanelVisible: false,
-    isTransactionHistoryShowingSentTx: true,
     isTransactionHistoryShowingCctpDeposits: true,
     transactionHistorySelectedTab: TransactionHistoryTab.DEPOSITS
   }
@@ -42,7 +40,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 }
   | { type: 'layout.set_txhistory_show_cctp_deposits'; payload: boolean }
   | { type: 'layout.set_txhistory_tab'; payload: TransactionHistoryTab }
 
@@ -63,15 +60,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_txhistory_show_cctp_deposits':
       return {
         ...state,
@@ -145,14 +133,6 @@ export const useAppContextActions = (dispatchOverride?: Dispatch<Action>) => {
     })
   }, [dispatch])
 
-  const showSentTransactions = useCallback(() => {
-    dispatch({ type: 'layout.set_txhistory_show_sent_tx', payload: true })
-  }, [dispatch])
-
-  const showReceivedTransactions = useCallback(() => {
-    dispatch({ type: 'layout.set_txhistory_show_sent_tx', payload: false })
-  }, [dispatch])
-
   const closeTransactionHistoryPanel = () => {
     dispatch({ type: 'layout.set_txhistory_panel_visible', payload: false })
   }
@@ -168,8 +148,6 @@ export const useAppContextActions = (dispatchOverride?: Dispatch<Action>) => {
     setTransferring,
     openTransactionHistoryPanel,
     closeTransactionHistoryPanel,
-    showSentTransactions,
-    showReceivedTransactions,
     showCctpDepositsTransactions,
     showCctpWithdrawalsTransactions,
     setTransactionHistoryTab

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

@@ -62,8 +62,6 @@ export const TransactionHistory = ({
   const { l1, l2 } = useNetworksAndSigners()
   const { isSmartContractWallet } = useAccountType()
   const {
-    showSentTransactions,
-    showReceivedTransactions,
     showCctpDepositsTransactions,
     showCctpWithdrawalsTransactions,
     setTransactionHistoryTab
@@ -147,31 +145,10 @@ export const TransactionHistory = ({
       if (!isSmartContractWallet || !chain) {
         return
       }
-      const isDepositsTab = index === TransactionHistoryTab.DEPOSITS
-      const isWithdrawalsTab = index === TransactionHistoryTab.WITHDRAWALS
+      const isCctpTab = index === TransactionHistoryTab.CCTP
       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 (isWithdrawalsTab) {
-        // Withdrawal tab
-        // if showing withdrawals, we always show:
-        if (isConnectedToArbitrum) {
-          // - sent txs if connected to L2
-          showSentTransactions()
-        } else {
-          // - received txs if connected to L1
-          showReceivedTransactions()
-        }
-      } else {
-        // Cctp tab
+
+      if (isCctpTab) {
         if (isConnectedToArbitrum) {
           showCctpDepositsTransactions()
         } else {
@@ -183,9 +160,7 @@ export const TransactionHistory = ({
       chain,
       isSmartContractWallet,
       showCctpDepositsTransactions,
-      showCctpWithdrawalsTransactions,
-      showReceivedTransactions,
-      showSentTransactions
+      showCctpWithdrawalsTransactions
     ]
   )
 
@@ -300,7 +275,6 @@ export const TransactionHistory = ({
               pageParams={depositsPageParams}
               setPageParams={setDepositsPageParams}
               transactions={depositsData.transformedDeposits}
-              isSmartContractWallet={isSmartContractWallet}
               loading={depositsLoading}
               error={depositsError}
             />
@@ -317,7 +291,6 @@ export const TransactionHistory = ({
               pageParams={withdrawalsPageParams}
               setPageParams={setWithdrawalsPageParams}
               transactions={withdrawalsData.transformedWithdrawals}
-              isSmartContractWallet={isSmartContractWallet}
               loading={withdrawalsLoading}
               error={withdrawalsError}
             />

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'
@@ -166,7 +164,6 @@ export type TransactionsTableProps = {
   pageParams: PageParams
   setPageParams: Dispatch<SetStateAction<PageParams>>
   transactions: MergedTransaction[]
-  isSmartContractWallet?: boolean
   loading: boolean
   error: boolean
 }
@@ -176,17 +173,12 @@ export function TransactionsTable({
   pageParams,
   setPageParams,
   transactions,
-  isSmartContractWallet,
   loading,
   error
 }: TransactionsTableProps) {
   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 +227,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 +251,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 +277,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 +286,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,37 @@ 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()
+
+  // SCW address is tied to a specific network
+  // that's why we need to limit shown txs either to sent or received funds
+  // otherwise we'd display funds for a different network, which could be someone else's account
+  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 +86,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
       })
   )
 }