diff --git a/.env.dev b/.env.dev
index 8e846a857a..e455cb9425 100644
--- a/.env.dev
+++ b/.env.dev
@@ -37,7 +37,7 @@ VITE_OAUTH_CLIENT_ID=a2f76ad4-895f-401a-ba75-952a929d782c
VITE_BFF_API=https://kyberswap-bff.dev.kyberengineering.io/api
VITE_KYBER_AI_REFERRAL_ID=1
-VITE_KYBER_AI_TOPIC_ID=14
+VITE_KYBER_AI_TOPIC_ID=14,17
VITE_PRICE_ALERT_TOPIC_ID=13
VITE_ELASTIC_POOL_TOPIC_ID=12
VITE_BUCKET_NAME=ks-setting-a3aa20b7
diff --git a/.env.production b/.env.production
index 43b5b28a29..db6168b726 100644
--- a/.env.production
+++ b/.env.production
@@ -35,7 +35,7 @@ VITE_KYBER_DAO_STATS_API=https://kyberswap-dao-stats.kyberengineering.io
VITE_ENV=production
VITE_OAUTH_CLIENT_ID=8a95ced8-1530-45d0-bc15-a5614d1d8d08
VITE_KYBER_AI_REFERRAL_ID=1
-VITE_KYBER_AI_TOPIC_ID=9
+VITE_KYBER_AI_TOPIC_ID=9,11
VITE_PRICE_ALERT_TOPIC_ID=8
VITE_ELASTIC_POOL_TOPIC_ID=7
VITE_BFF_API=https://bff.kyberswap.com/api
diff --git a/src/components/Logo/index.tsx b/src/components/Logo/index.tsx
index 14690bcc74..c69cbcabb0 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 { NETWORKS_INFO } from 'constants/networks'
+import useChainsConfig from 'hooks/useChainsConfig'
import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
const BAD_SRCS: { [tokenAddress: string]: true } = {}
@@ -40,6 +40,7 @@ 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 dcaa24a5d7..1b8a364208 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 { NETWORKS_INFO } from 'constants/networks'
+import useChainsConfig from 'hooks/useChainsConfig'
import useTheme from 'hooks/useTheme'
import { MultipleChainSelectProps, StyledLogo } from '.'
@@ -26,6 +26,7 @@ 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 6252b3179e..88e68966b6 100644
--- a/src/components/Select/MultipleChainSelect/index.tsx
+++ b/src/components/Select/MultipleChainSelect/index.tsx
@@ -9,7 +9,6 @@ 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 { NETWORKS_INFO } from 'constants/networks'
import useChainsConfig from 'hooks/useChainsConfig'
import useTheme from 'hooks/useTheme'
@@ -114,6 +113,8 @@ const MultipleChainSelect: React.FC = ({ className, st
setLocalSelectedChains(selectedChains)
}, [selectedChains])
+ const { NETWORKS_INFO } = useChainsConfig()
+
return (
()
+ const { NETWORKS_INFO } = useChainsConfig()
return (
diff --git a/src/constants/env.ts b/src/constants/env.ts
index 50f70df7a4..bb4b90ebd0 100644
--- a/src/constants/env.ts
+++ b/src/constants/env.ts
@@ -45,7 +45,7 @@ export const KYBER_DAO_STATS_API = required('KYBER_DAO_STATS_API')
export const OAUTH_CLIENT_ID = required('OAUTH_CLIENT_ID')
export const BFF_API = required('BFF_API')
export const KYBER_AI_REFERRAL_ID = required('KYBER_AI_REFERRAL_ID')
-export const KYBER_AI_TOPIC_ID = required('KYBER_AI_TOPIC_ID')
+export const KYBER_AI_TOPIC_ID = required('KYBER_AI_TOPIC_ID').split(',')
export const PRICE_ALERT_TOPIC_ID = required('PRICE_ALERT_TOPIC_ID')
export const ELASTIC_POOL_TOPIC_ID = required('ELASTIC_POOL_TOPIC_ID')
export const BUCKET_NAME = required('BUCKET_NAME')
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index ddff6ebf87..878acbc1c0 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -9,9 +9,10 @@ import { useSearchParams } from 'react-router-dom'
import { blocto, gnosisSafe, krystalWalletConnectV2, walletConnectV2 } from 'constants/connectors/evm'
import { MOCK_ACCOUNT_EVM, MOCK_ACCOUNT_SOLANA } from 'constants/env'
-import { NETWORKS_INFO, isSupportedChainId } from 'constants/networks'
+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 { AppState } from 'state'
import { useKyberSwapConfig } from 'state/application/hooks'
import { detectInjectedType, isEVMWallet, isSolanaWallet } from 'utils'
@@ -31,7 +32,7 @@ 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 b522619af0..fff000082c 100644
--- a/src/hooks/useChainsConfig.ts
+++ b/src/hooks/useChainsConfig.ts
@@ -32,11 +32,21 @@ export default function useChainsConfig() {
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]
+ },
+ })
+
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])
}
diff --git a/src/hooks/useNotification/index.ts b/src/hooks/useNotification/index.ts
index ceab132410..652d3dda88 100644
--- a/src/hooks/useNotification/index.ts
+++ b/src/hooks/useNotification/index.ts
@@ -60,7 +60,7 @@ const useNotification = () => {
id: Date.now() + i,
isSubscribed: e?.topics?.every(e => e.isSubscribed),
// special topic ids
- isKyberAI: e?.topics?.some(e => e.id + '' === KYBER_AI_TOPIC_ID),
+ isKyberAI: e?.topics?.some(e => KYBER_AI_TOPIC_ID.includes(e.id + '')),
isPriceAlert: e?.topics?.some(e => e.id + '' === PRICE_ALERT_TOPIC_ID),
isPriceElasticPool: e?.topics?.some(e => e.id + '' === ELASTIC_POOL_TOPIC_ID),
}))
diff --git a/src/pages/Bridge/BridgeTransferHistory/RouteCell.tsx b/src/pages/Bridge/BridgeTransferHistory/RouteCell.tsx
index 56190b16de..fe15540ee5 100644
--- a/src/pages/Bridge/BridgeTransferHistory/RouteCell.tsx
+++ b/src/pages/Bridge/BridgeTransferHistory/RouteCell.tsx
@@ -4,7 +4,8 @@ import { Box, Flex } from 'rebass'
import { useTheme } from 'styled-components'
import QuestionHelper from 'components/QuestionHelper'
-import { NETWORKS_INFO, SUPPORTED_NETWORKS } from 'constants/networks'
+import { SUPPORTED_NETWORKS } from 'constants/networks'
+import useChainsConfig from 'hooks/useChainsConfig'
type Props = {
fromChainID: number
@@ -12,6 +13,7 @@ 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 71fa5e655c..84a6acc782 100644
--- a/src/pages/Campaign/CampaignButtonWithOptions.tsx
+++ b/src/pages/Campaign/CampaignButtonWithOptions.tsx
@@ -14,8 +14,8 @@ import { OptionsContainer } from 'components'
import { ButtonPrimary } from 'components/Button'
import { REWARD_SERVICE_API } from 'constants/env'
import { BIG_INT_ZERO, DEFAULT_SIGNIFICANT } from 'constants/index'
-import { NETWORKS_INFO } from 'constants/networks'
import { useActiveWeb3React, useWeb3React, useWeb3Solana } from 'hooks'
+import useChainsConfig from 'hooks/useChainsConfig'
import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
import { useOnClickOutside } from 'hooks/useOnClickOutside'
import useTheme from 'hooks/useTheme'
@@ -216,6 +216,7 @@ 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 65e53004ce..e27503ff3d 100644
--- a/src/pages/MyEarnings/ElasticPools/SinglePool/index.tsx
+++ b/src/pages/MyEarnings/ElasticPools/SinglePool/index.tsx
@@ -18,8 +18,8 @@ import Loader from 'components/Loader'
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 { NETWORKS_INFO } from 'constants/networks'
import { VERSION } from 'constants/v2'
+import useChainsConfig from 'hooks/useChainsConfig'
import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
import useTheme from 'hooks/useTheme'
import SharePoolEarningsButton from 'pages/MyEarnings/ElasticPools/SinglePool/SharePoolEarningsButton'
@@ -61,6 +61,7 @@ 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/MyEarnings/hooks.ts b/src/pages/MyEarnings/hooks.ts
index 1914cdbcbd..d8004d5fee 100644
--- a/src/pages/MyEarnings/hooks.ts
+++ b/src/pages/MyEarnings/hooks.ts
@@ -10,7 +10,7 @@ import { useDispatch } from 'react-redux'
import { POOLS_BULK_WITH_PAGINATION, POOLS_HISTORICAL_BULK_WITH_PAGINATION, POOL_COUNT } from 'apollo/queries'
import { didUserReject } from 'constants/connectors/utils'
-import { NETWORKS_INFO, ONLY_DYNAMIC_FEE_CHAINS, isEVM as isEVMChain } from 'constants/networks'
+import { ONLY_DYNAMIC_FEE_CHAINS, isEVM as isEVMChain } from 'constants/networks'
import { useActiveWeb3React, useWeb3React } from 'hooks'
import { Position as SubgraphLegacyPosition, config, parsePosition } from 'hooks/useElasticLegacy'
import useTransactionDeadline from 'hooks/useTransactionDeadline'
@@ -167,7 +167,6 @@ async function getBulkPoolDataWithPagination(
function usePoolCountInSubgraph(chainId: ChainId): number {
const [poolCount, setPoolCount] = useState(0)
const isEVM = isEVMChain(chainId)
- const networkInfo = NETWORKS_INFO[chainId]
const { classicClient } = useKyberSwapConfig(chainId)
useEffect(() => {
@@ -185,7 +184,7 @@ function usePoolCountInSubgraph(chainId: ChainId): number {
}
getPoolCount()
- }, [networkInfo, isEVM, classicClient])
+ }, [chainId, isEVM, classicClient])
return poolCount
}
diff --git a/src/pages/NotificationCenter/PriceAlerts/NetworkInlineDisplay.tsx b/src/pages/NotificationCenter/PriceAlerts/NetworkInlineDisplay.tsx
index 7ea1bb55f5..893c71e85e 100644
--- a/src/pages/NotificationCenter/PriceAlerts/NetworkInlineDisplay.tsx
+++ b/src/pages/NotificationCenter/PriceAlerts/NetworkInlineDisplay.tsx
@@ -2,13 +2,14 @@ import { ChainId } from '@kyberswap/ks-sdk-core'
import { Flex, Text } from 'rebass'
import { NetworkLogo } from 'components/Logo'
-import { NETWORKS_INFO } from 'constants/networks'
+import useChainsConfig 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()
diff --git a/src/pages/TrueSightV2/components/SubscireButtonKyberAI.tsx b/src/pages/TrueSightV2/components/SubscireButtonKyberAI.tsx
index 07efbe8441..b71c2328de 100644
--- a/src/pages/TrueSightV2/components/SubscireButtonKyberAI.tsx
+++ b/src/pages/TrueSightV2/components/SubscireButtonKyberAI.tsx
@@ -8,7 +8,7 @@ export default function SubscribeButtonKyberAI({ type, tooltip }: { type: 'ranki
return (
mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SUBSCRIBE_CLICK, {
source: type,