From 2f6e2f94615d16cfe686deccf84e7f1f02942e1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguy=E1=BB=85n=20Ho=C3=A0i=20Danh?= <33005392+nguyenhoaidanh@users.noreply.github.com> Date: Mon, 23 Oct 2023 09:59:28 +0700 Subject: [PATCH] update: chain logo from admin (#2312) --- .env.dev | 2 +- .env.production | 2 +- src/components/Logo/index.tsx | 3 ++- .../Select/MultipleChainSelect/SelectButton.tsx | 3 ++- src/components/Select/MultipleChainSelect/index.tsx | 3 ++- src/components/YourCampaignTransactionsModal/index.tsx | 3 ++- src/constants/env.ts | 2 +- src/hooks/index.ts | 5 +++-- src/hooks/useChainsConfig.ts | 10 ++++++++++ src/hooks/useNotification/index.ts | 2 +- src/pages/Bridge/BridgeTransferHistory/RouteCell.tsx | 4 +++- src/pages/Campaign/CampaignButtonWithOptions.tsx | 3 ++- src/pages/Campaign/CampaignItem.tsx | 3 ++- src/pages/MyEarnings/ClassicPools/SinglePool/index.tsx | 3 ++- src/pages/MyEarnings/ElasticPools/SinglePool/index.tsx | 3 ++- src/pages/MyEarnings/hooks.ts | 5 ++--- .../PriceAlerts/NetworkInlineDisplay.tsx | 3 ++- .../TrueSightV2/components/SubscireButtonKyberAI.tsx | 2 +- 18 files changed, 41 insertions(+), 20 deletions(-) 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 Switch Network 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,