Add sorting function for transaction history table

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

@@ -1,9 +1,12 @@
 import React from "react"
-import { Thead, Tr, Th } from "@chakra-ui/react"
+import { Thead, Tr, Th, Icon, useMultiStyleConfig, Box } from "@chakra-ui/react"
 import { flexRender } from "@tanstack/react-table"
 import { UseTransactionHistoryTableResult } from "#/types"
+import { SORT_ICONS } from "./utils/sorting"
 
 function TableHeader({ table }: { table: UseTransactionHistoryTableResult }) {
+  const styles = useMultiStyleConfig("Table")
+
   return (
     <Thead>
       {table.getHeaderGroups().map(({ id, headers }) => (
@@ -14,7 +17,26 @@ function TableHeader({ table }: { table: UseTransactionHistoryTableResult }) {
               onClick={column.getToggleSortingHandler()}
               textAlign={column.columnDef.meta?.style.textAlign}
             >
-              {flexRender(column.columnDef.header, getContext())}
+              <Box
+                __css={styles.header}
+                style={{
+                  ...(column.getCanSort() && { cursor: "pointer" }),
+                }}
+              >
+                {flexRender(column.columnDef.header, getContext())}
+                {column.getCanSort() && (
+                  <Box __css={styles.sortContainer}>
+                    {SORT_ICONS.map(({ key, icon, getColor, boxSize }) => (
+                      <Icon
+                        key={key}
+                        as={icon}
+                        boxSize={boxSize}
+                        color={getColor(column.getIsSorted())}
+                      />
+                    ))}
+                  </Box>
+                )}
+              </Box>
             </Th>
           ))}
         </Tr>

dapp/src/components/TransactionHistory/Table/utils/sorting.tsx

@@ -0,0 +1,34 @@
+import { SortASC, SortDESC } from "#/static/icons"
+import { SortDirection } from "@tanstack/react-table"
+import { Icon } from "@chakra-ui/react"
+
+const BOX_SIZE = 1.5
+
+const getSortIconColor = (
+  isSorted: false | SortDirection,
+  direction: SortDirection,
+) => {
+  if (isSorted === direction) return "brand.400"
+
+  return undefined
+}
+
+export const SORT_ICONS: {
+  key: SortDirection
+  icon: typeof Icon
+  boxSize: number
+  getColor: (isSorted: false | SortDirection) => string | undefined
+}[] = [
+  {
+    key: "asc",
+    icon: SortASC,
+    boxSize: BOX_SIZE,
+    getColor: (isSorted) => getSortIconColor(isSorted, "asc"),
+  },
+  {
+    key: "desc",
+    icon: SortDESC,
+    boxSize: BOX_SIZE,
+    getColor: (isSorted) => getSortIconColor(isSorted, "desc"),
+  },
+]

dapp/src/hooks/useTransactionHistoryTable.ts

@@ -1,8 +1,10 @@
 import {
   ColumnDef,
   PaginationState,
+  SortingState,
   getCoreRowModel,
   getPaginationRowModel,
+  getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table"
 import { StakeHistory, UseTransactionHistoryTableResult } from "#/types"
@@ -20,16 +22,20 @@ export function useTransactionHistoryTable({
   data: StakeHistory[]
   columns: ColumnDef<StakeHistory>[]
 }): UseTransactionHistoryTableResult {
+  const [sorting, setSorting] = useState<SortingState>([])
   const [pagination, setPagination] =
     useState<PaginationState>(PAGINATION_STATE)
 
   const table = useReactTable({
     columns,
     data,
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
     onPaginationChange: setPagination,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     state: {
+      sorting,
       pagination,
     },
   })

dapp/src/static/icons/SortASC.tsx

@@ -0,0 +1,8 @@
+import React from "react"
+import { createIcon } from "@chakra-ui/react"
+
+export const SortASC = createIcon({
+  displayName: "SortASC",
+  viewBox: "0 0 7 7",
+  path: <path d="M3.51671 0.5L7 6.3H0L3.51671 0.5Z" fill="currentColor" />,
+})

dapp/src/static/icons/SortDESC.tsx

@@ -0,0 +1,8 @@
+import React from "react"
+import { createIcon } from "@chakra-ui/react"
+
+export const SortDESC = createIcon({
+  displayName: "SortDESC",
+  viewBox: "0 0 7 7",
+  path: <path d="M3.51671 6.5L7 0.7H0L3.51671 6.5Z" fill="currentColor" />,
+})

dapp/src/static/icons/index.ts

@@ -14,3 +14,5 @@ export * from "./ShieldPlus"
 export * from "./Pending"
 export * from "./Syncing"
 export * from "./Complete"
+export * from "./SortASC"
+export * from "./SortDESC"

dapp/src/theme/Table.ts

@@ -4,7 +4,14 @@ import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
 const BORDER_RADIUS_SIZE = "md"
 const BORDER_STYLE = "1px solid white"
 
-const KEYS = [...parts.keys, "cellContainer", "cell", "divider"] as const
+const KEYS = [
+  ...parts.keys,
+  "cellContainer",
+  "cell",
+  "divider",
+  "header",
+  "sortContainer",
+] as const
 
 const multiStyleConfig = createMultiStyleConfigHelpers(KEYS)
 
@@ -55,6 +62,17 @@ const variantDoubleRowDivider = defineStyle({
   borderBottomWidth: "2px",
 })
 
+const baseStyleSortContainer = defineStyle({
+  display: "flex",
+  flexDirection: "column",
+})
+
+const baseStyleHeader = defineStyle({
+  display: "flex",
+  alignItems: "center",
+  gap: 2.5,
+})
+
 const variantDoubleRow = multiStyleConfig.definePartsStyle({
   table: variantDoubleRowTable,
   td: variantDoubleRowTd,
@@ -68,4 +86,12 @@ const variants = {
   "double-row": variantDoubleRow,
 }
 
-export const tableTheme = multiStyleConfig.defineMultiStyleConfig({ variants })
+const baseStyle = multiStyleConfig.definePartsStyle({
+  header: baseStyleHeader,
+  sortContainer: baseStyleSortContainer,
+})
+
+export const tableTheme = multiStyleConfig.defineMultiStyleConfig({
+  baseStyle,
+  variants,
+})