feat: add tailwind-merge

package.json

@@ -32,10 +32,10 @@
     "@scure/bip32": "^1.4.0",
     "@tanstack/react-query": "^5.28.14",
     "@tanstack/react-query-next-experimental": "^5.28.14",
-    "axios": "^1.7.4",
     "@uidotdev/usehooks": "^2.4.1",
     "bitcoinjs-lib": "6.1.5",
     "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
+    "axios": "^1.7.4",
     "btc-staking-ts": "^0.2.10",
     "date-fns": "^3.6.0",
     "decimal.js-light": "^2.5.1",
@@ -49,6 +49,7 @@
     "react-responsive-modal": "^6.4.2",
     "react-tooltip": "^5.26.4",
     "sharp": "^0.33.4",
+    "tailwind-merge": "^2.5.2",
     "url-safe-base64": "^1.3.0",
     "usehooks-ts": "^3.0.2"
   },

src/app/components/Modals/ConnectModal.tsx

@@ -5,6 +5,7 @@ import { FaWallet } from "react-icons/fa";
 import { IoMdClose } from "react-icons/io";
 import { PiWalletBold } from "react-icons/pi";
 import { Tooltip } from "react-tooltip";
+import { twJoin } from "tailwind-merge";
 
 import { getNetworkConfig } from "@/config/network.config";
 import { BROWSER_INJECTED_WALLET_NAME, walletList } from "@/utils/wallet/list";
@@ -110,7 +111,10 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
     return (
       <button
         key={name}
-        className={`flex cursor-pointer items-center gap-2 rounded-xl border-2 bg-base-100 p-2 transition-all hover:text-primary ${selectedWallet === BROWSER ? "border-primary" : "border-base-100"}`}
+        className={twJoin(
+          "flex cursor-pointer items-center gap-2 rounded-xl border-2 bg-base-100 p-2 transition-all hover:text-primary",
+          selectedWallet === BROWSER ? "border-primary" : "border-base-100",
+        )}
         onClick={() => setSelectedWallet(BROWSER)}
       >
         <div className="flex h-10 w-10 items-center justify-center rounded-full border bg-white p-2 text-black">
@@ -236,7 +240,13 @@ export const ConnectModal: React.FC<ConnectModalProps> = ({
                     return (
                       <a
                         key={name}
-                        className={`relative flex cursor-pointer items-center gap-2 rounded-xl border-2 bg-base-100 p-2 transition-all hover:text-primary ${selectedWallet === name ? "border-primary" : "border-base-100"} ${!walletAvailable ? "opacity-50" : ""}`}
+                        className={twJoin(
+                          "relative flex cursor-pointer items-center gap-2 rounded-xl border-2 bg-base-100 p-2 transition-all hover:text-primary",
+                          selectedWallet === name
+                            ? "border-primary"
+                            : "border-base-100",
+                          !walletAvailable ? "opacity-50" : "",
+                        )}
                         onClick={() =>
                           walletAvailable && setSelectedWallet(name)
                         }

src/app/components/Modals/GeneralModal.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, useEffect, useRef } from "react";
 import { Modal } from "react-responsive-modal";
+import { twMerge } from "tailwind-merge";
 
 interface GeneralModalProps {
   open: boolean;
@@ -30,22 +31,18 @@ export const GeneralModal: React.FC<GeneralModalProps> = ({
     };
   }, [open]);
 
-  const getSize = () => {
-    if (small) {
-      return "md:max-w-[25rem]";
-    } else {
-      return "md:max-w-[45rem] lg:max-w-[55rem]";
-    }
-  };
-
   return (
     <Modal
       ref={modalRef}
       open={open}
       onClose={() => onClose(false)}
       classNames={{
         modalContainer: "flex items-end justify-center md:items-center",
-        modal: `m-0 w-full max-w-none rounded-t-2xl bg-base-300 shadow-lg md:w-auto md:rounded-b-2xl max-h-[100svh] min-w-[20rem] md:max-h-[85svh] md:min-w-[30rem] ${getSize()} ${className}`,
+        modal: twMerge(
+          `m-0 w-full max-w-none rounded-t-2xl bg-base-300 shadow-lg md:w-auto md:rounded-b-2xl max-h-[100svh] min-w-[20rem] md:max-h-[85svh] md:min-w-[30rem]`,
+          small ? "md:max-w-[25rem]" : "md:max-w-[45rem] lg:max-w-[55rem]",
+          className,
+        ),
       }}
       showCloseIcon={false}
       blockScroll={false}