clsx to cn (#109)

Author: joaocosta9

components/button-with-dropdown.tsx

@@ -1,6 +1,6 @@
-import clsx from "clsx";
 import { ChevronDown } from "lucide-react";
 import { type ReactNode, useState } from "react";
+import { cn } from "../lib/utils.js";
 import { Button, type ButtonProps } from "./shadcn/button.js";
 import {
   DropdownMenu,
@@ -18,7 +18,7 @@ export function ButtonWithDropdown({ options, className, ...other }: Props) {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <div className={clsx("relative inline-block w-full", className)}>
+    <div className={cn("relative inline-block w-full", className)}>
       <div className="flex">
         <Button {...other} />
         <DropdownMenu onOpenChange={setIsOpen}>
@@ -28,7 +28,7 @@ export function ButtonWithDropdown({ options, className, ...other }: Props) {
               className="relative before:absolute before:top-[10%] before:left-0 before:h-[80%] before:w-px before:bg-primary-foreground/30"
             >
               <ChevronDown
-                className={clsx("h-5 w-5", isOpen && "rotate-180 transform")}
+                className={cn("h-5 w-5", isOpen && "rotate-180 transform")}
               />
             </Button>
           </DropdownMenuTrigger>

components/ethui-logo.tsx

@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { cn } from "../lib/utils.js";
 
 interface Props {
   size?: number;
@@ -29,7 +29,7 @@ export function EthuiLogo({
       className="cursor-pointer"
     >
       <title>ethui logo</title>
-      <Background color={clsx(bg || (dev ? "fill-dev" : "fill-background"))} />
+      <Background color={cn(bg || (dev ? "fill-dev" : "fill-background"))} />
       <DiamondTop color={fg} />
       <DiamondBottom color={fg} />
       {attention && <Attention color="fill-destructive" />}

components/form/index.tsx

@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import { Check, LoaderCircle, type LucideIcon, Save } from "lucide-react";
 import { createElement } from "react";
 import {
@@ -55,10 +54,7 @@ export function Form<S extends FieldValues>({
     <ShadForm {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className={clsx(
-          "flex flex-col items-start gap-2 align-start",
-          className,
-        )}
+        className={cn("flex flex-col items-start gap-2 align-start", className)}
         {...props}
       >
         {children}

components/highlight-box.tsx

@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { cn } from "../lib/utils.js";
 
 export interface HighlightBoxProps {
   children: React.ReactNode;
@@ -7,8 +7,6 @@ export interface HighlightBoxProps {
 
 export function HighlightBox({ children, className }: HighlightBoxProps) {
   return (
-    <div className={clsx("max-w-full bg-accent p-2", className)}>
-      {children}
-    </div>
+    <div className={cn("max-w-full bg-accent p-2", className)}>{children}</div>
   );
 }

components/icons/chain.tsx

@@ -1,5 +1,3 @@
-import { clsx } from "clsx";
-
 import mainnet from "../../images/chains/1.webp";
 import optimism from "../../images/chains/10.webp";
 import polygon from "../../images/chains/137.webp";
@@ -47,7 +45,7 @@ export function ChainIcon({ chainId, className, status }: IconChainProps) {
     <div className="relative">
       <img
         alt={`Chain ${chainId}`}
-        className={clsx("h-5 w-5", className)}
+        className={cn("h-5 w-5", className)}
         src={Mappings[chainId] || unknown}
       />
       {status && (

components/icons/effigy.tsx

@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { cn } from "../../lib/utils.js";
 
 export interface EffigyIconProps {
   address: string;
@@ -10,7 +10,7 @@ export function EffigyIcon({ address, className }: EffigyIconProps) {
   return (
     <img
       alt={`Effigy for ${address}`}
-      className={clsx("h-6 w-6", className)}
+      className={cn("h-6 w-6", className)}
       src={`https://effigy.im/a/${address}.svg`}
     />
   );

components/solidity-call.tsx

@@ -1,6 +1,6 @@
 import type { Abi, AbiFunction, Address } from "abitype";
-import clsx from "clsx";
 import { decodeFunctionData, formatUnits, parseAbi } from "viem";
+import { cn } from "../lib/utils.js";
 import { ClickToCopy } from "./click-to-copy.js";
 
 export interface SolidityCallProps {
@@ -203,7 +203,7 @@ function Arg({
   };
 
   return (
-    <div className={clsx("flex items-baseline px-1 py-0.5", variants[variant])}>
+    <div className={cn("flex items-baseline px-1 py-0.5", variants[variant])}>
       {label && (
         <span className="mr-1 shrink-0 font-mono text-primary-background">
           {label}