refactor(home): tx-details modal

raspiblitz · Sep 28, 2024 · 51e282f · 51e282f
1 parent d0dee20
commit 51e282f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 22 deletions.
diff --git a/src/pages/Home/SendModal/SendModal.tsx b/src/pages/Home/SendModal/SendModal.tsx
@@ -104,7 +104,7 @@ const SendModal: FC<Props> = ({ lnBalance, disclosure, onchainBalance }) => {
   if (invoiceType === TxType.LIGHTNING) {
     return (
       <ConfirmModal
-        headline="SEND"
+        headline="SEND" /////////////////////////????? TODO!!!!!!
         disclosure={disclosure}
         customContent={
           <>

diff --git a/src/pages/Home/TransactionCard/TransactionDetailModal/TransactionDetailModal.tsx b/src/pages/Home/TransactionCard/TransactionDetailModal/TransactionDetailModal.tsx
@@ -1,18 +1,21 @@
 import LNDetails from "./LNDetails";
 import OnchainDetails from "./OnchainDetails";
-import ModalDialog from "@/layouts/ModalDialog";
+import ConfirmModal, {
+  type Props as ConfirmModalProps,
+} from "@/components/ConfirmModal";
 import { Transaction } from "@/models/transaction.model";
-import { MODAL_ROOT } from "@/utils";
+import { ModalBody } from "@nextui-org/react";
 import { FC } from "react";
-import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 
-type Props = {
+interface Props extends Pick<ConfirmModalProps, "disclosure"> {
   transaction: Transaction;
-  close: () => void;
-};
+}
 
-export const TransactionDetailModal: FC<Props> = ({ transaction, close }) => {
+export const TransactionDetailModal: FC<Props> = ({
+  transaction,
+  disclosure,
+}) => {
   const { t } = useTranslation();
 
   // prevent error when closing via 'Esc' key
@@ -22,15 +25,17 @@ export const TransactionDetailModal: FC<Props> = ({ transaction, close }) => {
 
   const { category } = transaction;
 
-  return createPortal(
-    <ModalDialog close={close}>
-      <section className="flex flex-col">
-        <h4 className="font-extrabold">{t("tx.tx_details")}</h4>
-        {category === "onchain" && <OnchainDetails details={transaction} />}
-        {category === "ln" && <LNDetails details={transaction} />}
-      </section>
-    </ModalDialog>,
-    MODAL_ROOT,
+  return (
+    <ConfirmModal
+      disclosure={disclosure}
+      headline={t("tx.tx_details")}
+      customContent={
+        <ModalBody>
+          {category === "onchain" && <OnchainDetails details={transaction} />}
+          {category === "ln" && <LNDetails details={transaction} />}
+        </ModalBody>
+      }
+    />
   );
 };
 

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -227,11 +227,10 @@ const Home: FC = () => {
         />
       )}
       {activeModal === "DETAIL" && (
-        <>YO3</>
-        //         <TransactionDetailModal
-        //           transaction={detailTx!}
-        //           close={closeModalHandler}
-        //         />
+        <TransactionDetailModal
+          transaction={detailTx!}
+          disclosure={{ ...disclosure, onClose: closeModalHandler }}
+        />
       )}
     </>
   );