fix: className optimize.

src/lib/components/AddressItem.tsx

@@ -20,7 +20,7 @@ export function AddressItem(props: { address: string; isCurrent?: boolean; class
         <span className="text-base font-bold leading-5">{props.address}</span>
         <span className="inline-flex">{props.isCurrent ? <Tag className="text-sm">{t`Current`}</Tag> : null}</span>
       </span>
-      <ArrowLeftIcon className="h-2.5 w-2.5 rotate-180 text-font-secondary"></ArrowLeftIcon>
+      <ArrowLeftIcon className="size-2.5 rotate-180 text-font-secondary"></ArrowLeftIcon>
     </li>
   )
 }

src/lib/components/Button/index.tsx

@@ -114,11 +114,11 @@ export const Button = ({
     >
       {loading ? (
         <span className="mr-1.5 inline-flex">
-          <LoadingIcon className="h-5 w-5" />
+          <LoadingIcon className="size-5" />
         </span>
       ) : null}
       {props.children}
-      {outlink ? <ArrowRightTopIcon className="ml-3 h-2.5 w-2.5"></ArrowRightTopIcon> : null}
+      {outlink ? <ArrowRightTopIcon className="ml-3 size-2.5"></ArrowRightTopIcon> : null}
     </button>
   )
 }

src/lib/components/ChainItem.tsx

@@ -30,9 +30,9 @@ export function ChainItem(props: {
         </span>
       </span>
       {props.name === props.currentLogin ? (
-        <LoadingIcon className="h-2.5 w-2.5 text-font-secondary"></LoadingIcon>
+        <LoadingIcon className="size-2.5 text-font-secondary"></LoadingIcon>
       ) : (
-        <ArrowLeftIcon className="h-2.5 w-2.5 rotate-180 text-font-secondary"></ArrowLeftIcon>
+        <ArrowLeftIcon className="size-2.5 rotate-180 text-font-secondary"></ArrowLeftIcon>
       )}
     </li>
   )

src/lib/components/Header/index.tsx

@@ -23,11 +23,11 @@ export function Header({ title, className, goBack, onClose, style }: HeaderProps
       {goBack != null ? (
         <div
           className={clsx(
-            'absolute left-6 inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg hover:bg-secondary active:bg-secondary-active',
+            'absolute left-6 inline-flex size-7 cursor-pointer items-center justify-center rounded-lg hover:bg-secondary active:bg-secondary-active',
           )}
           onClick={goBack}
         >
-          <ArrowLeftIcon className={'h-3 w-3 text-[#D9D9D9]'}></ArrowLeftIcon>
+          <ArrowLeftIcon className={'size-3 text-[#D9D9D9]'}></ArrowLeftIcon>
         </div>
       ) : null}
       <div
@@ -41,11 +41,11 @@ export function Header({ title, className, goBack, onClose, style }: HeaderProps
       </div>
       <div
         className={clsx(
-          'absolute right-6 inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg hover:bg-secondary active:bg-secondary-active',
+          'absolute right-6 inline-flex size-7 cursor-pointer items-center justify-center rounded-lg hover:bg-secondary active:bg-secondary-active',
         )}
         onClick={onClose}
       >
-        <CloseIcon className={'h-3 w-3 text-[#D9D9D9]'}></CloseIcon>
+        <CloseIcon className={'size-3 text-[#D9D9D9]'}></CloseIcon>
       </div>
     </div>
   )

src/lib/components/LoggedInButton/index.tsx

@@ -19,7 +19,7 @@ export const LoggedInButton = ({ loading = false, className, icon, ...props }: L
     >
       {loading ? (
         <span className="mr-1.5 inline-flex">
-          <LoadingIcon className="h-5 w-5 text-[#5F6570]" />
+          <LoadingIcon className="size-5 text-[#5F6570]" />
         </span>
       ) : (
         icon

src/lib/components/TorusList.tsx

@@ -14,11 +14,11 @@ export function TorusList({ className, onClick, currentLogin }: TorusListProps)
   const [name, setName] = useState('')
   const list = [
     {
-      logo: <img className="h-5 w-5" src={AppleIcon} alt="Apple ID" />,
+      logo: <img className="size-5" src={AppleIcon} alt="Apple ID" />,
       name: 'Apple ID',
     },
     {
-      logo: <img className="h-5 w-5" src={GoogleIcon} alt="Google" />,
+      logo: <img className="size-5" src={GoogleIcon} alt="Google" />,
       name: 'Google',
     },
   ]
@@ -45,9 +45,9 @@ export function TorusList({ className, onClick, currentLogin }: TorusListProps)
               <span className="ml-2 text-base text-neutral-700">{item.name}</span>
             </span>
             {item.name === name && currentLogin ? (
-              <LoadingIcon className="h-2.5 w-2.5 rotate-180 text-neutral-400"></LoadingIcon>
+              <LoadingIcon className="size-2.5 rotate-180 text-neutral-400"></LoadingIcon>
             ) : (
-              <ArrowLeftIcon className="h-2.5 w-2.5 rotate-180 text-neutral-400"></ArrowLeftIcon>
+              <ArrowLeftIcon className="size-2.5 rotate-180 text-neutral-400"></ArrowLeftIcon>
             )}
           </div>
         ))}

src/lib/ui/ChooseEmoji/index.tsx

@@ -96,7 +96,7 @@ export function ChooseEmoji({ transitionRef, transitionStyle }: SwapChildProps)
               onClick={onClick(k)}
               key={k}
               className={clsx(
-                'relative box-border h-12 w-12 cursor-pointer select-none rounded-xl transition-none active:bg-slate-600/20',
+                'relative box-border size-12 cursor-pointer select-none rounded-xl transition-none active:bg-slate-600/20',
                 selected === k ? 'border-2 border-emerald-400 bg-white' : 'hover:bg-slate-600/10',
               )}
             >

src/lib/ui/FinalConfirm/index.tsx

@@ -111,7 +111,7 @@ export function FinalConfirm({ transitionRef, transitionStyle }: SwapChildProps)
         <div className="mt-16 inline-flex w-full items-center justify-center gap-3">
           <input
             type="checkbox"
-            className="h-5 w-5 cursor-pointer rounded-md border-2 border-slate-300/40 text-emerald-400 focus:ring-transparent"
+            className="size-5 cursor-pointer rounded-md border-2 border-slate-300/40 text-emerald-400 focus:ring-transparent"
             checked={checked}
             onChange={(e) => {
               setChecked(e.target.checked)

src/lib/ui/InputSignature/index.tsx

@@ -53,7 +53,7 @@ function DomException({ err, className }: { err: DOMException; className?: strin
         className,
       )}
     >
-      <WarningOutlineIcon className="h-5 w-5 flex-none text-yellow-500" />
+      <WarningOutlineIcon className="size-5 flex-none text-yellow-500" />
 
       <div className="flex-1">
         <div className="text-[16px] leading-[20px] text-yellow-700">{title}</div>
@@ -160,15 +160,15 @@ export function InputSignature({ transitionRef, transitionStyle }: SwapChildProp
             onChange={onChange}
           />
           <div className="absolute bottom-0 right-0 p-3 align-middle">
-            <div className="inline-flex h-[30px] w-[30px] items-center justify-center  rounded-lg border border-slate-600/10 bg-white">
+            <div className="inline-flex size-[30px] items-center justify-center rounded-lg  border border-slate-600/10 bg-white">
               <PasteIcon onClick={onPaste} className="w-[16px] cursor-pointer" />
             </div>
             {requiringPermission ? (
-              <div className="ml-4 inline-flex h-[30px] w-[30px] items-center justify-center  rounded-lg border border-slate-600/10 bg-white">
+              <div className="ml-4 inline-flex size-[30px] items-center justify-center rounded-lg  border border-slate-600/10 bg-white">
                 <LoadingIcon className="animation-rotate-360-deg w-[18px] cursor-pointer" />
               </div>
             ) : (
-              <div className="ml-4 inline-flex h-[30px] w-[30px] items-center justify-center  rounded-lg border border-slate-600/10 bg-white">
+              <div className="ml-4 inline-flex size-[30px] items-center justify-center rounded-lg  border border-slate-600/10 bg-white">
                 <ScanIcon onClick={onClickScan} className="w-[18px] cursor-pointer" />
               </div>
             )}

src/lib/ui/LoggedIn/AddressQrCode.tsx

@@ -30,7 +30,7 @@ export function AddressQRCode({ transitionRef, transitionStyle }: SwapChildProps
         ref={transitionRef}
         style={transitionStyle}
       >
-        <div className="relative my-3 mb-9 h-[270px] w-[270px]">
+        <div className="relative my-3 mb-9 size-[270px]">
           <QRCode data={walletSnap.address} />
         </div>
       </div>

src/lib/ui/LoggedIn/DeviceList.tsx

@@ -22,7 +22,7 @@ function More({ address, onRevoke }: MoreProps) {
   return (
     <Menu as="div" className="relative inline-block flex-none">
       <Menu.Button className="flex">
-        <MoreIcon className="h-[16px] w-[16px] flex-none cursor-pointer text-zinc-300 active:opacity-60" />
+        <MoreIcon className="size-[16px] flex-none cursor-pointer text-zinc-300 active:opacity-60" />
       </Menu.Button>
       <Transition
         as={Fragment}
@@ -45,7 +45,7 @@ function More({ address, onRevoke }: MoreProps) {
               className="relative h-[36px] w-full cursor-pointer rounded-lg px-3 py-2 text-center text-gray-700 hover:bg-red-100 hover:text-red-500 active:text-red-500"
               onClick={onRevoke}
             >
-              <RevokeIcon className="absolute left-3 top-1/2 h-[16px] w-[16px] -translate-y-1/2" />
+              <RevokeIcon className="absolute left-3 top-1/2 size-[16px] -translate-y-1/2" />
               <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[14px] font-medium leading-tight">
                 {t`Revoke`}
               </div>
@@ -249,13 +249,13 @@ function LeadingIcon({ name, emoji, address }: LeadingIconProps) {
     [address, walletSnap.deviceList],
   )
   if (isMasterDevice) {
-    return <DeviceIcon className="h-6 w-6" />
+    return <DeviceIcon className="size-6" />
   } else if (selectedEmoji) {
-    return <img className="h-6 w-6" src={selectedEmoji} />
+    return <img className="size-6" src={selectedEmoji} />
   } else if (name) {
-    return <LetterAvatar data={name} className="h-[28px] w-[28px] flex-none" />
+    return <LetterAvatar data={name} className="size-[28px] flex-none" />
   } else {
-    return <NervosIcon className="h-6 w-6 flex-none rounded-full border border-stone-300/20" />
+    return <NervosIcon className="size-6 flex-none rounded-full border border-stone-300/20" />
   }
 }
 
@@ -302,7 +302,7 @@ export function DeviceList({ onShowQRCode, className, onDisconnect }: DeviceList
           onClick={onShowQRCode}
           className="flex h-[48px] cursor-pointer items-center gap-4 pl-3 pr-4 hover:bg-secondary-5 active:bg-secondary"
         >
-          <PlusIcon className="h-6 w-6" />
+          <PlusIcon className="size-6" />
           <div className="flex-1 text-[14px] font-semibold text-success">{t`Add New`}</div>
         </div>
       </ul>

src/lib/ui/LoggedIn/LoggedIn.tsx

@@ -54,16 +54,16 @@ export const LoggedIn = ({ transitionRef, transitionStyle }: SwapChildProps) =>
   }
 
   const icons: Record<CoinType, ReactNode> = {
-    [CoinType.btc]: <DeviceIcon className="inline-flex h-[68px] w-[68px]"></DeviceIcon>,
-    [CoinType.ckb]: <DeviceIcon className="inline-flex h-[68px] w-[68px]"></DeviceIcon>,
-    [CoinType.eth]: <img className="inline-flex h-[68px] w-[68px]" src={EthIcon} alt="ETH" />,
-    [CoinType.bsc]: <img className="inline-flex h-[68px] w-[68px]" src={BscIcon} alt="BSC" />,
+    [CoinType.btc]: <DeviceIcon className="inline-flex size-[68px]"></DeviceIcon>,
+    [CoinType.ckb]: <DeviceIcon className="inline-flex size-[68px]"></DeviceIcon>,
+    [CoinType.eth]: <img className="inline-flex size-[68px]" src={EthIcon} alt="ETH" />,
+    [CoinType.bsc]: <img className="inline-flex size-[68px]" src={BscIcon} alt="BSC" />,
     // eslint-disable-next-line lingui/no-unlocalized-strings
-    [CoinType.matic]: <img className="inline-flex h-[68px] w-[68px]" src={PolygonIcon} alt="Polygon" />,
+    [CoinType.matic]: <img className="inline-flex size-[68px]" src={PolygonIcon} alt="Polygon" />,
     // eslint-disable-next-line lingui/no-unlocalized-strings
-    [CoinType.trx]: <img className="inline-flex h-[68px] w-[68px]" src={TronIcon} alt="Tron" />,
+    [CoinType.trx]: <img className="inline-flex size-[68px]" src={TronIcon} alt="Tron" />,
     // eslint-disable-next-line lingui/no-unlocalized-strings
-    [CoinType.doge]: <img className="inline-flex h-[68px] w-[68px]" src={DogecoinIcon} alt="Dogecoin" />,
+    [CoinType.doge]: <img className="inline-flex size-[68px]" src={DogecoinIcon} alt="Dogecoin" />,
   }
 
   const bgImage: Record<CoinType, ReactNode> = {
@@ -141,7 +141,7 @@ export const LoggedIn = ({ transitionRef, transitionStyle }: SwapChildProps) =>
               <div className="flex flex-wrap gap-3">
                 <LoggedInButton
                   className="flex-loggedin-button"
-                  icon={<CopyIcon className="h-5 w-5 text-[#5F6570]"></CopyIcon>}
+                  icon={<CopyIcon className="size-5 text-[#5F6570]"></CopyIcon>}
                   onClick={() => {
                     walletSnap.address && onCopy(walletSnap.address)
                   }}
@@ -150,23 +150,23 @@ export const LoggedIn = ({ transitionRef, transitionStyle }: SwapChildProps) =>
                 </LoggedInButton>
                 <LoggedInButton
                   className="flex-loggedin-button"
-                  icon={<QRCodeIcon className="h-5 w-5 text-[#5F6570]"></QRCodeIcon>}
+                  icon={<QRCodeIcon className="size-5 text-[#5F6570]"></QRCodeIcon>}
                   onClick={onShowAddressQRCode}
                 >
                   {t`QR Code`}
                 </LoggedInButton>
                 {walletSnap.ckbAddresses && walletSnap.ckbAddresses?.length > 0 ? (
                   <LoggedInButton
                     className="flex-loggedin-button"
-                    icon={<SwitchIcon className="h-5 w-5 text-[#5F6570]"></SwitchIcon>}
+                    icon={<SwitchIcon className="size-5 text-[#5F6570]"></SwitchIcon>}
                     onClick={onSwitchAddress}
                   >
                     {t`Switch`}
                   </LoggedInButton>
                 ) : null}
                 <LoggedInButton
                   className="flex-loggedin-button"
-                  icon={<DisconnectIcon className="h-5 w-5 text-[#5F6570]"></DisconnectIcon>}
+                  icon={<DisconnectIcon className="size-5 text-[#5F6570]"></DisconnectIcon>}
                   loading={disconnectLoading}
                   onClick={disconnect}
                 >
@@ -194,7 +194,7 @@ export const LoggedIn = ({ transitionRef, transitionStyle }: SwapChildProps) =>
               <div className="flex flex-wrap gap-3">
                 <LoggedInButton
                   className="flex-loggedin-button"
-                  icon={<CopyIcon className="h-5 w-5 text-[#5F6570]"></CopyIcon>}
+                  icon={<CopyIcon className="size-5 text-[#5F6570]"></CopyIcon>}
                   onClick={() => {
                     walletSnap.address && onCopy(walletSnap.address)
                   }}
@@ -203,23 +203,23 @@ export const LoggedIn = ({ transitionRef, transitionStyle }: SwapChildProps) =>
                 </LoggedInButton>
                 <LoggedInButton
                   className="flex-loggedin-button"
-                  icon={<QRCodeIcon className="h-5 w-5 text-[#5F6570]"></QRCodeIcon>}
+                  icon={<QRCodeIcon className="size-5 text-[#5F6570]"></QRCodeIcon>}
                   onClick={onShowAddressQRCode}
                 >
                   {t`QR Code`}
                 </LoggedInButton>
                 {showOpenTorusButton && (
                   <LoggedInButton
                     className="flex-loggedin-button"
-                    icon={<TorusIcon className="h-4 w-4 text-[#5F6570]"></TorusIcon>}
+                    icon={<TorusIcon className="size-4 text-[#5F6570]"></TorusIcon>}
                     onClick={openTorus}
                   >
                     {t`Open Torus`}
                   </LoggedInButton>
                 )}
                 <LoggedInButton
                   className="flex-loggedin-button"
-                  icon={<DisconnectIcon className="h-5 w-5 text-[#5F6570]"></DisconnectIcon>}
+                  icon={<DisconnectIcon className="size-5 text-[#5F6570]"></DisconnectIcon>}
                   loading={disconnectLoading}
                   onClick={disconnect}
                 >

src/lib/ui/Login/ChainList.tsx

@@ -23,41 +23,41 @@ interface IChain {
 }
 
 const eth: IChain = {
-  icon: <img className="h-10 w-10" src={EthIcon} alt="ETH" />,
+  icon: <img className="size-10" src={EthIcon} alt="ETH" />,
   name: CustomChain.eth,
   coinType: CoinType.eth,
 }
 
 const bsc: IChain = {
-  icon: <img className="h-10 w-10" src={BscIcon} alt="BSC" />,
+  icon: <img className="size-10" src={BscIcon} alt="BSC" />,
   name: CustomChain.bsc,
   coinType: CoinType.bsc,
 }
 
 const polygon: IChain = {
   // eslint-disable-next-line lingui/no-unlocalized-strings
-  icon: <img className="h-10 w-10" src={PolygonIcon} alt="Polygon" />,
+  icon: <img className="size-10" src={PolygonIcon} alt="Polygon" />,
   name: CustomChain.polygon,
   coinType: CoinType.matic,
 }
 
 const tron: IChain = {
   // eslint-disable-next-line lingui/no-unlocalized-strings
-  icon: <img className="h-10 w-10" src={TronIcon} alt="Tron" />,
+  icon: <img className="size-10" src={TronIcon} alt="Tron" />,
   name: CustomChain.tron,
   coinType: CoinType.trx,
 }
 
 const doge: IChain = {
   // eslint-disable-next-line lingui/no-unlocalized-strings
-  icon: <img className="h-10 w-10" src={DogecoinIcon} alt="Dogecoin" />,
+  icon: <img className="size-10" src={DogecoinIcon} alt="Dogecoin" />,
   name: CustomChain.doge,
   coinType: CoinType.doge,
 }
 
 const torus: IChain = {
   // eslint-disable-next-line lingui/no-unlocalized-strings
-  icon: <img className="h-10 w-10" src={TorusIcon} alt="Torus" />,
+  icon: <img className="size-10" src={TorusIcon} alt="Torus" />,
   name: CustomChain.torus,
   coinType: CoinType.eth,
 }

src/lib/ui/Login/WalletConnectQrCode.tsx

@@ -39,7 +39,7 @@ export function WalletConnectQrCode({ transitionRef, transitionStyle }: SwapChil
             : // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
               t`Scan with ${loginCacheSnap.walletName}`}
         </div>
-        <div className="relative my-3 mb-9 h-[260px] w-[260px] rounded-2xl border border-stone-300/20 p-2">
+        <div className="relative my-3 mb-9 size-[260px] rounded-2xl border border-stone-300/20 p-2">
           <QRCode data={loginCacheSnap.walletConnectDisplayUri} />
         </div>
       </div>

src/lib/ui/ShowQRCode/index.tsx

@@ -42,7 +42,7 @@ export function ShowQRCode({ transitionRef, transitionStyle }: SwapChildProps) {
         <div className="text-center text-[14px] leading-tight text-neutral-700">
           {t`Use the QR code or link below on your other trusted devices and follow the instructions inside.`}
         </div>
-        <div className="relative my-3 h-[260px] w-[260px] rounded-2xl border border-stone-300/20 p-2">
+        <div className="relative my-3 size-[260px] rounded-2xl border border-stone-300/20 p-2">
           <QRCode data={url} />
         </div>
         <div

src/lib/ui/TransactionFailed/index.tsx

@@ -21,7 +21,7 @@ export function TransactionFailed({ transitionRef, transitionStyle }: SwapChildP
         ref={transitionRef}
         style={transitionStyle}
       >
-        <Exlaimation className="h-[80px] w-[80px] text-red-500" />
+        <Exlaimation className="size-[80px] text-red-500" />
         <div className="mt-3 text-center text-[16px] font-bold text-red-500">{t`Failed`}</div>
         <div className="mt-3 text-center text-[16px] leading-normal text-neutral-700">
           <div>{t`The contract verification failed.`}</div>

src/lib/ui/TransactionStatus/index.tsx

@@ -62,7 +62,7 @@ export function TransactionStatus({ transitionRef, transitionStyle }: SwapChildP
         ref={transitionRef}
         style={transitionStyle}
       >
-        <LoadingIconGradient className="animation-rotate-360-deg h-[64px] w-[64px] text-emerald-500" />
+        <LoadingIconGradient className="animation-rotate-360-deg size-[64px] text-emerald-500" />
         <div className="mt-4 text-center text-[16px] font-bold text-neutral-700">{t`Adding Trusted Device`}</div>
         <div className="mt-3 text-center text-[16px] leading-normal text-neutral-700">{t`Approximately 3 minutes.`}</div>
         <div className="mb-8 mt-3 text-[12px] font-normal leading-[12px]">

src/lib/ui/TransactionSucceeded/index.tsx

@@ -16,7 +16,7 @@ export function TransactionSucceeded({ transitionRef, transitionStyle }: SwapChi
         ref={transitionRef}
         style={transitionStyle}
       >
-        <SafeIcon className="h-[80px] w-[80px] text-green-500" />
+        <SafeIcon className="size-[80px] text-green-500" />
         <div className="mt-3 text-center text-[16px] font-bold text-neutral-700">{t`New Trusted Device Added`}</div>
         <div className="mt-3 text-center text-[16px] leading-normal text-neutral-700">
           {t`The new trusted device has full control over this address.`}