feat: multichain token detection

[salimtb]

Description

TokenDetectionController is responsible for detecting and keeping an updated list of all tokens across supported chains. This dataset is stored in the detectedTokens state variable within Metamask’s state. After completing this task, token detection will be enhanced by implementing periodic polling across all networks linked to the wallet, resulting in a more comprehensive dataset available to users.

For each network added to the wallet, the polling loop will receive the network as a parameter and execute token autodetection for it. Once results are available, they will be stored in detectedTokensAllChains, organized by chainId. This approach enables us to retrieve a comprehensive list of detected tokens across all networks.

Related issues

Fixes: #3431

Manual testing steps

1. install dependencies using yarn
2. start the project using PORTFOLIO_VIEW=1 yarn start
3. add other networks where you have tokens
4. the autodetection should be multichain

Screenshots/Recordings

Before

After

Screen.Recording.2024-11-08.at.14.27.23.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.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

Builds ready [fde2ca2]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

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

Page Load Metrics (2038 ± 79 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	440	2326	1955	384	184
		domContentLoaded	1685	2313	2001	169	81
		load	1739	2328	2038	165	79
		domInteractive	24	109	51	21	10
		backgroundConnect	7	97	35	28	13
		firstReactRender	60	304	127	53	26
		getState	4	57	24	21	10
		initialActions	0	1	0	0	0
		loadScripts	1202	1711	1469	137	66
		setupStore	6	84	12	17	8
		uiStartup	1896	2938	2314	248	119

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 126 Bytes (0.00%)
• ui: 2.28 KiB (0.03%)
• common: 620 Bytes (0.01%)

[metamaskbot]

Builds ready [e899713]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

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

Page Load Metrics (1965 ± 125 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1711	2809	1969	255	122
		domContentLoaded	1652	2737	1932	241	116
		load	1661	2811	1965	259	125
		domInteractive	21	106	47	22	11
		backgroundConnect	7	127	34	36	17
		firstReactRender	51	263	119	43	20
		getState	4	55	16	16	8
		initialActions	0	1	0	0	0
		loadScripts	1139	2208	1411	232	111
		setupStore	5	58	20	20	10
		uiStartup	1849	3017	2208	273	131

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 126 Bytes (0.00%)
• ui: 2.28 KiB (0.03%)
• common: 620 Bytes (0.01%)

[gambinish]

I'm noticing an unexpected behavior. When I am on a network, and I try to import my account's tokens, in the detected-token popover, I only see balances and tokenFiatBalance of the detected tokens on the chain that I am on.

Is this expected? I'm not sure if this was a limitation to our previous core dependency. I think we now have the token balances being polled cross-chain, so I wonder if it would be worth it to integrate these cross chain balances on this PR as well.

Screen.Recording.2024-11-18.at.6.37.31.PM.mov

[gambinish]

I'm noticing two bugs, that we've discussed on Slack. Posting them here for tracking:

1. On a newly imported wallet, I cannot import from my previously existing networks (this could be an existing behavior). After adding a new network, the tokens on my previously added chains get detected:

Screen.Recording.2024-11-20.at.2.39.11.PM.mov

2. There are certain scenarios where switching networks and toggling between network filter options pollutes the detected tokens, resulting in improperly imported tokens:

import-bug-1.mov

[metamaskbot]

Builds ready [c290045]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

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

Page Load Metrics (1905 ± 109 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	452	2505	1819	380	183
		domContentLoaded	1561	2428	1877	225	108
		load	1570	2450	1905	227	109
		domInteractive	17	178	55	37	18
		backgroundConnect	9	70	30	20	10
		firstReactRender	89	160	107	16	8
		getState	5	57	15	17	8
		initialActions	0	0	0	0	0
		loadScripts	1110	1827	1402	190	91
		setupStore	6	11	8	2	1
		uiStartup	1756	2732	2106	247	118

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 0 Bytes (0.00%)
• ui: 10.5 KiB (0.14%)
• common: 2.48 KiB (0.03%)

[gambinish]

Pulled down, tested, LGTM. The bugs I reported earlier now seem to be resolved ✅

Once #28593 gets through the merge queue, I think we can just rebase to develop and get these changes in 🚀

The base branch was changed.

[sahar-fehri]

Hey @salimtb Im seeing this behavior where after hiding a token and going back to main page i dnt see the same token list?

Screen.Recording.2024-11-21.at.21.14.38.mov

[salimtb]

Hey @salimtb Im seeing this behavior where after hiding a token and going back to main page i dnt see the same token list?

Screen.Recording.2024-11-21.at.21.14.38.mov

i couldn't reproduce on my side , i'll try to do it separately and follow up with a PR if needed

[metamaskbot]

Builds ready [373a8c5]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

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

Page Load Metrics (1757 ± 52 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1584	1963	1758	109	52
		domContentLoaded	1574	1941	1733	102	49
		load	1584	1956	1757	107	52
		domInteractive	22	154	41	31	15
		backgroundConnect	10	52	26	15	7
		firstReactRender	56	373	114	63	30
		getState	4	70	13	16	8
		initialActions	0	1	0	0	0
		loadScripts	1131	1479	1274	92	44
		setupStore	5	52	15	17	8
		uiStartup	1779	2398	1976	156	75

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 0 Bytes (0.00%)
• ui: 2.29 KiB (0.03%)
• common: 645 Bytes (0.01%)