Merge pull request #4824 from raltunel/infinite-scroll/use-ref-on-fetched-txs

Change LastRowRef on TableRows according to new client side filtering

Author: benwolski

src/components/Trade/InfiniteScroll/InfiniteScroll.tsx

@@ -334,7 +334,9 @@ function InfiniteScroll(props: propsIF) {
 
         const newTxData: LimitOrderIF[] | PositionIF[] | TransactionIF[] = [];
 
-        let oldestTimeParam = getOldestTime(fetchedTransactions);
+        let oldestTimeParam = getOldestTime(
+            fetchedTransactionsRef.current || fetchedTransactions,
+        );
 
         // ------------------- FETCH DATA WITH LOOP -------------------
         while (addedDataCount < targetCount) {

src/components/Trade/InfiniteScroll/TableRowsInfiniteScroll.tsx

@@ -91,14 +91,35 @@ function TableRowsInfiniteScroll({
         return /iPad|iPhone|iPod/.test(userAgent);
     };
 
+    const debugMode = false;
+
+    // // added to debug infinite scroll on monadTestnet link
+    // // can be removed after detecting issue
+    // const [debugMode, setDebugMode] = useState(false);
+    // const debugModeRef = useRef<boolean>();
+    // debugModeRef.current = debugMode;
+
+    // const [shortcutAdded, setShortcutAdded] = useState(false);
+
+    // useEffect(() => {
+    //     document.addEventListener('keydown', (e) => {
+    //         if (
+    //             (e.shiftKey && e.altKey && e.key === 'j') ||
+    //             (e.shiftKey && e.altKey && e.key === 'J')
+    //         ) {
+    //             setDebugMode(!debugModeRef.current);
+    //         }
+    //     });
+    //     setShortcutAdded(true);
+    // }, [shortcutAdded == false]);
+
     const isSmallScreen: boolean = useMediaQuery('(max-width: 768px)');
 
     const wrapperID = tableKey ? tableKey : '';
 
     const txSpanSelectorForScrollMethod = `#infinite_scroll_wrapper_${wrapperID} div[data-label='hidden-id'] > span`;
     const txSpanSelectorForBindMethod = 'div[data-label="hidden-id"]';
 
-    const debugMode = false;
     const markRows = false;
     const [manualMode, setManualMode] = useState(false);
     const manualModeRef = useRef<boolean>();

src/components/Trade/TradeTabs/TableRows.tsx

@@ -217,7 +217,7 @@ function TableRows({
                         observedRowRef={
                             idx === 0
                                 ? firstRowRef
-                                : idx === data.length - 1
+                                : idx === txDataToDisplay.length - 1
                                   ? lastRowRef
                                   : undefined
                         }