Mattupham/fe 615 opening old trx fails in stage and prod (#3446)

* add forwardedRef * Update for transition issue * Cleanup
osmosis-labs · Jul 4, 2024 · 2b09ba1 · 2b09ba1
1 parent 31c9851
commit 2b09ba1
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 55 deletions.
diff --git a/...ents/transactions/transaction-details.tsx → ...n-details/transaction-details-content.tsx b/...ents/transactions/transaction-details.tsx → ...n-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
@@ -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
@@ -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
@@ -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 {