update: chain logo from admin (#2312)

.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

.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

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

src/components/YourCampaignTransactionsModal/index.tsx

@@ -10,8 +10,8 @@ import styled, { css } from 'styled-components'
 
 import Modal from 'components/Modal'
 import { CAMPAIGN_YOUR_TRANSACTIONS_ITEM_PER_PAGE } from 'constants/index'
-import { NETWORKS_INFO } from 'constants/networks'
 import { useActiveWeb3React } from 'hooks'
+import useChainsConfig from 'hooks/useChainsConfig'
 import useCopyClipboard from 'hooks/useCopyClipboard'
 import useTheme from 'hooks/useTheme'
 import { AppState } from 'state'
@@ -44,6 +44,7 @@ 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/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')

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

@@ -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])
 }

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),
     }))

src/pages/Bridge/BridgeTransferHistory/RouteCell.tsx

@@ -4,14 +4,16 @@ 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
   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

@@ -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 (
     <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 { NETWORKS_INFO } from 'constants/networks'
+import useChainsConfig from 'hooks/useChainsConfig'
 import useTheme from 'hooks/useTheme'
 import { CampaignData, CampaignStatus, CampaignUserInfoStatus, ConditionGroupsType } from 'state/campaigns/actions'
 
@@ -120,6 +120,7 @@ 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 { NETWORKS_INFO } from 'constants/networks'
+import useChainsConfig from 'hooks/useChainsConfig'
 import useTheme from 'hooks/useTheme'
 import Position from 'pages/MyEarnings/ClassicPools/SinglePool/Position'
 import { StatItem } from 'pages/MyEarnings/ElasticPools/SinglePool'
@@ -84,6 +84,7 @@ 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

@@ -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<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/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
 }

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

src/pages/TrueSightV2/components/SubscireButtonKyberAI.tsx

@@ -8,7 +8,7 @@ export default function SubscribeButtonKyberAI({ type, tooltip }: { type: 'ranki
   return (
     <MouseoverTooltip text={tooltip} placement="right" delay={1200}>
       <SubscribeNotificationButton
-        topicId={KYBER_AI_TOPIC_ID}
+        topicId={KYBER_AI_TOPIC_ID[0]}
         onClick={() =>
           mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SUBSCRIBE_CLICK, {
             source: type,