update: remove hardcode native token in token search (#2007)

src/components/SearchModal/CurrencyList.tsx

@@ -20,6 +20,7 @@ import { useUserAddedTokens, useUserFavoriteTokens } from 'state/user/hooks'
 import { useCurrencyBalances } from 'state/wallet/hooks'
 import { formattedNum } from 'utils'
 import { useCurrencyConvertedToNative } from 'utils/dmm'
+import { isTokenNative } from 'utils/tokenInfo'
 
 import ImportRow from './ImportRow'
 
@@ -83,7 +84,7 @@ const DescText = styled.div`
 `
 export const getDisplayTokenInfo = (currency: Currency) => {
   return {
-    symbol: currency.isNative ? currency.symbol : currency?.wrapped?.symbol || currency.symbol,
+    symbol: isTokenNative(currency, currency.chainId) ? currency.symbol : currency?.wrapped?.symbol || currency.symbol,
   }
 }
 export function CurrencyRow({
@@ -135,7 +136,7 @@ export function CurrencyRow({
       return false
     }
 
-    if (currency.isNative) {
+    if (isTokenNative(currency, currency.chainId)) {
       return !!favoriteTokens.includeNativeToken
     }
 
@@ -254,7 +255,7 @@ function CurrencyList({
         token &&
         !extendCurrency?.isWhitelisted &&
         !tokenImports.find(importedToken => importedToken.address === token.address) &&
-        !currency.isNative
+        !isTokenNative(currency, currency.chainId)
 
       if (showImport && token && setImportToken) {
         return <ImportRow style={style} token={token} setImportToken={setImportToken} dim={true} />

src/components/SearchModal/CurrencySearch.tsx

@@ -33,7 +33,7 @@ import { useRemoveUserAddedToken, useUserAddedTokens, useUserFavoriteTokens } fr
 import { ButtonText, CloseIcon, TYPE } from 'theme'
 import { filterTruthy, isAddress } from 'utils'
 import { filterTokens } from 'utils/filtering'
-import { importTokensToKsSettings } from 'utils/tokenInfo'
+import { importTokensToKsSettings, isTokenNative } from 'utils/tokenInfo'
 
 import CommonBases from './CommonBases'
 import CurrencyList from './CurrencyList'
@@ -181,9 +181,9 @@ export function CurrencySearch({
   const filterWrapFunc = useCallback(
     (token: Currency | undefined) => {
       if (filterWrap && otherSelectedCurrency?.equals(WETH[chainId])) {
-        return !token?.isNative
+        return !isTokenNative(token, token?.chainId)
       }
-      if (filterWrap && otherSelectedCurrency?.isNative) {
+      if (filterWrap && otherSelectedCurrency && isTokenNative(otherSelectedCurrency, otherSelectedCurrency?.chainId)) {
         return !token?.equals(WETH[chainId])
       }
       return true
@@ -196,20 +196,16 @@ export function CurrencySearch({
   }, [commonTokens, debouncedQuery, chainId, filterWrapFunc])
 
   const filteredSortedTokens: Token[] = useMemo(() => {
-    const nativeToken = NativeCurrencies[chainId]
-    const tokensWithNative = [nativeToken, ...fetchedTokens] as Token[]
     if (!debouncedQuery) {
       // whitelist token
-      return tokensWithNative.sort(tokenComparator).filter(filterWrapFunc)
+      return fetchedTokens.sort(tokenComparator).filter(filterWrapFunc)
     }
-
-    const isMatchNative = nativeToken?.symbol?.toLowerCase().startsWith(debouncedQuery.toLowerCase().trim())
-    return (isMatchNative ? tokensWithNative : fetchedTokens).filter(filterWrapFunc)
-  }, [fetchedTokens, debouncedQuery, tokenComparator, filterWrapFunc, chainId])
+    return fetchedTokens.filter(filterWrapFunc)
+  }, [fetchedTokens, debouncedQuery, tokenComparator, filterWrapFunc])
 
   const handleCurrencySelect = useCallback(
     (currency: Currency) => {
-      onCurrencySelect(currency)
+      onCurrencySelect(isTokenNative(currency, currency.chainId) ? NativeCurrencies[currency.chainId] : currency)
       onDismiss()
     },
     [onDismiss, onCurrencySelect],
@@ -263,14 +259,14 @@ export function CurrencySearch({
       if (!address) return
 
       const currentList = favoriteTokens?.addresses || []
-      const isAddFavorite = currency.isNative
+      const isAddFavorite = isTokenNative(currency, currency.chainId)
         ? !favoriteTokens?.includeNativeToken
         : !currentList.find(el => el === address) // else remove favorite
       const curTotal =
         currentList.filter(address => !!defaultTokens[address]).length + (favoriteTokens?.includeNativeToken ? 1 : 0)
       if (isAddFavorite && curTotal === MAX_FAVORITE_PAIR) return
 
-      if (currency.isNative) {
+      if (isTokenNative(currency, currency.chainId)) {
         toggleFavoriteToken({
           chainId,
           isNative: true,

src/constants/index.ts

@@ -142,7 +142,7 @@ export const COINGECKO_API_URL = 'https://api.coingecko.com/api/v3'
 export const KNC_COINGECKO_ID = 'kyber-network-crystal'
 
 export const ETHER_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE'
-export const ETHER_ADDRESS_SOLANA = 'eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee'
+export const ETHER_ADDRESS_SOLANA = 'So11111111111111111111111111111111111111111'
 
 export const KYBER_NETWORK_DISCORD_URL = 'https://discord.com/invite/NB3vc8J9uv'
 export const KYBER_NETWORK_TWITTER_URL = 'https://twitter.com/KyberNetwork'

src/hooks/bridge/index.ts

@@ -1,13 +1,13 @@
 import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
 import JSBI from 'jsbi'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import ERC20_INTERFACE from 'constants/abis/erc20'
 import { NativeCurrencies } from 'constants/tokens'
 import { useActiveWeb3React } from 'hooks'
 import { useMulticallContract } from 'hooks/useContract'
 import useInterval from 'hooks/useInterval'
-import { useBlockNumber, useKyberSwapConfig } from 'state/application/hooks'
+import { useKyberSwapConfig } from 'state/application/hooks'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
 import { fetchChunk } from 'state/multicall/updater'
 import { TokenAmountLoading } from 'state/wallet/hooks'
@@ -59,17 +59,10 @@ export const useTokensBalanceOfAnotherChain = (
   const multicallContract = useMulticallContract(chainId)
   const [loading, setLoading] = useState(false)
 
-  const refBlockNumber = useRef<number>()
-  const blockNumber = useBlockNumber()
-  useEffect(() => {
-    if (!refBlockNumber.current) refBlockNumber.current = blockNumber
-  }, [blockNumber])
-
   const getBalance = useCallback(async () => {
     try {
       setBalances(EMPTY_ARRAY)
-      const blockNumber = refBlockNumber.current
-      if (!chainId || !account || !tokens.length || !multicallContract || !blockNumber) {
+      if (!chainId || !account || !tokens.length || !multicallContract) {
         return
       }
       setLoading(true)
@@ -79,11 +72,13 @@ export const useTokensBalanceOfAnotherChain = (
         fragment: 'balanceOf',
         key: token.wrapped.address,
       }))
+
       const { results } = await fetchChunk(
         multicallContract,
         calls.map(e => ({ address: e.target, callData: e.callData })),
-        blockNumber,
+        undefined as any,
       )
+
       const result = formatResult(results, calls)
       const balances = tokens.map(token => {
         const balance = result[token.wrapped.address]
@@ -92,6 +87,7 @@ export const useTokensBalanceOfAnotherChain = (
       setBalances(balances as TokenAmountLoading[])
       return
     } catch (error) {
+      console.error('get balance chain err', { chainId, error })
     } finally {
       setLoading(false)
     }

src/state/wallet/hooks.ts

@@ -212,6 +212,7 @@ export const useTokensHasBalance = (includesImportToken = false) => {
     if (!loadingBalance && ethBalance) {
       // call once per chain
       const list: Currency[] = currencies.filter(currency => {
+        if (isTokenNative(currency, currency.chainId)) return false
         const hasBalance = !currencyBalances[currency.wrapped.address]?.equalTo(
           CurrencyAmount.fromRawAmount(currency, '0'),
         )

src/utils/tokenInfo.ts

@@ -59,7 +59,8 @@ export const isTokenNative = (
   currency: Currency | WrappedTokenInfo | undefined,
   chainId: ChainId | undefined,
 ): currency is NativeCurrency => {
-  if (currency?.isNative || currency?.address === ETHER_ADDRESS) return true
+  if (currency?.isNative || currency?.address === ETHER_ADDRESS || currency?.address === ETHER_ADDRESS_SOLANA)
+    return true
   // case multichain token
   return chainId
     ? WETH[chainId]?.address === currency?.address &&