feat: add discover button to portfolio discover network page #30777

Julink-eth · 2025-03-05T15:08:40Z

Description

What is the reason for the change?
There is a new network ecosystem page being added to portfolio. To add visibility for this page, a new Discover button needs to be added to the networks menu for users to be redirected to that page.
What is the improvement/solution?
Add a new button on top of the Edit button in the network's menu.

A feature flag has been added to activate the feature when the Portfolio Hub page for Linea will be live.

Related issues

NA

Manual testing steps

Go to the networks menu
Click on the 3 dots icon next to the network Linea
You should see the button Discover
Click on the button Discover
You should be redirected to the page https://portfolio.metamask.io/explore/networks/linea (Might not be live yet)
Check for the others networks in the networks menu, the button should not be visible

Screenshots/Recordings

Before

After

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 · 2025-03-05T15:08:59Z

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.

Julink-eth · 2025-03-05T15:18:42Z

I have read the CLA Document and I hereby sign the CLA

- do not use the properties from network configuration, instead using a Hash Map `CHAIN_ID_PROFOLIO_LANDING_PAGE_URL_MAP` to indicate the portfolio discover Url for a network - add remote feature flag

metamaskbot · 2025-03-11T10:54:15Z

Builds ready [4980350]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all 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

Page Load Metrics (1827 ± 75 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1609	2306	1827	153	73
		domContentLoaded	1558	2149	1771	124	59
		load	1602	2302	1827	156	75
		domInteractive	26	121	39	21	10
		backgroundConnect	11	145	55	38	18
		firstReactRender	14	82	31	21	10
		getState	6	73	30	24	11
		initialActions	0	1	0	0	0
		loadScripts	1177	1568	1341	88	42
		setupStore	8	53	16	13	6
		uiStartup	1796	2818	2132	289	139

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

background: 0 Bytes (0.00%)
ui: 653 Bytes (0.01%)
common: 187 Bytes (0.00%)

metamaskbot · 2025-03-13T08:53:57Z

Builds ready [fa39f42]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all 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
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (2208 ± 260 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1721	3744	2162	439	211
		domContentLoaded	1708	3416	2077	364	175
		load	1722	4167	2208	542	260
		domInteractive	26	236	56	47	23
		backgroundConnect	12	782	137	223	107
		firstReactRender	15	176	45	42	20
		getState	7	275	54	72	35
		initialActions	0	1	0	0	0
		loadScripts	1295	2410	1568	238	114
		setupStore	7	140	33	39	19
		uiStartup	1913	6824	2813	1271	611

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

background: 0 Bytes (0.00%)
ui: 653 Bytes (0.01%)
common: 187 Bytes (0.00%)

metamaskbot · 2025-03-18T09:42:02Z

Builds ready [4ce842f]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all 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

Page Load Metrics (7704 ± 4232 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1868	33316	6516	8549	4105
		domContentLoaded	1764	33010	6847	8820	4235
		load	1888	33238	7704	8814	4232
		domInteractive	28	979	143	207	99
		backgroundConnect	23	3969	688	906	435
		firstReactRender	23	263	98	64	31
		getState	53	4956	424	1049	504
		initialActions	0	0	0	0	0
		loadScripts	1319	32522	6075	8751	4202
		setupStore	14	1734	173	369	177
		uiStartup	2479	33538	10081	9094	4367

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

background: 0 Bytes (0.00%)
ui: 653 Bytes (0.01%)
common: 187 Bytes (0.00%)

darkwing · 2025-03-24T17:17:23Z

ui/components/multichain/network-list-item-menu/network-list-item-menu.js

+          {onDiscoverClick ? (
+            <MenuItem
+              iconName={IconName.Eye}
+              onClick={(e) => {


Can this be a useCallback as well?

Hey David!
I can add it but in that case should we add useCallBack for onEditClick and onDeleteClick as well ?

i think the onDiscoverClick is already having useCallback at getItemCallbacks in network-list-menu.tsx

then the function pass to network-list-item and finally landed in this component, which should have the same behaviour as other functions; e.g: onEditClick, onDeleteClick, no?

metamaskbot · 2025-03-25T10:09:56Z

Builds ready [b4ad95d]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all 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
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (2932 ± 1036 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1708	11824	2727	2125	1020
		domContentLoaded	1521	11059	2479	1997	959
		load	1710	12043	2932	2157	1036
		domInteractive	25	368	74	75	36
		backgroundConnect	46	1345	482	368	177
		firstReactRender	20	184	93	43	21
		getState	14	610	246	199	95
		initialActions	0	1	0	0	0
		loadScripts	1082	9585	1810	1795	862
		setupStore	9	401	139	123	59
		uiStartup	1904	16602	5614	3662	1758

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

background: 0 Bytes (0.00%)
ui: 719 Bytes (0.01%)
common: 322 Bytes (0.00%)

metamaskbot · 2025-03-26T10:15:16Z

Builds ready [751972f]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all 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
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (4385 ± 2415 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1784	20327	4149	5064	2432
		domContentLoaded	1643	20125	3851	5101	2449
		load	1805	20455	4385	5030	2415
		domInteractive	27	1277	154	270	130
		backgroundConnect	146	1761	565	383	184
		firstReactRender	53	205	112	37	18
		getState	55	393	199	111	53
		initialActions	0	2	0	0	0
		loadScripts	1221	18595	3167	4976	2390
		setupStore	22	394	144	103	49
		uiStartup	2502	21670	8101	5719	2746

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

background: 0 Bytes (0.00%)
ui: 719 Bytes (0.01%)
common: 322 Bytes (0.00%)

ui/components/multichain/network-list-item/network-list-item.tsx

gambinish

Pulled, tested, LGTM.

Looks like CI is still broken. Seemingly CI related. I noticed a Slack thread regarding this incident. Feel free to message me directly on Slack to discuss.

shared/constants/network.ts

metamaskbot · 2025-03-26T19:43:41Z

Builds ready [ff4eeba]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all 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
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
- content-script: 0
- offscreen: 0

Page Load Metrics (5173 ± 2914 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	281	23800	4750	6211	2982
		domContentLoaded	1672	23682	4699	6062	2911
		load	1761	23810	5173	6068	2914
		domInteractive	29	639	148	166	80
		backgroundConnect	25	1616	470	456	219
		firstReactRender	23	412	126	126	60
		getState	6	648	199	200	96
		initialActions	0	1	0	0	0
		loadScripts	1220	23201	3962	5892	2829
		setupStore	8	613	157	184	88
		uiStartup	2001	24166	8134	6626	3181

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

background: 0 Bytes (0.00%)
ui: 766 Bytes (0.01%)
common: 322 Bytes (0.00%)

feat: add discover button to portfolio discover network page

5a0e5ea

Julink-eth added area-customNetworks area-UI Relating to the user interface. labels Mar 5, 2025

Julink-eth mentioned this pull request Mar 5, 2025

feat: add portfolio discover page url in network configuration MetaMask/core#5429

Closed

4 tasks

Julink-eth and others added 13 commits March 6, 2025 15:57

fix: extra slash

be50272

chore: refine network discover button

0cf4c62

- do not use the properties from network configuration, instead using a Hash Map `CHAIN_ID_PROFOLIO_LANDING_PAGE_URL_MAP` to indicate the portfolio discover Url for a network - add remote feature flag

chore: remove un used method

d7b16b4

chore: add network list menu item hook deps

70eff65

chore: fix network list menu test

e7de77a

chore: update test not using it.each

b664f12

chore: update test title

05cee54

chore: remove unnecessary casting

a00beb7

chore: remove feature flag

42cd199

chore: fix unit test

d2c2e15

Merge branch 'main' into add-discover-network-button

b07a229

fix: remove unused selector

edc3b35

chore: add discover translation to en_GB

4980350

Merge branch 'main' into add-discover-network-button

fa39f42

Julink-eth added the team-network-enablement label Mar 13, 2025

Julink-eth marked this pull request as ready for review March 13, 2025 08:59

Julink-eth requested a review from a team as a code owner March 13, 2025 08:59

Merge branch 'main' into add-discover-network-button

4ce842f

Julink-eth added this to PR review queue Mar 18, 2025

github-project-automation bot moved this to Needs dev review in PR review queue Mar 18, 2025

darkwing reviewed Mar 24, 2025

View reviewed changes

Julink-eth added 2 commits March 25, 2025 10:15

feat: add feature flag nePortfolioDiscoverButton

2e83629

Merge branch 'main' into add-discover-network-button

b4ad95d

Julink-eth moved this from Needs dev review to Review in progress in PR review queue Mar 26, 2025

Merge branch 'main' into add-discover-network-button

751972f

Julink-eth enabled auto-merge March 26, 2025 12:19

Merge branch 'main' into add-discover-network-button

f349f5a

darkwing previously approved these changes Mar 26, 2025

View reviewed changes

Merge branch 'main' into add-discover-network-button

5b50bec

Julink-eth moved this from Review in progress to Has approvals, needs CODEOWNER in PR review queue Mar 26, 2025

gambinish reviewed Mar 26, 2025

View reviewed changes

ui/components/multichain/network-list-item/network-list-item.tsx Outdated Show resolved Hide resolved

gambinish previously approved these changes Mar 26, 2025

View reviewed changes

github-project-automation bot moved this from Has approvals, needs CODEOWNER to Review finalised - Ready to be merged in PR review queue Mar 26, 2025

chore: convert renderButton function into useCallback

ff4eeba

Julink-eth dismissed stale reviews from gambinish and darkwing via ff4eeba March 26, 2025 19:05

gambinish approved these changes Mar 26, 2025

View reviewed changes

Battambang reviewed Mar 26, 2025

View reviewed changes

shared/constants/network.ts Show resolved Hide resolved

Battambang approved these changes Mar 26, 2025

View reviewed changes

Julink-eth moved this from Review finalised - Ready to be merged to Has approvals, needs CODEOWNER in PR review queue Mar 26, 2025

darkwing approved these changes Mar 26, 2025

View reviewed changes

Julink-eth added this pull request to the merge queue Mar 26, 2025

github-project-automation bot moved this from Has approvals, needs CODEOWNER to Review finalised - Ready to be merged in PR review queue Mar 26, 2025

Merged via the queue into main with commit 939f955 Mar 26, 2025
143 of 144 checks passed

Julink-eth deleted the add-discover-network-button branch March 26, 2025 22:04

github-actions bot locked and limited conversation to collaborators Mar 26, 2025

metamaskbot added the release-12.16.0 Issue or pull request that will be included in release 12.16.0 label Mar 26, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add discover button to portfolio discover network page #30777

feat: add discover button to portfolio discover network page #30777

Julink-eth commented Mar 5, 2025 •

edited

Loading

github-actions bot commented Mar 5, 2025 •

edited

Loading

Julink-eth commented Mar 5, 2025

metamaskbot commented Mar 11, 2025

metamaskbot commented Mar 13, 2025

metamaskbot commented Mar 18, 2025

darkwing Mar 24, 2025

Julink-eth Mar 24, 2025 •

edited

Loading

stanleyyconsensys Mar 25, 2025 •

edited

Loading

metamaskbot commented Mar 25, 2025

metamaskbot commented Mar 26, 2025

gambinish left a comment

metamaskbot commented Mar 26, 2025

feat: add discover button to portfolio discover network page #30777

feat: add discover button to portfolio discover network page #30777

Conversation

Julink-eth commented Mar 5, 2025 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Mar 5, 2025 • edited Loading

Julink-eth commented Mar 5, 2025

metamaskbot commented Mar 11, 2025

metamaskbot commented Mar 13, 2025

metamaskbot commented Mar 18, 2025

darkwing Mar 24, 2025

Choose a reason for hiding this comment

Julink-eth Mar 24, 2025 • edited Loading

Choose a reason for hiding this comment

stanleyyconsensys Mar 25, 2025 • edited Loading

Choose a reason for hiding this comment

metamaskbot commented Mar 25, 2025

metamaskbot commented Mar 26, 2025

gambinish left a comment

Choose a reason for hiding this comment

metamaskbot commented Mar 26, 2025

Julink-eth commented Mar 5, 2025 •

edited

Loading

github-actions bot commented Mar 5, 2025 •

edited

Loading

Julink-eth Mar 24, 2025 •

edited

Loading

stanleyyconsensys Mar 25, 2025 •

edited

Loading