From 3983cbafc9fe8794a2ba47b248f7bd490f274a20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3za=20Nagy?= <rozanagy88@gmail.com>
Date: Wed, 30 Oct 2024 11:49:52 +0100
Subject: [PATCH 1/3] feat: add pagination to protocol history table

---
 .../protocol-history-table.tsx                | 80 +++++++++++++------
 1 file changed, 56 insertions(+), 24 deletions(-)

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 9c098330..806853d8 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,31 +12,61 @@ 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 indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = items?.slice(indexOfFirstItem, indexOfLastItem);
+
+  const totalPages = Math.ceil((items?.length || 0) / itemsPerPage);
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(prevPage => prevPage + 1);
+    }
+  };
+
+  const handlePreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(prevPage => prevPage - 1);
+    }
+  };
+
   return (
-    <GenericTableLayout height={`${dynamicHeight}px`} width={'50%'} isMobile={isMobile}>
-      <GenericTableHeader>
-        {isMobile ? (
-          <>
-            <GenericTableHeaderText w={'50%'}>Order Book</GenericTableHeaderText>
-            <GenericTableHeaderText w={'50%'}>Transaction</GenericTableHeaderText>
-          </>
-        ) : (
-          <>
-            <GenericTableHeaderText w={'25%'}>Order Book</GenericTableHeaderText>
-            <GenericTableHeaderText w={'25%'}>Merchant</GenericTableHeaderText>
-            <GenericTableHeaderText w={'25%'}>Transaction</GenericTableHeaderText>
-            <GenericTableHeaderText w={'25%'}>Date</GenericTableHeaderText>
-          </>
-        )}
-      </GenericTableHeader>
-      <Skeleton isLoaded={items !== undefined} height={'50px'} w={'100%'}>
-        <GenericTableBody>
-          {items?.map(item => <ProtocolHistoryTableItem key={item.id} {...item} />)}
-        </GenericTableBody>
-      </Skeleton>
-    </GenericTableLayout>
+    <VStack w={'50%'} spacing={4}>
+      <GenericTableLayout height={'680px'} width={'100%'} isMobile={isMobile}>
+        <GenericTableHeader>
+          {isMobile ? (
+            <>
+              <GenericTableHeaderText w={'50%'}>Order Book</GenericTableHeaderText>
+              <GenericTableHeaderText w={'50%'}>Transaction</GenericTableHeaderText>
+            </>
+          ) : (
+            <>
+              <GenericTableHeaderText w={'25%'}>Order Book</GenericTableHeaderText>
+              <GenericTableHeaderText w={'25%'}>Merchant</GenericTableHeaderText>
+              <GenericTableHeaderText w={'25%'}>Transaction</GenericTableHeaderText>
+              <GenericTableHeaderText w={'25%'}>Date</GenericTableHeaderText>
+            </>
+          )}
+        </GenericTableHeader>
+        <Skeleton isLoaded={items !== undefined} height={'50px'} w={'100%'}>
+          <GenericTableBody>
+            {currentItems?.map(item => <ProtocolHistoryTableItem key={item.id} {...item} />)}
+          </GenericTableBody>
+        </Skeleton>
+        <Spacer />
+        <HStack spacing={4}>
+          <Button onClick={handlePreviousPage} isDisabled={currentPage === 1}>
+            Previous
+          </Button>
+          <Button onClick={handleNextPage} isDisabled={currentPage === totalPages}>
+            Next
+          </Button>
+        </HStack>
+      </GenericTableLayout>
+    </VStack>
   );
 }

From 26afa1af2d9d9c261d072a5788d6474c7325f972 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3za=20Nagy?= <rozanagy88@gmail.com>
Date: Wed, 30 Oct 2024 14:47:39 +0100
Subject: [PATCH 2/3] feat:modify button variant and adjust position

---
 .../protocol-history-table.tsx                | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

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 806853d8..1a0ed9c3 100644
--- a/src/app/components/protocol-history-table/protocol-history-table.tsx
+++ b/src/app/components/protocol-history-table/protocol-history-table.tsx
@@ -16,22 +16,16 @@ export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): Reac
   const itemsPerPage = 10;
   const isMobile = useBreakpointValue({ base: true, md: false });
 
-  const indexOfLastItem = currentPage * itemsPerPage;
-  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
-  const currentItems = items?.slice(indexOfFirstItem, indexOfLastItem);
-
   const totalPages = Math.ceil((items?.length || 0) / itemsPerPage);
 
-  const handleNextPage = () => {
-    if (currentPage < totalPages) {
-      setCurrentPage(prevPage => prevPage + 1);
-    }
-  };
+  const currentItems = items?.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
 
-  const handlePreviousPage = () => {
-    if (currentPage > 1) {
-      setCurrentPage(prevPage => prevPage - 1);
-    }
+  const handlePageChange = (direction: number) => {
+    setCurrentPage(prevPage => {
+      const newPage = prevPage + direction;
+      if (newPage < 1 || newPage > totalPages) return prevPage;
+      return newPage;
+    });
   };
 
   return (
@@ -58,11 +52,23 @@ export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): Reac
           </GenericTableBody>
         </Skeleton>
         <Spacer />
-        <HStack spacing={4}>
-          <Button onClick={handlePreviousPage} isDisabled={currentPage === 1}>
+        <HStack spacing={4} justifyContent={'center'} w={'100%'}>
+          <Button
+            variant={'wallet'}
+            h={'40px'}
+            w={'100px'}
+            onClick={() => handlePageChange(-1)}
+            isDisabled={currentPage === 1}
+          >
             Previous
           </Button>
-          <Button onClick={handleNextPage} isDisabled={currentPage === totalPages}>
+          <Button
+            variant={'wallet'}
+            h={'40px'}
+            w={'100px'}
+            onClick={() => handlePageChange(1)}
+            isDisabled={currentPage === totalPages}
+          >
             Next
           </Button>
         </HStack>

From 57091104bc42512095a8b515742b00f3e6825eac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3za=20Nagy?= <rozanagy88@gmail.com>
Date: Thu, 7 Nov 2024 11:24:55 +0100
Subject: [PATCH 3/3] fix: correct width

---
 .../protocol-history-table/protocol-history-table.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 efdd2745..687d6b2e 100644
--- a/src/app/components/protocol-history-table/protocol-history-table.tsx
+++ b/src/app/components/protocol-history-table/protocol-history-table.tsx
@@ -29,7 +29,7 @@ export function ProtocolHistoryTable({ items }: ProtocolHistoryTableProps): Reac
   };
 
   return (
-    <VStack w={'50%'} spacing={4}>
+    <VStack w={'70%'} spacing={4}>
       <GenericTableLayout height={'680px'} width={'100%'} isMobile={isMobile}>
         <GenericTableHeader>
           {isMobile ? (