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
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()