Wire up ClosedLpTable to hook

apps/hyperdrive-trading/src/ui/hyperdrive/lp/hooks/useClosedLpShares.ts

@@ -0,0 +1,25 @@
+import { ClosedLpShares, getClosedLpSharesQuery } from "@hyperdrive/core";
+import { QueryStatus, useQuery } from "@tanstack/react-query";
+import { Address, usePublicClient } from "wagmi";
+
+interface UseClosedLpSharesOptions {
+  account: Address | undefined;
+  hyperdriveAddress: Address | undefined;
+}
+export function useClosedLpShares({
+  account,
+  hyperdriveAddress,
+}: UseClosedLpSharesOptions): {
+  lpShares: ClosedLpShares[] | undefined;
+  lpSharesStatus: QueryStatus;
+} {
+  const publicClient = usePublicClient();
+  const { data: lpShares, status: lpSharesStatus } = useQuery(
+    getClosedLpSharesQuery({
+      providerAddress: account,
+      hyperdriveAddress,
+      publicClient: publicClient as any,
+    }),
+  );
+  return { lpShares, lpSharesStatus };
+}

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

@@ -2,9 +2,8 @@ import { ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
 import { SortableGridTable } from "src/ui/base/components/tables/SortableGridTable";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
-import { useLpShares } from "src/ui/hyperdrive/lp/hooks/useLpShares";
+import { useClosedLpShares } from "src/ui/hyperdrive/lp/hooks/useClosedLpShares";
 import { useWithdrawalShares } from "src/ui/hyperdrive/lp/hooks/useWithdrawalShares";
-import { RemoveLiquidityModalButton } from "src/ui/hyperdrive/lp/RemoveLiquidityModalButton/RemoveLiquidityModalButton";
 import { formatUnits } from "viem";
 import { useAccount } from "wagmi";
 
@@ -17,8 +16,7 @@ export function ClosedLpTable({
 }: ClosedLpTablePRops): ReactElement {
   const { address: account } = useAccount();
 
-  // TODO: make a useClosedLpShares hook
-  const { lpShares } = useLpShares({
+  const { lpShares } = useClosedLpShares({
     hyperdriveAddress: hyperdrive.address,
     account,
   });
@@ -31,52 +29,60 @@ export function ClosedLpTable({
 
   return (
     <SortableGridTable
-      headingRowClassName="grid-cols-4 text-start text-neutral-content"
-      bodyRowClassName="grid-cols-4 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16"
-      cols={["Position", "Shares", "Value", "Withdrawable", "Closed on"]}
-      rows={[
-        lpShares
-          ? [
-              <span key="type" className="font-semibold uppercase text-primary">
-                LP
-              </span>,
-              formatBalance(
-                formatUnits(
-                  lpShares,
-                  (hyperdrive as Hyperdrive).baseToken.decimals,
-                ),
-              ),
-              "TODO",
-              "TODO",
-              <span key="remove-liquidity" className="flex justify-end">
-                <RemoveLiquidityModalButton
-                  modalId="remove-liquidity-modal"
-                  hyperdrive={hyperdrive}
-                  lpShares={lpShares}
-                />
-              </span>,
-            ]
-          : undefined,
-
-        withdrawalShares
-          ? [
-              <span key="type" className="font-semibold uppercase text-primary">
-                Pending withdraw
-              </span>,
-              formatBalance(
-                formatUnits(
-                  withdrawalShares,
-                  (hyperdrive as Hyperdrive).baseToken.decimals,
-                ),
-              ),
-              "TODO",
-              "TODO",
-              <span key="redeem-withdraw-shares" className="flex justify-end">
-                TODO
-              </span>,
-            ]
-          : undefined,
+      headingRowClassName="grid-cols-5 text-start text-neutral-content"
+      bodyRowClassName="grid-cols-5 text-base-content items-center text-sm md:text-h6 even:bg-secondary/5 h-16"
+      cols={[
+        "Position",
+        "Shares",
+        "Value Received",
+        "Withdrawal shares",
+        "Closed on",
       ]}
+      rows={
+        lpShares
+          ? lpShares.map(
+              ({
+                lpAmount,
+                baseAmount,
+                closedTimestamp,
+                withdrawalShareAmount,
+              }) => [
+                <span
+                  key="type"
+                  className="font-semibold uppercase italic text-primary"
+                >
+                  LP
+                </span>,
+                <span key="shares" className="italic">
+                  {formatBalance(
+                    formatUnits(
+                      lpAmount,
+                      (hyperdrive as Hyperdrive).baseToken.decimals,
+                    ),
+                  )}
+                </span>,
+                <span key="value" className="italic">
+                  {`${formatBalance(
+                    formatUnits(baseAmount, hyperdrive.baseToken.decimals),
+                  )} ${hyperdrive.baseToken.symbol}`}
+                </span>,
+                <span key="withdrawalShares" className="italic">
+                  {`${formatBalance(
+                    formatUnits(
+                      withdrawalShareAmount,
+                      hyperdrive.baseToken.decimals,
+                    ),
+                  )}`}
+                </span>,
+                <span key="closed-on" className="italic">
+                  {new Date(
+                    Number(closedTimestamp * 1000n),
+                  ).toLocaleDateString()}
+                </span>,
+              ],
+            )
+          : []
+      }
     />
   );
 }