feat: use chains config from admin

src/components/Header/web3/NetworkModal/Networks.tsx

@@ -1,4 +1,5 @@
 import { ChainId, getChainType } from '@kyberswap/ks-sdk-core'
+import { Trans, t } from '@lingui/macro'
 import { darken, rgba } from 'polished'
 import { stringify } from 'querystring'
 import React from 'react'
@@ -8,15 +9,30 @@ import styled, { css } from 'styled-components'
 
 import { ButtonEmpty } from 'components/Button'
 import { MouseoverTooltip } from 'components/Tooltip'
-import { MAINNET_NETWORKS, NETWORKS_INFO } from 'constants/networks'
+import { NetworkInfo } from 'constants/networks/type'
 import { Z_INDEXS } from 'constants/styles'
 import { SUPPORTED_WALLETS } from 'constants/wallets'
 import { useActiveWeb3React } from 'hooks'
+import useChainsConfig, { ChainState } from 'hooks/useChainsConfig'
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import useTheme from 'hooks/useTheme'
 import { useChangeNetwork } from 'hooks/web3/useChangeNetwork'
 import { useIsDarkMode } from 'state/user/hooks'
 
+const NewLabel = styled.span`
+  font-size: 12px;
+  color: ${({ theme }) => theme.red};
+  margin-left: 2px;
+  margin-top: -10px;
+`
+
+const MaintainLabel = styled.span`
+  font-size: 8px;
+  color: ${({ theme }) => theme.red};
+  margin-left: 2px;
+  margin-top: -10px;
+`
+
 const ListItem = styled.div<{ selected?: boolean }>`
   width: 100%;
   display: flex;
@@ -157,11 +173,14 @@ const Networks = ({
     }
   }
 
+  const { supportedChains } = useChainsConfig()
+
   return (
     <NetworkList mt={mt} mb={mb}>
-      {MAINNET_NETWORKS.map((itemChainId: ChainId, i: number) => {
-        const { iconDark, icon, name } = NETWORKS_INFO[itemChainId]
-        const disabled = !isAcceptedTerm || (activeChainIds ? !activeChainIds?.includes(itemChainId) : false)
+      {supportedChains.map(({ chainId: itemChainId, iconDark, icon, name, state }: NetworkInfo, i: number) => {
+        const isMaintenance = state === ChainState.MAINTENANCE
+        const disabled =
+          !isAcceptedTerm || (activeChainIds ? !activeChainIds?.includes(itemChainId) : false) || isMaintenance
         const selected = selectedId === itemChainId && !isWrongNetwork
 
         const imgSrc = (isDarkMode ? iconDark : icon) || icon
@@ -175,7 +194,13 @@ const Networks = ({
           <MouseoverTooltip
             style={{ zIndex: Z_INDEXS.MODAL + 1 }}
             key={itemChainId}
-            text={disabled ? disabledMsg : ''}
+            text={
+              disabled
+                ? isMaintenance
+                  ? t`Chain under maintenance. We will be back as soon as possible`
+                  : disabledMsg
+                : ''
+            }
             width="fit-content"
           >
             <SelectNetworkButton
@@ -197,6 +222,16 @@ const Networks = ({
                     {name}
                   </Text>
                 </Flex>
+                {state === ChainState.NEW && (
+                  <NewLabel>
+                    <Trans>New</Trans>
+                  </NewLabel>
+                )}
+                {isMaintenance && (
+                  <MaintainLabel>
+                    <Trans>Maintainance</Trans>
+                  </MaintainLabel>
+                )}
                 {selected && !walletKey && <CircleGreen />}
                 {walletKey && (
                   <WalletWrapper>

src/constants/networks/type.ts

@@ -2,6 +2,7 @@ import { ChainId } from '@kyberswap/ks-sdk-core'
 import { PublicKey } from '@solana/web3.js'
 
 import { EnvKeys } from 'constants/env'
+import { ChainState } from 'hooks/useChainsConfig'
 
 export interface NetworkInfo {
   readonly chainId: ChainId
@@ -37,6 +38,7 @@ export interface NetworkInfo {
   //   USDT: Token
   // }
   readonly geckoTermialId: string | null
+  readonly state?: ChainState
 }
 
 export interface EVMNetworkInfo extends NetworkInfo {

src/hooks/useChainsConfig.ts

@@ -0,0 +1,42 @@
+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 { NetworkInfo } from 'constants/networks/type'
+import { useKyberswapGlobalConfig } from 'hooks/useKyberSwapConfig'
+
+export enum ChainState {
+  NEW = 'new',
+  ACTIVE = 'active',
+  INACTIVE = 'inactive',
+  MAINTENANCE = 'maintainain',
+}
+
+export type ChainStateMap = { [chain in ChainId]: ChainState }
+
+const defaultData = MAINNET_NETWORKS.map(chainId => NETWORKS_INFO[chainId])
+export default function useChainsConfig() {
+  const { data } = useGetChainsConfigurationQuery()
+  const globalConfig = useKyberswapGlobalConfig()
+
+  return useMemo(() => {
+    const hasConfig = !!data
+    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],
+        ...chain, // BE config
+        chainId,
+        state: chainState,
+      }
+    })
+    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),
+      ),
+    }
+  }, [data, globalConfig])
+}

src/hooks/useKyberSwapConfig.ts

@@ -16,6 +16,7 @@ import { NETWORKS_INFO, SUPPORTED_NETWORKS, isEVM, isSolana } from 'constants/ne
 import ethereumInfo from 'constants/networks/ethereum'
 import solanaInfo from 'constants/networks/solana'
 import { AppJsonRpcProvider } from 'constants/providers'
+import { ChainStateMap } from 'hooks/useChainsConfig'
 import { AppState } from 'state'
 import { createClient } from 'utils/client'
 
@@ -58,6 +59,7 @@ type KyberswapGlobalConfig = {
   aggregatorDomain: string
   aggregatorAPI: string
   isEnableAuthenAggregator: boolean
+  chainStates: ChainStateMap
 }
 
 const parseGlobalResponse = (
@@ -68,6 +70,7 @@ const parseGlobalResponse = (
   const aggregatorDomain = data?.aggregator ?? AGGREGATOR_API
   const isEnableAuthenAggregator = !!data?.isEnableAuthenAggregator
   return {
+    chainStates: data?.chainStates || ({} as ChainStateMap),
     aggregatorDomain,
     aggregatorAPI: `${aggregatorDomain}/${NETWORKS_INFO[chainId].aggregatorRoute}/route/encode`,
     isEnableAuthenAggregator,

src/pages/About/AboutKyberSwap/index.tsx

@@ -49,9 +49,10 @@ import AntiSnippingAttack from 'components/Icons/AntiSnippingAttack'
 import ZkSyncFull from 'components/Icons/ZkSyncFull'
 import Loader from 'components/Loader'
 import { APP_PATHS } from 'constants/index'
-import { MAINNET_NETWORKS, NETWORKS_INFO } from 'constants/networks'
+import { NETWORKS_INFO } from 'constants/networks'
 import { VERSION } from 'constants/v2'
 import { useActiveWeb3React } from 'hooks'
+import useChainsConfig from 'hooks/useChainsConfig'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { useGlobalData } from 'state/about/hooks'
@@ -121,6 +122,7 @@ const ForTraderInfoCell = styled.div`
 export const KSStatistic = () => {
   const theme = useTheme()
   const upToLarge = useMedia(`(max-width: ${MEDIA_WIDTHS.upToLarge}px)`)
+  const { supportedChains } = useChainsConfig()
 
   return (
     <Box sx={{ position: 'relative', marginTop: '20px' }}>
@@ -153,7 +155,7 @@ export const KSStatistic = () => {
         <ForTraderInfoRow>
           <ForTraderInfoCell>
             <Text fontWeight="600" fontSize="24px">
-              {MAINNET_NETWORKS.length}+
+              {supportedChains.length}+
             </Text>
             <Text color={theme.subText} marginTop="4px" fontSize="14px">
               <Trans>Chains</Trans>
@@ -475,6 +477,8 @@ function AboutKyberSwap() {
     )
   }
 
+  const { supportedChains } = useChainsConfig()
+
   return (
     <div style={{ position: 'relative', background: isDarkMode ? theme.buttonBlack : theme.white, width: '100%' }}>
       <AboutPage>
@@ -495,14 +499,10 @@ function AboutKyberSwap() {
           </Text>
 
           <SupportedChain>
-            {MAINNET_NETWORKS.map(chain => (
+            {supportedChains.map(({ chainId: chain, iconDark, icon, name }) => (
               <img
-                src={
-                  isDarkMode && NETWORKS_INFO[chain].iconDark
-                    ? NETWORKS_INFO[chain].iconDark || NETWORKS_INFO[chain].icon
-                    : NETWORKS_INFO[chain].icon
-                }
-                alt={NETWORKS_INFO[chain].name}
+                src={isDarkMode && iconDark ? iconDark || icon : icon}
+                alt={name}
                 key={chain}
                 width="36px"
                 height="36px"

src/pages/MyEarnings/MultipleChainSelect/PopoverBody.tsx

@@ -17,6 +17,7 @@ import {
   SUPPORTED_NETWORKS_FOR_MY_EARNINGS,
 } 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 { AppState } from 'state'
@@ -107,6 +108,7 @@ const PopoverBody: React.FC<Props> = ({ onClose }) => {
 
   const isLegacy = useAppSelector(state => state.myEarnings.activeTab === VERSION.ELASTIC_LEGACY)
   const isClassic = useAppSelector(state => state.myEarnings.activeTab === VERSION.CLASSIC)
+  const { activeChains } = useChainsConfig()
 
   const comingSoonList = isLegacy
     ? COMING_SOON_NETWORKS_FOR_MY_EARNINGS_LEGACY
@@ -121,7 +123,9 @@ const PopoverBody: React.FC<Props> = ({ onClose }) => {
 
   const [localSelectedChains, setLocalSelectedChains] = useState(() => selectedChains)
 
-  const networkList = SUPPORTED_NETWORKS_FOR_MY_EARNINGS.filter(item => !comingSoonList.includes(item))
+  const networkList = SUPPORTED_NETWORKS_FOR_MY_EARNINGS.filter(
+    item => !comingSoonList.includes(item) && activeChains.some(e => e.chainId === item),
+  )
 
   const isAllSelected = localSelectedChains.length === networkList.length
   const handleChangeChains = (chains: ChainId[]) => {

src/services/ksSetting.ts

@@ -5,6 +5,7 @@ import { Connection } from '@solana/web3.js'
 
 import { KS_SETTING_API } from 'constants/env'
 import { AppJsonRpcProvider } from 'constants/providers'
+import { ChainStateMap } from 'hooks/useChainsConfig'
 import { TokenInfo } from 'state/lists/wrappedTokenInfo'
 import { TopToken } from 'state/topTokens/type'
 
@@ -41,6 +42,7 @@ export type KyberswapGlobalConfigurationResponse = {
     config: {
       aggregator: string
       isEnableAuthenAggregator: boolean
+      chainStates: ChainStateMap
     }
   }
 }
@@ -77,6 +79,20 @@ const ksSettingApi = createApi({
         },
       }),
     }),
+    getChainsConfiguration: builder.query<{ chainId: string; name: string; icon: string }[], void>({
+      query: () => ({
+        url: '/configurations/fetch',
+        params: {
+          serviceCode: `chains`,
+        },
+      }),
+      transformResponse: (data: any) =>
+        data?.data?.config?.map((e: any) => ({
+          ...e,
+          name: e.displayName,
+          icon: e.logoUrl,
+        })),
+    }),
 
     getTokenList: builder.query<
       TokenListResponse,
@@ -111,6 +127,7 @@ export const {
   useGetTokenListQuery,
   useImportTokenMutation,
   useLazyGetTopTokensQuery,
+  useGetChainsConfigurationQuery,
 } = ksSettingApi
 
 export default ksSettingApi

src/state/lists/updater.ts

@@ -1,7 +1,7 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
-import { useLazyGetTokenListQuery } from 'services/ksSetting'
+import { useGetChainsConfigurationQuery, useLazyGetTokenListQuery } from 'services/ksSetting'
 
 import { MAINNET_NETWORKS } from 'constants/networks'
 import { TokenMap, formatAndCacheToken } from 'hooks/Tokens'
@@ -29,6 +29,7 @@ export default function Updater(): null {
   const dispatch = useDispatch<AppDispatch>()
 
   const [fetchTokenList] = useLazyGetTokenListQuery()
+  useGetChainsConfigurationQuery()
 
   useEffect(() => {
     const getTokens = async () => {