From 3d85598a2c77cf5a46664bf2e858a0f52edc08dd Mon Sep 17 00:00:00 2001
From: escapedcat <github@htmlcss.de>
Date: Tue, 12 Nov 2024 14:06:02 +0100
Subject: [PATCH] feat(home): use nextui input and checkbox

---
 src/pages/Home/SendModal/SendLN.tsx      | 19 ++++++---
 src/pages/Home/SendModal/SendOnChain.tsx | 52 ++++++++++++++++--------
 2 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/pages/Home/SendModal/SendLN.tsx b/src/pages/Home/SendModal/SendLN.tsx
index 60344dd6..2898cce3 100644
--- a/src/pages/Home/SendModal/SendLN.tsx
+++ b/src/pages/Home/SendModal/SendLN.tsx
@@ -5,8 +5,8 @@ import { Alert } from "@/components/Alert";
 import AvailableBalance from "@/components/AvailableBalance";
 import { Button } from "@/components/Button";
 import { ConfirmModal } from "@/components/ConfirmModal";
-import InputField from "@/components/InputField";
 import { convertMSatToSat } from "@/utils/format";
+import { Input } from "@nextui-org/react";
 import { FC, useState } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm } from "react-hook-form";
@@ -60,7 +60,18 @@ const SendLn: FC<Props> = ({
       <ConfirmModal.Body>
         <AvailableBalance balance={convertedBalance!} />
 
-        <InputField
+        <Input
+          className="w-full"
+          classNames={{
+            inputWrapper:
+              "bg-tertiary group-data-[focus=true]:bg-tertiary group-data-[hover=true]:bg-tertiary",
+          }}
+          type="text"
+          isInvalid={!!errors.invoice}
+          errorMessage={errors.invoice?.message}
+          label={t("wallet.invoice")}
+          placeholder="lnbc..."
+          disabled={isLoading}
           {...register("invoice", {
             required: t("forms.validation.lnInvoice.required"),
             pattern: {
@@ -68,10 +79,6 @@ const SendLn: FC<Props> = ({
               message: t("forms.validation.lnInvoice.patternMismatch"),
             },
           })}
-          label={t("wallet.invoice")}
-          errorMessage={errors.invoice}
-          placeholder="lnbc..."
-          disabled={isLoading}
         />
 
         {error && <Alert color="danger">{error}</Alert>}
diff --git a/src/pages/Home/SendModal/SendOnChain.tsx b/src/pages/Home/SendModal/SendOnChain.tsx
index 6ef339e1..0d36a146 100644
--- a/src/pages/Home/SendModal/SendOnChain.tsx
+++ b/src/pages/Home/SendModal/SendOnChain.tsx
@@ -4,8 +4,8 @@ import AmountInput from "@/components/AmountInput";
 import AvailableBalance from "@/components/AvailableBalance";
 import { Button } from "@/components/Button";
 import { ConfirmModal } from "@/components/ConfirmModal";
-import InputField from "@/components/InputField";
-import { stringToNumber } from "@/utils/format";
+import { Checkbox } from "@nextui-org/checkbox";
+import { Input } from "@nextui-org/react";
 import { ChangeEvent, FC, useState } from "react";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm } from "react-hook-form";
@@ -67,7 +67,12 @@ const SendOnChain: FC<Props> = ({ balance, onConfirm, confirmData }) => {
 
         <fieldset className="flex flex-col items-center justify-center text-center">
           <div className="w-full py-1">
-            <InputField
+            <Input
+              className="w-full"
+              classNames={{
+                inputWrapper:
+                  "bg-tertiary group-data-[focus=true]:bg-tertiary group-data-[hover=true]:bg-tertiary",
+              }}
               {...register("address", {
                 required: t("forms.validation.chainAddress.required"),
                 pattern: {
@@ -77,7 +82,8 @@ const SendOnChain: FC<Props> = ({ balance, onConfirm, confirmData }) => {
               })}
               placeholder="bc1..."
               label={t("wallet.address")}
-              errorMessage={errors.address}
+              isInvalid={!!errors.address}
+              errorMessage={errors.address?.message}
             />
           </div>
 
@@ -95,9 +101,7 @@ const SendOnChain: FC<Props> = ({ balance, onConfirm, confirmData }) => {
                   },
                   validate: {
                     greaterThanZero: (val) =>
-                      //@ts-ignore
-                      stringToNumber(val) > 0 ||
-                      t("forms.validation.chainAmount.required"),
+                      val > 0 || t("forms.validation.chainAmount.required"),
                   },
                   onChange: changeAmountHandler,
                 })}
@@ -106,28 +110,42 @@ const SendOnChain: FC<Props> = ({ balance, onConfirm, confirmData }) => {
           )}
 
           <div className="flex w-full justify-start gap-2 pb-1">
-            <InputField
-              {...register("spendAll", {})}
-              label={t("tx.spend_all")}
-              errorMessage={errors.spendAll}
-              type="checkbox"
-            />
+            <Checkbox {...register("spendAll", {})}>
+              {t("tx.spend_all")}
+            </Checkbox>
           </div>
 
           <div className="w-full py-1">
-            <InputField
+            <Input
+              className="w-full"
+              classNames={{
+                inputWrapper:
+                  "bg-tertiary group-data-[focus=true]:bg-tertiary group-data-[hover=true]:bg-tertiary",
+              }}
               {...register("fee", {
                 required: t("forms.validation.chainFee.required"),
               })}
               label={t("tx.fee")}
-              errorMessage={errors.fee}
-              inputRightAddon="sat / vByte"
+              isInvalid={!!errors.fee}
+              errorMessage={errors.fee?.message}
               type="number"
+              endContent={
+                <div className="pointer-events-none flex items-center">
+                  <span className="whitespace-nowrap text-small text-default-400">
+                    sat / vByte
+                  </span>
+                </div>
+              }
             />
           </div>
 
           <div className="w-full py-1">
-            <InputField
+            <Input
+              className="w-full"
+              classNames={{
+                inputWrapper:
+                  "bg-tertiary group-data-[focus=true]:bg-tertiary group-data-[hover=true]:bg-tertiary",
+              }}
               {...register("comment")}
               label={t("tx.comment")}
               placeholder={t("tx.comment_placeholder")}