fix: crosschain lag (#2338)

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 <img src={icon} alt="Switch Network" style={style} />

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<Props> = ({ selectedChainIds, chainIds, activeRender, activeStyle, labelColor }) => {
   const theme = useTheme()
-  const { NETWORKS_INFO } = useChainsConfig()
 
   const renderButtonBody = () => {
     if (selectedChainIds.length === chainIds.length) {

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<MultipleChainSelectProps> = ({ className, st
     setLocalSelectedChains(selectedChains)
   }, [selectedChains])
 
-  const { NETWORKS_INFO } = useChainsConfig()
-
   return (
     <StyledSelect
       onHideMenu={onHideMenu}

src/components/YourCampaignTransactionsModal/index.tsx

@@ -11,7 +11,7 @@ import styled, { css } from 'styled-components'
 import Modal from 'components/Modal'
 import { CAMPAIGN_YOUR_TRANSACTIONS_ITEM_PER_PAGE } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
-import useChainsConfig from 'hooks/useChainsConfig'
+import { NETWORKS_INFO } from 'hooks/useChainsConfig'
 import useCopyClipboard from 'hooks/useCopyClipboard'
 import useTheme from 'hooks/useTheme'
 import { AppState } from 'state'
@@ -44,7 +44,6 @@ export default function YourCampaignTransactionsModal() {
 
   const [isCopied, setCopied] = useCopyClipboard()
   const copiedText = useRef<string>()
-  const { NETWORKS_INFO } = useChainsConfig()
 
   return (
     <Modal isOpen={isYourCampaignTransactionModalOpen} onDismiss={toggleYourCampaignTransactionModal} maxWidth={900}>

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<AppState, ChainId>(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,

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,28 +34,21 @@ 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 {
       activeChains: chains.filter(e => [ChainState.ACTIVE, ChainState.NEW].includes(e.state)),
       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])
 }

src/pages/Bridge/BridgeTransferHistory/RouteCell.tsx

@@ -5,15 +5,14 @@ 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
   toChainID: number
 }
 const RouteCell: React.FC<Props> = ({ fromChainID, toChainID }) => {
   const theme = useTheme()
-  const { NETWORKS_INFO } = useChainsConfig()
 
   const renderChainIcon = (chainId: number) => {
     if (SUPPORTED_NETWORKS.includes(chainId)) {

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

src/pages/Campaign/CampaignItem.tsx

@@ -14,7 +14,7 @@ import { ReactComponent as StarMultiplierIcon } from 'assets/svg/star_multiplier
 import ProgressBar from 'components/ProgressBar'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { DEFAULT_SIGNIFICANT, RESERVE_USD_DECIMALS } from 'constants/index'
-import useChainsConfig from 'hooks/useChainsConfig'
+import { NETWORKS_INFO } from 'hooks/useChainsConfig'
 import useTheme from 'hooks/useTheme'
 import { CampaignData, CampaignStatus, CampaignUserInfoStatus, ConditionGroupsType } from 'state/campaigns/actions'
 
@@ -120,7 +120,6 @@ function CampaignItem({ campaign, onSelectCampaign, isSelected, style }: Campaig
     console.log(error)
   }
 
-  const { NETWORKS_INFO } = useChainsConfig()
   const isOngoing = campaign.status === CampaignStatus.ONGOING
   const rCampaignName = campaign.name
   const rCampaignStatus = campaign.status === CampaignStatus.UPCOMING ? t`Upcoming` : isOngoing ? t`Ongoing` : t`Ended`

src/pages/MyEarnings/ClassicPools/SinglePool/index.tsx

@@ -18,7 +18,7 @@ import { MoneyBag } from 'components/Icons'
 import { MouseoverTooltip, TextDashed } from 'components/Tooltip'
 import { APRTooltipContent } from 'components/YieldPools/FarmingPoolAPRCell'
 import { APP_PATHS, DMM_ANALYTICS_URL, SUBGRAPH_AMP_MULTIPLIER } from 'constants/index'
-import useChainsConfig from 'hooks/useChainsConfig'
+import { NETWORKS_INFO } from 'hooks/useChainsConfig'
 import useTheme from 'hooks/useTheme'
 import Position from 'pages/MyEarnings/ClassicPools/SinglePool/Position'
 import { StatItem } from 'pages/MyEarnings/ElasticPools/SinglePool'
@@ -84,7 +84,6 @@ const getCurrencyFromTokenAddress = (
 
 const SinglePool: React.FC<Props> = ({ 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)`)

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<Props> = ({ 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)
 

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<Props> = ({ chainId }) => {
-  const { NETWORKS_INFO } = useChainsConfig()
   const { name } = NETWORKS_INFO[chainId]
   const theme = useTheme()