From fc70db3d6d5bf8bc394b6f71297fa373f53960ac Mon Sep 17 00:00:00 2001 From: gregs Date: Sat, 7 Sep 2024 17:48:04 -0300 Subject: [PATCH 1/6] remove dead code --- .../resources/search/swappableAddresses.ts | 101 ----------- src/entries/popup/hooks/useSwappableAssets.ts | 167 ------------------ 2 files changed, 268 deletions(-) delete mode 100644 src/core/resources/search/swappableAddresses.ts delete mode 100644 src/entries/popup/hooks/useSwappableAssets.ts diff --git a/src/core/resources/search/swappableAddresses.ts b/src/core/resources/search/swappableAddresses.ts deleted file mode 100644 index 7ddb07f71d..0000000000 --- a/src/core/resources/search/swappableAddresses.ts +++ /dev/null @@ -1,101 +0,0 @@ -import { useQuery } from '@tanstack/react-query'; - -import { tokenSearchHttp } from '~/core/network/tokenSearch'; -import { - QueryConfig, - QueryFunctionArgs, - QueryFunctionResult, - createQueryKey, - queryClient, -} from '~/core/react-query'; -import { AddressOrEth } from '~/core/types/assets'; - -// /////////////////////////////////////////////// -// Query Types - -export type SwappableAddressesArgs = { - addresses: AddressOrEth[]; - fromChainId: number; - toChainId?: number; -}; - -// /////////////////////////////////////////////// -// Query Key - -const swappableAddressesQueryKey = ({ - addresses, - fromChainId, - toChainId, -}: SwappableAddressesArgs) => - createQueryKey( - 'SwappableAddresses', - { addresses, fromChainId, toChainId }, - { persisterVersion: 1 }, - ); - -type SwappableAddressesQueryKey = ReturnType; - -// /////////////////////////////////////////////// -// Query Function - -async function swappableAddressesQueryFunction({ - queryKey: [{ addresses, fromChainId, toChainId }], -}: QueryFunctionArgs) { - const filteredAddresses = await tokenSearchHttp.post<{ - data?: AddressOrEth[]; - }>(`/${fromChainId}`, { - addresses, - toChainId, - }); - return filteredAddresses.data.data || []; -} - -type SwappableAddressesResult = QueryFunctionResult< - typeof swappableAddressesQueryFunction ->; - -// /////////////////////////////////////////////// -// Query Fetcher - -export async function fetchSwappableAddresses( - { addresses, fromChainId, toChainId }: SwappableAddressesArgs, - config: QueryConfig< - SwappableAddressesResult, - Error, - SwappableAddressesResult, - SwappableAddressesQueryKey - > = {}, -) { - return await queryClient.fetchQuery({ - queryKey: swappableAddressesQueryKey({ - addresses, - fromChainId, - toChainId, - }), - queryFn: swappableAddressesQueryFunction, - ...config, - }); -} - -// /////////////////////////////////////////////// -// Query Hook - -export function useSwappableAddresses( - { addresses, fromChainId, toChainId }: SwappableAddressesArgs, - config: QueryConfig< - SwappableAddressesResult, - Error, - TSelectResult, - SwappableAddressesQueryKey - > = {}, -) { - return useQuery({ - queryKey: swappableAddressesQueryKey({ - addresses, - fromChainId, - toChainId, - }), - queryFn: swappableAddressesQueryFunction, - ...config, - }); -} diff --git a/src/entries/popup/hooks/useSwappableAssets.ts b/src/entries/popup/hooks/useSwappableAssets.ts deleted file mode 100644 index 903100c016..0000000000 --- a/src/entries/popup/hooks/useSwappableAssets.ts +++ /dev/null @@ -1,167 +0,0 @@ -import { useMemo } from 'react'; - -import { - selectUserAssetAddressMapByChainId, - selectUserAssetsList, -} from '~/core/resources/_selectors/assets'; -import { useUserAssets } from '~/core/resources/assets'; -import { useSwappableAddresses } from '~/core/resources/search/swappableAddresses'; -import { useCurrentAddressStore, useCurrentCurrencyStore } from '~/core/state'; -import { ParsedAssetsDictByChain, ParsedUserAsset } from '~/core/types/assets'; -import { ChainId } from '~/core/types/chains'; - -export function useSwappableAssets(toChainId?: ChainId) { - const { currentAddress: address } = useCurrentAddressStore(); - - const { currentCurrency: currency } = useCurrentCurrencyStore(); - - const { data: userAssets } = useUserAssets({ - address, - currency, - }); - - const fullUserAssetList = selectUserAssetsList( - userAssets || ({} as ParsedAssetsDictByChain), - ); - const assetAddressMap = selectUserAssetAddressMapByChainId( - userAssets || ({} as ParsedAssetsDictByChain), - ); - - const { - data: swappableMainnetAddresses, - isLoading: swappableMainnetAddressesAreLoading, - } = useSwappableAddresses({ - addresses: assetAddressMap[ChainId.mainnet], - fromChainId: ChainId.mainnet, - toChainId, - }); - - const { - data: swappableOptimismAddresses, - isLoading: swappableOptimismAddressesAreLoading, - } = useSwappableAddresses({ - addresses: assetAddressMap[ChainId.optimism], - fromChainId: ChainId.optimism, - toChainId, - }); - - const { - data: swappableBaseAddresses, - isLoading: swappableBaseAddressesAreLoading, - } = useSwappableAddresses({ - addresses: assetAddressMap[ChainId.base], - fromChainId: ChainId.base, - toChainId, - }); - - const { - data: swappableZoraAddresses, - isLoading: swappableZoraAddressesAreLoading, - } = useSwappableAddresses({ - addresses: assetAddressMap[ChainId.zora], - fromChainId: ChainId.zora, - toChainId, - }); - - const { - data: swappableBscAddresses, - isLoading: swappableBscAddressesAreLoading, - } = useSwappableAddresses({ - addresses: assetAddressMap[ChainId.bsc], - fromChainId: ChainId.bsc, - toChainId, - }); - - const { - data: swappablePolygonAddresses, - isLoading: swappablePolygonAddressesAreLoading, - } = useSwappableAddresses({ - addresses: assetAddressMap[ChainId.polygon], - fromChainId: ChainId.polygon, - toChainId, - }); - - const { - data: swappableArbitrumAddresses, - isLoading: swappableArbitrumAddressesAreLoading, - } = useSwappableAddresses({ - addresses: assetAddressMap[ChainId.arbitrum], - fromChainId: ChainId.arbitrum, - toChainId, - }); - - const { - data: swappableAvalancheAddresses, - isLoading: swappableAvalancheAddressesAreLoading, - } = useSwappableAddresses({ - addresses: assetAddressMap[ChainId.avalanche], - fromChainId: ChainId.avalanche, - toChainId, - }); - - const swappableInfo = useMemo( - () => ({ - [ChainId.mainnet]: { - addresses: swappableMainnetAddresses, - loading: swappableMainnetAddressesAreLoading, - }, - [ChainId.optimism]: { - addresses: swappableOptimismAddresses, - loading: swappableOptimismAddressesAreLoading, - }, - [ChainId.bsc]: { - addresses: swappableBscAddresses, - loading: swappableBscAddressesAreLoading, - }, - [ChainId.polygon]: { - addresses: swappablePolygonAddresses, - loading: swappablePolygonAddressesAreLoading, - }, - [ChainId.arbitrum]: { - addresses: swappableArbitrumAddresses, - loading: swappableArbitrumAddressesAreLoading, - }, - [ChainId.base]: { - addresses: swappableBaseAddresses, - loading: swappableBaseAddressesAreLoading, - }, - [ChainId.zora]: { - addresses: swappableZoraAddresses, - loading: swappableZoraAddressesAreLoading, - }, - [ChainId.avalanche]: { - addresses: swappableAvalancheAddresses, - loading: swappableAvalancheAddressesAreLoading, - }, - }), - [ - swappableArbitrumAddresses, - swappableArbitrumAddressesAreLoading, - swappableBscAddresses, - swappableBscAddressesAreLoading, - swappableMainnetAddresses, - swappableMainnetAddressesAreLoading, - swappableOptimismAddresses, - swappableOptimismAddressesAreLoading, - swappablePolygonAddresses, - swappablePolygonAddressesAreLoading, - swappableBaseAddresses, - swappableBaseAddressesAreLoading, - swappableZoraAddresses, - swappableZoraAddressesAreLoading, - swappableAvalancheAddresses, - swappableAvalancheAddressesAreLoading, - ], - ); - - const isSwappableAsset = (asset: ParsedUserAsset) => { - const { address, chainId } = asset; - if (chainId === toChainId) return true; - const { addresses, loading } = swappableInfo[chainId]; - return loading || addresses?.includes(address); - }; - - if (!toChainId) return fullUserAssetList; - - return fullUserAssetList.filter((asset) => isSwappableAsset(asset)); -} From 3d24e333d0ff1d78c1864cdb325ad7fb2ccb98d5 Mon Sep 17 00:00:00 2001 From: gregs Date: Sat, 7 Sep 2024 17:50:07 -0300 Subject: [PATCH 2/6] add popular in rainbow section --- src/core/resources/search/parseTokenSearch.ts | 41 +++++++++++++++++ src/core/resources/search/tokenDiscovery.ts | 46 +++++++++++++++++++ src/core/resources/search/tokenSearch.ts | 43 ++--------------- .../popup/hooks/useSearchCurrencyLists.ts | 11 ++++- .../TokenDropdown/TokenToBuySection.tsx | 11 ++++- static/json/languages/en_US.json | 3 +- 6 files changed, 113 insertions(+), 42 deletions(-) create mode 100644 src/core/resources/search/parseTokenSearch.ts create mode 100644 src/core/resources/search/tokenDiscovery.ts diff --git a/src/core/resources/search/parseTokenSearch.ts b/src/core/resources/search/parseTokenSearch.ts new file mode 100644 index 0000000000..9ffe20e610 --- /dev/null +++ b/src/core/resources/search/parseTokenSearch.ts @@ -0,0 +1,41 @@ +import { Address } from 'viem'; + +import { + BNB_BSC_ADDRESS, + ETH_ADDRESS, + MATIC_POLYGON_ADDRESS, +} from '~/core/references'; +import { ChainId } from '~/core/types/chains'; +import { SearchAsset } from '~/core/types/search'; + +const NATIVE_ASSET_UNIQUE_IDS = [ + `${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}`, +]; + +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: NATIVE_ASSET_UNIQUE_IDS.includes( + `${asset.uniqueId}_${chainId}`, + ), + mainnetAddress: asset.uniqueId as Address, + uniqueId: `${networkInfo?.address || asset.uniqueId}_${chainId}`, + }; +} diff --git a/src/core/resources/search/tokenDiscovery.ts b/src/core/resources/search/tokenDiscovery.ts new file mode 100644 index 0000000000..05d42040b6 --- /dev/null +++ b/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) { + 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 + }); +} diff --git a/src/core/resources/search/tokenSearch.ts b/src/core/resources/search/tokenSearch.ts index 53823aafbc..42743502f6 100644 --- a/src/core/resources/search/tokenSearch.ts +++ b/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; // /////////////////////////////////////////////// diff --git a/src/entries/popup/hooks/useSearchCurrencyLists.ts b/src/entries/popup/hooks/useSearchCurrencyLists.ts index ad0910195d..f26bae595c 100644 --- a/src/entries/popup/hooks/useSearchCurrencyLists.ts +++ b/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 { diff --git a/src/entries/popup/pages/swap/SwapTokenInput/TokenDropdown/TokenToBuySection.tsx b/src/entries/popup/pages/swap/SwapTokenInput/TokenDropdown/TokenToBuySection.tsx index 3feb0e5146..5e5e9dec40 100644 --- a/src/entries/popup/pages/swap/SwapTokenInput/TokenDropdown/TokenToBuySection.tsx +++ b/src/entries/popup/pages/swap/SwapTokenInput/TokenDropdown/TokenToBuySection.tsx @@ -66,6 +66,14 @@ const sectionProps: { [id in AssetToBuySectionId]: SectionProp } = { webkitBackgroundClip: undefined, background: undefined, }, + popular: { + title: i18n.t('token_search.section_header.popular'), + symbol: 'flame' as SymbolProps['symbol'], + color: 'red' as TextStyles['color'], + gradient: undefined, + webkitBackgroundClip: undefined, + background: undefined, + }, }; const bridgeSectionsColorsByChain = { @@ -138,7 +146,7 @@ export const getTokenToBuySectionElements = ({ @@ -170,7 +178,6 @@ export const getTokenToBuySectionElements = ({ assetSection.data.map((asset, i) => { return ( onSelectAsset?.(asset as ParsedSearchAsset)} testId={`${asset?.uniqueId}-${assetSection.id}-token-to-buy-row`} diff --git a/static/json/languages/en_US.json b/static/json/languages/en_US.json index 0af93da120..d870dda5cb 100644 --- a/static/json/languages/en_US.json +++ b/static/json/languages/en_US.json @@ -1629,7 +1629,8 @@ "unverified": "Unverified", "verified": "Verified", "on_other_networks": "On other networks", - "bridge": "Bridge" + "bridge": "Bridge", + "popular": "Popular in Rainbow" }, "verified_by_rainbow": "Verified by Rainbow" }, From b2188294441166f022410e5fec80e63ec2bbf51f Mon Sep 17 00:00:00 2001 From: gregs Date: Mon, 9 Sep 2024 18:07:58 -0300 Subject: [PATCH 3/6] fix isNativeAsset --- src/core/resources/search/parseTokenSearch.ts | 28 +++---------------- 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/src/core/resources/search/parseTokenSearch.ts b/src/core/resources/search/parseTokenSearch.ts index 9ffe20e610..271ca9cd76 100644 --- a/src/core/resources/search/parseTokenSearch.ts +++ b/src/core/resources/search/parseTokenSearch.ts @@ -1,25 +1,7 @@ -import { Address } from 'viem'; - -import { - BNB_BSC_ADDRESS, - ETH_ADDRESS, - MATIC_POLYGON_ADDRESS, -} from '~/core/references'; +import { AddressOrEth } from '~/core/types/assets'; import { ChainId } from '~/core/types/chains'; import { SearchAsset } from '~/core/types/search'; - -const NATIVE_ASSET_UNIQUE_IDS = [ - `${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}`, -]; +import { isNativeAsset } from '~/core/utils/chains'; export function parseTokenSearch( asset: SearchAsset, @@ -32,10 +14,8 @@ export function parseTokenSearch( address: networkInfo ? networkInfo.address : asset.address, chainId, decimals: networkInfo ? networkInfo.decimals : asset.decimals, - isNativeAsset: NATIVE_ASSET_UNIQUE_IDS.includes( - `${asset.uniqueId}_${chainId}`, - ), - mainnetAddress: asset.uniqueId as Address, + isNativeAsset: isNativeAsset(asset.address, chainId), + mainnetAddress: asset.uniqueId as AddressOrEth, uniqueId: `${networkInfo?.address || asset.uniqueId}_${chainId}`, }; } From b3e65e3c69ef86719008b4985bba4f83ec04b596 Mon Sep 17 00:00:00 2001 From: gregs Date: Tue, 10 Sep 2024 12:50:51 -0300 Subject: [PATCH 4/6] limit to 3 --- src/entries/popup/hooks/useSearchCurrencyLists.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/entries/popup/hooks/useSearchCurrencyLists.ts b/src/entries/popup/hooks/useSearchCurrencyLists.ts index f26bae595c..c017de30a5 100644 --- a/src/entries/popup/hooks/useSearchCurrencyLists.ts +++ b/src/entries/popup/hooks/useSearchCurrencyLists.ts @@ -513,7 +513,7 @@ export function useSearchCurrencyLists({ } if (popularAssets) { - sections.push({ id: 'popular', data: popularAssets }); + sections.push({ id: 'popular', data: popularAssets.slice(0, 3) }); } if (bridgeAsset) { From bf1e49f3bea3c1bec0b1a747c84545e09182fd76 Mon Sep 17 00:00:00 2001 From: gregs Date: Tue, 17 Sep 2024 01:14:38 -0300 Subject: [PATCH 5/6] hm --- .../popup/hooks/useSearchCurrencyLists.ts | 48 +++++++++++++++---- 1 file changed, 38 insertions(+), 10 deletions(-) diff --git a/src/entries/popup/hooks/useSearchCurrencyLists.ts b/src/entries/popup/hooks/useSearchCurrencyLists.ts index c017de30a5..85b0f5fdbc 100644 --- a/src/entries/popup/hooks/useSearchCurrencyLists.ts +++ b/src/entries/popup/hooks/useSearchCurrencyLists.ts @@ -68,6 +68,18 @@ const filterBridgeAsset = ({ asset?.name?.toLowerCase()?.startsWith(filter?.toLowerCase()) || asset?.symbol?.toLowerCase()?.startsWith(filter?.toLowerCase()); +function difference( + assets: SearchAsset[], + others: (SearchAsset | undefined | null)[], +) { + const _others = others.filter(Boolean); + return assets.filter((asset) => { + return !_others.some((other) => + isLowerCaseMatch(other.address, asset.address), + ); + }); +} + export function useSearchCurrencyLists({ assetToSell, inputChainId, @@ -281,7 +293,9 @@ export function useSearchCurrencyLists({ }, ); - const { data: popularAssets } = useTokenDiscovery({ chainId: outputChainId }); + const { data: popularAssets = [] } = useTokenDiscovery({ + chainId: outputChainId, + }); const { favorites } = useFavoriteAssets(); @@ -512,7 +526,7 @@ export function useSearchCurrencyLists({ return sections; } - if (popularAssets) { + if (popularAssets?.length) { sections.push({ id: 'popular', data: popularAssets.slice(0, 3) }); } @@ -524,15 +538,27 @@ export function useSearchCurrencyLists({ } if (favoritesList?.length) { sections.push({ - data: filterAssetsFromBridgeAndAssetToSell(favoritesList), + data: difference(favoritesList, [ + ...popularAssets, + bridgeAsset, + assetToSell, + ]), id: 'favorites', }); } + const otherSectionsAssets = [ + ...popularAssets, + ...favoritesList, + bridgeAsset, + assetToSell, + ]; + if (query === '') { sections.push({ - data: filterAssetsFromFavoritesBridgeAndAssetToSell( - curatedAssets[outputChainId], + data: difference( + curatedAssets[outputChainId] || [], + otherSectionsAssets, ), id: 'verified', }); @@ -541,8 +567,9 @@ export function useSearchCurrencyLists({ if (hasVerifiedAssets) { sections.push({ - data: filterAssetsFromFavoritesBridgeAndAssetToSell( + data: difference( targetAllNetworksVerifiedAssets, + otherSectionsAssets, ), id: 'verified', }); @@ -553,7 +580,7 @@ export function useSearchCurrencyLists({ targetAllNetworkMetadataAssets.length > 0; if (hasSomeUnverifiedAssets) { - let allUnverifiedAssets = filterAssetsFromFavoritesBridgeAndAssetToSell( + let allUnverifiedAssets = difference( uniqBy( [ ...targetAllNetworksUnverifiedAssets, @@ -561,6 +588,7 @@ export function useSearchCurrencyLists({ ], 'uniqueId', ), + otherSectionsAssets, ); if (hasVerifiedAssets) { @@ -607,13 +635,13 @@ export function useSearchCurrencyLists({ return sections; }, [ bridge, + popularAssets, bridgeAsset, favoritesList, + assetToSell, query, enableAllNetworkTokenSearch, bridgeList, - filterAssetsFromBridgeAndAssetToSell, - filterAssetsFromFavoritesBridgeAndAssetToSell, curatedAssets, outputChainId, targetAllNetworksVerifiedAssets, @@ -624,7 +652,7 @@ export function useSearchCurrencyLists({ targetUnverifiedAssets, enableUnverifiedSearch, crosschainExactMatches, - popularAssets, + filterAssetsFromFavoritesBridgeAndAssetToSell, ]); return { From 8efc4c5eab2b9ac24622a20c672ceb9284e4735b Mon Sep 17 00:00:00 2001 From: gregs Date: Tue, 17 Sep 2024 14:16:48 -0300 Subject: [PATCH 6/6] slice 3 --- src/core/resources/search/tokenDiscovery.ts | 1 + src/entries/popup/hooks/useSearchCurrencyLists.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/core/resources/search/tokenDiscovery.ts b/src/core/resources/search/tokenDiscovery.ts index 05d42040b6..42c1219091 100644 --- a/src/core/resources/search/tokenDiscovery.ts +++ b/src/core/resources/search/tokenDiscovery.ts @@ -42,5 +42,6 @@ export function useTokenDiscovery({ chainId }: TokenDiscoveryArgs) { queryFn: tokenSearchQueryFunction, staleTime: 15 * 60 * 1000, // 15 min gcTime: 24 * 60 * 60 * 1000, // 1 day + select: (data) => data.slice(0, 3), }); } diff --git a/src/entries/popup/hooks/useSearchCurrencyLists.ts b/src/entries/popup/hooks/useSearchCurrencyLists.ts index 85b0f5fdbc..5062facd3c 100644 --- a/src/entries/popup/hooks/useSearchCurrencyLists.ts +++ b/src/entries/popup/hooks/useSearchCurrencyLists.ts @@ -527,7 +527,7 @@ export function useSearchCurrencyLists({ } if (popularAssets?.length) { - sections.push({ id: 'popular', data: popularAssets.slice(0, 3) }); + sections.push({ id: 'popular', data: popularAssets }); } if (bridgeAsset) {