diff --git a/src/components/Logo/index.tsx b/src/components/Logo/index.tsx index c69cbcabb0..f3b1b4b02a 100644 --- a/src/components/Logo/index.tsx +++ b/src/components/Logo/index.tsx @@ -5,7 +5,7 @@ import { ImageProps } from 'rebass' import styled from 'styled-components' import { useGetNativeTokenLogo } from 'components/CurrencyLogo' -import useChainsConfig from 'hooks/useChainsConfig' +import { NETWORKS_INFO } from 'hooks/useChainsConfig' import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo' const BAD_SRCS: { [tokenAddress: string]: true } = {} @@ -40,7 +40,6 @@ export default function Logo({ srcs, alt, ...rest }: LogoProps) { } export function NetworkLogo({ chainId, style = {} }: { chainId: ChainId; style?: CSSProperties }) { - const { NETWORKS_INFO } = useChainsConfig() const { icon } = NETWORKS_INFO[chainId] if (!icon) return null return Switch Network diff --git a/src/components/Select/MultipleChainSelect/SelectButton.tsx b/src/components/Select/MultipleChainSelect/SelectButton.tsx index 1b8a364208..94f26d5c39 100644 --- a/src/components/Select/MultipleChainSelect/SelectButton.tsx +++ b/src/components/Select/MultipleChainSelect/SelectButton.tsx @@ -3,7 +3,7 @@ import { Flex } from 'rebass' import styled from 'styled-components' import { ReactComponent as LogoKyber } from 'assets/svg/logo_kyber.svg' -import useChainsConfig from 'hooks/useChainsConfig' +import { NETWORKS_INFO } from 'hooks/useChainsConfig' import useTheme from 'hooks/useTheme' import { MultipleChainSelectProps, StyledLogo } from '.' @@ -26,7 +26,6 @@ const Label = styled.span<{ labelColor?: string }>` type Props = MultipleChainSelectProps const SelectButton: React.FC = ({ selectedChainIds, chainIds, activeRender, activeStyle, labelColor }) => { const theme = useTheme() - const { NETWORKS_INFO } = useChainsConfig() const renderButtonBody = () => { if (selectedChainIds.length === chainIds.length) { diff --git a/src/components/Select/MultipleChainSelect/index.tsx b/src/components/Select/MultipleChainSelect/index.tsx index 88e68966b6..29e87a1839 100644 --- a/src/components/Select/MultipleChainSelect/index.tsx +++ b/src/components/Select/MultipleChainSelect/index.tsx @@ -9,7 +9,7 @@ import { ReactComponent as LogoKyber } from 'assets/svg/logo_kyber.svg' import Checkbox from 'components/CheckBox' import Select from 'components/Select' import { MouseoverTooltip } from 'components/Tooltip' -import useChainsConfig from 'hooks/useChainsConfig' +import useChainsConfig, { NETWORKS_INFO } from 'hooks/useChainsConfig' import useTheme from 'hooks/useTheme' import { ApplyButton } from './ApplyButton' @@ -113,8 +113,6 @@ const MultipleChainSelect: React.FC = ({ className, st setLocalSelectedChains(selectedChains) }, [selectedChains]) - const { NETWORKS_INFO } = useChainsConfig() - return ( () - const { NETWORKS_INFO } = useChainsConfig() return ( diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 03cc51e8a8..ea3788fc4d 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -13,7 +13,7 @@ import { MOCK_ACCOUNT_EVM, MOCK_ACCOUNT_SOLANA } from 'constants/env' import { isSupportedChainId } from 'constants/networks' import { NetworkInfo } from 'constants/networks/type' import { SUPPORTED_WALLET, SUPPORTED_WALLETS } from 'constants/wallets' -import useChainsConfig from 'hooks/useChainsConfig' +import { NETWORKS_INFO } from 'hooks/useChainsConfig' import { AppState } from 'state' import { useKyberSwapConfig } from 'state/application/hooks' import { detectInjectedType, isEVMWallet, isSolanaWallet } from 'utils' @@ -33,7 +33,6 @@ export function useActiveWeb3React(): { const rawChainIdState = useSelector(state => state.user.chainId) || ChainId.MAINNET const isWrongNetwork = !isSupportedChainId(rawChainIdState) const chainIdState = isWrongNetwork ? ChainId.MAINNET : rawChainIdState - const { NETWORKS_INFO } = useChainsConfig() /**Hook for EVM infos */ const { connector: connectedConnectorEVM, diff --git a/src/hooks/useChainsConfig.ts b/src/hooks/useChainsConfig.ts index fff000082c..686398bb76 100644 --- a/src/hooks/useChainsConfig.ts +++ b/src/hooks/useChainsConfig.ts @@ -2,7 +2,7 @@ import { ChainId } from '@kyberswap/ks-sdk-core' import { useMemo } from 'react' import { useGetChainsConfigurationQuery } from 'services/ksSetting' -import { MAINNET_NETWORKS, NETWORKS_INFO } from 'constants/networks' +import { MAINNET_NETWORKS, NETWORKS_INFO as NETWORKS_INFO_HARDCODE } from 'constants/networks' import { NetworkInfo } from 'constants/networks/type' import { useKyberswapGlobalConfig } from 'hooks/useKyberSwapConfig' @@ -15,7 +15,16 @@ export enum ChainState { export type ChainStateMap = { [chain in ChainId]: ChainState } -const defaultData = MAINNET_NETWORKS.map(chainId => NETWORKS_INFO[chainId]) +const cacheInfo: { [chain: string]: NetworkInfo } = {} +// todo danh, when chain setting from admin ready, update all place use this +export const NETWORKS_INFO = new Proxy(NETWORKS_INFO_HARDCODE, { + get(target, p) { + const prop = p as any as ChainId + return cacheInfo[prop] || target[prop] + }, +}) + +const defaultData = MAINNET_NETWORKS.map(chainId => NETWORKS_INFO_HARDCODE[chainId]) export default function useChainsConfig() { const { data } = useGetChainsConfigurationQuery() const globalConfig = useKyberswapGlobalConfig() @@ -25,20 +34,14 @@ export default function useChainsConfig() { const chains: NetworkInfo[] = (data || defaultData).map(chain => { const chainId = +chain.chainId as ChainId const chainState = hasConfig ? globalConfig?.chainStates?.[chainId] : ChainState.ACTIVE - return { - ...NETWORKS_INFO[chainId], + const info = { + ...NETWORKS_INFO_HARDCODE[chainId], ...chain, // BE config chainId, state: chainState, } - }) - - const NETWORKS_INFO_WRAPPED = new Proxy(NETWORKS_INFO, { - get(target, p) { - const prop = p as any as ChainId - const info = chains.find(e => e.chainId === +prop) - return info || target[prop] - }, + cacheInfo[chainId] = info + return info }) return { @@ -46,7 +49,6 @@ export default function useChainsConfig() { supportedChains: chains.filter(e => [ChainState.ACTIVE, ChainState.NEW, ChainState.MAINTENANCE].includes(e.state), ), - NETWORKS_INFO: NETWORKS_INFO_WRAPPED, // todo danh, when chain setting from admin ready, update all place use this } }, [data, globalConfig]) } diff --git a/src/pages/Bridge/BridgeTransferHistory/RouteCell.tsx b/src/pages/Bridge/BridgeTransferHistory/RouteCell.tsx index fe15540ee5..5b812d4c3a 100644 --- a/src/pages/Bridge/BridgeTransferHistory/RouteCell.tsx +++ b/src/pages/Bridge/BridgeTransferHistory/RouteCell.tsx @@ -5,7 +5,7 @@ import { useTheme } from 'styled-components' import QuestionHelper from 'components/QuestionHelper' import { SUPPORTED_NETWORKS } from 'constants/networks' -import useChainsConfig from 'hooks/useChainsConfig' +import { NETWORKS_INFO } from 'hooks/useChainsConfig' type Props = { fromChainID: number @@ -13,7 +13,6 @@ type Props = { } const RouteCell: React.FC = ({ fromChainID, toChainID }) => { const theme = useTheme() - const { NETWORKS_INFO } = useChainsConfig() const renderChainIcon = (chainId: number) => { if (SUPPORTED_NETWORKS.includes(chainId)) { diff --git a/src/pages/Campaign/CampaignButtonWithOptions.tsx b/src/pages/Campaign/CampaignButtonWithOptions.tsx index 2a25c33124..d0aecee75a 100644 --- a/src/pages/Campaign/CampaignButtonWithOptions.tsx +++ b/src/pages/Campaign/CampaignButtonWithOptions.tsx @@ -16,7 +16,7 @@ import { ButtonPrimary } from 'components/Button' import { REWARD_SERVICE_API } from 'constants/env' import { BIG_INT_ZERO, DEFAULT_SIGNIFICANT } from 'constants/index' import { useActiveWeb3React, useWeb3React, useWeb3Solana } from 'hooks' -import useChainsConfig from 'hooks/useChainsConfig' +import { NETWORKS_INFO } from 'hooks/useChainsConfig' import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import { useOnClickOutside } from 'hooks/useOnClickOutside' import useTheme from 'hooks/useTheme' @@ -230,7 +230,6 @@ export default function CampaignButtonWithOptions({ } const handleSwapNow = useSwapNowHandler() - const { NETWORKS_INFO } = useChainsConfig() return ( = ({ poolEarning, chainId }) => { const theme = useTheme() - const { NETWORKS_INFO } = useChainsConfig() const networkInfo = NETWORKS_INFO[chainId] const [isExpanded, setExpanded] = useState(false) const tabletView = useMedia(`(max-width: ${WIDTHS[3]}px)`) diff --git a/src/pages/MyEarnings/ElasticPools/SinglePool/index.tsx b/src/pages/MyEarnings/ElasticPools/SinglePool/index.tsx index e27503ff3d..4a47727948 100644 --- a/src/pages/MyEarnings/ElasticPools/SinglePool/index.tsx +++ b/src/pages/MyEarnings/ElasticPools/SinglePool/index.tsx @@ -19,7 +19,7 @@ import { MouseoverTooltip, TextDashed } from 'components/Tooltip' import { APRTooltipContent } from 'components/YieldPools/FarmingPoolAPRCell' import { APP_PATHS, ELASTIC_BASE_FEE_UNIT, PROMM_ANALYTICS_URL } from 'constants/index' import { VERSION } from 'constants/v2' -import useChainsConfig from 'hooks/useChainsConfig' +import { NETWORKS_INFO } from 'hooks/useChainsConfig' import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel' import useTheme from 'hooks/useTheme' import SharePoolEarningsButton from 'pages/MyEarnings/ElasticPools/SinglePool/SharePoolEarningsButton' @@ -61,7 +61,6 @@ const SinglePool: React.FC = ({ poolEarning, chainId, positionEarnings, p const [isExpanded, setExpanded] = useState(false) const tabletView = useMedia(`(max-width: ${WIDTHS[3]}px)`) const mobileView = useMedia(`(max-width: ${WIDTHS[2]}px)`) - const { NETWORKS_INFO } = useChainsConfig() const shouldExpandAllPools = useAppSelector(state => state.myEarnings.shouldExpandAllPools) diff --git a/src/pages/NotificationCenter/PriceAlerts/NetworkInlineDisplay.tsx b/src/pages/NotificationCenter/PriceAlerts/NetworkInlineDisplay.tsx index 893c71e85e..48a90eb911 100644 --- a/src/pages/NotificationCenter/PriceAlerts/NetworkInlineDisplay.tsx +++ b/src/pages/NotificationCenter/PriceAlerts/NetworkInlineDisplay.tsx @@ -2,14 +2,13 @@ import { ChainId } from '@kyberswap/ks-sdk-core' import { Flex, Text } from 'rebass' import { NetworkLogo } from 'components/Logo' -import useChainsConfig from 'hooks/useChainsConfig' +import { NETWORKS_INFO } from 'hooks/useChainsConfig' import useTheme from 'hooks/useTheme' type Props = { chainId: ChainId } const NetworkInlineDisplay: React.FC = ({ chainId }) => { - const { NETWORKS_INFO } = useChainsConfig() const { name } = NETWORKS_INFO[chainId] const theme = useTheme()