swap seach popular in rainbow

src/core/resources/search/parseTokenSearch.ts

@@ -0,0 +1,21 @@
+import { AddressOrEth } from '~/core/types/assets';
+import { ChainId } from '~/core/types/chains';
+import { SearchAsset } from '~/core/types/search';
+import { isNativeAsset } from '~/core/utils/chains';
+
+export function parseTokenSearch(
+  asset: SearchAsset,
+  chainId: ChainId,
+): SearchAsset {
+  const networkInfo = asset.networks[chainId];
+
+  return {
+    ...asset,
+    address: networkInfo ? networkInfo.address : asset.address,
+    chainId,
+    decimals: networkInfo ? networkInfo.decimals : asset.decimals,
+    isNativeAsset: isNativeAsset(asset.address, chainId),
+    mainnetAddress: asset.uniqueId as AddressOrEth,
+    uniqueId: `${networkInfo?.address || asset.uniqueId}_${chainId}`,
+  };
+}

src/core/resources/search/tokenDiscovery.ts

@@ -0,0 +1,46 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { createHttpClient } from '~/core/network/internal/createHttpClient';
+import { QueryFunctionArgs, createQueryKey } from '~/core/react-query';
+import { ChainId } from '~/core/types/chains';
+import { SearchAsset } from '~/core/types/search';
+
+import { parseTokenSearch } from './parseTokenSearch';
+
+const tokenSearchDiscoveryHttp = createHttpClient({
+  baseUrl: 'https://token-search.rainbow.me/v3/discovery',
+  timeout: 30000,
+});
+
+type TokenDiscoveryArgs = {
+  chainId: ChainId;
+};
+
+const tokenDiscoveryQueryKey = ({ chainId }: TokenDiscoveryArgs) =>
+  createQueryKey('TokenDiscovery', { chainId }, { persisterVersion: 1 });
+
+async function tokenSearchQueryFunction({
+  queryKey: [{ chainId }],
+}: QueryFunctionArgs<typeof tokenDiscoveryQueryKey>) {
+  const url = `/${chainId}`;
+
+  try {
+    const tokenSearch = await tokenSearchDiscoveryHttp.get<{
+      data: SearchAsset[];
+    }>(url);
+    return tokenSearch.data.data.map((asset) =>
+      parseTokenSearch(asset, chainId),
+    );
+  } catch (e) {
+    return [];
+  }
+}
+
+export function useTokenDiscovery({ chainId }: TokenDiscoveryArgs) {
+  return useQuery({
+    queryKey: tokenDiscoveryQueryKey({ chainId }),
+    queryFn: tokenSearchQueryFunction,
+    staleTime: 15 * 60 * 1000, // 15 min
+    gcTime: 24 * 60 * 60 * 1000, // 1 day
+  });
+}

src/core/resources/search/tokenSearch.ts

@@ -1,7 +1,6 @@
 import { isAddress } from '@ethersproject/address';
 import { useQueries, useQuery } from '@tanstack/react-query';
 import qs from 'qs';
-import { Address } from 'viem';
 
 import { tokenSearchHttp } from '~/core/network/tokenSearch';
 import {
@@ -11,11 +10,6 @@ import {
   createQueryKey,
   queryClient,
 } from '~/core/react-query';
-import {
-  BNB_BSC_ADDRESS,
-  ETH_ADDRESS,
-  MATIC_POLYGON_ADDRESS,
-} from '~/core/references';
 import { ChainId } from '~/core/types/chains';
 import {
   SearchAsset,
@@ -25,6 +19,8 @@ import {
 } from '~/core/types/search';
 import { getSupportedChains, isCustomChain } from '~/core/utils/chains';
 
+import { parseTokenSearch } from './parseTokenSearch';
+
 // ///////////////////////////////////////////////
 // Query Types
 
@@ -90,43 +86,14 @@ async function tokenSearchQueryFunction({
   const url = `/${chainId}/?${qs.stringify(queryParams)}`;
   try {
     const tokenSearch = await tokenSearchHttp.get<{ data: SearchAsset[] }>(url);
-    return parseTokenSearch(tokenSearch.data.data, chainId);
+    return tokenSearch.data.data.map((asset) =>
+      parseTokenSearch(asset, chainId),
+    );
   } catch (e) {
     return [];
   }
 }
 
-function parseTokenSearch(assets: SearchAsset[], chainId: ChainId) {
-  return assets
-    .map((a) => {
-      const networkInfo = a.networks[chainId];
-
-      const asset: SearchAsset = {
-        ...a,
-        address: networkInfo ? networkInfo.address : a.address,
-        chainId,
-        decimals: networkInfo ? networkInfo.decimals : a.decimals,
-        isNativeAsset: [
-          `${ETH_ADDRESS}_${ChainId.mainnet}`,
-          `${ETH_ADDRESS}_${ChainId.optimism}`,
-          `${ETH_ADDRESS}_${ChainId.arbitrum}`,
-          `${BNB_BSC_ADDRESS}_${ChainId.bsc}`,
-          `${MATIC_POLYGON_ADDRESS}_${ChainId.polygon}`,
-          `${ETH_ADDRESS}_${ChainId.base}`,
-          `${ETH_ADDRESS}_${ChainId.zora}`,
-          `${ETH_ADDRESS}_${ChainId.avalanche}`,
-          `${ETH_ADDRESS}_${ChainId.blast}`,
-          `${ETH_ADDRESS}_${ChainId.degen}`,
-        ].includes(`${a.uniqueId}_${chainId}`),
-        mainnetAddress: a.uniqueId as Address,
-        uniqueId: `${networkInfo?.address || a.uniqueId}_${chainId}`,
-      };
-
-      return asset;
-    })
-    .filter(Boolean);
-}
-
 type TokenSearchResult = QueryFunctionResult<typeof tokenSearchQueryFunction>;
 
 // ///////////////////////////////////////////////

src/entries/popup/hooks/useSearchCurrencyLists.ts

@@ -7,6 +7,7 @@ import { Address } from 'viem';
 import { SUPPORTED_CHAINS } from '~/core/references/chains';
 import { useAssetSearchMetadataAllNetworks } from '~/core/resources/assets/assetMetadata';
 import { useTokenSearch } from '~/core/resources/search';
+import { useTokenDiscovery } from '~/core/resources/search/tokenDiscovery';
 import { useTokenSearchAllNetworks } from '~/core/resources/search/tokenSearch';
 import { useTestnetModeStore } from '~/core/state/currentSettings/testnetMode';
 import { ParsedSearchAsset } from '~/core/types/assets';
@@ -43,7 +44,8 @@ export type AssetToBuySectionId =
   | 'favorites'
   | 'verified'
   | 'unverified'
-  | 'other_networks';
+  | 'other_networks'
+  | 'popular';
 
 export interface AssetToBuySection {
   data: SearchAsset[];
@@ -279,6 +281,8 @@ export function useSearchCurrencyLists({
       },
     );
 
+  const { data: popularAssets } = useTokenDiscovery({ chainId: outputChainId });
+
   const { favorites } = useFavoriteAssets();
 
   const favoritesList = useMemo(() => {
@@ -508,6 +512,10 @@ export function useSearchCurrencyLists({
       return sections;
     }
 
+    if (popularAssets) {
+      sections.push({ id: 'popular', data: popularAssets });
+    }
+
     if (bridgeAsset) {
       sections.push({
         data: [bridgeAsset],
@@ -616,6 +624,7 @@ export function useSearchCurrencyLists({
     targetUnverifiedAssets,
     enableUnverifiedSearch,
     crosschainExactMatches,
+    popularAssets,
   ]);
 
   return {