Feat/virtual list

apps/evm/package.json

@@ -35,18 +35,19 @@
     "@react-aria/label": "^3.7.6",
     "@react-aria/utils": "catalog:",
     "@sentry/nextjs": "catalog:",
-    "@tanstack/react-store": "catalog:",
     "@tanstack/react-query": "catalog:",
+    "@tanstack/react-store": "catalog:",
+    "@tanstack/react-virtual": "catalog:",
     "@vercel/kv": "catalog:",
     "@wagmi/core": "catalog:",
     "big.js": "catalog:",
     "date-fns": "catalog:",
     "graphql-request": "catalog:",
     "lottie-react": "^2.4.0",
-    "react-calendly": "^4.3.1",
     "negotiator": "catalog:",
     "next": "catalog:",
     "react": "catalog:",
+    "react-calendly": "^4.3.1",
     "react-dom": "catalog:",
     "react-jazzicon": "^1.0.4",
     "react-multi-carousel": "^2.8.5",
@@ -56,8 +57,8 @@
     "use-count-up": "^3.0.1",
     "usehooks-ts": "catalog:",
     "viem": "catalog:",
-    "yup": "catalog:",
-    "wagmi": "catalog:"
+    "wagmi": "catalog:",
+    "yup": "catalog:"
   },
   "devDependencies": {
     "@gobob/test-utils": "workspace:^",

apps/evm/src/app/[lang]/(bridge)/components/TransactionList/TransactionList.style.tsx

@@ -5,6 +5,14 @@ type StyledExpandIconProps = {
   $isExpanded?: boolean;
 };
 
+type StyledVirtualizerProps = {
+  $height: number;
+};
+
+type StyledVirtualizerItemProps = {
+  $translateY: number;
+};
+
 const StyledSection = styled(Card)`
   width: 100%;
   overflow: hidden;
@@ -38,6 +46,23 @@ const StyledTransactionListWrapper = styled(Flex)`
   overflow: hidden;
 `;
 
+const StyledTransactionListParent = styled.div`
+  height: 610px;
+  overflow: auto;
+`;
+
+const StyledVirtualizer = styled.div<StyledVirtualizerProps>`
+  width: 100%;
+  position: relative;
+  height: ${({ $height }) => `${$height}px`};
+`;
+
+const StyledVirtualizerItem = styled.div<StyledVirtualizerItemProps>`
+  position: absolute;
+  width: 100%;
+  transform: ${({ $translateY }) => `translateY(${$translateY}px)`};
+`;
+
 const StyledDetailsButton = styled(Flex)`
   font: inherit;
   display: flex;
@@ -59,5 +84,8 @@ export {
   StyledSpan,
   StyledSpinnerWrapper,
   StyledTransactionList,
-  StyledTransactionListWrapper
+  StyledTransactionListWrapper,
+  StyledTransactionListParent,
+  StyledVirtualizer,
+  StyledVirtualizerItem
 };

apps/evm/src/app/[lang]/(bridge)/components/TransactionList/TransactionList.tsx

@@ -1,16 +1,20 @@
 import { CardProps, Divider, Flex, H2, Link, P, Spinner } from '@gobob/ui';
 import { Trans } from '@lingui/macro';
-import { Fragment, useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { useIsClient } from 'usehooks-ts';
 import { useAccount } from 'wagmi';
+import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { TransactionItem } from './TransactionItem';
 import {
   StyledSection,
   StyledSpan,
   StyledSpinnerWrapper,
   StyledTransactionList,
-  StyledTransactionListWrapper
+  StyledTransactionListParent,
+  StyledTransactionListWrapper,
+  StyledVirtualizer,
+  StyledVirtualizerItem
 } from './TransactionList.style';
 
 import { chainL2 } from '@/constants';
@@ -36,8 +40,30 @@ const TransactionList = ({
   txPendingUserAction,
   ...props
 }: TransactionListProps): JSX.Element => {
-  const { address, chain } = useAccount();
   const isClient = useIsClient();
+  // The scrollable element for your list
+  const parentRef = useRef(null);
+
+  // The virtualizer
+  const rowVirtualizer = useVirtualizer({
+    count: data?.length || 0,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 102,
+    paddingStart: 16,
+    paddingEnd: 16,
+    gap: 16,
+    // https://github.com/TanStack/table/blob/main/examples/react/virtualized-rows/src/main.tsx#L88
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    measureElement: (element) => {
+      return isClient && navigator.userAgent.indexOf('Firefox') === -1
+        ? element?.getBoundingClientRect().height
+        : undefined;
+    },
+    overscan: 5
+  });
+
+  const { address, chain } = useAccount();
 
   const title = (
     <Flex alignItems='center' elementType='span' gap='s'>
@@ -58,6 +84,8 @@ const TransactionList = ({
   const txsUrl = address ? `${explorerUrl}/address/${address}` : `${explorerUrl}`;
   const hasData = !!data?.length;
 
+  const dividerStyle = { marginTop: '1rem' };
+
   return (
     <StyledSection gap='xl' paddingX='4xl' paddingY='3xl' {...props}>
       <H2 size='md'>{title}</H2>
@@ -68,7 +96,6 @@ const TransactionList = ({
           flex={1}
           gap='xl'
           justifyContent={isInitialLoading || !hasData ? 'center' : undefined}
-          paddingY='xl'
         >
           {!isClient || isInitialLoading ? (
             <Flex alignItems='center' gap='md' justifyContent='center' style={{ height: '100%' }}>
@@ -80,16 +107,25 @@ const TransactionList = ({
           ) : (
             <>
               {hasData ? (
-                data.map((transaction, idx) => (
-                  <Fragment key={idx}>
-                    <TransactionItem
-                      data={transaction}
-                      onProveSuccess={onProveSuccess}
-                      onRelaySuccess={onRelaySuccess}
-                    />
-                    {idx < data.length - 1 && <Divider />}
-                  </Fragment>
-                ))
+                <StyledTransactionListParent ref={parentRef}>
+                  <StyledVirtualizer $height={rowVirtualizer.getTotalSize()}>
+                    {rowVirtualizer.getVirtualItems().map((virtualItem) => (
+                      <StyledVirtualizerItem
+                        key={virtualItem.key}
+                        ref={(node) => rowVirtualizer.measureElement(node)} //measure dynamic row height
+                        $translateY={virtualItem.start}
+                        data-index={virtualItem.index} //needed for dynamic row height measurement
+                      >
+                        <TransactionItem
+                          data={data[virtualItem.index]!}
+                          onProveSuccess={onProveSuccess}
+                          onRelaySuccess={onRelaySuccess}
+                        />
+                        {virtualItem.index < data.length - 1 && <Divider style={dividerStyle} />}
+                      </StyledVirtualizerItem>
+                    ))}
+                  </StyledVirtualizer>
+                </StyledTransactionListParent>
               ) : (
                 <Flex alignItems='center' gap='md' justifyContent='center' style={{ height: '100%' }}>
                   <P align='center' size='xs'>

pnpm-workspace.yaml

@@ -45,6 +45,7 @@ catalog:
 
   '@tanstack/react-store': ^0.5.6
   '@tanstack/react-query': ^5.35.1
+  '@tanstack/react-virtual': ^3.11.2
 
   usehooks-ts: ^3.1.0