attempt to reduce memory footprint by only displaying top 100 transactions in trade table

Author: benwolski

src/components/Trade/TradeTabs/TableRows.tsx

@@ -24,8 +24,6 @@ interface propsIF {
     fullData: TransactionIF[] | LimitOrderIF[] | PositionIF[];
     tableView: 'small' | 'medium' | 'large';
     isAccountView: boolean;
-    isLeaderboard?: boolean;
-    positionsByApy?: string[];
     firstRowRef?: MutableRefObject<HTMLDivElement | null>;
     lastRowRef?: MutableRefObject<HTMLDivElement | null>;
 }
@@ -38,11 +36,16 @@ function TableRows({
     fullData,
     isAccountView,
     tableView,
-    isLeaderboard,
-    positionsByApy,
     firstRowRef,
     lastRowRef,
 }: propsIF) {
+    // console.log({
+    //     dataLength: data.length,
+    //     type,
+    //     fullDataLength: fullData.length,
+    //     firstRowRef,
+    //     lastRowRef,
+    // });
     const [isDetailsModalOpen, openDetailsModal, closeDetailsModal] =
         useModal();
 
@@ -164,13 +167,6 @@ function TableRows({
                         }
                         tableView={tableView}
                         isAccountView={isAccountView}
-                        isLeaderboard={isLeaderboard}
-                        rank={
-                            positionsByApy
-                                ? positionsByApy.indexOf(position.positionId) +
-                                  1
-                                : undefined
-                        }
                         openDetailsModal={() =>
                             openRangeModal(position.positionId, 'details')
                         }
@@ -199,11 +195,12 @@ function TableRows({
         );
     };
 
+    const txDataToDisplay = isAccountView ? data : data.slice(0, 100);
+
     const transactionContent = () => {
         return (
             <>
-                {/* <div id='omega'>OMEGA</div> */}
-                {(data as TransactionIF[]).map((tx, idx) => (
+                {(txDataToDisplay as TransactionIF[]).map((tx, idx) => (
                     <TransactionRow
                         key={idx}
                         idForDOM={`tx_row_${idx}`}

src/components/Trade/TradeTabs/TradeTabs2.tsx

@@ -121,24 +121,24 @@ function TradeTabs2(props: propsIF) {
               },
           ]
         : [
-              //   {
-              //       label: 'Transactions',
-              //       content: <Transactions {...transactionsProps} />,
-              //       icon: recentTransactionsImage,
-              //       showRightSideOption: true,
-              //   },
-              //   {
-              //       label: 'Limits',
-              //       content: <Orders {...ordersProps} />,
-              //       icon: openOrdersImage,
-              //       showRightSideOption: true,
-              //   },
-              //   {
-              //       label: 'Liquidity',
-              //       content: <Ranges {...rangesProps} />,
-              //       icon: rangePositionsImage,
-              //       showRightSideOption: true,
-              //   },
+              {
+                  label: 'Transactions',
+                  content: <Transactions {...transactionsProps} />,
+                  icon: recentTransactionsImage,
+                  showRightSideOption: true,
+              },
+              {
+                  label: 'Limits',
+                  content: <Orders {...ordersProps} />,
+                  icon: openOrdersImage,
+                  showRightSideOption: true,
+              },
+              {
+                  label: 'Liquidity',
+                  content: <Ranges {...rangesProps} />,
+                  icon: rangePositionsImage,
+                  showRightSideOption: true,
+              },
               {
                   label: 'Info',
                   content: <TableInfo />,