From 7c75443688f02fa411ea00b050ead685c0df9289 Mon Sep 17 00:00:00 2001 From: trungbach Date: Thu, 5 Dec 2024 16:32:24 +0700 Subject: [PATCH] feat: update icon handling and styles across multiple components for consistency --- .../WalletByNetwork/WalletByNetwork.tsx | 8 ++-- src/helper/index.tsx | 25 +++++++---- src/libs/contractSingleton.ts | 4 +- .../Balance/TransferConvertToken/index.tsx | 14 +++---- .../Pool-V3/components/PositionItem/index.tsx | 8 +++- .../components/TransactionHistory/index.tsx | 28 ++++--------- src/pages/Pools/PoolDetail.tsx | 41 +++++++++---------- .../Pools/components/Earning/Earning.tsx | 4 +- .../components/OverviewPool/OverviewPool.tsx | 16 ++++---- .../components/TransactionHistory/index.tsx | 21 +++++----- src/pages/Pools/index.module.scss | 10 ++--- src/pages/Pools/index.tsx | 16 ++++---- 12 files changed, 93 insertions(+), 102 deletions(-) diff --git a/src/components/WalletManagement/ModalChooseWallet/WalletByNetwork/WalletByNetwork.tsx b/src/components/WalletManagement/ModalChooseWallet/WalletByNetwork/WalletByNetwork.tsx index c79811cb5..1a8e6e89e 100644 --- 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 (
- + NetworkIcon
); }); diff --git a/src/helper/index.tsx b/src/helper/index.tsx index 42e5816b6..e1afd22c4 100644 --- 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 ? ( - + ) : ( - + ); } return ; } else { - const networkIcon = chainIcons.find((chain) => chain.chainId === chainId); + const networkIcon = chainInfos.find((chain) => chain.chainId === chainId); if (networkIcon) { return isLightTheme ? ( - + ) : ( - + ); } diff --git a/src/libs/contractSingleton.ts b/src/libs/contractSingleton.ts index 050aff6dc..c2a981af7 100644 --- 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 index 95c85657d..2553bf122 100644 --- 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 = ({
{theme === 'light' ? ( - toNetwork.IconLight ? ( - - ) : ( - - ) + chainSymbolImageUrl ) : ( - + chainSymbolImageUrl )}
{toNetwork.chainName} @@ -324,7 +320,7 @@ const TransferConvertToken: FC = ({ {net && (
- + chainSymbolImageUrl
{net.chainName}
diff --git a/src/pages/Pool-V3/components/PositionItem/index.tsx b/src/pages/Pool-V3/components/PositionItem/index.tsx index a3b6e4030..ad4014181 100644 --- 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 &&
} {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 }) => {
- {theme === 'light' ? : } + {theme === 'light' ? ( + tokenIncentive + ) : ( + tokenIncentive + )} {toDisplay(incentives[incent].toString())} {tokenIncentive?.name}
diff --git a/src/pages/Pool-V3/components/TransactionHistory/index.tsx b/src/pages/Pool-V3/components/TransactionHistory/index.tsx index 5dec683bf..d8cf77e5d 100644 --- 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' ? ( - icon - ) : ( - icon - ); - if (returnToken) - QuoteTokenIcon = - theme === 'light' ? ( - icon - ) : ( - 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 = ({
Pay amount
-
{BaseTokenIcon}
+ {numberWithCommas(toDisplay(item.offerAmount), undefined, { maximumFractionDigits: 6 })} @@ -118,7 +106,7 @@ const TransactionHistory = ({
Receive amount
-
{QuoteTokenIcon}
+ {numberWithCommas(toDisplay(item.returnAmount), undefined, { maximumFractionDigits: 6 })} @@ -192,7 +180,7 @@ const TransactionHistory = ({
-
{BaseTokenIcon}
+ {numberWithCommas(toDisplay(item.offerAmount), undefined, { maximumFractionDigits: 6 })} @@ -201,7 +189,7 @@ const TransactionHistory = ({
-
{QuoteTokenIcon}
+ {numberWithCommas(toDisplay(item.returnAmount), undefined, { maximumFractionDigits: 6 diff --git a/src/pages/Pools/PoolDetail.tsx b/src/pages/Pools/PoolDetail.tsx index cc8db8ad2..9d990739b 100644 --- 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 = () => {
- {BaseTokenIcon && } - {QuoteTokenIcon && } + icon + icon
{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 ?
:
|
}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 + }`}
@@ -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 = () => { }} />
- {/*
-
- -
-
*/} void }
{generateIcon(pendingReward)} - {pendingReward.denom.toUpperCase()} Earning + {pendingReward.name.toUpperCase()} Earning
@@ -219,7 +219,7 @@ export const Earning = ({ onLiquidityChange }: { onLiquidityChange: () => void }
- {BaseTokenIcon && } + {oraiBtcAllocation.oraiBalanceDisplay}
- {QuoteTokenIcon && } + {oraiBtcAllocation.btcBalanceDisplay}
) : (
- {BaseTokenIcon && } + {formatNumberKMB(toDisplay(pairAmountInfoData?.token1Amount || '0'), false)}
- {QuoteTokenIcon && } + {formatNumberKMB(toDisplay(pairAmountInfoData?.token2Amount || '0'), false)} diff --git a/src/pages/Pools/components/TransactionHistory/index.tsx b/src/pages/Pools/components/TransactionHistory/index.tsx index dd609bd3f..d5ba54767 100644 --- a/src/pages/Pools/components/TransactionHistory/index.tsx +++ b/src/pages/Pools/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'; @@ -20,7 +20,7 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp const mobileMode = isMobile(); const { data: prices } = useCoinGeckoPrices(); - let [BaseTokenIcon, QuoteTokenIcon] = [DefaultIcon, DefaultIcon]; + let [BaseTokenIcon, QuoteTokenIcon] = [OraiIcon, OraiIcon]; const baseDenom = baseToken && parseTokenInfoRawDenom(baseToken); const quoteDenom = quoteToken && parseTokenInfoRawDenom(quoteToken); @@ -50,13 +50,12 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp const returnToken = item.askDenom === quoteDenom ? quoteToken : baseToken; if (offerToken) - BaseTokenIcon = theme === 'light' ? offerToken.IconLight || offerToken.Icon : offerToken.Icon; + BaseTokenIcon = theme === 'light' ? offerToken.iconLight || offerToken.icon : offerToken.icon; if (returnToken) - QuoteTokenIcon = theme === 'light' ? returnToken.IconLight || returnToken.Icon : returnToken.Icon; + QuoteTokenIcon = theme === 'light' ? returnToken.iconLight || returnToken.icon : returnToken.icon; const returnUSD = getUsd(item.returnAmount, returnToken, prices); const feeUSD = getUsd(item.commissionAmount, returnToken, prices); - return (
@@ -109,7 +108,7 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp
Pay amount
- +
{numberWithCommas(toDisplay(item.offerAmount), undefined, { maximumFractionDigits: 6 })} @@ -122,7 +121,7 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp
Receive amount
- +
{numberWithCommas(toDisplay(item.returnAmount), undefined, { maximumFractionDigits: 6 })} @@ -169,10 +168,10 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp const returnToken = item.askDenom === quoteDenom ? quoteToken : baseToken; if (offerToken) - BaseTokenIcon = theme === 'light' ? offerToken.IconLight || offerToken.Icon : offerToken.Icon; + BaseTokenIcon = theme === 'light' ? offerToken.iconLight || offerToken.icon : offerToken.icon; if (returnToken) QuoteTokenIcon = - theme === 'light' ? returnToken.IconLight || returnToken.Icon : returnToken.Icon; + theme === 'light' ? returnToken.iconLight || returnToken.icon : returnToken.icon; const returnUSD = getUsd(item.returnAmount, returnToken, prices); const feeUSD = getUsd(item.commissionAmount, returnToken, prices); @@ -198,7 +197,7 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp
- +
{numberWithCommas(toDisplay(item.offerAmount), undefined, { maximumFractionDigits: 6 })} @@ -214,7 +213,7 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp
- +
{numberWithCommas(toDisplay(item.returnAmount), undefined, { diff --git a/src/pages/Pools/index.module.scss b/src/pages/Pools/index.module.scss index 95a5bbd7d..746b763be 100644 --- a/src/pages/Pools/index.module.scss +++ b/src/pages/Pools/index.module.scss @@ -60,13 +60,13 @@ &_right { position: relative; right: 10px; - width: 44px; - height: 44px; + width: 32px; + height: 32px; } &_left { - width: 44px; - height: 44px; + width: 32px; + height: 32px; } } @@ -74,4 +74,4 @@ font-weight: 500; font-size: 16px; } -} +} \ No newline at end of file diff --git a/src/pages/Pools/index.tsx b/src/pages/Pools/index.tsx index 733a35459..3e67c2f5d 100644 --- a/src/pages/Pools/index.tsx +++ b/src/pages/Pools/index.tsx @@ -1,4 +1,4 @@ -import { CW20_DECIMALS, TokenItemType, toDisplay } from '@oraichain/oraidex-common'; +import { CW20_DECIMALS, OraiIcon, TokenItemType, toDisplay } from '@oraichain/oraidex-common'; import { isMobile } from '@walletconnect/browser-utils'; import DefaultIcon from 'assets/icons/tokens.svg?react'; import useConfigReducer from 'hooks/useConfigReducer'; @@ -109,10 +109,10 @@ const Pools: React.FC<{}> = () => { }); const generateIcon = (baseToken: TokenItemType, quoteToken: TokenItemType): JSX.Element => { - let [BaseTokenIcon, QuoteTokenIcon] = [DefaultIcon, DefaultIcon]; + let [BaseTokenIcon, QuoteTokenIcon] = [OraiIcon, OraiIcon]; - if (baseToken) BaseTokenIcon = theme === 'light' ? baseToken.IconLight : baseToken.Icon; - if (quoteToken) QuoteTokenIcon = theme === 'light' ? quoteToken.IconLight : quoteToken.Icon; + if (baseToken) BaseTokenIcon = theme === 'light' ? baseToken.iconLight : baseToken.icon; + if (quoteToken) QuoteTokenIcon = theme === 'light' ? quoteToken.iconLight : quoteToken.icon; // TODO: hardcode reverse logo for ORAI/INJ,USDC/ORAIX, need to update later const isReverseLogo = reverseSymbolArr.some( @@ -121,16 +121,16 @@ const Pools: React.FC<{}> = () => { if (isReverseLogo) { return (
- - + +
); } return (
- - + +
); };