only show 100 recent trades in history tab

components/TradeHistoryTable.tsx

@@ -13,7 +13,7 @@ import { ExpandableRow } from './TableElements'
 import MobileTableHeader from './mobile/MobileTableHeader'
 import { formatUsdValue } from '../utils'
 
-const TradeHistoryTable = () => {
+const TradeHistoryTable = ({ numTrades }) => {
   const { asPath } = useRouter()
   const tradeHistory = useTradeHistory({ excludePerpLiquidations: true })
   const { items, requestSort, sortConfig } = useSortableData(tradeHistory)
@@ -36,6 +36,8 @@ const TradeHistoryTable = () => {
     )
   }
 
+  const filteredTrades = numTrades ? items.slice(0, numTrades) : items
+
   return (
     <div className="flex flex-col pb-2 pt-4">
       <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
@@ -184,7 +186,7 @@ const TradeHistoryTable = () => {
                   </TrHead>
                 </thead>
                 <tbody>
-                  {items.map((trade: any, index) => (
+                  {filteredTrades.map((trade: any, index) => (
                     <TrBody
                       index={index}
                       key={`${trade.seqNum}${trade.marketName}`}
@@ -316,6 +318,13 @@ const TradeHistoryTable = () => {
             </div>
           )}
         </div>
+        <div className="flex items-center">
+          {numTrades && items.length > numTrades ? (
+            <div className="mx-auto mt-4">
+              <Link href="/account">View all trades in the Account page</Link>
+            </div>
+          ) : null}
+        </div>
       </div>
     </div>
   )

components/UserInfo.tsx

@@ -93,7 +93,7 @@ const TabContent = ({ activeTab }) => {
     case 'Balances':
       return <BalancesTable />
     case 'Trade History':
-      return <TradeHistoryTable />
+      return <TradeHistoryTable numTrades={100} />
     case 'Perp Positions':
       return <PositionsTable />
     // case 'Fees':

pages/account.tsx

@@ -28,7 +28,7 @@ const TABS = [
   // 'Stats',
   // 'Positions',
   'Orders',
-  'History',
+  'Trade History',
 ]
 
 export default function Account() {
@@ -198,7 +198,7 @@ const TabContent = ({ activeTab }) => {
       return <div>Positions</div>
     case 'Orders':
       return <AccountOrders />
-    case 'History':
+    case 'Trade History':
       return <AccountHistory />
     default:
       return <AccountOverview />