Split up OpenOrdersTable and ClosedOrdersTable components

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

@@ -2,32 +2,28 @@
 import { ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
 import { SortableGridTable } from "src/ui/base/components/tables/SortableGridTable";
-import { useClosedLongRows } from "src/ui/portfolio/ClosedOrdersTable/useClosedLongRows";
+import { useClosedLongRows } from "src/ui/portfolio/ClosedLongsTable/useClosedLongRows";
 import { useAccount } from "wagmi";
 
-interface ClosedOrdersTableProps {
+interface ClosedLongsTableProps {
   hyperdrive: Hyperdrive;
 }
 
-export function ClosedOrdersTable({
+export function ClosedLongsTable({
   hyperdrive,
-}: ClosedOrdersTableProps): ReactElement {
+}: ClosedLongsTableProps): ReactElement {
   const { address: account } = useAccount();
   const { closedLongRows = [] } = useClosedLongRows({
     account,
     hyperdrive: hyperdrive,
   });
 
-  // TODO: Add useOpenShortRows hook
-
-  const allRows = [...closedLongRows];
-
   return (
     <SortableGridTable
       headingRowClassName="grid-cols-5 text-neutral-content"
       bodyRowClassName="grid-cols-5 text-base-content items-center text-h6 even:bg-base-300/50 h-16"
       cols={["Position", "Balance", "Value", "Matures on", "Closed on"]}
-      rows={allRows}
+      rows={closedLongRows}
     />
   );
 }

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

@@ -0,0 +1,31 @@
+/* eslint-disable react/jsx-key */
+import { ReactElement } from "react";
+import { Hyperdrive } from "src/appconfig/types";
+import { SortableGridTable } from "src/ui/base/components/tables/SortableGridTable";
+import { useOpenLongRows } from "src/ui/portfolio/OpenLongsTable/useOpenLongRows";
+import { useAccount } from "wagmi";
+
+interface OpenOrdersTableProps {
+  hyperdrive: Hyperdrive;
+}
+
+export function OpenLongsTable({
+  hyperdrive,
+}: OpenOrdersTableProps): ReactElement {
+  const { address: account } = useAccount();
+
+  const { openLongRows = [] } = useOpenLongRows({
+    account,
+    hyperdrive,
+  });
+
+  return (
+    <SortableGridTable
+      headingRowClassName="grid-cols-4 text-neutral-content"
+      bodyRowClassName="grid-cols-4 text-base-content items-center text-h6 even:bg-base-300/50 h-16"
+      // Blank col added for actions
+      cols={["Position", "Balance", "Value", "Matures on", ""]}
+      rows={openLongRows}
+    />
+  );
+}

apps/hyperdrive-trading/src/ui/portfolio/OpenOrdersTable/OpenOrdersTable.tsx → apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx

@@ -2,37 +2,30 @@
 import { ReactElement } from "react";
 import { Hyperdrive } from "src/appconfig/types";
 import { SortableGridTable } from "src/ui/base/components/tables/SortableGridTable";
-import { useOpenLongRows } from "src/ui/portfolio/OpenOrdersTable/useOpenLongRows";
-import { useOpenShortRows } from "src/ui/portfolio/OpenOrdersTable/useOpenShortRows";
+import { useOpenShortRows } from "src/ui/portfolio/OpenShortsTable/useOpenShortRows";
 import { useAccount } from "wagmi";
 
 interface OpenOrdersTableProps {
   hyperdrive: Hyperdrive;
 }
 
-export function OpenOrdersTable({
+export function OpenShortsTable({
   hyperdrive,
 }: OpenOrdersTableProps): ReactElement {
   const { address: account } = useAccount();
 
-  const { openLongRows: longRows = [] } = useOpenLongRows({
+  const { openShortRows = [] } = useOpenShortRows({
     account,
     hyperdrive,
   });
-  const { openShortRows: shortRows = [] } = useOpenShortRows({
-    account,
-    hyperdrive,
-  });
-
-  const allRows = [...longRows, ...shortRows];
 
   return (
     <SortableGridTable
       headingRowClassName="grid-cols-4 text-neutral-content"
       bodyRowClassName="grid-cols-4 text-base-content items-center text-h6 even:bg-base-300/50 h-16"
       // Blank col added for actions
       cols={["Position", "Balance", "Value", "Matures on", ""]}
-      rows={allRows}
+      rows={openShortRows}
     />
   );
 }

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

@@ -3,12 +3,13 @@ import classNames from "classnames";
 import { ReactElement, useState } from "react";
 import { Hyperdrive } from "src/appconfig/types";
 import { Well } from "src/ui/base/components/Well/Well";
-import { ClosedOrdersTable } from "src/ui/portfolio/ClosedOrdersTable/ClosedOrdersTable";
+import { ClosedLongsTable } from "src/ui/portfolio/ClosedLongsTable/ClosedLongsTable";
+import { OpenLongsTable } from "src/ui/portfolio/OpenLongsTable/OpenLongsTable";
 import {
   OpenOrClosedTab,
   OpenOrClosedTabs,
 } from "src/ui/portfolio/OpenOrClosedTabs/OpenOrClosedTabs";
-import { OpenOrdersTable } from "src/ui/portfolio/OpenOrdersTable/OpenOrdersTable";
+import { OpenShortsTable } from "src/ui/portfolio/OpenShortsTable/OpenShortsTable";
 
 type PositionTab = "Longs" | "Shorts" | "LP";
 
@@ -69,14 +70,21 @@ export function PositionsSection({
 
         {(() => {
           switch (activePositionTab) {
-            case "Longs":
-              return <OpenOrdersTable hyperdrive={hyperdrive} />;
-            case "Shorts":
-              return <ClosedOrdersTable hyperdrive={hyperdrive} />;
-            case "LP":
-              {
-                /* TODO: Wire this up */
+            case "Longs": {
+              if (activeOpenOrClosedTab === "Open") {
+                return <OpenLongsTable hyperdrive={hyperdrive} />;
+              }
+              return <ClosedLongsTable hyperdrive={hyperdrive} />;
+            }
+            case "Shorts": {
+              if (activeOpenOrClosedTab === "Open") {
+                return <OpenShortsTable hyperdrive={hyperdrive} />;
               }
+              // TODO: Wire this up
+              return <ClosedLongsTable hyperdrive={hyperdrive} />;
+            }
+            case "LP":
+              /* TODO: Wire this up */
               return <Well>Under construction</Well>;
             default:
               assertNever(activePositionTab);

packages/hyperdrive/src/amm/events/decodeAssetFromTransferSingleEventData.ts

@@ -10,8 +10,8 @@ import { Hash } from "viem";
 export type AssetType = "LP" | "LONG" | "SHORT" | "WITHDRAWAL_SHARE";
 
 /**
- * Decodes an encoded asset ID into it's constituent parts: an assetType and
- * timestamp.
+ * Decodes a TransferSingle event.data into it's constituent parts: an assetType
+ * and timestamp (if it exists).
  */
 export function decodeAssetFromTransferSingleEventData(eventData: Hash): {
   assetType: AssetType;