init

OffchainLabs · Dec 13, 2024 · dbb6910 · dbb6910
1 parent 6d55520
commit dbb6910
Show file tree

Hide file tree

Showing 2 changed files with 444 additions and 260 deletions.
diff --git a/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionHistoryTable.tsx b/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 { Loader } from '../common/atoms/Loader'
 
 export const BatchTransferNativeTokenTooltip = ({
   children,
@@ -139,9 +140,8 @@ export const TransactionHistoryTable = (
 ) => {
   const {
     transactions,
-    loading,
-    completed,
-    error,
+    senderData,
+    receiverData,
     failedChainPairs,
     resume,
     selectedTabIndex,
@@ -153,7 +153,7 @@ export const TransactionHistoryTable = (
   const isTxHistoryEmpty = transactions.length === 0
   const isPendingTab = selectedTabIndex === 0
 
-  const paused = !loading && !completed
+  const paused = !senderData.loadingForSender && !senderData.completedForSender
 
   const contentWrapperRef = useRef<HTMLDivElement | null>(null)
   const tableRef = useRef<Table | null>(null)
@@ -194,8 +194,11 @@ export const TransactionHistoryTable = (
   if (isTxHistoryEmpty) {
     return (
       <EmptyTransactionHistory
-        loading={loading}
-        isError={typeof error !== 'undefined'}
+        loading={senderData.loadingForSender || receiverData.loadingForReceiver}
+        isError={
+          typeof senderData.errorForSender !== 'undefined' ||
+          typeof receiverData.errorForReceiver !== 'undefined'
+        }
         paused={paused}
         resume={resume}
         tabType={isPendingTab ? 'pending' : 'settled'}
@@ -214,14 +217,26 @@ export const TransactionHistoryTable = (
           isPendingTab ? '' : 'rounded-tl-lg'
         )}
       >
-        {loading ? (
+        {senderData.loadingForSender ? (
           <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">
+              {receiverData.loadingForReceiver && (
+                <Tooltip
+                  content={
+                    <b className="text-xs">
+                      Inbound transactions received from another address are
+                      still being fetched...
+                    </b>
+                  }
+                >
+                  <Loader size="small" color="white" />
+                </Tooltip>
+              )}
               <FailedChainPairsTooltip failedChainPairs={failedChainPairs} />
               <span className="text-xs">
                 Showing {transactions.length}{' '}
@@ -230,7 +245,9 @@ export const TransactionHistoryTable = (
               </span>
             </div>
 
-            {!completed && <LoadMoreButton onClick={resume} />}
+            {!senderData.completedForSender && (
+              <LoadMoreButton onClick={resume} />
+            )}
           </div>
         )}
         <div>{pendingTokenDepositsCount > 0 && <PendingDepositWarning />}</div>