From 2b09ba11830e64889b5d5d1e929e7edfd26ac79d Mon Sep 17 00:00:00 2001
From: Matt Upham <30577966+mattupham@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:33:37 -0700
Subject: [PATCH] Mattupham/fe 615 opening old trx fails in stage and prod
 (#3446)

* add forwardedRef

* Update for transition issue

* Cleanup
---
 .../transaction-details-content.tsx}          | 52 +------------------
 .../transaction-details-modal.tsx             | 24 +++++++++
 .../transaction-details-slideover.tsx         | 35 +++++++++++++
 packages/web/pages/transactions.tsx           |  6 +--
 4 files changed, 62 insertions(+), 55 deletions(-)
 rename packages/web/components/transactions/{transaction-details.tsx => transaction-details/transaction-details-content.tsx} (85%)
 create mode 100644 packages/web/components/transactions/transaction-details/transaction-details-modal.tsx
 create mode 100644 packages/web/components/transactions/transaction-details/transaction-details-slideover.tsx

diff --git a/packages/web/components/transactions/transaction-details.tsx b/packages/web/components/transactions/transaction-details/transaction-details-content.tsx
similarity index 85%
rename from packages/web/components/transactions/transaction-details.tsx
rename to packages/web/components/transactions/transaction-details/transaction-details-content.tsx
index 6cc95408e8..fe097e7cf8 100644
--- a/packages/web/components/transactions/transaction-details.tsx
+++ b/packages/web/components/transactions/transaction-details/transaction-details-content.tsx
@@ -1,9 +1,8 @@
-import { Transition } from "@headlessui/react";
 import { FormattedTransaction } from "@osmosis-labs/server";
 import { getShortAddress } from "@osmosis-labs/utils";
 import classNames from "classnames";
 import dayjs from "dayjs";
-import { FunctionComponent, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { Icon } from "~/components/assets";
 import { FallbackImg } from "~/components/assets";
@@ -13,7 +12,6 @@ import { displayFiatPrice } from "~/components/transactions/transaction-utils";
 import { Button } from "~/components/ui/button";
 import { EventName } from "~/config";
 import { useAmplitudeAnalytics, useTranslation } from "~/hooks";
-import { ModalBase, ModalBaseProps } from "~/modals/base";
 import { theme } from "~/tailwind.config";
 import { formatPretty } from "~/utils/formatter";
 
@@ -232,51 +230,3 @@ export const TransactionDetailsContent = ({
     </div>
   );
 };
-
-export const TransactionDetailsSlideover = ({
-  onRequestClose,
-  open,
-  transaction,
-}: {
-  onRequestClose: () => void;
-  open: boolean;
-  transaction?: FormattedTransaction;
-}) => {
-  if (!transaction) return null;
-  return (
-    <Transition
-      show={open}
-      enter="transition-all ease-out duration-300"
-      enterFrom="w-0 opacity-0"
-      enterTo="w-[512px] opacity-100"
-      leave="transition-all ease-out duration-300"
-      leaveFrom="w-[512px] opacity-100"
-      leaveTo="w-0 opacity-0"
-    >
-      <TransactionDetailsContent
-        onRequestClose={onRequestClose}
-        isModal={false}
-        transaction={transaction}
-      />
-    </Transition>
-  );
-};
-
-export const TransactionDetailsModal: FunctionComponent<
-  ModalBaseProps & { transaction?: FormattedTransaction }
-> = ({ onRequestClose, isOpen, transaction }) => {
-  if (!transaction) return null;
-  return (
-    <ModalBase
-      isOpen={isOpen}
-      onRequestClose={onRequestClose}
-      className="max-w-[32.25rem]" // 516px
-    >
-      <TransactionDetailsContent
-        onRequestClose={onRequestClose}
-        isModal={true}
-        transaction={transaction}
-      />
-    </ModalBase>
-  );
-};
diff --git a/packages/web/components/transactions/transaction-details/transaction-details-modal.tsx b/packages/web/components/transactions/transaction-details/transaction-details-modal.tsx
new file mode 100644
index 0000000000..bdb2bf054a
--- /dev/null
+++ b/packages/web/components/transactions/transaction-details/transaction-details-modal.tsx
@@ -0,0 +1,24 @@
+import { FormattedTransaction } from "@osmosis-labs/server";
+import { FunctionComponent } from "react";
+
+import { TransactionDetailsContent } from "~/components/transactions/transaction-details/transaction-details-content";
+import { ModalBase, ModalBaseProps } from "~/modals/base";
+
+export const TransactionDetailsModal: FunctionComponent<
+  ModalBaseProps & { transaction?: FormattedTransaction }
+> = ({ onRequestClose, isOpen, transaction }) => {
+  if (!transaction) return null;
+  return (
+    <ModalBase
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      className="max-w-[32.25rem]" // 516px
+    >
+      <TransactionDetailsContent
+        onRequestClose={onRequestClose}
+        isModal={true}
+        transaction={transaction}
+      />
+    </ModalBase>
+  );
+};
diff --git a/packages/web/components/transactions/transaction-details/transaction-details-slideover.tsx b/packages/web/components/transactions/transaction-details/transaction-details-slideover.tsx
new file mode 100644
index 0000000000..026e92bced
--- /dev/null
+++ b/packages/web/components/transactions/transaction-details/transaction-details-slideover.tsx
@@ -0,0 +1,35 @@
+import { Transition } from "@headlessui/react";
+import { FormattedTransaction } from "@osmosis-labs/server";
+
+import { TransactionDetailsContent } from "~/components/transactions/transaction-details/transaction-details-content";
+
+export const TransactionDetailsSlideover = ({
+  onRequestClose,
+  open,
+  transaction,
+}: {
+  onRequestClose: () => void;
+  open: boolean;
+  transaction?: FormattedTransaction;
+}) => {
+  if (!transaction) return null;
+  return (
+    <Transition
+      show={open}
+      enter="transition-all ease-out duration-300"
+      enterFrom="w-0 opacity-0"
+      enterTo="w-[512px] opacity-100"
+      leave="transition-all ease-out duration-300"
+      leaveFrom="w-[512px] opacity-100"
+      leaveTo="w-0 opacity-0"
+    >
+      <div>
+        <TransactionDetailsContent
+          onRequestClose={onRequestClose}
+          isModal={false}
+          transaction={transaction}
+        />
+      </div>
+    </Transition>
+  );
+};
diff --git a/packages/web/pages/transactions.tsx b/packages/web/pages/transactions.tsx
index 56bbccad7f..bbc3d03731 100644
--- a/packages/web/pages/transactions.tsx
+++ b/packages/web/pages/transactions.tsx
@@ -5,10 +5,8 @@ import { useEffect, useMemo, useState } from "react";
 
 import { LinkButton } from "~/components/buttons/link-button";
 import { TransactionContent } from "~/components/transactions/transaction-content";
-import {
-  TransactionDetailsModal,
-  TransactionDetailsSlideover,
-} from "~/components/transactions/transaction-details";
+import { TransactionDetailsModal } from "~/components/transactions/transaction-details/transaction-details-modal";
+import { TransactionDetailsSlideover } from "~/components/transactions/transaction-details/transaction-details-slideover";
 import { EventName } from "~/config";
 import { useFeatureFlags, useNavBar } from "~/hooks";
 import {