fix(website): CAN-590

Add safe txs pagination to prevent the page to become unresponsive if there are many txs.

packages/website/package.json

@@ -84,6 +84,7 @@
     "react-feather": "^2.0.10",
     "react-github-btn": "^1.4.0",
     "react-icons": "^4.11.0",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^8.0.7",
     "react-scroll": "^1.9.0",
     "react-syntax-highlighter": "^15.5.0",

packages/website/src/features/Deploy/SignTransactionsPage.tsx

@@ -3,6 +3,7 @@
 import { useStore } from '@/helpers/store';
 import { useSafeTransactions } from '@/hooks/backend';
 import { useExecutedTransactions } from '@/hooks/safe';
+import { useInMemoryPagination } from '@/hooks/useInMemoryPagination';
 import {
   Box,
   Checkbox,
@@ -13,8 +14,9 @@ import {
   Skeleton,
   Text,
 } from '@chakra-ui/react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { Transaction } from './Transaction';
+import InfiniteScroll from 'react-infinite-scroll-component';
 
 export default function SignTransactionsPage() {
   return <SignTransactions />;
@@ -29,7 +31,19 @@ function SignTransactions() {
   const { data: history } = useExecutedTransactions(currentSafe);
   const [isChecked, setIsChecked] = useState(true);
 
-  const handleCheckboxChange = (e: any) => {
+  const {
+    paginatedData: paginatedStagedTxs,
+    hasMore: hasMoreStagedTxs,
+    fetchMoreData: fetchMoreStagedTxs,
+  } = useInMemoryPagination(staged, 5);
+
+  const {
+    paginatedData: paginatedExecutedTxs,
+    hasMore: hasMoreExecutedTxs,
+    fetchMoreData: fetchMoreExecutedTxs,
+  } = useInMemoryPagination(history.results, 5);
+
+  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setIsChecked(e.target.checked);
   };
 
@@ -41,7 +55,7 @@ function SignTransactions() {
           Sign & Execute Transactions
         </Heading>
         <Text color="gray.300">
-          Make sure you’re using the same{' '}
+          Make sure you&apos;re using the same{' '}
           <Link href="/settings">Safe Signature Collection Service</Link> as
           other signers.
         </Text>
@@ -70,15 +84,29 @@ function SignTransactions() {
               There are no transactions queued on the selected safe.
             </Text>
           ) : (
-            staged.map((tx) => (
-              <Transaction
-                key={JSON.stringify(tx.txn)}
-                safe={currentSafe}
-                tx={tx.txn}
-                hideExternal={false}
-                isStaged
-              />
-            ))
+            <Box
+              id="staged-transactions-container"
+              maxHeight="350px"
+              overflowY="auto"
+            >
+              <InfiniteScroll
+                dataLength={paginatedStagedTxs.length}
+                next={fetchMoreStagedTxs}
+                hasMore={hasMoreStagedTxs}
+                loader={<Skeleton height="60px" my={2} />}
+                scrollableTarget="staged-transactions-container"
+              >
+                {paginatedStagedTxs.map((tx) => (
+                  <Transaction
+                    key={JSON.stringify(tx.txn)}
+                    safe={currentSafe}
+                    tx={tx.txn}
+                    hideExternal={false}
+                    isStaged
+                  />
+                ))}
+              </InfiniteScroll>
+            </Box>
           ))
         )}
       </Box>
@@ -110,14 +138,33 @@ function SignTransactions() {
               Show Cannon transactions only
             </Checkbox>
           </Flex>
-          {history.results.map((tx: any) => (
-            <Transaction
-              key={tx.safeTxHash}
-              safe={currentSafe}
-              tx={tx}
-              hideExternal={isChecked}
-            />
-          ))}
+          <Box
+            id="executed-transactions-container"
+            maxHeight="300"
+            overflowY="scroll"
+          >
+            <InfiniteScroll
+              dataLength={paginatedExecutedTxs.length}
+              next={fetchMoreExecutedTxs}
+              hasMore={hasMoreExecutedTxs}
+              loader={<div>aaaa...</div>}
+              scrollableTarget="executed-transactions-container"
+              endMessage={
+                <Text color="gray.300" textAlign="center" mt={4}>
+                  No more transactions to load.
+                </Text>
+              }
+            >
+              {paginatedExecutedTxs.map((tx) => (
+                <Transaction
+                  key={tx.safeTxHash}
+                  safe={currentSafe}
+                  tx={tx}
+                  hideExternal={isChecked}
+                />
+              ))}
+            </InfiniteScroll>
+          </Box>
         </Box>
       )}
     </Container>

packages/website/src/hooks/useInMemoryPagination.ts

@@ -0,0 +1,26 @@
+import { useState, useMemo, useCallback } from 'react';
+
+interface PaginationResult<T> {
+  paginatedData: T[];
+  hasMore: boolean;
+  fetchMoreData: () => void;
+}
+
+export function useInMemoryPagination<T>(data: T[], itemsPerPage: number): PaginationResult<T> {
+  const [displayedItems, setDisplayedItems] = useState(itemsPerPage);
+
+  const paginatedData = useMemo(() => {
+    // Return all data up to the current number of displayed items
+    return data.slice(0, displayedItems);
+  }, [data, displayedItems]);
+
+  const hasMore = useMemo(() => {
+    return displayedItems < data.length;
+  }, [data.length, displayedItems]);
+
+  const fetchMoreData = useCallback(() => {
+    setDisplayedItems((prevItems) => Math.min(prevItems + itemsPerPage, data.length));
+  }, [itemsPerPage, data.length]);
+
+  return { paginatedData, hasMore, fetchMoreData };
+}