Add StringUtils clsx

frontend/src/components/Button/index.tsx

@@ -1,5 +1,6 @@
 import classes from './index.module.css'
 import { FC, MouseEventHandler, PropsWithChildren } from 'react'
+import { StringUtils } from '../../utils/string.utils.ts'
 
 type ButtonSize = 'small' | 'medium'
 type ButtonColor = 'primary' | 'secondary'
@@ -43,15 +44,15 @@ export const Button: FC<Props> = ({
   type,
 }) => (
   <button
-    className={[
+    className={StringUtils.clsx(
       className,
       classes.button,
-      ...(disabled ? [classes.buttonDisabled] : []),
-      ...(fullWidth ? [classes.fullWidth] : []),
+      disabled ? classes.buttonDisabled : undefined,
+      fullWidth ? classes.fullWidth : undefined,
       colorMap[color],
       sizeMap[size],
-      variantMap[variant],
-    ].join(' ')}
+      variantMap[variant]
+    )}
     onClick={onClick}
     disabled={disabled}
     type={type}

frontend/src/components/Card/index.tsx

@@ -1,10 +1,11 @@
 import { FC, PropsWithChildren } from 'react'
 import classes from './index.module.css'
+import { StringUtils } from '../../utils/string.utils.ts'
 
 interface Props extends PropsWithChildren {
   className?: string
 }
 
 export const Card: FC<Props> = ({ children, className }) => {
-  return <div className={[classes.card, ...(className ? [className] : [])].join(' ')}>{children}</div>
+  return <div className={StringUtils.clsx(classes.card, className)}>{children}</div>
 }

frontend/src/utils/string.utils.ts

@@ -12,4 +12,11 @@ export abstract class StringUtils {
   static getTransactionUrl = (baseUrl: string, txHash: string) => `${baseUrl}/tx/${txHash}`
 
   static getAccountUrl = (baseUrl: string, address: string) => `${baseUrl}/address/${address}`
+
+  static clsx = (...classNames: (string | undefined)[]) => {
+    return classNames
+      .map(className => (className ? [className] : []))
+      .flat()
+      .join(' ')
+  }
 }