Fix coingecko search modal

src/components/SearchModal/CurrencySearch.tsx

@@ -24,6 +24,7 @@ import { useSelectedListInfo } from '../../state/lists/hooks'
 import { useToken } from '../../hooks/Tokens'
 import { useTokenComparator } from './sorting'
 import { useTranslation } from 'react-i18next'
+import { TokenList } from '@uniswap/token-lists'
 
 interface CurrencySearchProps {
   isOpen: boolean
@@ -63,13 +64,13 @@ export function CurrencySearch({
   // ChainId.RINKEBY BUSD
   const availableTokensArray = isCrossChain
     ? availableTokens
-        .filter(a => a.name !== 'BUSD')
-        .map((x: any) => {
-          return new Token(x.chainId, x.address, x.decimals, x.symbol, x.name)
-        })
-    : availableTokens.map((x: any) => {
+      .filter(a => a.name !== 'BUSD')
+      .map((x: any) => {
         return new Token(x.chainId, x.address, x.decimals, x.symbol, x.name)
       })
+    : availableTokens.map((x: any) => {
+      return new Token(x.chainId, x.address, x.decimals, x.symbol, x.name)
+    })
 
   const defaultTokenList = DEFAULT_TOKEN_LIST.filter((x: any) => x.chainId === chainId).map((x: any) => {
     return new Token(x.chainId, x.address, x.decimals, x.symbol, x.name)
@@ -97,7 +98,7 @@ export function CurrencySearch({
     )
   }, [isAddressSearch, searchToken, searchQuery, defaultTokenList, chainId, availableTokensArray])
 
-  const filteredSortedTokens: Token[] = useMemo(() => {
+  let filteredSortedTokens: Token[] = useMemo(() => {
     if (searchToken) return [searchToken]
     const sorted = filteredTokens.sort(tokenComparator)
     const symbolMatch = searchQuery
@@ -153,8 +154,29 @@ export function CurrencySearch({
     },
     [filteredSortedTokens, handleCurrencySelect, searchQuery]
   )
-
-  const selectedListInfo = useSelectedListInfo()
+
+  let selectedListInfo = useSelectedListInfo()
+  const newSelectedList = useSelectedListInfo()
+  //let totalList = useRef(() => {
+
+    if (selectedListInfo === undefined) {
+      selectedListInfo = {} as { current: TokenList | null; pending: TokenList | null; loading: boolean; }
+    }
+    let newList: Token[] = []
+
+    let tokenMergeLength = 0
+    if (newSelectedList && newSelectedList.current && newSelectedList.current.tokens && filteredSortedTokens) {
+      tokenMergeLength = newSelectedList.current.tokens.length + filteredSortedTokens.length
+    }
+    if (selectedListInfo.current?.tokens?.length !== tokenMergeLength) { 
+      const arrSortedTokens: Token[] = []
+      selectedListInfo?.current?.tokens?.map(token => {
+        arrSortedTokens.push(new Token(token.chainId, token.address, token.decimals, token.symbol, token.name))
+
+      })
+      newList = arrSortedTokens.concat(filteredSortedTokens)
+      filteredSortedTokens = newList    
+    } 
 
   return (
     <Column style={{ width: '100%', flex: '1 1' }}>
@@ -197,7 +219,7 @@ export function CurrencySearch({
             <CurrencyList
               height={height}
               showETH={isCrossChain ? false : showETH}
-              currencies={!isCrossChain ? filteredSortedTokens : availableTokensArray}
+              currencies={!isCrossChain ? newList : availableTokensArray}
               onCurrencySelect={handleCurrencySelect}
               otherCurrency={otherSelectedCurrency}
               selectedCurrency={selectedCurrency}

src/components/SearchModal/ListSelect.tsx

@@ -89,9 +89,10 @@ function listUrlRowHTMLId(listUrl: string) {
 }
 
 const ListRow = memo(function ListRow({ listUrl, onBack }: { listUrl: string; onBack: () => void }) {
+  const dispatch = useDispatch<AppDispatch>()
   const listsByUrl = useSelector<AppState, AppState['lists']['byUrl']>(state => state.lists.byUrl)
   const selectedListUrl = useSelectedListUrl()
-  const dispatch = useDispatch<AppDispatch>()
+
   const { current: list, pendingUpdate: pending } = listsByUrl[listUrl]
 
   const isSelected = listUrl === selectedListUrl
@@ -133,8 +134,8 @@ const ListRow = memo(function ListRow({ listUrl, onBack }: { listUrl: string; on
       {list.logoURI ? (
         <ListLogo style={{ marginRight: '1rem' }} logoURI={list.logoURI} alt={`${list.name} list logo`} />
       ) : (
-        <div style={{ width: '24px', height: '24px', marginRight: '1rem' }} />
-      )}
+          <div style={{ width: '24px', height: '24px', marginRight: '1rem' }} />
+        )}
       <Column style={{ flex: '1' }}>
         <Row>
           <Text
@@ -151,7 +152,8 @@ const ListRow = memo(function ListRow({ listUrl, onBack }: { listUrl: string; on
           }}
         >
           <StyledListUrlText title={listUrl}>
-            <ListOrigin listUrl={listUrl} />
+            {/* <ListOrigin listUrl={listUrl} /> */}
+            {list.tokens.length} tokens
           </StyledListUrlText>
         </Row>
       </Column>
@@ -193,22 +195,22 @@ const ListRow = memo(function ListRow({ listUrl, onBack }: { listUrl: string; on
           Selected
         </ButtonPrimary>
       ) : (
-        <>
-          <ButtonPrimary
-            className="select-button"
-            style={{
-              width: '5rem',
-              minWidth: '4.5rem',
-              padding: '0.5rem .35rem',
-              borderRadius: '12px',
-              fontSize: '14px'
-            }}
-            onClick={selectThisList}
-          >
-            Select
+          <>
+            <ButtonPrimary
+              className="select-button"
+              style={{
+                width: '5rem',
+                minWidth: '4.5rem',
+                padding: '0.5rem .35rem',
+                borderRadius: '12px',
+                fontSize: '14px'
+              }}
+              onClick={selectThisList}
+            >
+              Select
           </ButtonPrimary>
-        </>
-      )}
+          </>
+        )}
     </Row>
   )
 })
@@ -278,8 +280,8 @@ export function ListSelect({ onDismiss, onBack }: { onDismiss: () => void; onBac
           return l1.name.toLowerCase() < l2.name.toLowerCase()
             ? -1
             : l1.name.toLowerCase() === l2.name.toLowerCase()
-            ? 0
-            : 1
+              ? 0
+              : 1
         }
         if (l1) return -1
         if (l2) return 1

src/constants/lists.ts

@@ -1,4 +1,71 @@
+
+
+const ls = localStorage.getItem('redux_localstorage_simple_crosschain')
+export let MAIN_CURRENCY = 'ETH'
+export let CHAIN_ID = 1
+if(ls) {
+  MAIN_CURRENCY = JSON.parse(ls).currentChain.symbol
+}
+
+export const DEFAULT_ACTIVE_LIST_URLS: string[]  = []
+export function getListTokensByChain(currency: string, chainId: number) {  
+CHAIN_ID = chainId
+const DEFAULT_LIST_OF_LISTS: string[] = listTokensFomChains[`${currency}List`]
+MAIN_CURRENCY = currency
+return {DEFAULT_LIST_OF_LISTS, DEFAULT_TOKEN_LIST_URL, DEFAULT_ACTIVE_LIST_URLS, MAIN_CURRENCY, CHAIN_ID}   
+}
+
+
 // the Uniswap Default token list lives here
 export const DEFAULT_TOKEN_LIST_URL = 'tokens.uniswap.eth'
 
-export const DEFAULT_LIST_OF_LISTS: string[] = []
+// from uniswap exchanges
+const COMPOUND_LIST = 'https://raw.githubusercontent.com/compound-finance/token-list/master/compound.tokenlist.json'
+const UMA_LIST = 'https://umaproject.org/uma.tokenlist.json'
+const AAVE_LIST = 'tokenlist.aave.eth'
+const SYNTHETIX_LIST = 'synths.snx.eth'
+const WRAPPED_LIST = 'wrapped.tokensoft.eth'
+const SET_LIST = 'https://raw.githubusercontent.com/SetProtocol/uniswap-tokenlist/main/set.tokenlist.json'
+const OPYN_LIST = 'https://raw.githubusercontent.com/opynfinance/opyn-tokenlist/master/opyn-v1.tokenlist.json'
+const ROLL_LIST = 'https://app.tryroll.com/tokens.json'
+const COINGECKO_LIST = 'https://tokens.coingecko.com/uniswap/all.json'
+const CMC_ALL_LIST = 'defi.cmc.eth'
+const CMC_STABLECOIN = 'stablecoin.cmc.eth'
+const KLEROS_LIST = 't2crtokens.eth'
+const GEMINI_LIST = 'https://www.gemini.com/uniswap/manifest.json'
+// const BA_LIST = 'https://raw.githubusercontent.com/The-Blockchain-Association/sec-notice-list/master/ba-sec-list.json'
+
+// from https://pangolin.exchange/ exchanges
+const AVAX_DEFI = 'https://raw.githubusercontent.com/zeroexchange/app/master/tokens-of-exchanges/avalanche/defi.tokenlist.json'
+const AVAX_TOP_15 = 'https://raw.githubusercontent.com/zeroexchange/app/master/tokens-of-exchanges/avalanche/top15.tokenlist.json'
+const AVAX_ETH = 'https://raw.githubusercontent.com/zeroexchange/app/master/tokens-of-exchanges/avalanche/aeb.tokenlist.json'
+const AVAX_STABLECOINS = 'https://raw.githubusercontent.com/zeroexchange/app/master/tokens-of-exchanges/avalanche/stablecoin.tokenlist.json'
+
+
+// used to mark unsupported tokens, these are hosted lists of unsupported tokens
+export const UNSUPPORTED_LIST_URLS: string[] = []
+const listTokensFomChains = {
+    ETHList: [
+        COMPOUND_LIST,
+        AAVE_LIST,
+        SYNTHETIX_LIST,
+        UMA_LIST,
+        WRAPPED_LIST,
+        SET_LIST,
+        OPYN_LIST,
+        ROLL_LIST,
+        COINGECKO_LIST,
+        CMC_ALL_LIST,
+        CMC_STABLECOIN,
+        KLEROS_LIST,
+        GEMINI_LIST,
+        ...UNSUPPORTED_LIST_URLS // need to load unsupported tokens as well
+      ], 
+      AVAXList: [
+        AVAX_DEFI,
+        AVAX_ETH,
+        AVAX_STABLECOINS,
+        AVAX_TOP_15
+      ], 
+      BNBList: []
+}

src/state/crosschain/hooks.ts

@@ -30,6 +30,7 @@ import { initialState } from './reducer'
 import { useActiveWeb3React } from '../../hooks'
 import { useEffect } from 'react'
 import useGasPrice from 'hooks/useGasPrice'
+import { switchNewList } from 'state/lists/actions'
 
 // import { afterWrite } from '@popperjs/core'
 
@@ -564,6 +565,9 @@ export function useCrossChain() {
         chain: GetCurrentChain(currentChainName)
       })
     )
+    dispatch(
+      switchNewList({ newCurrency: GetCurrentChain(currentChainName)?.symbol ?? 'ETH', chainNumber: (!chainId) ? 1 : chainId })
+    )
     dispatch(setTransferAmount({ amount: '' }))
     UpdateOwnTokenBalance().catch(console.error)
     UpdateFee().catch(console.error)

src/state/lists/actions.ts

@@ -1,6 +1,6 @@
 import { ActionCreatorWithPayload, createAction } from '@reduxjs/toolkit'
 import { TokenList, Version } from '@uniswap/token-lists'
-
+type ChainType = {newCurrency: string, chainNumber: number}
 export const fetchTokenList: Readonly<{
   pending: ActionCreatorWithPayload<{ url: string; requestId: string }>
   fulfilled: ActionCreatorWithPayload<{ url: string; tokenList: TokenList; requestId: string }>
@@ -16,3 +16,4 @@ export const addList = createAction<string>('lists/addList')
 export const removeList = createAction<string>('lists/removeList')
 export const selectList = createAction<string>('lists/selectList')
 export const rejectVersionUpdate = createAction<Version>('lists/rejectVersionUpdate')
+export const switchNewList = createAction<ChainType>('lists/switchNewList')