feat: fetch core chains history before Orbit

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

@@ -24,7 +24,8 @@ import { OftTransactionHistoryDisclaimer } from './OftTransactionHistoryDisclaim
 function useTransactionHistoryUpdater() {
   const { sanitizedAddress } = useTransactionHistoryAddressStore()
 
-  const transactionHistoryProps = useTransactionHistory(sanitizedAddress, {
+  const transactionHistoryProps = useTransactionHistory({
+    address: sanitizedAddress,
     runFetcher: true
   })
 

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

@@ -18,6 +18,7 @@ import { getProviderForChainId } from '@/token-bridge-sdk/utils'
 import { isTokenDeposit } from '../../state/app/utils'
 import {
   ChainPair,
+  TransactionHistoryLoadingStates,
   UseTransactionHistoryResult
 } from '../../hooks/useTransactionHistory'
 import { Tooltip } from '../common/Tooltip'
@@ -28,6 +29,7 @@ import { TransactionsTableRow } from './TransactionsTableRow'
 import { EmptyTransactionHistory } from './EmptyTransactionHistory'
 import { MergedTransaction } from '../../state/app/state'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
+import { Loader } from '../common/atoms/Loader'
 
 export const BatchTransferNativeTokenTooltip = ({
   children,
@@ -134,6 +136,24 @@ type TransactionHistoryTableProps = UseTransactionHistoryResult & {
   oldestTxTimeAgoString: string
 }
 
+function loadingStateToTooltip(loadingState: TransactionHistoryLoadingStates) {
+  let text
+
+  if (loadingState.core) {
+    text = 'Core Chains'
+  }
+
+  if (loadingState.orbit) {
+    text = 'Orbit Chains'
+  }
+
+  if (!text) {
+    return null
+  }
+
+  return <span>We are still loading history for {text}.</span>
+}
+
 export const TransactionHistoryTable = (
   props: TransactionHistoryTableProps
 ) => {
@@ -153,7 +173,7 @@ export const TransactionHistoryTable = (
   const isTxHistoryEmpty = transactions.length === 0
   const isPendingTab = selectedTabIndex === 0
 
-  const paused = !loading && !completed
+  const paused = !loading.any && !completed
 
   const contentWrapperRef = useRef<HTMLDivElement | null>(null)
   const tableRef = useRef<Table | null>(null)
@@ -194,7 +214,7 @@ export const TransactionHistoryTable = (
   if (isTxHistoryEmpty) {
     return (
       <EmptyTransactionHistory
-        loading={loading}
+        loading={loading.any}
         isError={typeof error !== 'undefined'}
         paused={paused}
         resume={resume}
@@ -214,14 +234,19 @@ export const TransactionHistoryTable = (
           isPendingTab ? '' : 'rounded-tl-lg'
         )}
       >
-        {loading ? (
+        {loading.core ? (
           <div className="flex h-[28px] items-center space-x-2">
             <FailedChainPairsTooltip failedChainPairs={failedChainPairs} />
             <HistoryLoader />
           </div>
         ) : (
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center justify-start space-x-1">
+              {loading.any && (
+                <Tooltip content={loadingStateToTooltip(loading)}>
+                  <Loader size="small" color="white" />
+                </Tooltip>
+              )}
               <FailedChainPairsTooltip failedChainPairs={failedChainPairs} />
               <span className="text-xs">
                 Showing {transactions.length}{' '}

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

@@ -48,7 +48,9 @@ export const TransactionsTableDetails = () => {
   const { sanitizedAddress } = useTransactionHistoryAddressStore()
   const { tx: txFromStore, isOpen, close, reset } = useTxDetailsStore()
   const { ethToUSD } = useETHPrice()
-  const { transactions } = useTransactionHistory(sanitizedAddress)
+  const { transactions } = useTransactionHistory({
+    address: sanitizedAddress
+  })
 
   const tx = useMemo(() => {
     if (!txFromStore) {

packages/arb-token-bridge-ui/src/components/TransactionHistory/useTransactionReminderInfo.ts

@@ -7,7 +7,9 @@ import { useTransactionHistoryAddressStore } from './TransactionHistorySearchBar
 
 export function useTransactionReminderInfo() {
   const { sanitizedAddress } = useTransactionHistoryAddressStore()
-  const { transactions } = useTransactionHistory(sanitizedAddress)
+  const { transactions } = useTransactionHistory({
+    address: sanitizedAddress
+  })
 
   const {
     numClaimableTransactions,

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

@@ -151,7 +151,9 @@ export function TransferPanel() {
 
   const { setTransferring } = useAppContextActions()
   const { switchToTransactionHistoryTab } = useMainContentTabs()
-  const { addPendingTransaction } = useTransactionHistory(walletAddress)
+  const { addPendingTransaction } = useTransactionHistory({
+    address: walletAddress
+  })
 
   const isCctpTransfer = useIsCctpTransfer()
 

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

@@ -31,9 +31,9 @@ export function useClaimWithdrawal(
   const { address } = useAccount()
   const { sanitizedAddress } = useTransactionHistoryAddressStore()
   const { data: signer } = useSigner({ chainId: tx.parentChainId })
-  const { updatePendingTransaction } = useTransactionHistory(
-    sanitizedAddress ?? address
-  )
+  const { updatePendingTransaction } = useTransactionHistory({
+    address: sanitizedAddress ?? address
+  })
   const [isClaiming, setIsClaiming] = useState(false)
 
   const claim = useCallback(async () => {

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

@@ -23,7 +23,9 @@ export function useRedeemRetryable(
   address: Address | undefined
 ): UseRedeemRetryableResult {
   const { data: signer } = useSigner({ chainId: tx.destinationChainId })
-  const { updatePendingTransaction } = useTransactionHistory(address)
+  const { updatePendingTransaction } = useTransactionHistory({
+    address
+  })
 
   const destinationNetworkName = getNetworkName(tx.destinationChainId)
 

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

@@ -160,7 +160,7 @@ export function useRedeemTeleporter(
   const { data: signer } = useSigner({
     chainId: chainIdForRedeemingRetryable
   })
-  const { updatePendingTransaction } = useTransactionHistory(address)
+  const { updatePendingTransaction } = useTransactionHistory({ address })
 
   const redeemerNetworkName = getNetworkName(chainIdForRedeemingRetryable)