From 4b967f4a1b5014b82d22eb45f26cdb5b93f12927 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Tue, 23 Jan 2024 08:08:22 +0100
Subject: [PATCH] Set the correct pagination for the table

---
 .../components/TransactionHistory/Table/Footer.tsx    | 10 ++++++----
 .../TransactionHistory/Table/utils/pagination.tsx     | 11 +++++++++++
 dapp/src/hooks/useTransactionHistoryTable.ts          |  2 +-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/dapp/src/components/TransactionHistory/Table/Footer.tsx b/dapp/src/components/TransactionHistory/Table/Footer.tsx
index 5527a6bbd..126afb371 100644
--- a/dapp/src/components/TransactionHistory/Table/Footer.tsx
+++ b/dapp/src/components/TransactionHistory/Table/Footer.tsx
@@ -2,9 +2,13 @@ import React from "react"
 import { UseTransactionHistoryTableResult } from "#/types"
 import { HStack, IconButton } from "@chakra-ui/react"
 import { TextSm } from "#/components/shared/Typography"
-import { PAGINATION_BUTTONS } from "./utils/pagination"
+import { PAGINATION_BUTTONS, getPaginationState } from "./utils/pagination"
 
 function TableFooter({ table }: { table: UseTransactionHistoryTableResult }) {
+  const { pageIndex, pageSize } = table.getState().pagination
+  const rowCount = table.getFilteredRowModel().rows.length
+  const { rowMin, rowMax } = getPaginationState(pageIndex, pageSize, rowCount)
+
   return (
     <HStack mt={6}>
       {PAGINATION_BUTTONS.map(({ ariaLabel, onClick, isDisabled, icon }) => (
@@ -18,9 +22,7 @@ function TableFooter({ table }: { table: UseTransactionHistoryTableResult }) {
         />
       ))}
       <TextSm>
-        {`Page ${
-          table.getState().pagination.pageIndex + 1
-        } of ${table.getPageCount()}`}
+        {`Showing ${rowMin}-${rowMax} out of ${rowCount} transactions`}
       </TextSm>
     </HStack>
   )
diff --git a/dapp/src/components/TransactionHistory/Table/utils/pagination.tsx b/dapp/src/components/TransactionHistory/Table/utils/pagination.tsx
index 11dc7f697..e73afde87 100644
--- a/dapp/src/components/TransactionHistory/Table/utils/pagination.tsx
+++ b/dapp/src/components/TransactionHistory/Table/utils/pagination.tsx
@@ -18,3 +18,14 @@ export const PAGINATION_BUTTONS = [
       !table.getCanNextPage(),
   },
 ]
+
+export const getPaginationState = (
+  pageIndex: number,
+  pageSize: number,
+  rowCount: number,
+) => {
+  const rowMin = pageIndex * pageSize + 1
+  const rowMax = Math.min((pageIndex + 1) * pageSize, rowCount)
+
+  return { rowMin, rowMax }
+}
diff --git a/dapp/src/hooks/useTransactionHistoryTable.ts b/dapp/src/hooks/useTransactionHistoryTable.ts
index 483df6bbf..9d3855975 100644
--- a/dapp/src/hooks/useTransactionHistoryTable.ts
+++ b/dapp/src/hooks/useTransactionHistoryTable.ts
@@ -12,7 +12,7 @@ import { useState } from "react"
 
 const PAGINATION_STATE = {
   pageIndex: 0,
-  pageSize: 2,
+  pageSize: 10,
 }
 
 export function useTransactionHistoryTable({