feat: fetch asset metadata on search

[micaelae]

Description

This changes adds a useAssetMetadata hook that fetches asset details if it is not found in existing token lists. I've also added more unit test coverage for the asset-picker token filtering

See Copilot summary for more details

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MMS-2094

Manual testing steps

1. Select solana as active network
2. Go to Bridge page
3. Get the address of a new pump.fun coin
4. Paste address into the asset picker's search bar
5. The token should appear on the list and be selectable
6. After filling out quote params, quotes should be fetched

Screenshots/Recordings

Before

No asset is shown

After

Screen.Recording.2025-03-25.at.5.29.08.PM.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[Copilot]

Pull Request Overview

This PR introduces a new hook (useAssetMetadata) to fetch asset details that aren’t available in the local token lists and improves token filtering in the asset picker. Key changes include refactoring multichain balance processing to use a robust CAIP parser, updating the tokens filtering logic with enhanced image URL fallbacks, and integrating a debounced search with cancellation in the asset picker modal.

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
ui/hooks/useMultichainBalances.ts	Refactored CAIP parsing and adjusted asset property types to improve balance handling.
ui/hooks/bridge/useTokensWithFiltering.ts	Updated token filtering logic and image URL fallback for native assets.
ui/components/multichain/asset-picker-amount/asset-picker-modal/hooks/useAssetMetadata.ts	Added new hook to fetch metadata for tokens not in the local list with an external service check.
ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx	Integrated debounced search input, aborting previous fetches and using asset metadata when available.
shared/lib/asset-utils.ts	Updated helper functions to generate asset IDs and corresponding image URLs.
Test files	Extended coverage to validate asset metadata fetching and asset picker search behavior.

Comments suppressed due to low confidence (4)

ui/hooks/useMultichainBalances.ts:30

• The 'address' property type has been changed from a CAIP template literal to a generic string. Please verify that downstream consumers correctly handle this updated format.

address: string;

ui/hooks/bridge/useTokensWithFiltering.ts:203

• Ensure that the 'isNative' property is consistently set across token objects, as the updated condition now relies on it for correctly identifying native tokens.

if (isNativeAddress(token.address) || token.isNative) {

ui/components/multichain/asset-picker-amount/asset-picker-modal/hooks/useAssetMetadata.ts:50

• [nitpick] The metadata fetch condition requires the trimmed search query to be longer than 30 characters; please confirm that this threshold is intended to avoid skipping valid queries.

if (allowExternalServices && shouldFetchMetadata && trimmedSearchQuery.length > 30) {

ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx:157

• [nitpick] Ensure that the debouncedSetSearchQuery function is properly memoized or stable across renders to prevent unnecessary effect calls.

useEffect(() => { debouncedSetSearchQuery(searchQuery); }, [searchQuery, debouncedSetSearchQuery]);

[darkwing]

Worked as expected! Awesome work @micaelae !

Suggestion:

If a token's info is being searched for, show a spinner or some type of feedback message so the user knows that work is happening.

The base branch was changed.

[Copilot]

Pull Request Overview

This pull request adds support for fetching asset metadata during token search and improves token filtering and rendering across multiple chains. Key changes include the introduction of a new hook (useAssetMetadata) to fetch missing asset details, updates to token filtering logic and image URL resolution in the bridge and asset picker components, and corresponding unit and end-to-end test updates.

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
ui/hooks/useMultichainBalances.ts	Adjusts asset data structure by replacing the CAIP-formatted address with a generic string and adding an assetId field via parseCaipAssetType.
ui/hooks/bridge/useTokensWithFiltering.ts	Enhances image URL fallback logic and token native address checks with added conditions and external image map usage.
ui/components/multichain/asset-picker-amount/asset-picker-modal/hooks/useAssetMetadata.ts	Introduces a new hook for asynchronously fetching asset metadata based on search input.
ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx	Incorporates debounced search input and aborting of previous metadata fetch requests to improve responsiveness.
shared/lib/asset-utils.ts & Tests	Implements asset ID conversion, image URL generation, and metadata fetching logic with extended test coverage.

[metamaskbot]

Builds ready [dd3baa7]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• bundle size: Bundle Size Stats
• user-actions-benchmark: User Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all CircleCI artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7, 8
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

UI Startup Metrics (1212 ± 65 ms)

Platform	BuildType	Page	Metric	Mean (ms)	Min (ms)	Max (ms)	Std Dev (ms)	P 75 (ms)	P 95 (ms)
Chrome	Browserify	Home	uiStartup	1212	1064	1348	65	1255	1314
			load	1060	921	1220	65	1177	985
			domContentLoaded	1054	917	1211	65	1173	981
			domInteractive	16	13	50	5	15	27
			firstPaint	786	86	1218	409	236	98
			backgroundConnect	10	6	49	5	9	10
			firstReactRender	20	15	51	6	21	31
			getState	13	4	39	8	6	8
			initialActions	0	0	1	0	0	0
			loadScripts	838	715	978	62	879	944
			setupStore	8	4	26	3	7	8
	Webpack	Home	uiStartup	943	777	1219	83	954	973
			load	804	629	961	66	842	914
			domContentLoaded	798	615	953	66	836	903
			domInteractive	15	12	42	7	13	33
			firstPaint	445	57	957	337	824	856
			backgroundConnect	16	11	53	8	15	39
			firstReactRender	14	12	28	3	13	25
			getState	6	4	15	2	7	8
			initialActions	0	0	1	0	0	0
			loadScripts	795	605	944	65	835	893
			setupStore	7	4	16	2	7	9
Firefox	Browserify	Home	uiStartup	1352	1188	1888	142	1379	1732
			load	1217	1055	1752	138	1253	1568
			domContentLoaded	1217	1054	1751	138	1253	1567
			domInteractive	96	36	167	25	88	95
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	23	17	65	7	24	36
			firstReactRender	22	19	50	4	24	27
			getState	6	3	21	2	7	8
			initialActions	0	0	1	0	0	1
			loadScripts	1195	1036	1717	136	1230	1503
			setupStore	6	4	29	3	5	7
	Webpack	Home	uiStartup	988	829	1573	163	916	980
			load	866	726	1362	143	812	901
			domContentLoaded	865	726	1362	143	811	900
			domInteractive	119	37	184	27	152	89
			firstPaint	NaN	NaN	NaN	NaN	NaN	NaN
			backgroundConnect	20	13	86	10	24	35
			firstReactRender	19	16	27	2	19	24
			getState	9	4	79	10	7	9
			initialActions	0	0	1	0	0	1
			loadScripts	848	713	1340	140	799	944
			setupStore	9	5	68	11	7	9

Bundle size diffs

• background: -69.92 KiB (-1.18%)
• ui: 3.86 KiB (0.06%)
• common: 69.92 KiB (0.74%)