From 5e9a180908d99efd7f298342eda2f1c996343f0b Mon Sep 17 00:00:00 2001
From: jackburrus <jhburrus3@gmail.com>
Date: Mon, 16 Oct 2023 13:51:18 -0600
Subject: [PATCH 1/4] fix theme

---
 .../src/ui/markets/MarketsTable/MarketsTable.tsx            | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
index d9a90676e..442e1bb11 100644
--- a/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
@@ -57,12 +57,12 @@ export function MarketsTable(): ReactElement {
   }, [marketsRowData, protocolFilter, termLengthFilter]);
 
   return (
-    <div className="flex flex-col space-y-8 overflow-x-auto rounded-sm bg-base-300">
+    <div className="flex flex-col space-y-8 overflow-x-auto rounded-sm ">
       {/* Markets sortable table */}
       <div>
         <SortableGridTable
-          headingRowClassName="grid-cols-auto bg-base-300 bg-opacity-100"
-          bodyRowClassName="grid-cols-auto bg-transparent text-base-content"
+          headingRowClassName="grid-cols-auto"
+          bodyRowClassName="grid-cols-auto"
           cols={[
             {
               cell: "Name",

From 24ef6ca1b2109966856288eead472400776b9e2b Mon Sep 17 00:00:00 2001
From: jackburrus <jhburrus3@gmail.com>
Date: Mon, 16 Oct 2023 18:26:09 -0600
Subject: [PATCH 2/4] columns setup

---
 .../ui/markets/MarketsTable/MarketsTable.tsx  | 129 +++++++++++-------
 1 file changed, 77 insertions(+), 52 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
index 442e1bb11..26ccd758d 100644
--- a/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
@@ -1,11 +1,14 @@
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 import uniqBy from "lodash.uniqby";
-import { ReactElement, useMemo, useState } from "react";
+import { ReactElement, useState } from "react";
 import { convertMillisecondsToDays } from "src/base/convertMillisecondsToDays";
 import { useAppConfig } from "src/ui/appconfig/useAppConfig";
-import {
-  Row,
-  SortableGridTable,
-} from "src/ui/base/components/tables/SortableGridTable";
+import { Row } from "src/ui/base/components/tables/SortableGridTable";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import {
   MarketTableRowData,
@@ -17,6 +20,25 @@ import { usePublicClient } from "wagmi";
 const ALL_PROTOCOLS_KEY = "All Markets";
 const ALL_TERM_LENGTHS_KEY = 0;
 
+const columnHelper = createColumnHelper<MarketTableRowData>();
+
+function columns() {
+  return [
+    columnHelper.accessor("market.name", {
+      header: "Name",
+      cell: ({ getValue, row }) => {
+        const marketName = getValue();
+        return (
+          <span key="name" className="font-bold">
+            <p>{marketName}</p>
+            <YieldSourceLabel yieldSource={row.original.yieldSource} />
+          </span>
+        );
+      },
+    }),
+  ];
+}
+
 export function MarketsTable(): ReactElement {
   const { appConfig: config } = useAppConfig();
   const publicClient = usePublicClient();
@@ -38,55 +60,58 @@ export function MarketsTable(): ReactElement {
   // TODO: no loading state for now
   const { data: marketsRowData = [], status: marketRowDataStatus } =
     useMarketRowData(config?.hyperdrives);
-
-  const filteredMarkets = useMemo(() => {
-    const marketFilteredByTermLength = termLengthFilter
-      ? marketsRowData.filter(
-          (marketRowData) =>
-            marketRowData.market.termLengthMS === termLengthFilter,
-        )
-      : marketsRowData;
-
-    if (protocolFilter !== ALL_PROTOCOLS_KEY) {
-      return marketFilteredByTermLength.filter(
-        (marketRowData) => marketRowData.market.yieldSource === protocolFilter,
-      );
-    }
-
-    return marketFilteredByTermLength;
-  }, [marketsRowData, protocolFilter, termLengthFilter]);
+  const tableInstance = useReactTable({
+    columns: columns(),
+    data: marketsRowData || [],
+    getCoreRowModel: getCoreRowModel(),
+  });
 
   return (
-    <div className="flex flex-col space-y-8 overflow-x-auto rounded-sm ">
-      {/* Markets sortable table */}
-      <div>
-        <SortableGridTable
-          headingRowClassName="grid-cols-auto"
-          bodyRowClassName="grid-cols-auto"
-          cols={[
-            {
-              cell: "Name",
-              sortKey: "name",
-            },
-            {
-              cell: "Term Length",
-              sortKey: "termLength",
-            },
-            {
-              cell: "Liquidity",
-              sortKey: "liquidity",
-            },
-            {
-              cell: "Fixed Rate",
-              sortKey: "longAPR",
-            },
-          ]}
-          rows={filteredMarkets.map((marketRowData) =>
-            createMarketRow(marketRowData),
-          )}
-          showSkeleton={marketRowDataStatus === "loading"}
-        />
-      </div>
+    <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="daisy-hover h-16 cursor-pointer grid-cols-4 items-center"
+                onClick={() => {
+                  console.log("handle go to market");
+                }}
+              >
+                <>
+                  {row.getVisibleCells().map((cell) => {
+                    return (
+                      <td key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </td>
+                    );
+                  })}
+                </>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
     </div>
   );
 }

From f71937386c825eafe16b66e744d9a01f699eda06 Mon Sep 17 00:00:00 2001
From: jackburrus <jhburrus3@gmail.com>
Date: Tue, 17 Oct 2023 07:25:38 -0600
Subject: [PATCH 3/4] simplify components

---
 .../MarketSelect/AllMarketsBreadcrumb.tsx     |  16 +--
 .../ui/markets/MarketsTable/MarketsTable.tsx  | 110 ++++++++----------
 .../OpenShortsTable/OpenShortsTable.tsx       |   2 +-
 3 files changed, 53 insertions(+), 75 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx
index f8f19070d..4584d14e5 100644
--- a/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx
@@ -2,14 +2,14 @@ import { ReactElement } from "react";
 import { Modal } from "src/ui/base/components/Modal/Modal";
 import { MarketsTable } from "src/ui/markets/MarketsTable/MarketsTable";
 
-const MARKETS_MODAL_KEY = "MARKETS_MODAL";
+export const MARKETS_MODAL_KEY = "MARKETS_MODAL";
 
 export function AllMarketsBreadcrumb(): ReactElement {
   return (
     <Modal
-      className={"w-[90vw] max-w-[90vw] p-0 md:w-[70vw] md:max-w-[70vw] md:p-4"}
+      className={"w-[50vw] max-w-[70vw]"}
       modalId={MARKETS_MODAL_KEY}
-      modalContent={<MarketsModalContent />}
+      modalContent={<MarketsTable />}
     >
       {({ showModal }) => (
         <label
@@ -23,13 +23,3 @@ export function AllMarketsBreadcrumb(): ReactElement {
     </Modal>
   );
 }
-
-function MarketsModalContent() {
-  return (
-    <div className="flex max-h-[70vh] flex-col items-center overflow-auto rounded p-1 md:p-4">
-      <h3 className="mb-4 font-lato">Markets</h3>
-
-      <MarketsTable />
-    </div>
-  );
-}
diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
index 26ccd758d..2d6a386b0 100644
--- a/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
@@ -4,21 +4,17 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import uniqBy from "lodash.uniqby";
-import { ReactElement, useState } from "react";
+import { ReactElement } from "react";
+import { useNavigate } from "react-router-dom";
 import { convertMillisecondsToDays } from "src/base/convertMillisecondsToDays";
 import { useAppConfig } from "src/ui/appconfig/useAppConfig";
-import { Row } from "src/ui/base/components/tables/SortableGridTable";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
+import { MARKETS_MODAL_KEY } from "src/ui/markets/MarketSelect/AllMarketsBreadcrumb";
 import {
   MarketTableRowData,
   useMarketRowData,
 } from "src/ui/markets/MarketsTable/useMarketRowData";
 import { YieldSourceLabel } from "src/ui/markets/YieldSourceLabel/YieldSourceLabel";
-import { usePublicClient } from "wagmi";
-
-const ALL_PROTOCOLS_KEY = "All Markets";
-const ALL_TERM_LENGTHS_KEY = 0;
 
 const columnHelper = createColumnHelper<MarketTableRowData>();
 
@@ -36,30 +32,54 @@ function columns() {
         );
       },
     }),
+    columnHelper.accessor("market.termLengthMS", {
+      header: "Term",
+      cell: ({ getValue }) => {
+        const termLength = getValue();
+        return (
+          <p key="term" className="font-semibold">
+            {convertMillisecondsToDays(termLength)} days
+          </p>
+        );
+      },
+    }),
+    columnHelper.accessor("liquidity", {
+      header: "Liquidity",
+      cell: ({ getValue, row }) => {
+        const liquidity = getValue();
+        return (
+          <span
+            key="liquidity"
+            className="flex flex-row items-center justify-start font-semibold"
+          >
+            <img
+              className="mr-1 h-4"
+              src={row.original.market.baseToken.iconUrl}
+            />
+            {formatBalance({
+              balance: liquidity,
+              decimals: row.original.market.baseToken.decimals,
+              places: 0,
+            })}
+          </span>
+        );
+      },
+    }),
+    columnHelper.accessor("longAPR", {
+      header: "Fixed Rate",
+      cell: ({ getValue }) => {
+        const fixedRate = getValue();
+        return <span key="fixed-rate">{fixedRate}%</span>;
+      },
+    }),
   ];
 }
 
 export function MarketsTable(): ReactElement {
   const { appConfig: config } = useAppConfig();
-  const publicClient = usePublicClient();
-
-  const allProtocols = config?.hyperdrives.map(
-    (market) => config?.yieldSources[market.yieldSource],
-  );
-  const protocols = uniqBy(allProtocols, (protocol) => protocol.name);
-  const allTermLengths = config?.hyperdrives.map(
-    (market) => market.termLengthMS,
-  );
-  const termLengths = uniqBy(allTermLengths, (termLength) => termLength);
-
-  const [protocolFilter, setSelectedProtocolFilter] =
-    useState<string>(ALL_PROTOCOLS_KEY);
-  const [termLengthFilter, setSelectedTermLengthFilter] =
-    useState<number>(ALL_TERM_LENGTHS_KEY);
-
+  const navigate = useNavigate();
   // TODO: no loading state for now
-  const { data: marketsRowData = [], status: marketRowDataStatus } =
-    useMarketRowData(config?.hyperdrives);
+  const { data: marketsRowData = [] } = useMarketRowData(config?.hyperdrives);
   const tableInstance = useReactTable({
     columns: columns(),
     data: marketsRowData || [],
@@ -67,7 +87,8 @@ export function MarketsTable(): ReactElement {
   });
 
   return (
-    <div className="max-h-96 overflow-y-scroll">
+    <div className="flex max-h-96 flex-col items-center overflow-y-scroll">
+      <h3 className="mb-4 font-lato">Markets</h3>
       <table className="daisy-table-zebra daisy-table daisy-table-lg">
         <thead>
           {tableInstance.getHeaderGroups().map((headerGroup) => (
@@ -92,7 +113,8 @@ export function MarketsTable(): ReactElement {
                 key={row.id}
                 className="daisy-hover h-16 cursor-pointer grid-cols-4 items-center"
                 onClick={() => {
-                  console.log("handle go to market");
+                  navigate(`/trade/${row.original.market}`);
+                  (window as any)[MARKETS_MODAL_KEY].close();
                 }}
               >
                 <>
@@ -115,37 +137,3 @@ export function MarketsTable(): ReactElement {
     </div>
   );
 }
-
-function createMarketRow({
-  market,
-  yieldSource,
-  liquidity,
-}: MarketTableRowData): Row {
-  return {
-    href: `/trade/${market.address}`,
-    cells: [
-      <span key="name" className="font-bold">
-        <p>{market.name}</p>
-        <YieldSourceLabel yieldSource={yieldSource} />
-      </span>,
-      <p key="term" className="font-semibold">
-        {convertMillisecondsToDays(market.termLengthMS)} days
-      </p>,
-
-      <span
-        key="liquidity"
-        className="flex flex-row items-center justify-start font-semibold"
-      >
-        <img className="mr-1 h-4" src={market.baseToken.iconUrl} />
-        {formatBalance({
-          balance: liquidity,
-          decimals: market.baseToken.decimals,
-          places: 0,
-        })}
-      </span>,
-      <span key="apy" className="font-semibold">
-        1.25%
-      </span>,
-    ],
-  };
-}
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
index a2c020946..1c3f4a132 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
@@ -70,7 +70,7 @@ function CurrentValueCell({
   const currentValue =
     baseAmountOut &&
     formatBalance({
-      balance: row.original.bondAmount - baseAmountOut,
+      balance: baseAmountOut,
       decimals: hyperdrive.baseToken.decimals,
     });
   const profitLossClass = baseAmountOut

From 9f7c7b5a477d8bd4542c792276572e540add0977 Mon Sep 17 00:00:00 2001
From: jackburrus <jhburrus3@gmail.com>
Date: Tue, 17 Oct 2023 09:52:16 -0600
Subject: [PATCH 4/4] update column var to action name

---
 .../src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx  | 4 ++--
 .../src/ui/markets/MarketsTable/MarketsTable.tsx              | 4 ++--
 .../src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx  | 4 ++--
 .../src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx      | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx
index c8c5af0e1..fd58b7fb4 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx
@@ -23,7 +23,7 @@ export type Transaction = {
 };
 
 const columnHelper = createColumnHelper<Transaction>();
-const columns = (hyperdrive: Hyperdrive) => [
+const getColumns = (hyperdrive: Hyperdrive) => [
   columnHelper.accessor("type", {
     enableSorting: false,
     enableColumnFilter: true,
@@ -69,7 +69,7 @@ export function TransactionTable({
 }): JSX.Element {
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const tableInstance = useReactTable({
-    columns: columns(hyperdrive),
+    columns: getColumns(hyperdrive),
     data: transactionData || [],
     state: {
       columnFilters,
diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
index 2d6a386b0..a96688c8a 100644
--- a/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx
@@ -18,7 +18,7 @@ import { YieldSourceLabel } from "src/ui/markets/YieldSourceLabel/YieldSourceLab
 
 const columnHelper = createColumnHelper<MarketTableRowData>();
 
-function columns() {
+function getColumns() {
   return [
     columnHelper.accessor("market.name", {
       header: "Name",
@@ -81,7 +81,7 @@ export function MarketsTable(): ReactElement {
   // TODO: no loading state for now
   const { data: marketsRowData = [] } = useMarketRowData(config?.hyperdrives);
   const tableInstance = useReactTable({
-    columns: columns(),
+    columns: getColumns(),
     data: marketsRowData || [],
     getCoreRowModel: getCoreRowModel(),
   });
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx
index f2dc6f65a..9138892e8 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx
@@ -18,7 +18,7 @@ interface ClosedShortsTableProps {
 }
 
 const columnHelper = createColumnHelper<ClosedShort>();
-const columns = (hyperdrive: Hyperdrive) => [
+const getColumns = (hyperdrive: Hyperdrive) => [
   columnHelper.display({
     header: `ID`,
     cell: ({ row }) => <span>{Number(row.original.maturity)}</span>,
@@ -79,7 +79,7 @@ export function ClosedShortsTable({
     enabled: queryEnabled,
   });
   const tableInstance = useReactTable({
-    columns: columns(hyperdrive),
+    columns: getColumns(hyperdrive),
     data: closedShorts || [],
     getCoreRowModel: getCoreRowModel(),
   });
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
index 1c3f4a132..2a5b4151e 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx
@@ -23,7 +23,7 @@ import { usePreviewCloseShort } from "src/ui/hyperdrive/shorts/hooks/usePreviewC
 import { useAccount } from "wagmi";
 
 const columnHelper = createColumnHelper<OpenShort>();
-const columns = (hyperdrive: Hyperdrive) => [
+const getColumns = (hyperdrive: Hyperdrive) => [
   columnHelper.accessor("bondAmount", {
     header: `Size (hy${hyperdrive.baseToken.symbol})`,
     cell: (bondAmount) => {
@@ -111,7 +111,7 @@ export function OpenShortsTable({
     enabled: queryEnabled,
   });
   const tableInstance = useReactTable({
-    columns: columns(hyperdrive),
+    columns: getColumns(hyperdrive),
     data: shorts || [],
     getCoreRowModel: getCoreRowModel(),
   });