fix: current list lag (#2342)

package.json

@@ -79,7 +79,6 @@
     "axios": "1.2.1",
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",
-    "cids": "^1.1.9",
     "crypto-js": "4.1.1",
     "d3": "^7.6.1",
     "dayjs": "^1.11.6",
@@ -97,8 +96,6 @@
     "lightweight-charts": "^3.3.0",
     "memoize-one": "^6.0.0",
     "mixpanel-browser": "^2.45.0",
-    "multicodec": "^2.1.3",
-    "multihashes": "^3.1.2",
     "node-vibrant": "^3.1.6",
     "numeral": "^2.0.6",
     "patch-package": "^7.0.0",
@@ -157,7 +154,6 @@
     "@types/d3": "^7.1.0",
     "@types/dompurify": "^3.0.3",
     "@types/mixpanel-browser": "^2.38.0",
-    "@types/multicodec": "^1.0.0",
     "@types/node": "^20.8.8",
     "@types/numeral": "^2.0.0",
     "@types/react": "^18.0.15",
@@ -208,4 +204,4 @@
     "@lingui/core": "3.14.0",
     "@lingui/conf": "3.16.0"
   }
-}
+}

src/components/CurrencyLogo/index.tsx

@@ -1,14 +1,11 @@
-import { ChainId, Currency } from '@kyberswap/ks-sdk-core'
+import { Currency } from '@kyberswap/ks-sdk-core'
 import React, { memo, useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 
 import Logo from 'components/Logo'
-import { ETHER_ADDRESS } from 'constants/index'
-import { NETWORKS_INFO } from 'constants/networks'
-import { useAllTokens } from 'hooks/Tokens'
 import useHttpLocations from 'hooks/useHttpLocations'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
-import { getTokenLogoURL } from 'utils'
+import { getNativeTokenLogo, getTokenLogoURL } from 'utils'
 import { getProxyTokenLogo } from 'utils/tokenInfo'
 
 const StyledNativeCurrencyLogo = styled.img<{ size: string }>`
@@ -27,11 +24,6 @@ const StyledLogo = styled(Logo)<{ size: string }>`
   object-fit: contain;
 `
 
-export const useGetNativeTokenLogo = (chainId: ChainId | undefined) => {
-  const whitelistTokens = useAllTokens(false, chainId)
-  return whitelistTokens[ETHER_ADDRESS]?.logoURI || (chainId ? NETWORKS_INFO[chainId].nativeToken.logo : '')
-}
-
 function CurrencyLogo({
   currency,
   size = '24px',
@@ -56,7 +48,6 @@ function CurrencyLogo({
 
   const logoURI = currency instanceof WrappedTokenInfo ? currency?.logoURI : undefined
   const uriLocations = useHttpLocations(wrapWithProxy(logoURI))
-  const nativeLogo = useGetNativeTokenLogo(currency?.chainId)
 
   const srcs: string[] = useMemo(() => {
     if (currency?.isNative) return []
@@ -72,7 +63,14 @@ function CurrencyLogo({
   }, [currency, logoURI, uriLocations, wrapWithProxy])
 
   if (currency?.isNative) {
-    return <StyledNativeCurrencyLogo src={nativeLogo} size={size} style={style} alt={`${currency.symbol}Logo`} />
+    return (
+      <StyledNativeCurrencyLogo
+        src={getNativeTokenLogo(currency?.chainId)}
+        size={size}
+        style={style}
+        alt={`${currency.symbol}Logo`}
+      />
+    )
   }
 
   return <StyledLogo size={size} srcs={srcs} alt={`${currency?.symbol ?? 'token'} logo`} style={style} />

src/components/Logo/index.tsx

@@ -4,9 +4,9 @@ import { HelpCircle } from 'react-feather'
 import { ImageProps } from 'rebass'
 import styled from 'styled-components'
 
-import { useGetNativeTokenLogo } from 'components/CurrencyLogo'
 import { NETWORKS_INFO } from 'hooks/useChainsConfig'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
+import { getNativeTokenLogo } from 'utils'
 
 const BAD_SRCS: { [tokenAddress: string]: true } = {}
 
@@ -51,7 +51,7 @@ export function TokenLogoWithChain(data: any) {
   const { tokenLogo: tokenLogoParam, chainId: chainParam, size, currency } = data
 
   const chainId: ChainId = currency?.chainId || chainParam
-  const nativeLogo = useGetNativeTokenLogo(chainId)
+  const nativeLogo = getNativeTokenLogo(chainId)
   const tokenLogo = (currency?.isNative ? nativeLogo : currency?.logoURI) || tokenLogoParam
   const ratio = 0.7
   const networkSize = ratio * parseInt(size + '')

src/components/Menu/FaucetModal.tsx

@@ -8,7 +8,6 @@ import styled from 'styled-components'
 
 import { NotificationType } from 'components/Announcement/type'
 import { ButtonPrimary } from 'components/Button'
-import { useGetNativeTokenLogo } from 'components/CurrencyLogo'
 import Logo from 'components/Logo'
 import Modal from 'components/Modal'
 import { RowBetween } from 'components/Row'
@@ -21,7 +20,7 @@ import useTheme from 'hooks/useTheme'
 import { ApplicationModal } from 'state/application/actions'
 import { useModalOpen, useNotify, useToggleModal, useWalletModalToggle } from 'state/application/hooks'
 import { CloseIcon } from 'theme'
-import { getTokenLogoURL, isAddress, shortenAddress } from 'utils'
+import { getNativeTokenLogo, getTokenLogoURL, isAddress, shortenAddress } from 'utils'
 import { filterTokens } from 'utils/filtering'
 
 const AddressWrapper = styled.div`
@@ -68,7 +67,7 @@ function FaucetModal() {
     return nativeToken
   }, [rewardData, chainId, account, allTokens])
 
-  const nativeLogo = useGetNativeTokenLogo(chainId)
+  const nativeLogo = getNativeTokenLogo(chainId)
   const tokenLogo = useMemo(() => {
     if (!token) return
     if (token.isNative) return nativeLogo

src/components/SearchModal/CurrencyList.tsx

@@ -103,6 +103,8 @@ export function CurrencyRow({
   usdBalance,
   hoverColor,
   hideBalance,
+  showLoading,
+  isFavorite,
 }: {
   showImported?: boolean
   showFavoriteIcon?: boolean
@@ -119,40 +121,26 @@ export function CurrencyRow({
   usdBalance?: number
   hoverColor?: string
   hideBalance?: boolean
-  customChainId?: ChainId
+  showLoading?: boolean
+  isFavorite?: boolean
 }) {
-  const { chainId, account } = useActiveWeb3React()
   const theme = useTheme()
   const nativeCurrency = useCurrencyConvertedToNative(currency || undefined)
 
-  const { favoriteTokens } = useUserFavoriteTokens(chainId)
   const onClickRemove = (e: React.MouseEvent) => {
     e.stopPropagation()
     removeImportedToken?.(currency as Token)
   }
 
-  const isFavorite = (() => {
-    if (!favoriteTokens) {
-      return false
-    }
-
-    if (currency.isToken) {
-      const addr = (currency as Token).address ?? ''
-      const addresses = favoriteTokens ?? []
-      return !!addresses?.includes(addr) || !!addresses?.includes(addr.toLowerCase())
-    }
-
-    return false
-  })()
-
   const balanceComponent = hideBalance ? (
     '******'
   ) : currencyBalance ? (
     <Balance balance={currencyBalance} />
-  ) : account ? (
+  ) : showLoading ? (
     <Loader />
   ) : null
   const { symbol } = getDisplayTokenInfo(currency)
+
   return (
     <CurrencyRowWrapper
       data-testid="token-item"
@@ -237,32 +225,43 @@ function CurrencyList({
   customChainId?: ChainId
 }) {
   const currencyBalances = useCurrencyBalances(currencies, customChainId)
-  const { chainId } = useActiveWeb3React()
+  const { chainId, account } = useActiveWeb3React()
+  const tokenImports = useUserAddedTokens(customChainId)
+  const canShowBalance = customChainId && customChainId !== chainId ? isEVM(customChainId) === isEVM(chainId) : true
+  const { favoriteTokens } = useUserFavoriteTokens(customChainId)
 
   const Row: any = useCallback(
     function TokenRow({ style, currency, currencyBalance }: TokenRowProps) {
       const isSelected = Boolean(currency && selectedCurrency?.equals(currency))
       const otherSelected = Boolean(currency && otherCurrency?.equals(currency))
-      const canShowBalance = customChainId && customChainId !== chainId ? isEVM(customChainId) === isEVM(chainId) : true
 
       const token = currency?.wrapped
       const extendCurrency = currency as WrappedTokenInfo
-      const tokenImports = useUserAddedTokens()
+
       const showImport =
         token &&
         !extendCurrency?.isWhitelisted &&
         !tokenImports.find(importedToken => importedToken.address === token.address) &&
         !isTokenNative(currency, currency.chainId)
-
       if (showImport && token && setImportToken) {
         return <ImportRow style={style} token={token} setImportToken={setImportToken} dim={true} />
       }
 
       if (currency) {
         // whitelist
 
+        const isFavorite = (() => {
+          if (currency.isToken && favoriteTokens) {
+            const addr = (currency as Token).address ?? ''
+            return !!favoriteTokens?.includes(addr) || !!favoriteTokens?.includes(addr.toLowerCase())
+          }
+          return false
+        })()
+
         return (
           <CurrencyRow
+            isFavorite={isFavorite}
+            showLoading={!!account}
             showImported={showImported}
             handleClickFavorite={handleClickFavorite}
             removeImportedToken={removeImportedToken}
@@ -290,8 +289,10 @@ function CurrencyList({
       removeImportedToken,
       itemStyle,
       showFavoriteIcon,
-      chainId,
-      customChainId,
+      tokenImports,
+      canShowBalance,
+      account,
+      favoriteTokens,
     ],
   )
   const loadMoreItems = useCallback(() => loadMoreRows?.(), [loadMoreRows])

src/hooks/useHttpLocations.ts

@@ -1,20 +1,10 @@
 import { useMemo } from 'react'
 
 import { EMPTY_ARRAY } from 'constants/index'
-import contenthashToUri from 'utils/contenthashToUri'
-import { parseENSAddress } from 'utils/parseENSAddress'
 import uriToHttp from 'utils/uriToHttp'
 
-import useENSContentHash from './useENSContentHash'
-
 export default function useHttpLocations(uri: string | undefined): string[] {
-  const ens = useMemo(() => (uri ? parseENSAddress(uri) : undefined), [uri])
-  const resolvedContentHash = useENSContentHash(ens?.ensName)
   return useMemo(() => {
-    if (ens) {
-      return resolvedContentHash.contenthash ? uriToHttp(contenthashToUri(resolvedContentHash.contenthash)) : []
-    } else {
-      return uri ? uriToHttp(uri) : EMPTY_ARRAY
-    }
-  }, [ens, resolvedContentHash.contenthash, uri])
+    return uri ? uriToHttp(uri) : EMPTY_ARRAY
+  }, [uri])
 }

src/pages/MyEarnings/ElasticPools/SinglePosition/EarningView.tsx

@@ -3,7 +3,6 @@ import { useMemo } from 'react'
 import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
 
-import { useGetNativeTokenLogo } from 'components/CurrencyLogo'
 import Logo from 'components/Logo'
 import { MouseoverTooltip } from 'components/Tooltip'
 import CommonView, { CommonProps } from 'pages/MyEarnings/ElasticPools/SinglePosition/CommonView'
@@ -13,6 +12,7 @@ import OriginalMyEarningsOverTimePanel from 'pages/MyEarnings/MyEarningsOverTime
 import { calculateEarningStatsTick } from 'pages/MyEarnings/utils'
 import { useAppSelector } from 'state/hooks'
 import { EarningStatsTick } from 'types/myEarnings'
+import { getNativeTokenLogo } from 'utils'
 import { formatDisplayNumber } from 'utils/numbers'
 
 const MyEarningsOverTimePanel = styled(OriginalMyEarningsOverTimePanel)`
@@ -24,7 +24,7 @@ const MyEarningsOverTimePanel = styled(OriginalMyEarningsOverTimePanel)`
 const EarningView: React.FC<CommonProps> = props => {
   const { positionEarning, chainId } = props
   const tokensByChainId = useAppSelector(state => state.lists.mapWhitelistTokens)
-  const nativeLogo = useGetNativeTokenLogo(chainId)
+  const nativeLogo = getNativeTokenLogo(chainId)
 
   // format pool value
   const ticks: EarningStatsTick[] | undefined = useMemo(() => {

src/pages/MyEarnings/PoolEarningsSection.tsx

@@ -6,7 +6,6 @@ import { Box, Flex } from 'rebass'
 import { HistoricalSingleData } from 'services/earning/types'
 import styled from 'styled-components'
 
-import { useGetNativeTokenLogo } from 'components/CurrencyLogo'
 import { NativeCurrencies } from 'constants/tokens'
 import { fetchListTokenByAddresses } from 'hooks/Tokens'
 import useTheme from 'hooks/useTheme'
@@ -15,7 +14,7 @@ import { useAppSelector } from 'state/hooks'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import { MEDIA_WIDTHS } from 'theme'
 import { EarningStatsTick, EarningsBreakdown } from 'types/myEarnings'
-import { isAddressString } from 'utils'
+import { getNativeTokenLogo, isAddressString } from 'utils'
 import { toString } from 'utils/numbers'
 
 import OriginalEarningsBreakdownPanel from './EarningsBreakdownPanel'
@@ -89,7 +88,7 @@ const PoolEarningsSection: React.FC<Props> = ({ historicalEarning, chainId }) =>
   const theme = useTheme()
   const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
   const tokensByChainId = useAppSelector(state => state.lists.mapWhitelistTokens)
-  const nativeLogo = useGetNativeTokenLogo(chainId)
+  const nativeLogo = getNativeTokenLogo(chainId)
 
   const [tokens, setTokens] = useState<{ [address: string]: WrappedTokenInfo }>({})
 

src/react-app-env.d.ts

@@ -47,13 +47,3 @@ interface Window {
   recaptchaOptions?: any
   zESettings?: any
 }
-
-declare module 'content-hash' {
-  function decode(x: string): string
-  function getCodec(x: string): string
-}
-
-declare module 'multihashes' {
-  function decode(buff: Uint8Array): { code: number; name: string; length: number; digest: Uint8Array }
-  function toB58String(hash: Uint8Array): string
-}

src/state/user/hooks.tsx

@@ -362,7 +362,9 @@ export function useToggleTopTrendingTokens(): () => void {
   return useCallback(() => dispatch(toggleTopTrendingTokens()), [dispatch])
 }
 
-export const useUserFavoriteTokens = (chainId: ChainId) => {
+export const useUserFavoriteTokens = (customChain?: ChainId) => {
+  const { chainId: currentChain } = useActiveWeb3React()
+  const chainId = customChain || currentChain
   const dispatch = useDispatch<AppDispatch>()
   const { favoriteTokensByChainIdv2: favoriteTokensByChainId } = useSelector((state: AppState) => state.user)
   const { commonTokens } = useKyberSwapConfig(chainId)