feat: add clsx for dynamic className management

package.json

@@ -19,6 +19,7 @@
     "@polymeshassociation/polymesh-sdk": "26.1.0",
     "@polymeshassociation/walletconnect-signing-manager": "^1.0.0",
     "@tanstack/react-table": "^8.20.5",
+    "clsx": "^2.1.1",
     "events": "^3.3.0",
     "graphql": "^16.9.0",
     "lottie-react": "^2.4.0",

src/components/AssetForm/components/AssetSelect/index.tsx

@@ -5,6 +5,7 @@ import {
   FungibleAsset,
   PortfolioBalance,
 } from '@polymeshassociation/polymesh-sdk/types';
+import clsx from 'clsx';
 import { formatBalance, formatUuid, stringToColor } from '~/helpers/formatters';
 import { Icon } from '~/components';
 import { Text } from '~/components/UiKit';
@@ -206,7 +207,11 @@ export const AssetSelect: React.FC<IAssetSelectProps> = ({
             ) : (
               <StyledPlaceholder>Select Asset</StyledPlaceholder>
             )}
-            <Icon name="ExpandIcon" className="expand-icon" size="18px" />
+            <Icon
+              name="ExpandIcon"
+              className={clsx('expand-icon')}
+              size="18px"
+            />
           </StyledSelect>
           {assetSelectExpanded && (
             <StyledExpandedSelect>

src/components/AssetForm/components/MemoField/index.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import clsx from 'clsx';
 import { Icon } from '~/components';
 import { Text } from '~/components/UiKit';
 import { StyledMemoLabel, StyledInput } from '../../styles';
@@ -32,7 +33,7 @@ export const MemoField: React.FC<IMemoFieldProps> = ({
         <Text size="medium" bold>
           Memo (Optional - this will be public)
         </Text>
-        <Icon name="ExpandIcon" className="icon" size="18px" />
+        <Icon name="ExpandIcon" className={clsx('icon')} size="18px" />
       </StyledMemoLabel>
       {memoExpanded && (
         <StyledInput

src/components/AssetForm/components/NftSelect/index.tsx

@@ -3,6 +3,7 @@ import {
   AssetDetails,
   NftCollection,
 } from '@polymeshassociation/polymesh-sdk/types';
+import { clsx } from 'clsx';
 import { Text } from '~/components/UiKit';
 import { Icon } from '~/components';
 import { useOutsideClick } from '../../hooks';
@@ -237,27 +238,27 @@ export const NftSelect: React.FC<INftSelectProps> = ({
                   <>
                     <IconWrapper
                       $background={stringToColor(selectedCollection.id)}
-                      className="stacked-icon icon-1"
+                      className={clsx('stacked-icon', 'icon-1')}
                     >
                       <Icon name="Coins" size="16px" />
                     </IconWrapper>
                     <IconWrapper
                       $background={stringToColor(selectedCollection.id)}
-                      className="stacked-icon icon-2"
+                      className={clsx('stacked-icon', 'icon-2')}
                     >
                       <Icon name="Coins" size="16px" />
                     </IconWrapper>
                     <IconWrapper
                       $background={stringToColor(selectedCollection.id)}
-                      className="stacked-icon icon-3"
+                      className={clsx('stacked-icon', 'icon-3')}
                     >
                       <Icon name="Coins" size="16px" />
                     </IconWrapper>
                     {selectedCollectionImage && (
                       <img
                         src={selectedCollectionImage}
                         alt={selectedCollectionImage}
-                        className="stacked-icon image"
+                        className={clsx('stacked-icon', 'image')}
                       />
                     )}
                   </>
@@ -272,7 +273,11 @@ export const NftSelect: React.FC<INftSelectProps> = ({
             ) : (
               <StyledPlaceholder>Select Collection</StyledPlaceholder>
             )}
-            <Icon name="ExpandIcon" className="expand-icon" size="18px" />
+            <Icon
+              name="ExpandIcon"
+              className={clsx('expand-icon')}
+              size="18px"
+            />
           </StyledSelect>
           {collectionSelectExpanded && (
             <StyledExpandedSelect>
@@ -295,27 +300,27 @@ export const NftSelect: React.FC<INftSelectProps> = ({
                       <StyledOptionImg>
                         <IconWrapper
                           $background={stringToColor(asset.id)}
-                          className="stacked-icon icon-1"
+                          className={clsx('stacked-icon', 'icon-1')}
                         >
                           <Icon name="Coins" size="16px" />
                         </IconWrapper>
                         <IconWrapper
                           $background={stringToColor(asset.id)}
-                          className="stacked-icon icon-2"
+                          className={clsx('stacked-icon', 'icon-2')}
                         >
                           <Icon name="Coins" size="16px" />
                         </IconWrapper>
                         <IconWrapper
                           $background={stringToColor(asset.id)}
-                          className="stacked-icon icon-3"
+                          className={clsx('stacked-icon', 'icon-3')}
                         >
                           <Icon name="Coins" size="16px" />
                         </IconWrapper>
                         {nfts[asset.id][0]?.imgUrl && (
                           <img
                             src={nfts[asset.id][0].imgUrl}
                             alt={nfts[asset.id][0].imgUrl}
-                            className="stacked-icon image"
+                            className={clsx('stacked-icon', 'image')}
                           />
                         )}
                       </StyledOptionImg>
@@ -358,7 +363,7 @@ export const NftSelect: React.FC<INftSelectProps> = ({
               <StyledLabelWrap>
                 {selectedNfts?.map((nft) => (
                   <StyledLabel key={nft?.id.toNumber()}>
-                    <StyledOptionImg className="small">
+                    <StyledOptionImg className={clsx('small')}>
                       <img src={nft.imgUrl} alt={nft.imgUrl} />
                     </StyledOptionImg>
                     {nft.id.toNumber()}
@@ -373,7 +378,11 @@ export const NftSelect: React.FC<INftSelectProps> = ({
             ) : (
               <StyledPlaceholder>Select IDs</StyledPlaceholder>
             )}
-            <Icon name="ExpandIcon" className="expand-icon" size="18px" />
+            <Icon
+              name="ExpandIcon"
+              className={clsx('expand-icon')}
+              size="18px"
+            />
           </StyledSelect>
           {maxNfts && selectedNfts.length > maxNfts && (
             <StyledError>You can send up to {maxNfts} NFTs per leg</StyledError>
@@ -400,13 +409,13 @@ export const NftSelect: React.FC<INftSelectProps> = ({
                       <StyledNftOption
                         key={nft.id.toNumber()}
                         onClick={() => !nft.locked && handleSelectNft(nft)}
-                        className={nft.locked ? 'locked' : ''}
+                        className={clsx({ locked: nft.locked })}
                       >
                         <StyledOptionImg>
                           <img
                             src={nft.imgUrl}
                             alt={nft.imgUrl}
-                            className="image"
+                            className={clsx('image')}
                           />
                         </StyledOptionImg>
                         {nft.id.toNumber()}

src/components/CopyToClipboard/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { CopyToClipboard as BaseCopyToClipboard } from 'react-copy-to-clipboard';
+import clsx from 'clsx';
 import { Icon } from '~/components';
 import { StyledCopyWrapper } from './styles';
 
@@ -42,11 +43,14 @@ const CopyToClipboard: React.FC<ICopyProps> = ({ value }) => {
           {showNotification ? (
             <Icon
               name={value ? 'Check' : 'CloseIcon'}
-              className={`check-icon ${value ? 'success' : 'failure'}`}
+              className={clsx('check-icon', {
+                success: value,
+                failure: !value,
+              })}
               size="16px"
             />
           ) : (
-            <Icon name="CopyIcon" className="copy-icon" />
+            <Icon name="CopyIcon" className={clsx('copy-icon')} />
           )}
         </StyledCopyWrapper>
       </BaseCopyToClipboard>

src/components/DetailsCard/components/DocumentDropdown/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { AssetDocument } from '@polymeshassociation/polymesh-sdk/types';
+import clsx from 'clsx';
 import { formatKey } from '~/helpers/formatters';
 import { getDateTime } from '../../helpers';
 import { Icon } from '~/components';
@@ -28,7 +29,11 @@ export const DocumentDropdown: React.FC<IDocumentDropdownProps> = ({
         <StyledInfoHeaderWrap $expanded={expanded}>
           <StyledInfoBlockHead>Name</StyledInfoBlockHead>
           <div onClick={toggleExpanded} role="presentation">
-            <Icon name="ExpandIcon" size="24px" className="expand-icon" />
+            <Icon
+              name="ExpandIcon"
+              size="24px"
+              className={clsx('expand-icon')}
+            />
           </div>
         </StyledInfoHeaderWrap>
         {document.name}

src/components/DetailsCard/components/PropertiesDropdown/index.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import clsx from 'clsx';
 import { Icon } from '~/components';
 import {
   StyledInfoItem,
@@ -38,7 +39,7 @@ export const PropertiesDropdown: React.FC<IPropertiesDropdownProps> = ({
           {label}
           {subLabel && <StyledInfoItemLabel>{subLabel}</StyledInfoItemLabel>}
         </StyledInfoItemLabelWrap>
-        <Icon name="ExpandIcon" size="24px" className="expand-icon" />
+        <Icon name="ExpandIcon" size="24px" className={clsx('expand-icon')} />
       </StyledInfoItemHeader>
       {expandedArgs && (
         <StyledInfoBlockWrap>

src/components/ExtensionSelect/components/WalletOption/index.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import {
   StyledWrapper,
   StyledWalletIconBox,
@@ -28,7 +29,7 @@ export const WalletOption: React.FC<IWalletOptionProps> = ({
       <StyledWalletIconBox $installed={isInstalled}>
         <Icon name={iconName} size="56px" />
       </StyledWalletIconBox>
-      <StyledSelectedIconBox className="selected-icon">
+      <StyledSelectedIconBox className={clsx('selected-icon')}>
         <Icon name="SelectedIcon" />
       </StyledSelectedIconBox>
       {!isInstalled && (

src/components/Header/components/DidInfo/index.tsx

@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+import clsx from 'clsx';
 import { PolymeshContext } from '~/context/PolymeshContext';
 import { AccountContext } from '~/context/AccountContext';
 import { StyledWrapper, StyledLabel } from './styles';
@@ -15,8 +16,8 @@ export const DidInfo = () => {
 
   return (
     <StyledWrapper>
-      <div className="icon-wrapper">
-        <Icon name="IdCard" className="id-icon" size="16px" />
+      <div className={clsx('icon-wrapper')}>
+        <Icon name="IdCard" className={clsx('id-icon')} size="16px" />
       </div>
       {connecting || identityLoading ? (
         <>

src/components/Header/components/KeysInfo/index.tsx

@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+import clsx from 'clsx';
 import { AccountContext } from '~/context/AccountContext';
 import { Icon, CopyToClipboard, WalletSelect } from '~/components';
 import { StyledWrapper } from './styles';
@@ -9,8 +10,8 @@ export const KeysInfo = () => {
 
   return (
     <StyledWrapper>
-      <div className="icon-wrapper">
-        <Icon name="KeyIcon" className="key-icon" size="14px" />
+      <div className={clsx('icon-wrapper')}>
+        <Icon name="KeyIcon" className={clsx('key-icon')} size="14px" />
       </div>
       <WalletSelect />
       {selectedAccount ? (

src/components/Header/components/NotificationInfo/index.tsx

@@ -1,5 +1,6 @@
 import { useRef, useState, useEffect, useContext } from 'react';
 import { ToastContainer } from 'react-toastify';
+import { clsx } from 'clsx';
 import { ThemeContext } from '~/context/ThemeContext';
 import { useNotifications } from '~/hooks/polymesh';
 import { StyledWrapper, StyledNotificationCenter } from './styles';
@@ -34,7 +35,10 @@ export const NotificationInfo = () => {
       <StyledWrapper onClick={toggleDropdown} $expanded={expanded}>
         <Icon name="NotificationIcon" />
         {!notificationsLoading && totalPending ? (
-          <NotificationCounter count={totalPending} className="notification" />
+          <NotificationCounter
+            count={totalPending}
+            className={clsx('notification')}
+          />
         ) : null}
       </StyledWrapper>
       <StyledNotificationCenter>

src/components/Header/components/WalletConnectInfo/index.tsx

@@ -1,5 +1,6 @@
 import { useState, useContext, useEffect } from 'react';
 import { WalletConnectSigningManager } from '@polymeshassociation/walletconnect-signing-manager';
+import clsx from 'clsx';
 import {
   StyledWrapper,
   StyledModalContent,
@@ -45,7 +46,7 @@ export const WalletConnectInfo = () => {
     <>
       <StyledWrapper onClick={() => setExpanded(true)} $expanded={expanded}>
         <Icon size="24px" name="WalletConnectSymbolNoColor" />
-        <Icon size="18px" name="Link" className="sub-icon" />
+        <Icon size="18px" name="Link" className={clsx('sub-icon')} />
       </StyledWrapper>
       {expanded && (
         <Modal handleClose={() => setExpanded(false)} customWidth="fit-content">

src/components/NotificationToasts/TransactionToast/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { TransactionStatus } from '@polymeshassociation/polymesh-sdk/types';
+import clsx from 'clsx';
 import { Icon, CopyToClipboard } from '~/components';
 import { Text } from '~/components/UiKit';
 import {
@@ -50,7 +51,7 @@ const TransactionToast: React.FC<ITxToastProps> = ({
   }, [timestamp, formattedTime]);
 
   return (
-    <div className="custom-toast">
+    <div className={clsx('custom-toast')}>
       <StyledInfoWrapper>
         <div>
           <Text bold transform="capitalize" color="secondary">

src/components/Sidebar/components/NewsModal/index.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import clsx from 'clsx';
 import { Icon } from '~/components';
 import { Button, Text, Heading } from '~/components/UiKit';
 import { notifyError } from '~/helpers/notifications';
@@ -115,7 +116,7 @@ export const NewsModal = () => {
           </StyledInputsContainer>
           <Button
             variant="modalPrimary"
-            className="subscribe-btn"
+            className={clsx('subscribe-btn')}
             disabled={!email || !!error || !termsAccepted || needToCheck}
             onClick={handleSubscribe}
           >