refactor(home): send modal

raspiblitz · Sep 28, 2024 · e43e551 · e43e551
1 parent 3a1ba13
commit e43e551
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 55 deletions.
diff --git a/src/pages/Home/SendModal/SendModal.tsx b/src/pages/Home/SendModal/SendModal.tsx
@@ -2,20 +2,19 @@ import SwitchTxType, { TxType } from "../SwitchTxType";
 import ConfirmSendModal from "./ConfirmSendModal";
 import SendLn, { LnInvoiceForm } from "./SendLN";
 import SendOnChain, { SendOnChainForm } from "./SendOnChain";
-import ModalDialog from "@/layouts/ModalDialog";
+import ConfirmModal, {
+  type Props as ConfirmModalProps,
+} from "@/components/ConfirmModal";
 import { DecodePayRequest } from "@/models/decode-pay-req";
-import { MODAL_ROOT } from "@/utils";
 import { checkError } from "@/utils/checkError";
 import { instance } from "@/utils/interceptor";
 import { AxiosResponse } from "axios";
 import { FC, useState } from "react";
-import { createPortal } from "react-dom";
 
-export type Props = {
+interface Props extends Pick<ConfirmModalProps, "disclosure"> {
   lnBalance: number;
   onchainBalance: number;
-  onClose: () => void;
-};
+}
 
 export interface SendLnForm {
   invoiceType: TxType.LIGHTNING;
@@ -27,7 +26,7 @@ export interface SendLnForm {
   expiry: number;
 }
 
-const SendModal: FC<Props> = ({ lnBalance, onClose, onchainBalance }) => {
+const SendModal: FC<Props> = ({ lnBalance, disclosure, onchainBalance }) => {
   const [invoiceType, setInvoiceType] = useState<TxType>(TxType.LIGHTNING);
   const [confirmData, setConfirmData] = useState<
     SendOnChainForm | SendLnForm | null
@@ -84,57 +83,71 @@ const SendModal: FC<Props> = ({ lnBalance, onClose, onchainBalance }) => {
   // confirm send
   if (!isBack && confirmData) {
     return (
-      <ModalDialog close={() => onClose()}>
-        <ConfirmSendModal
-          confirmData={confirmData}
-          back={backHandler}
-          balance={
-            invoiceType === TxType.LIGHTNING ? lnBalance : onchainBalance
-          }
-          close={onClose}
-        />
-      </ModalDialog>
+      <ConfirmModal
+        headline="SEND"
+        disclosure={disclosure}
+        customContent={
+          <ConfirmSendModal
+            confirmData={confirmData}
+            back={backHandler}
+            balance={
+              invoiceType === TxType.LIGHTNING ? lnBalance : onchainBalance
+            }
+            close={disclosure.onClose}
+          />
+        }
+      />
     );
   }
 
   // Send LN
   if (invoiceType === TxType.LIGHTNING) {
-    return createPortal(
-      <ModalDialog close={() => onClose()} closeable={!loading}>
-        <SwitchTxType
-          invoiceType={invoiceType}
-          onTxTypeChange={changeTransactionHandler}
-          disabled={loading}
-        />
+    return (
+      <ConfirmModal
+        headline="SEND"
+        disclosure={disclosure}
+        customContent={
+          <>
+            <SwitchTxType
+              invoiceType={invoiceType}
+              onTxTypeChange={changeTransactionHandler}
+              disabled={loading}
+            />
 
-        <SendLn
-          loading={loading}
-          onConfirm={confirmLnHandler}
-          lnBalance={lnBalance}
-          confirmData={confirmData}
-          error={error}
-        />
-      </ModalDialog>,
-      MODAL_ROOT,
+            <SendLn
+              loading={loading}
+              onConfirm={confirmLnHandler}
+              lnBalance={lnBalance}
+              confirmData={confirmData}
+              error={error}
+            />
+          </>
+        }
+      />
     );
   }
 
   // Send On-Chain
-  return createPortal(
-    <ModalDialog close={() => onClose()}>
-      <SwitchTxType
-        invoiceType={invoiceType}
-        onTxTypeChange={changeTransactionHandler}
-        disabled={loading}
-      />
+  return (
+    <ConfirmModal
+      headline="SEND"
+      disclosure={disclosure}
+      customContent={
+        <>
+          <SwitchTxType
+            invoiceType={invoiceType}
+            onTxTypeChange={changeTransactionHandler}
+            disabled={loading}
+          />
 
-      <SendOnChain
-        balance={onchainBalance}
-        confirmData={confirmData}
-        onConfirm={confirmOnChainHandler}
-      />
-    </ModalDialog>,
-    MODAL_ROOT,
+          <SendOnChain
+            balance={onchainBalance}
+            confirmData={confirmData}
+            onConfirm={confirmOnChainHandler}
+          />
+        </>
+      }
+    />
   );
 };
 

diff --git a/src/pages/Home/UnlockModal.tsx b/src/pages/Home/UnlockModal.tsx
@@ -56,7 +56,7 @@ export default function UnlockModal({
 
   return (
     <ConfirmModal
-      headline={t("wallet.unlock_subtitle")}
+      headline={t("wallet.unlock_title")}
       disclosure={disclosure}
       customContent={
         <form onSubmit={handleSubmit(unlockHandler)}>

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -149,6 +149,8 @@ const Home: FC = () => {
   useInterval(getTransactions, 20000);
 
   useEffect(() => {
+    console.log("showModal", showModal);
+
     if (showModal === "UNLOCK") {
       openModal("UNLOCK");
     }
@@ -158,11 +160,17 @@ const Home: FC = () => {
     if (showModal === "OPEN_CHANNEL") {
       openModal("OPEN_CHANNEL");
     }
-    // // } else if (hasPendingSend) {
-    // //   openModal('send')
-    // // } else if (hasPendingReceive) {
-    // //   openModal('receive')
-    // }
+    if (showModal === "SEND") {
+      console.log("SEND888888");
+
+      openModal("SEND");
+    }
+    if (showModal === "RECEIVE") {
+      openModal("RECEIVE");
+    }
+    if (showModal === "DETAIL") {
+      openModal("DETAIL");
+    }
   }, [showModal, openModal]);
 
   const closeModalHandler = () => {
@@ -209,8 +217,11 @@ const Home: FC = () => {
         />
       )}
       {activeModal === "SEND" && (
-        // <SendModal disclosure={disclosure} onConfirm={handleSend} />
-        <>YO1</>
+        <SendModal
+          onchainBalance={balance.onchain_confirmed_balance!}
+          lnBalance={balance.channel_local_balance!}
+          disclosure={{ ...disclosure, onClose: closeModalHandler }}
+        />
       )}
       {activeModal === "RECEIVE" && (
         // <ReceiveModal disclosure={disclosure} onConfirm={handleReceive} />
@@ -243,6 +254,7 @@ const Home: FC = () => {
       <main
         className={`content-container page-container grid h-full grid-cols-1 grid-rows-1 gap-5 p-5 transition-colors bg-gray-700 text-white md:grid-cols-2 lg:gap-8 lg:pb-8 lg:pr-8 lg:pt-8 xl:grid-cols-4`}
       >
+        <p>{activeModal}</p>
         {!btcOnlyMode && (
           <article className="col-span-2 row-span-2 md:col-span-1 xl:col-span-2">
             <WalletCard