From 5b347a082b4ab54dd8173f507b5cd1463a7e8d69 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 24 Nov 2023 11:55:25 +0100 Subject: [PATCH] Add a basic pagination for transaction history table --- .../Overview/TransactionHistory/DataTable.tsx | 115 ++++++++++++------ dapp/src/data/mock-transactions.ts | 66 ++++++++++ dapp/src/hooks/useTransactionHistoryTable.ts | 10 +- dapp/src/static/icons/ChevronLeft.tsx | 24 ++++ dapp/src/static/icons/index.ts | 1 + 5 files changed, 179 insertions(+), 37 deletions(-) create mode 100644 dapp/src/static/icons/ChevronLeft.tsx diff --git a/dapp/src/components/Overview/TransactionHistory/DataTable.tsx b/dapp/src/components/Overview/TransactionHistory/DataTable.tsx index 104e1d519..102e8956e 100644 --- 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.getHeaderGroups().map(({ id, headers }) => ( - - {headers.map((header) => ( - - ))} - - ))} - - - {table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map(({ id, column, getContext }) => ( - - ))} - - ))} - -
- {flexRender( - header.column.columnDef.header, - header.getContext(), - )} - {header.column.getCanSort() && ( - - )} -
- {flexRender(column.columnDef.cell, getContext())} -
+ + + + {table.getHeaderGroups().map(({ id, headers }) => ( + + {headers.map((header) => ( + + ))} + + ))} + + + {table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map(({ id, column, getContext }) => ( + + ))} + + ))} + +
+ {flexRender( + header.column.columnDef.header, + header.getContext(), + )} + {header.column.getCanSort() && ( + + )} +
+ {flexRender(column.columnDef.cell, getContext())} +
+ + table.previousPage()} + isDisabled={!table.getCanPreviousPage()} + icon={} + /> + table.nextPage()} + isDisabled={!table.getCanNextPage()} + icon={} + /> + + {`Page ${ + table.getState().pagination.pageIndex + 1 + } of ${table.getPageCount()}`} + + + ) } diff --git a/dapp/src/data/mock-transactions.ts b/dapp/src/data/mock-transactions.ts index ee48ca8f0..1abd7df3b 100644 --- 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 index 9c7a9837a..a1593cea9 100644 --- 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 { const [sorting, setSorting] = useState([]) + const [pagination, setPagination] = useState({ + 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 new file mode 100644 index 000000000..fe133ab06 --- /dev/null +++ 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: ( + + + + ), +}) diff --git a/dapp/src/static/icons/index.ts b/dapp/src/static/icons/index.ts index 72155bb3b..d6999161f 100644 --- 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"