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 => )}
+
+
+
+
+
+
+
+
+
);
}