From 3b536c8e6e932cd06ab9a9bd6ed4e6c98df20c72 Mon Sep 17 00:00:00 2001
From: jackburrus <jhburrus3@gmail.com>
Date: Tue, 5 Nov 2024 14:54:04 -0700
Subject: [PATCH] adds manage short button

---
 .../OpenShortsTable/ManageShortButton.tsx     | 58 +++++++++++++++++++
 .../OpenShortsTableDesktopTwo.tsx             | 20 ++-----
 2 files changed, 63 insertions(+), 15 deletions(-)
 create mode 100644 apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/ManageShortButton.tsx

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/ManageShortButton.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/ManageShortButton.tsx
new file mode 100644
index 000000000..fee6f389e
--- /dev/null
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/ManageShortButton.tsx
@@ -0,0 +1,58 @@
+import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
+import { Cog8ToothIcon } from "@heroicons/react/20/solid";
+import { Link } from "@tanstack/react-router";
+import { ReactElement, useRef, useState } from "react";
+import { useClickAway } from "react-use";
+import { MARKET_DETAILS_ROUTE } from "src/ui/markets/routes";
+
+export function ManageShortButton({
+  hyperdrive,
+  assetId,
+}: {
+  hyperdrive: HyperdriveConfig;
+  assetId: bigint;
+}): ReactElement {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  useClickAway(dropdownRef, () => setIsOpen(false));
+  return (
+    <div
+      className="relative flex w-full items-center font-inter"
+      ref={dropdownRef}
+    >
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="daisy-btn daisy-btn-ghost rounded-full bg-gray-600 hover:bg-gray-700"
+      >
+        <Cog8ToothIcon className="h-5" />
+        Manage
+      </button>
+      {isOpen && (
+        <ul className="absolute right-6 top-full z-50 mt-4 w-[300px] rounded-box border border-neutral-content/20 bg-neutral px-4 py-1">
+          <button
+            className="m-0 flex h-[52px] w-full flex-row items-center justify-start border-b-2 border-b-neutral-content/20 p-0 text-start hover:bg-neutral hover:text-neutral-content"
+            onClick={() => {
+              const modalId = `${assetId}`;
+              (
+                document.getElementById(modalId) as HTMLDialogElement
+              ).showModal();
+            }}
+          >
+            Close Short
+          </button>
+          <Link
+            className="m-0 flex h-[52px] w-full flex-row items-center justify-start p-0 text-start hover:bg-neutral hover:text-neutral-content"
+            to={MARKET_DETAILS_ROUTE}
+            params={{
+              chainId: hyperdrive.chainId.toString(),
+              address: hyperdrive.address,
+            }}
+            search={{ position: "short" }}
+          >
+            Go to pool
+          </Link>
+        </ul>
+      )}
+    </div>
+  );
+}
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/OpenShortsTableDesktopTwo.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/OpenShortsTableDesktopTwo.tsx
index 36e434522..9ce411597 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/OpenShortsTableDesktopTwo.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/OpenShortsTableDesktopTwo.tsx
@@ -6,7 +6,6 @@ import {
   HyperdriveConfig,
 } from "@delvtech/hyperdrive-appconfig";
 import { OpenShort } from "@delvtech/hyperdrive-viem";
-import { Cog8ToothIcon } from "@heroicons/react/20/solid";
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
 import { Link } from "@tanstack/react-router";
 import {
@@ -28,6 +27,7 @@ import { MaturesOnCellTwo } from "src/ui/hyperdrive/MaturesOnCell/MaturesOnCell"
 import { StatusCell } from "src/ui/hyperdrive/longs/OpenLongsTable/StatusCell";
 import { CloseShortModalButton } from "src/ui/hyperdrive/shorts/CloseShortModalButton/CloseShortModalButton";
 import { CurrentShortsValueCell } from "src/ui/hyperdrive/shorts/OpenShortsTable/CurrentShortsValueCell";
+import { ManageShortButton } from "src/ui/hyperdrive/shorts/OpenShortsTable/ManageShortButton";
 import { ShortRateAndSizeCell } from "src/ui/hyperdrive/shorts/OpenShortsTable/ShortRateAndSizeCell";
 import { TotalOpenShortValue } from "src/ui/hyperdrive/shorts/OpenShortsTable/TotalOpenShortsValue";
 import { usePortfolioShortsData } from "src/ui/portfolio/usePortfolioShortsData";
@@ -372,20 +372,10 @@ function getColumns({
       id: "go-to-market",
       cell: ({ row }) => {
         return (
-          <div className="flex w-full items-center font-inter">
-            <button
-              className="daisy-btn daisy-btn-ghost rounded-full bg-gray-600 hover:bg-gray-700"
-              onClick={() => {
-                const modalId = `${row.original.assetId}`;
-                (
-                  document.getElementById(modalId) as HTMLDialogElement
-                ).showModal();
-              }}
-            >
-              <Cog8ToothIcon className="h-5" />
-              Manage
-            </button>
-          </div>
+          <ManageShortButton
+            hyperdrive={hyperdrive}
+            assetId={row.original.assetId}
+          />
         );
       },
     }),