refactor(home): receive modal

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

Hide file tree

Showing 2 changed files with 92 additions and 94 deletions.
diff --git a/src/pages/Home/ReceiveModal/ReceiveModal.tsx b/src/pages/Home/ReceiveModal/ReceiveModal.tsx
@@ -1,19 +1,20 @@
 import SwitchTxType, { TxType } from "../SwitchTxType";
 import ReceiveOnChain from "./ReceiveOnChain";
+import { Alert } from "@/components/Alert";
 import AmountInput from "@/components/AmountInput";
+import { Button } from "@/components/Button";
+import ConfirmModal, {
+  type Props as ConfirmModalProps,
+} from "@/components/ConfirmModal";
 import InputField from "@/components/InputField";
 import LoadingSpinner from "@/components/LoadingSpinner/LoadingSpinner";
-import Message from "@/components/Message";
 import { AppContext, Unit } from "@/context/app-context";
-import ModalDialog from "@/layouts/ModalDialog";
-import { MODAL_ROOT } from "@/utils";
 import { checkError } from "@/utils/checkError";
 import { convertBtcToSat, stringToNumber } from "@/utils/format";
 import { instance } from "@/utils/interceptor";
-import { PlusCircleIcon } from "@heroicons/react/24/outline";
+import { ModalFooter, ModalBody } from "@nextui-org/react";
 import type { ChangeEvent, FC } from "react";
 import { useContext, useState } from "react";
-import { createPortal } from "react-dom";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -23,11 +24,9 @@ interface IFormInputs {
   commentInput: string;
 }
 
-type Props = {
-  onClose: () => void;
-};
-
-const ReceiveModal: FC<Props> = ({ onClose }) => {
+const ReceiveModal: FC<Pick<ConfirmModalProps, "disclosure">> = ({
+  disclosure,
+}) => {
   const { unit } = useContext(AppContext);
   const { t } = useTranslation();
   const [invoiceType, setInvoiceType] = useState(TxType.LIGHTNING);
@@ -103,86 +102,87 @@ const ReceiveModal: FC<Props> = ({ onClose }) => {
   const onSubmit: SubmitHandler<IFormInputs> = (_data) =>
     generateInvoiceHandler();
 
-  return createPortal(
-    <ModalDialog close={onClose}>
-      <div className="text-xl font-bold">
-        {showLnInvoice ? t("wallet.create_invoice_ln") : t("wallet.fund")}
-      </div>
-
-      <div className="my-3">
-        <SwitchTxType
-          invoiceType={invoiceType}
-          onTxTypeChange={changeInvoiceHandler}
-        />
-      </div>
-
-      <form
-        className="flex w-full flex-col items-center"
-        onSubmit={handleSubmit(onSubmit)}
-      >
-        <fieldset className="mb-5 w-4/5">
-          {isLoading && (
-            <div className="p-5">
-              <LoadingSpinner />
-            </div>
-          )}
-
-          {showLnInvoice && !address && (
-            <div className="flex flex-col justify-center pb-5 text-center">
-              <AmountInput
-                amount={amount}
-                register={register("amountInput", {
-                  required: t("forms.validation.chainAmount.required"),
-                  validate: {
-                    greaterThanZero: (val) =>
-                      stringToNumber(val) > 0 ||
-                      t("forms.validation.chainAmount.required"),
-                  },
-                  onChange: amountChangeHandler,
-                })}
-                errorMessage={errors.amountInput}
-              />
-
-              <div className="mt-2 flex flex-col justify-center">
-                <InputField
-                  {...register("commentInput", {
-                    onChange: commentChangeHandler,
-                  })}
-                  label={t("tx.comment")}
-                  value={comment}
-                  placeholder={t("tx.comment_placeholder")}
-                />
-              </div>
-            </div>
-          )}
-
-          {error && <Message message={error} />}
-
-          {!address && showLnInvoice && (
-            <div className="flex items-center justify-center">
-              <button
-                type="submit"
-                className="bd-button my-3 flex items-center justify-center p-3"
-                disabled={submitCount > 0 && !isValid}
-              >
-                <PlusCircleIcon className="mr-1 inline h-6 w-6" />
-                <span>{t("wallet.create_invoice")}</span>
-              </button>
-            </div>
+  return (
+    <ConfirmModal
+      headline={
+        showLnInvoice ? t("wallet.create_invoice_ln") : t("wallet.fund")
+      }
+      disclosure={disclosure}
+      customContent={
+        <>
+          <div className="my-3">
+            <SwitchTxType
+              invoiceType={invoiceType}
+              onTxTypeChange={changeInvoiceHandler}
+            />
+          </div>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <ModalBody>
+              <fieldset className="flex w-full flex-col gap-4">
+                {isLoading && (
+                  <div className="p-5">
+                    <LoadingSpinner />
+                  </div>
+                )}
+
+                {showLnInvoice && !address && (
+                  <div className="flex flex-col justify-center pb-5 text-center">
+                    <AmountInput
+                      amount={amount}
+                      register={register("amountInput", {
+                        required: t("forms.validation.chainAmount.required"),
+                        validate: {
+                          greaterThanZero: (val) =>
+                            stringToNumber(val) > 0 ||
+                            t("forms.validation.chainAmount.required"),
+                        },
+                        onChange: amountChangeHandler,
+                      })}
+                      errorMessage={errors.amountInput}
+                    />
+
+                    <div className="mt-2 flex flex-col justify-center">
+                      <InputField
+                        {...register("commentInput", {
+                          onChange: commentChangeHandler,
+                        })}
+                        label={t("tx.comment")}
+                        value={comment}
+                        placeholder={t("tx.comment_placeholder")}
+                      />
+                    </div>
+                  </div>
+                )}
+              </fieldset>
+
+              {error && <Alert color="danger">{error}</Alert>}
+            </ModalBody>
+
+            {!address && showLnInvoice && (
+              <ModalFooter>
+                <Button
+                  color="primary"
+                  type="submit"
+                  disabled={isLoading || (!isValid && submitCount > 0)}
+                  isLoading={isLoading}
+                >
+                  {t("wallet.create_invoice")}
+                </Button>
+              </ModalFooter>
+            )}
+          </form>
+
+          {address && (
+            <ReceiveOnChain
+              address={address}
+              setAddress={setAddress}
+              setIsLoading={setIsLoading}
+              setError={setError}
+            />
           )}
-        </fieldset>
-      </form>
-
-      {address && (
-        <ReceiveOnChain
-          address={address}
-          setAddress={setAddress}
-          setIsLoading={setIsLoading}
-          setError={setError}
-        />
-      )}
-    </ModalDialog>,
-    MODAL_ROOT,
+        </>
+      }
+    />
   );
 };
 

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -161,8 +161,6 @@ const Home: FC = () => {
       openModal("OPEN_CHANNEL");
     }
     if (showModal === "SEND") {
-      console.log("SEND888888");
-
       openModal("SEND");
     }
     if (showModal === "RECEIVE") {
@@ -224,8 +222,9 @@ const Home: FC = () => {
         />
       )}
       {activeModal === "RECEIVE" && (
-        // <ReceiveModal disclosure={disclosure} onConfirm={handleReceive} />
-        <>YO2</>
+        <ReceiveModal
+          disclosure={{ ...disclosure, onClose: closeModalHandler }}
+        />
       )}
       {activeModal === "DETAIL" && (
         <>YO3</>
@@ -254,7 +253,6 @@ 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