feat: update icon handling and styles across multiple components for …

…consistency
oraidex · Dec 5, 2024 · 7c75443 · 7c75443
1 parent 72f7dbf
commit 7c75443
Show file tree

Hide file tree

Showing 12 changed files with 93 additions and 102 deletions.
diff --git a/src/components/WalletManagement/ModalChooseWallet/WalletByNetwork/WalletByNetwork.tsx b/src/components/WalletManagement/ModalChooseWallet/WalletByNetwork/WalletByNetwork.tsx
@@ -1,4 +1,4 @@
-import { WalletType as WalletCosmosType } from '@oraichain/oraidex-common';
+import { OraiIcon, WalletType as WalletCosmosType } from '@oraichain/oraidex-common';
 import { Button } from 'components/Button';
 import { TToastType, displayToast } from 'components/Toasts/Toast';
 import type { WalletNetwork, WalletProvider, WalletType } from 'components/WalletManagement/walletConfig';
@@ -255,11 +255,11 @@ export const WalletByNetwork = ({ walletProvider }: { walletProvider: WalletProv
 
   const renderNetworkIcons = () => {
     return networks.map((network, index) => {
-      let NetworkIcon = theme === 'dark' ? network.Icon : network.IconLight;
-      if (!NetworkIcon) NetworkIcon = DefaultIcon;
+      let NetworkIcon = theme === 'dark' ? network.chainSymbolImageUrl : network.chainSymbolImageUrl;
+      if (!NetworkIcon) NetworkIcon = OraiIcon;
       return (
         <div className={styles.networkIcon} key={network.chainName + index}>
-          <NetworkIcon width={20} height={20} />
+          <img src={NetworkIcon} alt="NetworkIcon" width={20} height={20} />
         </div>
       );
     });

diff --git a/src/helper/index.tsx b/src/helper/index.tsx
@@ -8,8 +8,7 @@ import {
   MULTIPLIER,
   TRON_SCAN,
   EVM_CHAIN_ID_COMMON,
-  WalletType as WalletCosmosType,
-  chainIcons
+  WalletType as WalletCosmosType
 } from '@oraichain/oraidex-common';
 import { serializeError } from 'serialize-error';
 import { fromBech32, toBech32 } from '@cosmjs/encoding';
@@ -26,7 +25,15 @@ import { WalletsByNetwork } from 'reducer/wallet';
 import { evmChainInfos } from 'config/evmChainInfos';
 import DefaultIcon from 'assets/icons/tokens.svg?react';
 import { numberWithCommas } from './format';
-import { chainInfos, chainInfosWithIcon, cosmosChains, evmChains, flattenTokensWithIcon, network } from 'initCommon';
+import {
+  chainInfos,
+  chainInfosWithIcon,
+  cosmosChains,
+  evmChains,
+  flattenTokens,
+  flattenTokensWithIcon,
+  network
+} from 'initCommon';
 import { CosmosChainId, CustomChainInfo, NetworkChainId } from '@oraichain/common';
 
 export interface Tokens {
@@ -620,23 +627,23 @@ export function formatMoney(num) {
 
 export const getIcon = ({ isLightTheme, type, chainId, coinGeckoId, width, height }: GetIconInterface) => {
   if (type === 'token') {
-    const tokenIcon = flattenTokensWithIcon.find((tokenWithIcon) => tokenWithIcon.coinGeckoId === coinGeckoId);
+    const tokenIcon = flattenTokens.find((token) => token.coinGeckoId === coinGeckoId);
     if (tokenIcon) {
       return isLightTheme ? (
-        <tokenIcon.IconLight width={width} height={height} />
+        <img src={tokenIcon.iconLight} alt="" width={width} height={height} />
       ) : (
-        <tokenIcon.Icon width={width} height={height} />
+        <img src={tokenIcon.icon} alt="" width={width} height={height} />
       );
     }
 
     return <DefaultIcon />;
   } else {
-    const networkIcon = chainIcons.find((chain) => chain.chainId === chainId);
+    const networkIcon = chainInfos.find((chain) => chain.chainId === chainId);
     if (networkIcon) {
       return isLightTheme ? (
-        <networkIcon.IconLight width={width} height={height} />
+        <img src={networkIcon.chainSymbolImageUrl} alt="" width={width} height={height} />
       ) : (
-        <networkIcon.Icon width={width} height={height} />
+        <img src={networkIcon.chainSymbolImageUrl} alt="" width={width} height={height} />
       );
     }
 

diff --git a/src/libs/contractSingleton.ts b/src/libs/contractSingleton.ts
@@ -192,7 +192,7 @@ export default class SingletonOraiswapV3 {
     return this._cosmwasmClient;
   }
 
-  private constructor() { }
+  private constructor() {}
 
   public static async load(signingClient: SigningCosmWasmClient, sender: string) {
     if (!this._cosmwasmClient) {
@@ -902,7 +902,7 @@ export async function fetchPoolAprInfo(
           const token = oraichainTokens.find(
             (token) => extractAddress(token) === parseAssetInfo(incentive.reward_token)
           );
-          return token.denom.toUpperCase();
+          return token.name.toUpperCase();
         })
         .filter((incentive) => incentive !== null),
       swapFee: {

diff --git a/src/pages/Balance/TransferConvertToken/index.tsx b/src/pages/Balance/TransferConvertToken/index.tsx
@@ -30,8 +30,8 @@ import styles from './index.module.scss';
 import { useGetContractConfig } from 'pages/BitcoinDashboardV2/hooks';
 import ToggleSwitch from 'components/ToggleSwitch';
 import { CWBitcoinFactoryDenom } from 'helper/constants';
-import { cosmosTokens, evmChains, flattenTokens, tokenMap } from 'initCommon';
-import { NetworkChainId } from "@oraichain/common";
+import { btcChains, cosmosTokens, evmChains, flattenTokens, tokenMap } from 'initCommon';
+import { NetworkChainId } from '@oraichain/common';
 
 interface TransferConvertProps {
   token: TokenItemType;
@@ -287,13 +287,9 @@ const TransferConvertToken: FC<TransferConvertProps> = ({
                     <div style={{ display: 'flex', alignItems: 'center' }}>
                       <div className={styles.search_logo}>
                         {theme === 'light' ? (
-                          toNetwork.IconLight ? (
-                            <toNetwork.IconLight width={44} height={44} />
-                          ) : (
-                            <toNetwork.Icon width={44} height={44} />
-                          )
+                          <img width={44} height={44} src={toNetwork.chainSymbolImageUrl} alt="chainSymbolImageUrl" />
                         ) : (
-                          <toNetwork.Icon width={44} height={44} />
+                          <img width={44} height={44} src={toNetwork.chainSymbolImageUrl} alt="chainSymbolImageUrl" />
                         )}
                       </div>
                       <span className={classNames(styles.search_text, styles[theme])}>{toNetwork.chainName}</span>
@@ -324,7 +320,7 @@ const TransferConvertToken: FC<TransferConvertProps> = ({
                             {net && (
                               <div className={classNames(styles.items_chain)}>
                                 <div>
-                                  <net.Icon width={44} height={44} />
+                                  <img width={44} height={44} src={net.chainSymbolImageUrl} alt="chainSymbolImageUrl" />
                                 </div>
                                 <div className={classNames(styles.items_title, styles[theme])}>{net.chainName}</div>
                               </div>

diff --git a/src/pages/Pool-V3/components/PositionItem/index.tsx b/src/pages/Pool-V3/components/PositionItem/index.tsx
@@ -527,7 +527,7 @@ const PositionItem = ({ position }) => {
                 {incentives && <div style={{ height: 8 }} />}
                 {incentives &&
                   Object.keys(incentives).map((incent, i) => {
-                    const tokenIncentive = oraichainTokensWithIcon.find((orai) =>
+                    const tokenIncentive = oraichainTokens.find((orai) =>
                       [orai.denom, orai.contractAddress].includes(incent)
                     );
 
@@ -537,7 +537,11 @@ const PositionItem = ({ position }) => {
                         <div className={classNames(styles.itemAsset, styles[theme])}>
                           <span className={classNames(styles.token, styles[theme])}></span>
                           <span className={classNames(styles.token, styles[theme])}>
-                            {theme === 'light' ? <tokenIncentive.IconLight /> : <tokenIncentive.Icon />}
+                            {theme === 'light' ? (
+                              <img src={tokenIncentive.iconLight} alt="tokenIncentive" width={20} height={20} />
+                            ) : (
+                              <img src={tokenIncentive.icon} alt="tokenIncentive" width={20} height={20} />
+                            )}
                             {toDisplay(incentives[incent].toString())} {tokenIncentive?.name}
                           </span>
                         </div>

diff --git a/src/pages/Pool-V3/components/TransactionHistory/index.tsx b/src/pages/Pool-V3/components/TransactionHistory/index.tsx
@@ -1,4 +1,4 @@
-import { TokenItemType, parseTokenInfoRawDenom, toDisplay } from '@oraichain/oraidex-common';
+import { OraiIcon, TokenItemType, parseTokenInfoRawDenom, toDisplay } from '@oraichain/oraidex-common';
 import { isMobile } from '@walletconnect/browser-utils';
 import LinkIcon from 'assets/icons/link.svg?react';
 import DefaultIcon from 'assets/icons/tokens.svg?react';
@@ -28,7 +28,7 @@ const TransactionHistory = ({
   const mobileMode = isMobile();
   const { data: prices } = useCoinGeckoPrices();
 
-  let [BaseTokenIcon, QuoteTokenIcon] = [null, null];
+  let [BaseTokenIcon, QuoteTokenIcon] = [OraiIcon, OraiIcon];
 
   const baseDenom = baseToken && parseTokenInfoRawDenom(baseToken);
   const quoteDenom = quoteToken && parseTokenInfoRawDenom(quoteToken);
@@ -57,20 +57,8 @@ const TransactionHistory = ({
                   const offerToken = item.offerDenom === baseDenom ? baseToken : quoteToken;
                   const returnToken = item.askDenom === quoteDenom ? quoteToken : baseToken;
 
-                  if (offerToken)
-                    BaseTokenIcon =
-                      theme === 'light' ? (
-                        <img src={offerToken.iconLight} alt="icon" />
-                      ) : (
-                        <img src={offerToken.icon} alt="icon" />
-                      );
-                  if (returnToken)
-                    QuoteTokenIcon =
-                      theme === 'light' ? (
-                        <img src={returnToken.iconLight} alt="icon" />
-                      ) : (
-                        <img src={returnToken.icon} alt="icon" />
-                      );
+                  if (offerToken) BaseTokenIcon = theme === 'light' ? offerToken.iconLight : offerToken.icon;
+                  if (returnToken) QuoteTokenIcon = theme === 'light' ? returnToken.iconLight : returnToken.icon;
 
                   const returnUSD = item.volumeUSD;
                   const feeUSD = item.commissionAmount;
@@ -107,7 +95,7 @@ const TransactionHistory = ({
                         <div className={`${styles.pay}`}>
                           <div className={styles.titleItem}>Pay amount</div>
                           <div className={styles.amount}>
-                            <div>{BaseTokenIcon}</div>
+                            <img src={BaseTokenIcon} alt="" width={20} height={20} />
                             <span>
                               {numberWithCommas(toDisplay(item.offerAmount), undefined, { maximumFractionDigits: 6 })}
                             </span>
@@ -118,7 +106,7 @@ const TransactionHistory = ({
                         <div className={`${styles.receive}`}>
                           <div className={styles.titleItem}>Receive amount</div>
                           <div className={styles.amount}>
-                            <div>{QuoteTokenIcon}</div>
+                            <img src={QuoteTokenIcon} alt="" width={20} height={20} />
                             <span>
                               {numberWithCommas(toDisplay(item.returnAmount), undefined, { maximumFractionDigits: 6 })}
                             </span>
@@ -192,7 +180,7 @@ const TransactionHistory = ({
                           </td>
                           <td className={`${styles.pay}`}>
                             <div className={styles.amount}>
-                              <div>{BaseTokenIcon}</div>
+                              <img src={BaseTokenIcon} alt="" width={20} height={20} />
                               <span>
                                 {numberWithCommas(toDisplay(item.offerAmount), undefined, { maximumFractionDigits: 6 })}
                               </span>
@@ -201,7 +189,7 @@ const TransactionHistory = ({
                           </td>
                           <td className={`${styles.receive}`}>
                             <div className={styles.amount}>
-                              <div>{QuoteTokenIcon}</div>
+                              <img src={QuoteTokenIcon} width={20} height={20} alt="" />
                               <span>
                                 {numberWithCommas(toDisplay(item.returnAmount), undefined, {
                                   maximumFractionDigits: 6

diff --git a/src/pages/Pools/PoolDetail.tsx b/src/pages/Pools/PoolDetail.tsx
@@ -1,5 +1,5 @@
 import { MulticallQueryClient } from '@oraichain/common-contracts-sdk';
-import { BTC_CONTRACT, fetchRetry, toDisplay } from '@oraichain/oraidex-common';
+import { BTC_CONTRACT, fetchRetry, OraiIcon, toDisplay } from '@oraichain/oraidex-common';
 import { useQueryClient } from '@tanstack/react-query';
 import { isMobile } from '@walletconnect/browser-utils';
 import AddIcon from 'assets/icons/Add.svg?react';
@@ -12,7 +12,7 @@ import { formatNumberKMB, numberWithCommas } from 'helper/format';
 import useConfigReducer from 'hooks/useConfigReducer';
 import useLoadTokens from 'hooks/useLoadTokens';
 import useTheme from 'hooks/useTheme';
-import { network, oraichainTokensWithIcon } from 'initCommon';
+import { network, oraichainTokens, oraichainTokensWithIcon } from 'initCommon';
 import Content from 'layouts/Content';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
@@ -98,22 +98,22 @@ const PoolDetail: React.FC = () => {
   const baseToken = (token1?.contractAddress || token1?.denom) === params.base_denom ? token1 : token2;
   const quoteToken = (token2?.contractAddress || token2?.denom) === params.base_denom ? token1 : token2;
 
-  let BaseTokenIcon = DefaultIcon;
-  let QuoteTokenIcon = DefaultIcon;
-  const BaseTokenInOraichain = oraichainTokensWithIcon.find(
+  let BaseTokenIcon = OraiIcon;
+  let QuoteTokenIcon = OraiIcon;
+  const BaseTokenInOraichain = oraichainTokens.find(
     (oraiTokens) =>
       [oraiTokens.denom, oraiTokens.contractAddress].filter(Boolean).includes(baseToken.contractAddress) ||
       [oraiTokens.denom, oraiTokens.contractAddress].filter(Boolean).includes(baseToken.denom)
   );
-  const QuoteTokenInOraichain = oraichainTokensWithIcon.find(
+  const QuoteTokenInOraichain = oraichainTokens.find(
     (oraiTokens) =>
       [oraiTokens.denom, oraiTokens.contractAddress].filter(Boolean).includes(quoteToken.contractAddress) ||
       [oraiTokens.denom, oraiTokens.contractAddress].filter(Boolean).includes(quoteToken.denom)
   );
   if (BaseTokenInOraichain)
-    BaseTokenIcon = theme === 'light' ? BaseTokenInOraichain.IconLight : BaseTokenInOraichain.Icon;
+    BaseTokenIcon = theme === 'light' ? BaseTokenInOraichain.iconLight : BaseTokenInOraichain.icon;
   if (QuoteTokenInOraichain)
-    QuoteTokenIcon = theme === 'light' ? QuoteTokenInOraichain.IconLight : QuoteTokenInOraichain.Icon;
+    QuoteTokenIcon = theme === 'light' ? QuoteTokenInOraichain.iconLight : QuoteTokenInOraichain.icon;
 
   const isInactive = baseToken?.name === 'BTC (Legacy)' || quoteToken?.name === 'BTC (Legacy)';
 
@@ -159,8 +159,8 @@ const PoolDetail: React.FC = () => {
               <BackIcon className={styles.backIcon} />
               <div className={styles.info}>
                 <div className={classNames(styles.icons, styles[theme])}>
-                  {BaseTokenIcon && <BaseTokenIcon />}
-                  {QuoteTokenIcon && <QuoteTokenIcon />}
+                  <img src={BaseTokenIcon} alt="icon" width={30} height={30} />
+                  <img src={QuoteTokenIcon} alt="icon" width={30} height={30} />
                 </div>
                 <span>
                   {baseToken?.name?.toUpperCase()} /{' '}
@@ -174,18 +174,19 @@ const PoolDetail: React.FC = () => {
               {/* TODO: remove after pool close */}
               {ratioOraiBtc
                 ? `1 ${baseToken?.name} = ${numberWithCommas(1 / (ratioOraiBtc || 1), undefined, {
-                  maximumFractionDigits: 6
-                })}`
+                    maximumFractionDigits: 6
+                  })}`
                 : `1 ${baseToken?.name} = ${numberWithCommas(priceChange?.price || 0, undefined, {
-                  maximumFractionDigits: 6
-                })}`}
+                    maximumFractionDigits: 6
+                  })}`}
               {/* TODO: remove after pool close */} {quoteToken?.name === 'BTC (Legacy)' ? 'BTC' : quoteToken?.name}
               {isMobileMode ? <br /> : <div className={styles.divider}>|</div>}1{' '}
               {quoteToken?.name === 'BTC (Legacy)' ? 'BTC' : quoteToken?.name} ={' '}
               {ratioOraiBtc
                 ? `${numberWithCommas(ratioOraiBtc || 0, undefined, { maximumFractionDigits: 6 })} ${baseToken?.name}`
-                : `${numberWithCommas(1 / (priceChange?.price || 1) || 0, undefined, { maximumFractionDigits: 6 })} ${baseToken?.name
-                }`}
+                : `${numberWithCommas(1 / (priceChange?.price || 1) || 0, undefined, { maximumFractionDigits: 6 })} ${
+                    baseToken?.name
+                  }`}
             </div>
           </div>
           <div className={styles.addPosition}>
@@ -194,7 +195,8 @@ const PoolDetail: React.FC = () => {
               onClick={(event) => {
                 event.stopPropagation();
                 setPairDenomsDeposit(
-                  `${baseToken?.contractAddress || baseToken?.denom}_${quoteToken?.contractAddress || quoteToken?.denom
+                  `${baseToken?.contractAddress || baseToken?.denom}_${
+                    quoteToken?.contractAddress || quoteToken?.denom
                   }`
                 );
               }}
@@ -217,11 +219,6 @@ const PoolDetail: React.FC = () => {
             }}
           />
         </div>
-        {/* <div className={styles.summary}>
-          <div className={styles.chart}>
-            <ChartDetailSection pair={pair} symbol={poolDetailData?.info?.symbols} />
-          </div>
-        </div> */}
 
         <Tabs
           tabKey="tab"

diff --git a/src/pages/Pools/components/Earning/Earning.tsx b/src/pages/Pools/components/Earning/Earning.tsx
@@ -200,7 +200,7 @@ export const Earning = ({ onLiquidityChange }: { onLiquidityChange: () => void }
                   <div className={styles.assetEarning} key={idx}>
                     <div className={styles.title}>
                       {generateIcon(pendingReward)}
-                      <span>{pendingReward.denom.toUpperCase()} Earning</span>
+                      <span>{pendingReward.name.toUpperCase()} Earning</span>
                     </div>
                     <div className={styles.amountWrapper}>
                       <div className={styles.amount}>
@@ -219,7 +219,7 @@ export const Earning = ({ onLiquidityChange }: { onLiquidityChange: () => void }
                         <TokenBalance
                           balance={{
                             amount: pendingReward.amount,
-                            denom: pendingReward?.denom.toUpperCase(),
+                            denom: pendingReward?.name.toUpperCase(),
                             decimals: 6
                           }}
                           decimalScale={6}