Closed long table polish (#431)

apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx

@@ -1,75 +1,149 @@
-/* eslint-disable react/jsx-key */
+import { ClosedLong } from "@hyperdrive/sdk";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Row,
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 import { ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
-import {
-  CellWithTooltip,
-  SortableGridTable,
-} from "src/ui/base/components/tables/SortableGridTable";
-import { useClosedLongRows } from "src/ui/portfolio/ClosedLongsTable/useClosedLongRows";
+import { makeQueryKey } from "src/base/makeQueryKey";
+import { formatBalance } from "src/ui/base/formatting/formatBalance";
+import { useReadHyperdrive } from "src/ui/hyperdrive/hooks/useReadHyperdrive";
 import { useAccount } from "wagmi";
 
 interface ClosedLongsTableProps {
   hyperdrive: Hyperdrive;
 }
 
+const columnHelper = createColumnHelper<ClosedLong>();
+
+function getColumns(hyperdrive: Hyperdrive) {
+  return [
+    columnHelper.display({
+      header: `ID`,
+      cell: ({ row }) => <span>{Number(row.original.maturity)}</span>,
+    }),
+    columnHelper.display({
+      header: `Matures on`,
+      cell: ({ row }) => {
+        const maturity = new Date(Number(row.original.maturity * 1000n));
+        return <span>{maturity.toLocaleDateString()}</span>;
+      },
+    }),
+    columnHelper.display({
+      id: "size",
+      header: `Size (hy${hyperdrive.baseToken.symbol})`,
+      cell: ({ row }) => {
+        return (
+          <span>
+            {formatBalance({
+              balance: row.original.bondAmount,
+              decimals: hyperdrive.baseToken.decimals,
+              places: 2,
+            })}
+          </span>
+        );
+      },
+    }),
+    columnHelper.display({
+      id: "baseReceived",
+      header: `Amount received (${hyperdrive.baseToken.symbol})`,
+      cell: ({ row }) => {
+        return <BaseAmountReceivedCell hyperdrive={hyperdrive} row={row} />;
+      },
+    }),
+    columnHelper.accessor("closedTimestamp", {
+      header: `Closed on`,
+      cell: ({ row }) => {
+        return new Date(
+          Number(row.original.closedTimestamp * 1000n),
+        ).toLocaleDateString();
+      },
+    }),
+  ];
+}
 export function ClosedLongsTable({
   hyperdrive,
 }: ClosedLongsTableProps): ReactElement {
   const { address: account } = useAccount();
-  const { closedLongRows = [], closedLongRowsStatus } = useClosedLongRows({
-    account,
-    hyperdrive: hyperdrive,
+  const readHyperdrive = useReadHyperdrive(hyperdrive.address);
+  const queryEnabled = !!readHyperdrive && !!account;
+  const { data: closedLongs } = useQuery({
+    queryKey: makeQueryKey("closedLongPositions", { account }),
+    queryFn: queryEnabled
+      ? () => readHyperdrive?.getClosedLongs({ account })
+      : undefined,
+    enabled: queryEnabled,
+  });
+  const tableInstance = useReactTable({
+    columns: getColumns(hyperdrive),
+    data: [...(closedLongs || [])].reverse(), // show most recently closed first, TODO: refactor to interactive column sorting
+    getCoreRowModel: getCoreRowModel(),
   });
 
   return (
-    <SortableGridTable
-      headingRowClassName="grid-cols-5"
-      bodyRowClassName="grid-cols-4 items-center text-sm md:text-h6 even:bg-base-300/5 h-16"
-      cols={[
-        {
-          cell: (
-            <CellWithTooltip
-              tooltip="Long and Short positions have a maturity date based on the open date and position duration of the pool whereas LP positions can remain active indefinitely (until closed by the LPer)."
-              content="Position"
-            />
-          ),
-        },
-        {
-          cell: (
-            <CellWithTooltip
-              tooltip="Hyperdrive-native instruments with a market-based fixed rate; can be closed early for current market value or held for the full position duration (i.e., term) and subsequently redeemed for the bond’s face value."
-              content="Bonds"
-            />
-          ),
-        },
-        {
-          cell: (
-            <CellWithTooltip
-              content="Value"
-              tooltip="Current settlement value of your open position."
-            />
-          ),
-        },
-        {
-          cell: (
-            <CellWithTooltip
-              content="Matures on"
-              tooltip="Date at which the position matures and can be settled by the trader."
-            />
-          ),
-        },
+    <div className="max-h-96 overflow-y-scroll">
+      <table className="daisy-table-zebra daisy-table daisy-table-lg">
+        <thead>
+          {tableInstance.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {tableInstance.getRowModel().rows.map((row) => {
+            return (
+              <tr key={row.id} className="h-16 items-center italic">
+                <>
+                  {row.getVisibleCells().map((cell) => {
+                    return (
+                      <td key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </td>
+                    );
+                  })}
+                </>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function BaseAmountReceivedCell({
+  row,
+  hyperdrive,
+}: {
+  row: Row<ClosedLong>;
+  hyperdrive: Hyperdrive;
+}) {
+  const currentValueLabel = formatBalance({
+    balance: row.original.baseAmount,
+    decimals: hyperdrive.baseToken.decimals,
+    places: 4,
+  });
 
-        {
-          cell: (
-            <CellWithTooltip
-              content="Closed on"
-              tooltip="Date when the position was settled by the trader."
-            />
-          ),
-        },
-      ]}
-      rows={closedLongRows}
-      showSkeleton={closedLongRowsStatus === "loading"}
-    />
+  return (
+    <div className="flex flex-col items-center gap-1 lg:flex-row">
+      <span className="font-bold">{currentValueLabel?.toString()}</span>
+    </div>
   );
 }

apps/hyperdrive-trading/src/ui/portfolio/OpenLongsTable/OpenLongsTable.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-key */
 import { Long } from "@hyperdrive/sdk";
 import { useQuery } from "@tanstack/react-query";
 import {
@@ -80,7 +79,7 @@ function getColumns(hyperdrive: Hyperdrive) {
     }),
     columnHelper.display({
       id: "value",
-      header: `Market value (${hyperdrive.baseToken.symbol})`,
+      header: `Current value (${hyperdrive.baseToken.symbol})`,
       cell: ({ row }) => {
         return <CurrentValueCell hyperdrive={hyperdrive} row={row} />;
       },
@@ -197,7 +196,7 @@ function CurrentValueCell({
     baseAmountOut && baseAmountOut > row.original.baseAmountPaid;
 
   return (
-    <div className="flex flex-col items-center gap-1 lg:flex-row">
+    <div className="flex flex-col items-center gap-1">
       <span className="font-bold">{currentValue?.toString()}</span>
       <div
         data-tip={"Profit/Loss since open"}
@@ -207,7 +206,7 @@ function CurrentValueCell({
           { "text-error": !isPositiveChangeInValue },
         )}
       >
-        {isPositiveChangeInValue ? "+" : ""}
+        <span>{isPositiveChangeInValue ? "+" : ""}</span>
         {baseAmountOut
           ? `${formatBalance({
               balance: baseAmountOut - row.original.baseAmountPaid,