From 2d12ed3f06ca6e4384b39d8bdc9a1702e3c1f318 Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Fri, 21 Mar 2025 13:52:12 -0700
Subject: [PATCH] Fix close position button

---
 .../src/ui/portfolio/longs/OpenLongsTable/ManageLongsButton.tsx | 2 +-
 .../ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop.tsx | 2 +-
 .../ui/portfolio/shorts/OpenShortsTable/ManageShortButton.tsx   | 2 +-
 .../portfolio/shorts/OpenShortsTable/OpenShortsTableDesktop.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/ManageLongsButton.tsx b/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/ManageLongsButton.tsx
index 72b9e2805..8943b0e03 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/ManageLongsButton.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/ManageLongsButton.tsx
@@ -38,7 +38,7 @@ export function ManageLongsButton({
             <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}`;
+                const modalId = `${hyperdrive.address}-${assetId}`;
                 (
                   document.getElementById(modalId) as HTMLDialogElement
                 ).showModal();
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop.tsx b/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop.tsx
index 5954a206a..0b8bf080f 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop.tsx
@@ -107,7 +107,7 @@ export function OpenLongsTableDesktop({
       <div className="daisy-card overflow-x-clip rounded-box bg-gray-750 pt-3">
         {/* Modal needs to be rendered outside of the table so that dialog can be used. Otherwise react throws a dom nesting error */}
         {tableInstance.getRowModel().rows.map(({ original }) => {
-          const modalId = `${original.assetId}`;
+          const modalId = `${original.hyperdrive.address}-${original.assetId}`;
           return (
             <CloseLongModalButton
               key={modalId}
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/ManageShortButton.tsx b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/ManageShortButton.tsx
index 661a4a338..0f84f1338 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/ManageShortButton.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/ManageShortButton.tsx
@@ -38,7 +38,7 @@ export function ManageShortButton({
             <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}`;
+                const modalId = `${hyperdrive.address}-${assetId}`;
                 (
                   document.getElementById(modalId) as HTMLDialogElement
                 ).showModal();
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/OpenShortsTableDesktop.tsx b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/OpenShortsTableDesktop.tsx
index ed26bc612..7d28569ed 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/OpenShortsTableDesktop.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/shorts/OpenShortsTable/OpenShortsTableDesktop.tsx
@@ -111,7 +111,7 @@ export function OpenShortsTableDesktop({
       <div className="daisy-card overflow-x-clip rounded-box bg-gray-750 pt-3">
         {/* Modal needs to be rendered outside of the table so that dialog can be used. Otherwise react throws a dom nesting error */}
         {tableInstance.getRowModel().rows.map((row) => {
-          const modalId = `${row.original.assetId}`;
+          const modalId = `${row.original.hyperdriveAddress}-${row.original.assetId}`;
           return (
             <CloseShortModalButton
               key={modalId}