feat: Token Network Filter UI [Extension] #27884

gambinish · 2024-10-16T01:03:59Z

Description

Adds Token network filter controls. Note that this is not fully functional, and is currently blocked by two PRs before it can be fully integrated:

In the meantime, this PR is set behind a feature flag FILTER_TOKENS_TOGGLE and can be run as follows:

FILTER_TOKENS_TOGGLE=1 yarn webpack --watch
Alternatively: FILTER_TOKENS_TOGGLE=1 yarn start

Included in this PR:

Adds new tokenNetworkFilter preference to PreferencesController to manage which chains should be considered when filtering tokens
Adds an action to update this preference by All Networks (no filters) and Current Network { [chainId]: true) } this is meant to be flexible enough to support multiple chains in the future.
Adds filterAssets function in a similar style to sortAssets it should be configuration based, and should be extensible enough to support filtering assets by deeply nested values (NFT traits), and to also support complex filter types (like price ranges).
Dropdown should show the balance for the selected network

Not included in this PR:

Aggregated balance across chains. Blocked by fix: should not reset market data after switch network core#4832 and currently hardcoded to $1000
Token lists will not be filtered in this PR. Blocked by feat: show all tokens for all chains in the token list #27785

Related issues

https://github.com/orgs/MetaMask/projects/85/views/35?pane=issue&itemId=82217837
https://consensyssoftware.atlassian.net/browse/MMASSETS-430

Manual testing steps

Token Filter selection should persist through refresh
Current chain balance should reflect the balance of the current chain
Should visibly match designs: https://www.figma.com/design/aMYisczaJyEsYl1TYdcPUL/Portfolio-View?node-id=5750-47217&node-type=canvas&t=EjOUPnqy7tWZE6sV-0

Screenshots/Recordings

Screen.Recording.2024-10-22.at.10.46.39.AM.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 · 2024-10-16T01:04:12Z

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.

gambinish · 2024-10-17T17:46:24Z

Demo of WIP:

Screen.Recording.2024-10-17.at.7.43.44.AM.mov

…g custom filter logic

…om:MetaMask/metamask-extension into feat/mmassets-432_network-filter-extension

metamaskbot · 2024-10-24T19:40:26Z

Builds ready [441d4cf]

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
- common: 0, 1, 10, 11, 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 (2190 ± 100 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	312	2430	1886	664	319
		domContentLoaded	1810	2688	2152	198	95
		load	1853	2695	2190	207	100
		domInteractive	31	83	47	16	8
		backgroundConnect	9	127	41	34	16
		firstReactRender	82	217	117	34	16
		getState	6	97	30	29	14
		initialActions	0	1	0	0	0
		loadScripts	1338	2018	1597	159	76
		setupStore	12	101	39	29	14
		uiStartup	2056	2972	2470	221	106

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

background: 22 Bytes (0.00%)
ui: 5.5 KiB (0.07%)
common: 359 Bytes (0.00%)

andreahaku

LGTM

darkwing · 2024-10-28T20:35:08Z

Seeing this with a yarn start locally:

RPC (npm:@metamask/message-signing-snap): 
Object
 -> 
Object
 TypeError: Cannot read properties of undefined (reading '0x1') '\n  at AssetListControlBar (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-4.js:1765:3)\n  at AssetList (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-4.js:1928:3)\n  at div\n  at chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/common-9.js:23983:3\n  at div\n  at Box (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-7.js:3824:3)\n  at div\n  at Box (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-7.js:3824:3)\n  at Tabs (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-7.js:12540:3)\n  at div\n  at chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/common-9.js:23983:3\n  at AccountOverviewTabs (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-6.js:2362:3)\n  at AccountOverviewLayout (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-6.js:2316:3)\n  at AccountOverviewEth\n  at AccountOverview (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-6.js:2536:48)\n  at div\n  at div\n  at div\n  at Home (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-10.js:8410:5)\n  at ConnectFunction (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/common-8.js:39902:41)\n  at C (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-3.js:16054:37)\n  at Route (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-3.js:15797:29)\n  at Authenticated (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-8.js:1193:5)\n  at ConnectFunction (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/common-8.js:39902:41)\n  at Switch (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-3.js:15999:29)\n  at div\n  at chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/common-9.js:23983:3\n  at div\n  at Routes (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-11.js:4667:1)\n  at ConnectFunction (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/common-8.js:39902:41)\n  at C (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-3.js:16054:37)\n  at MetamaskNotificationsProvider (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-7.js:14417:3)\n  at CurrencyRateProvider (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-7.js:14294:3)\n  at LegacyI18nProvider (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/common-10.js:323:1)\n  at I18nProvider (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/common-10.js:306:53)\n  at LegacyMetaMetricsProvider (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-7.js:14604:1)\n  at MetaMetricsProvider (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-7.js:14514:3)\n  at RenderedRoute (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-3.js:16767:7)\n  at Routes (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-3.js:17468:7)\n  at Router (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-3.js:17402:17)\n  at CompatRouter (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-3.js:13274:7)\n  at Router (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-3.js:15416:30)\n  at HashRouter (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-3.js:13755:35)\n  at Provider (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/common-8.js:39609:20)\n  at Index (chrome-extension://oehplhbehlbgjdapfkoemdgjlgbjpkkg/ui-10.js:9298:5)'

…om:MetaMask/metamask-extension into feat/mmassets-432_network-filter-extension

…ld not break the app

metamaskbot · 2024-10-28T22:51:18Z

Builds ready [cf78624]

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
- common: 0, 1, 10, 11, 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 (1824 ± 43 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	377	1993	1750	327	157
		domContentLoaded	1608	1933	1793	82	39
		load	1616	1991	1824	89	43
		domInteractive	21	69	43	16	8
		backgroundConnect	8	79	27	21	10
		firstReactRender	50	198	91	30	14
		getState	4	62	17	18	9
		initialActions	0	1	0	0	0
		loadScripts	1165	1436	1310	70	34
		setupStore	11	99	34	28	14
		uiStartup	1810	2354	2026	117	56

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

background: 22 Bytes (0.00%)
ui: 5.49 KiB (0.07%)
common: 359 Bytes (0.00%)

metamaskbot · 2024-10-28T23:17:54Z

Builds ready [82255bc]

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
- common: 0, 1, 10, 11, 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 (1888 ± 101 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1679	2664	1884	213	102
		domContentLoaded	1671	2652	1861	210	101
		load	1680	2668	1888	210	101
		domInteractive	17	92	44	21	10
		backgroundConnect	9	79	26	21	10
		firstReactRender	54	306	108	55	26
		getState	4	72	15	19	9
		initialActions	0	1	0	0	0
		loadScripts	1160	2116	1367	201	96
		setupStore	12	70	32	24	11
		uiStartup	1877	2903	2118	229	110

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

background: 22 Bytes (0.00%)
ui: 5.49 KiB (0.07%)
common: 359 Bytes (0.00%)

salimtb · 2024-10-30T14:43:50Z

ui/components/app/assets/asset-list/network-filter/network-filter.tsx

+  const allNetworks = useSelector(getNetworkConfigurationsByChainId);
+  const isTestnet = useSelector(getIsTestnet);
+  const { tokenNetworkFilter, showNativeTokenAsMainBalance } =
+    useSelector(getPreferences);


in the future , we can use this component somewhere else , like on this PR for example , my suggestion is to make it more generic.
same think for the popover

salimtb · 2024-10-30T14:44:54Z

ui/components/app/assets/asset-list/network-filter/network-filter.tsx

+            src={currentNetwork?.rpcPrefs?.imageUrl}
+          />
+        </Box>
+      </SelectableListItem>


as future improvement , we need to implement a storybook + unit test for this.
can you add a todo for that ?

salimtb · 2024-10-30T14:58:24Z

ui/components/app/assets/util/filter.test.ts

+    { name: 'Token4', symbol: 'T4', chainId: '0x89', balance: 150 },
+  ];
+
+  test('filters by inclusive chainId', () => {


QQ: should we use it by convention here ? most of tests are using it but i'm wondering if we should respect this rule

metamaskbot · 2024-10-30T16:14:54Z

Builds ready [d45f754]

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
- common: 0, 1, 10, 11, 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 (2079 ± 131 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	383	2689	1976	449	215
		domContentLoaded	1714	2597	2056	269	129
		load	1724	2609	2079	273	131
		domInteractive	19	121	55	28	14
		backgroundConnect	7	68	27	21	10
		firstReactRender	61	409	149	88	42
		getState	5	60	19	21	10
		initialActions	0	1	0	0	0
		loadScripts	1259	1961	1537	227	109
		setupStore	11	84	34	26	13
		uiStartup	1926	3379	2405	414	199

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

background: 22 Bytes (0.00%)
ui: 5.49 KiB (0.07%)
common: 359 Bytes (0.00%)

gambinish added 9 commits October 11, 2024 10:03

feat: Init network filter

2f33dd5

chore: Add tokenNetworkFilter action

317cb44

chore: Add selected indicator on TokenNetworkList controls

99ae620

chore: Subscribe to tokenNetworkFilter in token-list

ab6189f

chore: Display multiAccountBalance, and selectedAccountBalance

90c9b0e

chore: Optimize multiAccountBalance with reduce function

a66c999

chore: Cross chain balances do not yet exist, add todo

7dd5a2c

chore: Polish styling of list items in dropdown

a838c74

chore: Cleanup

c91c747

gambinish changed the title ~~feat: Token Network Filter UI~~ feat: Token Network Filter UI [Extension] Oct 16, 2024

gambinish requested a review from jonybur October 17, 2024 17:18

gambinish and others added 12 commits October 17, 2024 08:23

chore: Merge main, address conflicts

6ec980b

Merge branch 'develop' into feat/mmassets-432_network-filter-extension

3b6d223

Merge branch 'develop' into feat/mmassets-432_network-filter-extension

d670862

fix: Update unit tests in preferences-controller

bf5913c

feat: Add filterAssets function

85d5161

chore: Polish filters to be layerable in order of importance, allowin…

72ea2cf

…g custom filter logic

fix: Lint tsc, specifiy chain indication rather than arbitrary number

8b52780

chore: Localize strings

4349f4f

Merge branch 'develop' into feat/mmassets-432_network-filter-extension

8b83df4

chore: Add localized Network string

bc82cb4

Merge branch 'feat/mmassets-432_network-filter-extension' of github.c…

42ad7d4

…om:MetaMask/metamask-extension into feat/mmassets-432_network-filter-extension

chore: Add FILTER_TOKENS_TOGGLE feature flag

c4ce6c7

gambinish marked this pull request as ready for review October 22, 2024 18:04

gambinish requested a review from a team as a code owner October 22, 2024 18:04

gambinish added team-assets needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. labels Oct 22, 2024

gambinish requested a review from NidhiKJha October 22, 2024 18:05

andreahaku previously approved these changes Oct 25, 2024

View reviewed changes

chore: Ensure correct isSelected boolean is present in ListItemSelector

9f9e10b

gambinish dismissed andreahaku’s stale review via 9f9e10b October 28, 2024 20:56

gambinish and others added 7 commits October 28, 2024 14:07

fix: Lint

1a44e12

Merge branch 'develop' into feat/mmassets-432_network-filter-extension

0b82390

Fix: Lint unused variable import

1cdaa66

Merge branch 'feat/mmassets-432_network-filter-extension' of github.c…

f694ec0

…om:MetaMask/metamask-extension into feat/mmassets-432_network-filter-extension

fix: Lint, simplify logic of selector comparison

7bfb306

fix: Handle edge case where tokeNetworkFilter is undefined, this shou…

cf78624

…ld not break the app

Merge branch 'develop' into feat/mmassets-432_network-filter-extension

82255bc

darkwing approved these changes Oct 29, 2024

View reviewed changes

gambinish requested a review from andreahaku October 29, 2024 13:21

gambinish enabled auto-merge October 29, 2024 15:32

gambinish disabled auto-merge October 29, 2024 15:32

Merge branch 'develop' into feat/mmassets-432_network-filter-extension

d45f754

salimtb reviewed Oct 30, 2024

View reviewed changes

salimtb approved these changes Oct 30, 2024

View reviewed changes

gambinish added this pull request to the merge queue Oct 30, 2024

Merged via the queue into develop with commit c04c119 Oct 30, 2024
76 checks passed

gambinish deleted the feat/mmassets-432_network-filter-extension branch October 30, 2024 16:45

github-actions bot locked and limited conversation to collaborators Oct 30, 2024

metamaskbot added the release-12.7.0 Issue or pull request that will be included in release 12.7.0 label Oct 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Token Network Filter UI [Extension] #27884

feat: Token Network Filter UI [Extension] #27884

gambinish commented Oct 16, 2024 •

edited

Loading

github-actions bot commented Oct 16, 2024

gambinish commented Oct 17, 2024

metamaskbot commented Oct 24, 2024

andreahaku left a comment

darkwing commented Oct 28, 2024

metamaskbot commented Oct 28, 2024

metamaskbot commented Oct 28, 2024

salimtb Oct 30, 2024 •

edited

Loading

salimtb Oct 30, 2024

salimtb Oct 30, 2024

metamaskbot commented Oct 30, 2024

feat: Token Network Filter UI [Extension] #27884

feat: Token Network Filter UI [Extension] #27884

Conversation

gambinish commented Oct 16, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Oct 16, 2024

gambinish commented Oct 17, 2024

metamaskbot commented Oct 24, 2024

andreahaku left a comment

Choose a reason for hiding this comment

darkwing commented Oct 28, 2024

metamaskbot commented Oct 28, 2024

metamaskbot commented Oct 28, 2024

salimtb Oct 30, 2024 • edited Loading

Choose a reason for hiding this comment

salimtb Oct 30, 2024

Choose a reason for hiding this comment

salimtb Oct 30, 2024

Choose a reason for hiding this comment

metamaskbot commented Oct 30, 2024

gambinish commented Oct 16, 2024 •

edited

Loading

salimtb Oct 30, 2024 •

edited

Loading