From 65297f588927ca188aa6bbf264cbd0e087cc076e Mon Sep 17 00:00:00 2001 From: Danh Date: Mon, 11 Sep 2023 23:32:01 +0700 Subject: [PATCH] use chains from config override config FE chore refactor --- .../Header/web3/NetworkModal/Networks.tsx | 45 ++++++++++++++++--- src/constants/networks/type.ts | 2 + src/hooks/useChainsConfig.ts | 42 +++++++++++++++++ src/hooks/useKyberSwapConfig.ts | 3 ++ src/pages/About/AboutKyberSwap/index.tsx | 18 ++++---- .../MultipleChainSelect/PopoverBody.tsx | 6 ++- src/services/ksSetting.ts | 17 +++++++ src/state/lists/updater.ts | 3 +- 8 files changed, 120 insertions(+), 16 deletions(-) create mode 100644 src/hooks/useChainsConfig.ts diff --git a/src/components/Header/web3/NetworkModal/Networks.tsx b/src/components/Header/web3/NetworkModal/Networks.tsx index 1d549d3239..e7125ff432 100644 --- a/src/components/Header/web3/NetworkModal/Networks.tsx +++ b/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 ( - {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 = ({ + {state === ChainState.NEW && ( + + New + + )} + {isMaintenance && ( + + Maintainance + + )} {selected && !walletKey && } {walletKey && ( diff --git a/src/constants/networks/type.ts b/src/constants/networks/type.ts index 31dcc6a44a..7862039b90 100644 --- a/src/constants/networks/type.ts +++ b/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 { diff --git a/src/hooks/useChainsConfig.ts b/src/hooks/useChainsConfig.ts new file mode 100644 index 0000000000..2cffb5e7bd --- /dev/null +++ b/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]) +} diff --git a/src/hooks/useKyberSwapConfig.ts b/src/hooks/useKyberSwapConfig.ts index e49c31df91..24501dfb8a 100644 --- a/src/hooks/useKyberSwapConfig.ts +++ b/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, diff --git a/src/pages/About/AboutKyberSwap/index.tsx b/src/pages/About/AboutKyberSwap/index.tsx index 520339d1a4..bdaeac143c 100644 --- a/src/pages/About/AboutKyberSwap/index.tsx +++ b/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 ( @@ -153,7 +155,7 @@ export const KSStatistic = () => { - {MAINNET_NETWORKS.length}+ + {supportedChains.length}+ Chains @@ -475,6 +477,8 @@ function AboutKyberSwap() { ) } + const { supportedChains } = useChainsConfig() + return (
@@ -495,14 +499,10 @@ function AboutKyberSwap() { - {MAINNET_NETWORKS.map(chain => ( + {supportedChains.map(({ chainId: chain, iconDark, icon, name }) => ( {NETWORKS_INFO[chain].name} = ({ 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 = ({ 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[]) => { diff --git a/src/services/ksSetting.ts b/src/services/ksSetting.ts index 2b99fd8720..9a20c38b0d 100644 --- a/src/services/ksSetting.ts +++ b/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 diff --git a/src/state/lists/updater.ts b/src/state/lists/updater.ts index ec913e12c9..cae41c91d5 100644 --- a/src/state/lists/updater.ts +++ b/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() const [fetchTokenList] = useLazyGetTokenListQuery() + useGetChainsConfigurationQuery() useEffect(() => { const getTokens = async () => {