diff --git a/src/app/hooks/use-collectibles-pagination-logic.ts b/src/app/hooks/use-collectibles-pagination-logic.ts index ef9fce503..f8c45c7b6 100644 --- a/src/app/hooks/use-collectibles-pagination-logic.ts +++ b/src/app/hooks/use-collectibles-pagination-logic.ts @@ -53,7 +53,10 @@ export const useCollectiblesPaginationLogic = (allSlugsSorted: string[]) => { }); useDidUpdate(() => { - if (!isLoading && slugs.length) _load(slugs.length); + if (isLoading) return; + + if (slugs.length) _load(slugs.length); + else if (allSlugsSorted.length) _load(ITEMS_PER_PAGE); }, [allSlugsSorted]); const loadNext = useCallback(() => { diff --git a/src/app/hooks/use-tokens-listing-logic.ts b/src/app/hooks/use-tokens-listing-logic.ts index 65dd74123..99174aafc 100644 --- a/src/app/hooks/use-tokens-listing-logic.ts +++ b/src/app/hooks/use-tokens-listing-logic.ts @@ -10,6 +10,7 @@ import { useTokensSortPredicate } from 'lib/assets/use-sorting'; import { useCurrentAccountBalances } from 'lib/balances'; import { useGetTokenOrGasMetadata } from 'lib/metadata'; import { useMemoWithCompare } from 'lib/ui/hooks'; +import { isSearchStringApplicable } from 'lib/utils/search-items'; export const useTokensListingLogic = ( assetsSlugs: string[], @@ -18,7 +19,7 @@ export const useTokensListingLogic = ( leadingAssetsAreFilterable = false ) => { const nonLeadingAssets = useMemo( - () => (leadingAssets?.length ? assetsSlugs.filter(slug => !leadingAssets.includes(slug)) : [...assetsSlugs]), + () => (leadingAssets?.length ? assetsSlugs.filter(slug => !leadingAssets.includes(slug)) : assetsSlugs), [assetsSlugs, leadingAssets] ); @@ -45,7 +46,9 @@ export const useTokensListingLogic = ( const searchedSlugs = useMemo( () => - searchAssetsWithNoMeta(searchValueDebounced, sourceArray, getMetadata, slug => slug).sort(assetsSortPredicate), + isSearchStringApplicable(searchValueDebounced) + ? searchAssetsWithNoMeta(searchValueDebounced, sourceArray, getMetadata, slug => slug) + : [...sourceArray].sort(assetsSortPredicate), [searchValueDebounced, sourceArray, getMetadata, assetsSortPredicate] ); diff --git a/src/lib/assets/search.utils.ts b/src/lib/assets/search.utils.ts index 3e435d652..83cf15e3d 100644 --- a/src/lib/assets/search.utils.ts +++ b/src/lib/assets/search.utils.ts @@ -3,26 +3,43 @@ import { TEZOS_METADATA } from 'lib/metadata/defaults'; import type { AssetMetadataBase } from 'lib/metadata/types'; import { searchAndFilterItems } from 'lib/utils/search-items'; +import { fromAssetSlug } from './utils'; + export function searchAssetsWithNoMeta( searchValue: string, assets: T[], getMetadata: (slug: string) => AssetMetadataBase | undefined, getSlug: (asset: T) => string ) { + const trimmedSearchValue = searchValue.trim(); + + if (trimmedSearchValue.search(/^[A-Za-z0-9]+_\d*$/) === 0) + return assets.filter(asset => getSlug(asset).startsWith(trimmedSearchValue)); + return searchAndFilterItems( assets, searchValue, - [ - { name: 'metadata.symbol', weight: 1 }, - { name: 'metadata.name', weight: 0.25 }, - { name: 'slug', weight: 0.1 } - ], + Number.isInteger(Number(searchValue)) + ? [ + { name: 'tokenId', weight: 1 }, + { name: 'symbol', weight: 0.75 }, + { name: 'name', weight: 0.5 } + ] + : [ + { name: 'symbol', weight: 1 }, + { name: 'name', weight: 0.5 }, + { name: 'contract', weight: 0.1 } + ], asset => { const slug = getSlug(asset); + const [contract, tokenId] = fromAssetSlug(slug); + const metadata = isTezAsset(slug) ? TEZOS_METADATA : getMetadata(slug); return { - slug, - metadata: isTezAsset(slug) ? TEZOS_METADATA : getMetadata(slug) + contract, + tokenId, + symbol: metadata?.symbol, + name: metadata?.name }; } ); diff --git a/src/lib/utils/search-items.ts b/src/lib/utils/search-items.ts index 177486ac9..f0fc5bd16 100644 --- a/src/lib/utils/search-items.ts +++ b/src/lib/utils/search-items.ts @@ -20,5 +20,5 @@ export function searchAndFilterItems( const result = fuse.search(searchString); - return items.filter((_, index) => result.some(({ refIndex }) => refIndex === index)); + return result.map(({ refIndex }) => items[refIndex]!); }