Add a pagination to transaction table

dapp/src/components/TransactionHistory/Table/index.tsx

@@ -7,11 +7,15 @@ import {
   Th,
   Td,
   TableContainer,
+  HStack,
+  IconButton,
 } from "@chakra-ui/react"
 import { flexRender } from "@tanstack/react-table"
 import { useTransactionHistoryTable } from "#/hooks"
 import { StakeHistory } from "#/types"
+import { TextSm } from "#/components/shared/Typography"
 import { COLUMNS } from "./columns"
+import { PAGINATION_BUTTONS } from "./pagination"
 
 function Table({ data }: { data: StakeHistory[] }) {
   const table = useTransactionHistoryTable({
@@ -20,38 +24,57 @@ function Table({ data }: { data: StakeHistory[] }) {
   })
 
   return (
-    <TableContainer>
-      <ChakraTable variant="double-row">
-        <Thead>
-          {table.getHeaderGroups().map(({ id, headers }) => (
-            <Tr key={id}>
-              {headers.map((header) => (
-                <Th
-                  key={header.id}
-                  onClick={header.column.getToggleSortingHandler()}
-                >
-                  {flexRender(
-                    header.column.columnDef.header,
-                    header.getContext(),
-                  )}
-                </Th>
-              ))}
-            </Tr>
-          ))}
-        </Thead>
-        <Tbody>
-          {table.getRowModel().rows.map((row) => (
-            <Tr key={row.id}>
-              {row.getVisibleCells().map(({ id, column, getContext }) => (
-                <Td key={id}>
-                  {flexRender(column.columnDef.cell, getContext())}
-                </Td>
-              ))}
-            </Tr>
-          ))}
-        </Tbody>
-      </ChakraTable>
-    </TableContainer>
+    <>
+      <TableContainer>
+        <ChakraTable variant="double-row">
+          <Thead>
+            {table.getHeaderGroups().map(({ id, headers }) => (
+              <Tr key={id}>
+                {headers.map((header) => (
+                  <Th
+                    key={header.id}
+                    onClick={header.column.getToggleSortingHandler()}
+                  >
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
+                  </Th>
+                ))}
+              </Tr>
+            ))}
+          </Thead>
+          <Tbody>
+            {table.getRowModel().rows.map((row) => (
+              <Tr key={row.id}>
+                {row.getVisibleCells().map(({ id, column, getContext }) => (
+                  <Td key={id}>
+                    {flexRender(column.columnDef.cell, getContext())}
+                  </Td>
+                ))}
+              </Tr>
+            ))}
+          </Tbody>
+        </ChakraTable>
+      </TableContainer>
+      <HStack mt={6}>
+        {PAGINATION_BUTTONS.map(({ ariaLabel, onClick, isDisabled, icon }) => (
+          <IconButton
+            variant="ghost"
+            background="white"
+            aria-label={ariaLabel}
+            onClick={() => onClick(table)}
+            isDisabled={isDisabled(table)}
+            icon={icon}
+          />
+        ))}
+        <TextSm>
+          {`Page ${
+            table.getState().pagination.pageIndex + 1
+          } of ${table.getPageCount()}`}
+        </TextSm>
+      </HStack>
+    </>
   )
 }
 

dapp/src/components/TransactionHistory/Table/pagination.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import { UseTransactionHistoryTableResult } from "#/hooks"
+import { ArrowLeft, ArrowRight } from "#/static/icons"
+
+export const PAGINATION_BUTTONS = [
+  {
+    icon: <ArrowLeft />,
+    ariaLabel: "Previous Page",
+    onClick: (table: UseTransactionHistoryTableResult) => table.previousPage(),
+    isDisabled: (table: UseTransactionHistoryTableResult) =>
+      !table.getCanPreviousPage(),
+  },
+  {
+    icon: <ArrowRight />,
+    ariaLabel: "Next Page",
+    onClick: (table: UseTransactionHistoryTableResult) => table.nextPage(),
+    isDisabled: (table: UseTransactionHistoryTableResult) =>
+      !table.getCanNextPage(),
+  },
+]

dapp/src/hooks/useTransactionHistoryTable.ts

@@ -1,12 +1,20 @@
 import {
   ColumnDef,
+  PaginationState,
   Table,
   getCoreRowModel,
+  getPaginationRowModel,
   useReactTable,
 } from "@tanstack/react-table"
 import { StakeHistory } from "#/types"
+import { useState } from "react"
 
-type UseTransactionHistoryTableResult = Table<StakeHistory>
+const PAGINATION_STATE = {
+  pageIndex: 0,
+  pageSize: 2,
+}
+
+export type UseTransactionHistoryTableResult = Table<StakeHistory>
 
 export function useTransactionHistoryTable({
   data,
@@ -15,10 +23,18 @@ export function useTransactionHistoryTable({
   data: StakeHistory[]
   columns: ColumnDef<StakeHistory>[]
 }): UseTransactionHistoryTableResult {
+  const [pagination, setPagination] =
+    useState<PaginationState>(PAGINATION_STATE)
+
   const table = useReactTable({
     columns,
     data,
+    onPaginationChange: setPagination,
     getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    state: {
+      pagination,
+    },
   })
 
   return table

dapp/src/static/icons/ArrowLeft.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import { createIcon } from "@chakra-ui/react"
+
+export const ArrowLeft = createIcon({
+  displayName: "ArrowLeft",
+  viewBox: "0 0 16 17",
+  path: (
+    <path
+      d="M13.3346 8.5H2.66797M2.66797 8.5L6.66797 12.5M2.66797 8.5L6.66797 4.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
+})

dapp/src/static/icons/ArrowRight.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import { createIcon } from "@chakra-ui/react"
+
+export const ArrowRight = createIcon({
+  displayName: "ArrowRight",
+  viewBox: "0 0 16 17",
+  path: (
+    <path
+      d="M2.66797 8.5H13.3346M13.3346 8.5L9.33464 4.5M13.3346 8.5L9.33464 12.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  ),
+})

dapp/src/static/icons/index.ts

@@ -2,6 +2,8 @@ export * from "./Info"
 export * from "./Bitcoin"
 export * from "./Ethereum"
 export * from "./ArrowUpRight"
+export * from "./ArrowLeft"
+export * from "./ArrowRight"
 export * from "./AcreLogo"
 export * from "./ConnectBTCAccount"
 export * from "./ConnectETHAccount"