add ts-css

.gitignore

@@ -36,4 +36,5 @@ yarn-error.log*
 public/injected-provider.bundle.js
 
 # for Yarn 3
-.yarn
+.yarn
+*.scss.d.ts

package.json

@@ -73,6 +73,7 @@
     "sass": "^1.65.1",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
+    "typed-scss-modules": "^7.1.4",
     "typescript": "^5.1.6"
   },
   "scripts": {
@@ -83,6 +84,7 @@
     "ts-check": "tsc --noEmit",
     "postinstall": "patch-package",
     "prepare": "husky install",
+    "ts-css": "typed-scss-modules src --watch --implementation sass -n all -e default",
     "clear-module-cache": "rm -rf node_modules/.cache/vendor & rm -rf public/vendor*"
   },
   "eslintConfig": {

src/components/Table/Table.tsx

@@ -20,7 +20,7 @@ export type TableProps<T extends object> = {
 export const Table = <T extends object>({ headers, data, handleClickRow, stylesColumn }: TableProps<T>) => {
   return (
     <table className={styles.table}>
-      <thead className={styles.tableHeader}>
+      <thead>
         <tr style={stylesColumn}>
           {Object.keys(headers).map((key, index) => {
             return (
@@ -31,7 +31,7 @@ export const Table = <T extends object>({ headers, data, handleClickRow, stylesC
           })}
         </tr>
       </thead>
-      <tbody className={styles.tableBody}>
+      <tbody>
         {data.map((datum, index) => {
           return (
             <tr style={stylesColumn} key={index} onClick={(event) => handleClickRow && handleClickRow(event, datum)}>

src/components/Toasts/Toast.tsx

@@ -2,7 +2,6 @@ import { ReactComponent as LinkIcon } from 'assets/icons/link.svg';
 import { ReactComponent as FailedIcon } from 'assets/icons/toast_failed.svg';
 import { ReactComponent as InfoIcon } from 'assets/icons/toast_info.svg';
 import { ReactComponent as SuccessIcon } from 'assets/icons/toast_success.svg';
-import classNames from 'classnames';
 import Loader from 'components/Loader';
 import { reduceString } from 'libs/utils';
 import { FunctionComponent } from 'react';
@@ -146,7 +145,7 @@ export const displayToast: DisplayToastFn = (
 };
 
 const ToastTxBroadcasting: FunctionComponent = () => (
-  <div className={classNames(styles.toast_content, styles.toast_broadcasting)}>
+  <div className={styles.toast_content}>
     <Loader />
     <section className={styles.toast_section}>
       <h6>Transaction Broadcasting</h6>
@@ -160,7 +159,7 @@ const ToastInfo: FunctionComponent<{
   link: string;
   textLink: string;
 }> = ({ message, link, textLink }) => (
-  <div className={classNames(styles.toast_content, styles.toast_info)}>
+  <div className={styles.toast_content}>
     <InfoIcon />
     <section className={styles.toast_section}>
       <p>{message}</p>
@@ -174,7 +173,7 @@ const ToastInfo: FunctionComponent<{
 );
 
 const ToastTxFailed: FunctionComponent<{ message: string }> = ({ message }) => (
-  <div className={classNames(styles.toast_content, styles.toast_failed)}>
+  <div className={styles.toast_content}>
     <FailedIcon />
     <section className={styles.toast_section}>
       <h6>Transaction Failed</h6>
@@ -184,7 +183,7 @@ const ToastTxFailed: FunctionComponent<{ message: string }> = ({ message }) => (
 );
 
 const ToastKeplrFailed: FunctionComponent<{ message: string }> = ({ message }) => (
-  <div className={classNames(styles.toast_content, styles.toast_failed)}>
+  <div className={styles.toast_content}>
     <FailedIcon />
     <section className={styles.toast_section}>
       <h6>Keplr failed</h6>
@@ -194,7 +193,7 @@ const ToastKeplrFailed: FunctionComponent<{ message: string }> = ({ message }) =
 );
 
 const ToastMetamaskFailed: FunctionComponent<{ message: string }> = ({ message }) => (
-  <div className={classNames(styles.toast_content, styles.toast_failed)}>
+  <div className={styles.toast_content}>
     <FailedIcon />
     <section className={styles.toast_section}>
       <h6>Metamask failed</h6>
@@ -204,7 +203,7 @@ const ToastMetamaskFailed: FunctionComponent<{ message: string }> = ({ message }
 );
 
 const ToastTronLinkFailed: FunctionComponent<{ message: string }> = ({ message }) => (
-  <div className={classNames(styles.toast_content, styles.toast_failed)}>
+  <div className={styles.toast_content}>
     <FailedIcon />
     <section className={styles.toast_section}>
       <h6>Tronlink failed</h6>
@@ -220,7 +219,7 @@ const ToastTxSuccess: FunctionComponent<{
   linkLpAddress?: string;
   linkPairAddress?: string;
 }> = ({ link, linkCw20Token, cw20Address, linkLpAddress, linkPairAddress }) => (
-  <div className={classNames(styles.toast_content, styles.toast_success)}>
+  <div className={styles.toast_content}>
     <SuccessIcon />
     <section className={styles.toast_section}>
       <h6>Transaction Successful</h6>

src/pages/Balance/StuckOraib/index.tsx

@@ -18,7 +18,7 @@ export default function StuckOraib({ handleMove, loading, remainingOraib }: Prop
   }
   return (
     <div className={styles.bridgeBalances}>
-      <StuckOraibridge className={styles.stuckIcon} />
+      <StuckOraibridge />
       {loading ? (
         <img src={loadingGif} alt="loading-gif" width={30} height={30} />
       ) : (
@@ -40,7 +40,6 @@ export default function StuckOraib({ handleMove, loading, remainingOraib }: Prop
                 balance={{
                   amount: toDisplay(token.amount, token.decimals).toString()
                 }}
-                className={styles.tokenAmount}
                 decimalScale={Math.min(6, token.decimals)}
               />
             </div>

src/pages/Balance/TransferConvertToken/index.tsx

@@ -179,7 +179,6 @@ const TransferConvertToken: FC<TransferConvertProps> = ({
                     denom: evmToken.name,
                     decimals: evmToken.decimals
                   }}
-                  className={styles.tokenAmount}
                   decimalScale={token.decimals}
                 />
               </div>

src/pages/Pools/components/ItemPoolMobile/ItemPoolMobile.tsx

@@ -28,7 +28,7 @@ export const PoolMobileItem: React.FC<PoolMobileItemProps> = ({ pool, setPairDen
     <article className={styles.pool} onClick={(e) => handleClickRow(e)}>
       <div className={styles.poolHead}>
         <div className={styles.symbols}>
-          <div className={styles.symbols_logo}>{generateIcon(pool.baseToken, pool.quoteToken)}</div>
+          <div>{generateIcon(pool.baseToken, pool.quoteToken)}</div>
           <span className={styles.symbols_name}>{pool.symbols}</span>
         </div>
         <div className={styles.apr}>

src/pages/Pools/index.tsx

@@ -50,7 +50,7 @@ const LIST_FILTER_POOL = [
 
 const Header: FC<{ theme: string; amount: number; oraiPrice: number }> = ({ amount, oraiPrice, theme }) => {
   return (
-    <div className={styles.header}>
+    <div>
       <div className={styles.header_title}>Pools</div>
       <div className={styles.header_data}>
         <div className={styles.header_data_item}>
@@ -101,7 +101,7 @@ const PairBox = memo<PairInfoData & { apr: number; theme?: string; cachedReward?
               <token2.Icon className={styles.pairbox_logo2} />
             )}
           </div>
-          <div className={styles.pairbox_pair}>
+          <div>
             <div className={styles.pairbox_pair_name}>
               {token1.name}/{token2.name}
             </div>

src/pages/Pools/indexV3.tsx

@@ -105,7 +105,7 @@ const Pools: React.FC<{}> = () => {
     <Content nonBackground>
       <div className={styles.pools}>
         <Header />
-        <div className={styles.listPool}>
+        <div>
           <Filter setFilteredPools={setFilteredPools} />
           {mobileMode ? (
             <ListPoolsMobile poolTableData={poolTableData} generateIcon={generateIcon} />