Basic table for transaction history

dapp/package.json

@@ -20,6 +20,7 @@
     "@emotion/styled": "^11.11.0",
     "@ledgerhq/wallet-api-client": "^1.2.1",
     "@ledgerhq/wallet-api-client-react": "^1.1.2",
+    "@tanstack/react-table": "^8.10.7",
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

dapp/src/components/Overview/TransactionHistory/AccountHistory.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+
+import DataTable from "./DataTable"
+import { MOCK_USER_TRANSACTIONS } from "../../../data/mock-transactions"
+
+export default function AccountHistory() {
+  // TODO: The transactions should be fetched, probably use the subgraph for this
+  const data = MOCK_USER_TRANSACTIONS
+  return <DataTable data={data} />
+}

dapp/src/components/Overview/TransactionHistory/CustomCell.tsx

@@ -0,0 +1,74 @@
+import React from "react"
+import { Box, Icon, Text, Link, HStack } from "@chakra-ui/react"
+import { BITCOIN, ETHEREUM } from "../../../constants"
+import { BitcoinSymbol, TBTCSymbol } from "../../../static/icons"
+
+export default function Cell({
+  children1,
+  children2,
+}: {
+  children1: React.ReactElement
+  children2: React.ReactElement
+}) {
+  return (
+    <Box display="flex" flexDirection="column" width="100%">
+      <Box bg="#FAF5E7" p={3}>
+        {children1}
+      </Box>
+      <Box bg="#FAF5E7" p={3}>
+        {children2}
+      </Box>
+    </Box>
+  )
+}
+
+function AssetCell({ asset }: { asset: string }) {
+  return (
+    <HStack>
+      <Icon as={asset === BITCOIN.token ? BitcoinSymbol : TBTCSymbol} />
+      <Text>{asset}</Text>
+    </HStack>
+  )
+}
+
+function BlockExplorerCell({ txHash }: { txHash: string }) {
+  const isEthTx = txHash.includes("0x")
+  const blockExplorer = isEthTx ? ETHEREUM.blockExplorer : BITCOIN.blockExplorer
+  const text = `See on ${isEthTx ? "Etherscan" : "Blockstream"}`
+  return (
+    <Link href={`${blockExplorer}/tx/${txHash}`} isExternal>
+      {text}
+    </Link>
+  )
+}
+export function getCustomCell(
+  type: "text" | "asset" | "link",
+  value1: string,
+  value2: string,
+) {
+  switch (type) {
+    case "text":
+      return (
+        <Cell
+          children1={<Text>{value1}</Text>}
+          children2={<Text>{value2}</Text>}
+        />
+      )
+    case "asset":
+      return (
+        <Cell
+          children1={<AssetCell asset={value1} />}
+          children2={<AssetCell asset={value2} />}
+        />
+      )
+    case "link":
+      return (
+        <Cell
+          children1={<BlockExplorerCell txHash={value1} />}
+          children2={<BlockExplorerCell txHash={value2} />}
+        />
+      )
+    default:
+      return null
+  }
+}

dapp/src/components/Overview/TransactionHistory/DataTable.tsx

@@ -0,0 +1,164 @@
+import React from "react"
+import {
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  HStack,
+  Icon,
+  Text,
+  IconButton,
+  VStack,
+} from "@chakra-ui/react"
+import {
+  flexRender,
+  ColumnDef,
+  SortDirection,
+  createColumnHelper,
+} from "@tanstack/react-table"
+import { useTransactionHistoryTable } from "../../../hooks"
+import { TxHistory } from "../../../types"
+import { getCustomCell } from "./CustomCell"
+import { formatBlockTImestamp, truncateAddress } from "../../../utils"
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronLeft,
+  ChevronRight,
+  Sort,
+} from "../../../static/icons"
+
+const getSortIcon = (value: false | SortDirection) => {
+  if (value) return value === "desc" ? ArrowDown : ArrowUp
+  return Sort
+}
+
+const columnHelper = createColumnHelper<TxHistory>()
+// When defining the columns for the table, columnHelper.accessor  ts returns a type issue.
+// Let's use the type any ay to avoid this error for this moment.
+// More info: https://github.com/TanStack/table/issues/4241
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const COLUMNS: ColumnDef<TxHistory, any>[] = [
+  // To enable the sorting of some columns let's use `columnHelper.accessor`.
+  // To do this, we also need to provide a key to the variable.
+  // Let's sort the data by the first transaction.
+  columnHelper.accessor("callTx.timestamp", {
+    header: "Date",
+    cell: ({ row: { original } }) =>
+      getCustomCell(
+        "text",
+        formatBlockTImestamp(original.callTx.timestamp),
+        formatBlockTImestamp(original.receiptTx.timestamp),
+      ),
+  }),
+  columnHelper.display({
+    header: "action",
+    cell: ({ row: { original } }) =>
+      getCustomCell("text", original.callTx.action, original.receiptTx.action),
+  }),
+  columnHelper.display({
+    header: "Asset",
+    cell: ({ row: { original } }) =>
+      getCustomCell("asset", original.callTx.asset, original.receiptTx.asset),
+  }),
+  columnHelper.accessor("callTx.amount", {
+    cell: ({ row: { original } }) =>
+      // TOTO:Use the correct format for the amounts
+      getCustomCell(
+        "text",
+        original.callTx.amount.toString(),
+        original.receiptTx.amount.toString(),
+      ),
+    header: "Amount",
+  }),
+  columnHelper.display({
+    header: "Account",
+    cell: ({ row: { original } }) =>
+      getCustomCell(
+        "text",
+        truncateAddress(original.callTx.account),
+        truncateAddress(original.receiptTx.account),
+      ),
+  }),
+  columnHelper.display({
+    header: "Transaction",
+    cell: ({ row: { original } }) =>
+      getCustomCell("link", original.callTx.txHash, original.receiptTx.txHash),
+  }),
+  columnHelper.display({
+    header: "Status",
+    cell: ({ row: { original } }) =>
+      getCustomCell("text", original.callTx.status, original.receiptTx.status),
+  }),
+]
+
+export default function DataTable({ data }: { data: TxHistory[] }) {
+  const table = useTransactionHistoryTable({
+    data,
+    columns: COLUMNS,
+  })
+
+  return (
+    <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>
+  )
+}

dapp/src/components/Overview/TransactionHistory/ProtocolHistory.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+
+import DataTable from "./DataTable"
+import { MOCK_ALL_TRANSACTIONS } from "../../../data/mock-transactions"
+
+export default function ProtocolHistory() {
+  // TODO: The transactions should be fetched, probably use the subgraph for this
+  const data = MOCK_ALL_TRANSACTIONS
+  return <DataTable data={data} />
+}

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

@@ -0,0 +1,23 @@
+import React from "react"
+import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react"
+import AccountHistory from "./AccountHistory"
+import ProtocolHistory from "./ProtocolHistory"
+
+export default function TransactionHistory() {
+  return (
+    <Tabs>
+      <TabList>
+        <Tab>Protocol history</Tab>
+        <Tab>Account history</Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel>
+          <ProtocolHistory />
+        </TabPanel>
+        <TabPanel>
+          <AccountHistory />
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  )
+}

dapp/src/constants/chains.ts

@@ -1,4 +1,11 @@
 export const BITCOIN = {
   name: "Bitcoin",
   token: "BTC",
+  blockExplorer: "https://btcscan.org",
+}
+
+export const ETHEREUM = {
+  name: "Ethereum",
+  token: "ETH",
+  blockExplorer: "https://etherscan.io",
 }