Add a basic pagination for transaction history table

thesis · Nov 24, 2023 · 5b347a0 · 5b347a0
1 parent ec72949
commit 5b347a0
Show file tree

Hide file tree

Showing 5 changed files with 179 additions and 37 deletions.
diff --git a/dapp/src/components/Overview/TransactionHistory/DataTable.tsx b/dapp/src/components/Overview/TransactionHistory/DataTable.tsx
@@ -1,5 +1,17 @@
 import React from "react"
-import { Table, Thead, Tbody, Tr, Th, Td, HStack, Icon } from "@chakra-ui/react"
+import {
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  HStack,
+  Icon,
+  Text,
+  IconButton,
+  VStack,
+} from "@chakra-ui/react"
 import {
   flexRender,
   ColumnDef,
@@ -10,7 +22,13 @@ import { useTransactionHistoryTable } from "../../../hooks"
 import { TxHistory } from "../../../types"
 import { getCustomCell } from "./CustomCell"
 import { formatBlockTImestamp, truncateAddress } from "../../../utils"
-import { ArrowDown, ArrowUp, Sort } from "../../../static/icons"
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronLeft,
+  ChevronRight,
+  Sort,
+} from "../../../static/icons"
 
 const getSortIcon = (value: false | SortDirection) => {
   if (value) return value === "desc" ? ArrowDown : ArrowUp
@@ -83,39 +101,64 @@ export default function DataTable({ data }: { data: TxHistory[] }) {
   })
 
   return (
-    <Table>
-      <Thead backgroundColor="transparent">
-        {table.getHeaderGroups().map(({ id, headers }) => (
-          <Tr key={id}>
-            {headers.map((header) => (
-              <Th
-                key={header.id}
-                onClick={header.column.getToggleSortingHandler()}
-                borderBottom={0}
-              >
-                {flexRender(
-                  header.column.columnDef.header,
-                  header.getContext(),
-                )}
-                {header.column.getCanSort() && (
-                  <Icon as={getSortIcon(header.column.getIsSorted())} ml={1} />
-                )}
-              </Th>
-            ))}
-          </Tr>
-        ))}
-      </Thead>
-      <Tbody>
-        {table.getRowModel().rows.map((row) => (
-          <Tr key={row.id} border="2px solid #F4E4C1">
-            {row.getVisibleCells().map(({ id, column, getContext }) => (
-              <Td key={id} p={0}>
-                {flexRender(column.columnDef.cell, getContext())}
-              </Td>
-            ))}
-          </Tr>
-        ))}
-      </Tbody>
-    </Table>
+    <VStack alignItems="start">
+      <Table>
+        <Thead backgroundColor="transparent">
+          {table.getHeaderGroups().map(({ id, headers }) => (
+            <Tr key={id}>
+              {headers.map((header) => (
+                <Th
+                  key={header.id}
+                  onClick={header.column.getToggleSortingHandler()}
+                  borderBottom={0}
+                >
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext(),
+                  )}
+                  {header.column.getCanSort() && (
+                    <Icon
+                      as={getSortIcon(header.column.getIsSorted())}
+                      ml={1}
+                    />
+                  )}
+                </Th>
+              ))}
+            </Tr>
+          ))}
+        </Thead>
+        <Tbody>
+          {table.getRowModel().rows.map((row) => (
+            <Tr key={row.id} border="2px solid #F4E4C1">
+              {row.getVisibleCells().map(({ id, column, getContext }) => (
+                <Td key={id} p={0}>
+                  {flexRender(column.columnDef.cell, getContext())}
+                </Td>
+              ))}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+      <HStack>
+        <IconButton
+          aria-label="Previous Page"
+          onClick={() => table.previousPage()}
+          isDisabled={!table.getCanPreviousPage()}
+          icon={<ChevronLeft />}
+        />
+        <IconButton
+          aria-label="Next page"
+          variant="outline"
+          onClick={() => table.nextPage()}
+          isDisabled={!table.getCanNextPage()}
+          icon={<ChevronRight />}
+        />
+        <Text>
+          {`Page ${
+            table.getState().pagination.pageIndex + 1
+          } of ${table.getPageCount()}`}
+        </Text>
+      </HStack>
+    </VStack>
   )
 }
diff --git a/dapp/src/data/mock-transactions.ts b/dapp/src/data/mock-transactions.ts
@@ -67,6 +67,72 @@ export const MOCK_ALL_TRANSACTIONS: TxHistory[] = [
       status: "Completed",
     },
   },
+  {
+    callTx: {
+      timestamp: 1700009973,
+      action: "Unstake",
+      asset: "BTC",
+      amount: 6.0,
+      account: "2MsjRekULh27YSM17p8gSNkVvbXw6wc4kcZ",
+      txHash:
+        "925c8910775c1842fbcfee782104d0d9934dde6f0ca00d393858fcbe8ac90eb7",
+      status: "Completed",
+    },
+    receiptTx: {
+      timestamp: 1700009973,
+      action: "Receive",
+      asset: "stBTC",
+      amount: 6.0,
+      account: "0x208e94d5661a73360d9387d3ca169e5c130090cd",
+      txHash:
+        "0xf612b8999e765f9631c5e32a9f424a097936da1c527953e78dc8da20f65bc3ee",
+      status: "Completed",
+    },
+  },
+  {
+    callTx: {
+      timestamp: 1700608973,
+      action: "Unstake",
+      asset: "stBTC",
+      amount: 32.1,
+      account: "2MsjRekULh27YSM17p8gSNkVvbXw6wc4kcZ",
+      txHash:
+        "925c8910775c1842fbcfee782104d0d9934dde6f0ca00d393858fcbe8ac90eb7",
+      status: "Completed",
+    },
+    receiptTx: {
+      timestamp: 1700608973,
+      action: "Receive",
+      asset: "BTC",
+      amount: 32.1,
+      account: "0x208e94d5661a73360d9387d3ca169e5c130090cd",
+      txHash:
+        "0xf612b8999e765f9631c5e32a9f424a097936da1c527953e78dc8da20f65bc3ee",
+      status: "Completed",
+    },
+  },
+  {
+    callTx: {
+      timestamp: 1700578973,
+      action: "Unstake",
+      asset: "stBTC",
+      amount: 6.14,
+      account: "2MsjRekULh27YSM17p8gSNkVvbXw6wc4kcZ",
+      txHash:
+        "925c8910775c1842fbcfee782104d0d9934dde6f0ca00d393858fcbe8ac90eb7",
+      status: "Completed",
+    },
+    receiptTx: {
+      timestamp: 1700578973,
+      action: "Receive",
+      asset: "BTC",
+      amount: 6.14,
+      account: "0x208e94d5661a73360d9387d3ca169e5c130090cd",
+      txHash:
+        "0xf612b8999e765f9631c5e32a9f424a097936da1c527953e78dc8da20f65bc3ee",
+      status: "Completed",
+    },
+  },
 ]
 
 export const MOCK_USER_TRANSACTIONS: TxHistory[] = [

diff --git a/dapp/src/hooks/useTransactionHistoryTable.ts b/dapp/src/hooks/useTransactionHistoryTable.ts
@@ -2,6 +2,7 @@ import { useState } from "react"
 import {
   ColumnDef,
   SortingState,
+  PaginationState,
   Table,
   getCoreRowModel,
   getPaginationRowModel,
@@ -20,15 +21,22 @@ export function useTransactionHistoryTable({
   columns,
 }: TransactionHistoryTable): Table<TxHistory> {
   const [sorting, setSorting] = useState<SortingState>([])
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 4,
+  })
+
   const table = useReactTable({
     columns,
     data,
-    getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     state: {
       sorting,
+      pagination,
     },
   })
 

diff --git a/dapp/src/static/icons/ChevronLeft.tsx b/dapp/src/static/icons/ChevronLeft.tsx
@@ -0,0 +1,24 @@
+import React from "react"
+import { createIcon } from "@chakra-ui/react"
+
+export const ChevronLeft = createIcon({
+  displayName: "ChevronLeft",
+  viewBox: "0 0 24 24",
+  path: (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M15 18L9 12L15 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
+})
diff --git a/dapp/src/static/icons/index.ts b/dapp/src/static/icons/index.ts
@@ -7,3 +7,4 @@ export * from "./TBTCSymbol"
 export * from "./Sort"
 export * from "./ArrowDown"
 export * from "./ArrowUp"
+export * from "./ChevronLeft"