diff --git a/src/app/components/protocol-history-table/protocol-history-table.tsx b/src/app/components/protocol-history-table/protocol-history-table.tsx index d7ea3638..687d6b2e 100644 --- a/src/app/components/protocol-history-table/protocol-history-table.tsx +++ b/src/app/components/protocol-history-table/protocol-history-table.tsx @@ -1,4 +1,6 @@ -import { Skeleton, useBreakpointValue } from '@chakra-ui/react'; +import { useState } from 'react'; + +import { Button, HStack, Skeleton, Spacer, VStack, useBreakpointValue } from '@chakra-ui/react'; import { GenericTableBody } from '@components/generic-table/components/generic-table-body'; import { GenericTableHeader } from '@components/generic-table/components/generic-table-header'; import { GenericTableHeaderText } from '@components/generic-table/components/generic-table-header-text'; @@ -10,32 +12,68 @@ interface ProtocolHistoryTableProps { } export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): React.JSX.Element { - const dynamicHeight = items ? items.length * 59 + 20 : 20; + const [currentPage, setCurrentPage] = useState(1); + const itemsPerPage = 10; const isMobile = useBreakpointValue({ base: true, md: false }); + const totalPages = Math.ceil((items?.length || 0) / itemsPerPage); + + const currentItems = items?.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage); + + const handlePageChange = (direction: number) => { + setCurrentPage(prevPage => { + const newPage = prevPage + direction; + if (newPage < 1 || newPage > totalPages) return prevPage; + return newPage; + }); + }; + return ( - - - {isMobile ? ( - <> - Order Book - Transaction - - ) : ( - <> - Order Book - Merchant - Chain - Transaction - Date - - )} - - - - {items?.map(item => )} - - - + + + + {isMobile ? ( + <> + Order Book + Transaction + + ) : ( + <> + Order Book + Merchant + Chain + Transaction + Date + + )} + + + + {currentItems?.map(item => )} + + + + + + + + + ); }