Feat/nextui inputs

src/pages/Home/OpenChannelModal.tsx

@@ -6,10 +6,10 @@ import {
   ConfirmModal,
   type Props as ConfirmModalProps,
 } from "@/components/ConfirmModal";
-import InputField from "@/components/InputField";
 import { checkError } from "@/utils/checkError";
 import { convertMSatToSat, stringToNumber } from "@/utils/format";
 import { instance } from "@/utils/interceptor";
+import { Input } from "@nextui-org/react";
 import { ChangeEvent, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -75,13 +75,21 @@ export default function OpenChannelModal({ balance, disclosure }: Props) {
           <AvailableBalance balance={convertedBalance!} />
 
           <fieldset className="flex w-full flex-col gap-4">
-            <InputField
+            <Input
+              className="w-full"
+              classNames={{
+                inputWrapper:
+                  "bg-tertiary group-data-[focus=true]:bg-tertiary group-data-[hover=true]:bg-tertiary",
+              }}
+              type="text"
+              label={t("home.node_uri")}
+              isInvalid={!!errors.nodeUri}
+              errorMessage={errors.nodeUri?.message}
               {...register("nodeUri", {
                 required: t("forms.validation.node_uri.required"),
               })}
-              label={t("home.node_uri")}
-              errorMessage={errors.nodeUri}
             />
+
             <AmountInput
               amount={amount}
               errorMessage={errors.fundingAmount}

src/pages/Home/ReceiveModal/ReceiveLN.tsx

@@ -2,8 +2,8 @@ import { Alert } from "@/components/Alert";
 import AmountInput from "@/components/AmountInput";
 import { Button } from "@/components/Button";
 import { ConfirmModal } from "@/components/ConfirmModal";
-import InputField from "@/components/InputField";
 import { stringToNumber } from "@/utils/format";
+import { Input } from "@nextui-org/react";
 import type { ChangeEvent, FC } from "react";
 import { useState } from "react";
 import type { SubmitHandler } from "react-hook-form";
@@ -65,7 +65,15 @@ const ReceiveLN: FC<Props> = ({ isLoading, error, onSubmitHandler }) => {
             />
 
             <div className="mt-2 flex flex-col justify-center">
-              <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.commentInput}
+                errorMessage={errors.commentInput?.message}
                 {...register("commentInput", {
                   onChange: commentChangeHandler,
                 })}

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,18 +60,25 @@ 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: {
               value: /^(lnbc|lntb)\w+/i,
               message: t("forms.validation.lnInvoice.patternMismatch"),
             },
           })}
-          label={t("wallet.invoice")}
-          errorMessage={errors.invoice}
-          placeholder="lnbc..."
-          disabled={isLoading}
         />
 
         {error && <Alert color="danger">{error}</Alert>}

src/pages/Home/SendModal/SendOnChain.tsx

@@ -4,8 +4,9 @@ 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 +68,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 +83,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>
 
@@ -106,28 +113,40 @@ 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
+              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
+              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")}
@@ -137,7 +156,7 @@ const SendOnChain: FC<Props> = ({ balance, onConfirm, confirmData }) => {
       </ConfirmModal.Body>
 
       <ConfirmModal.Footer>
-        <Button color="primary" type="submit" disabled={!isValid}>
+        <Button color="primary" type="submit" isDisabled={!isValid}>
           {t("wallet.confirm")}
         </Button>
       </ConfirmModal.Footer>

src/pages/Home/SendModal/__tests__/SendModal.test.tsx

@@ -45,7 +45,7 @@ describe("SendModal", () => {
       });
       const addressInput = screen.getByLabelText("wallet.invoice");
       await user.type(addressInput, "bla");
-      expect(addressInput).toHaveClass("input-error");
+      expect(addressInput).toHaveAttribute("aria-invalid", "true");
       expect(sendBtn).toBeDisabled();
     });
 
@@ -119,7 +119,7 @@ describe("SendModal", () => {
     it("should show error on wrong addrees input", async () => {
       const addressInput = await screen.findByLabelText("wallet.address");
       await user.type(addressInput, "bccccccc");
-      expect(addressInput).toHaveClass("input-error");
+      expect(addressInput).toHaveAttribute("aria-invalid", "true");
     });
 
     it("should format amount correctly", async () => {