feat: Token Network Filter UI [Extension]
Description
WIP. This is a draft. Opening up for CI
Adds Token network filter controls
Related issues
Fixes:
Manual testing steps
TBD
Screenshots/Recordings
TBD
Pre-merge author checklist
- [x] I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using JSDoc format if applicable
- [x] 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.
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.
Demo of WIP:
https://github.com/user-attachments/assets/545c24ba-786c-46cb-ba2e-e4e2e15ef0ae
Builds ready [5b40705]
- 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
Page Load Metrics (1979 ± 122 ms)
| Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
|---|---|---|---|---|---|---|---|
| Chrome | Home | firstPaint | 298 | 2522 | 1765 | 486 | 234 |
| domContentLoaded | 1666 | 2671 | 1946 | 255 | 122 | ||
| load | 1740 | 2676 | 1979 | 254 | 122 | ||
| domInteractive | 13 | 103 | 50 | 22 | 10 | ||
| backgroundConnect | 8 | 86 | 34 | 24 | 12 | ||
| firstReactRender | 48 | 118 | 93 | 20 | 10 | ||
| getState | 4 | 67 | 18 | 19 | 9 | ||
| initialActions | 0 | 1 | 0 | 0 | 0 | ||
| loadScripts | 1176 | 2087 | 1436 | 231 | 111 | ||
| setupStore | 11 | 78 | 39 | 26 | 12 | ||
| uiStartup | 1896 | 2906 | 2191 | 271 | 130 |
Builds ready [f7f09da]
- 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
Page Load Metrics (1994 ± 76 ms)
| Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
|---|---|---|---|---|---|---|---|
| Chrome | Home | firstPaint | 286 | 2431 | 1663 | 662 | 318 |
| domContentLoaded | 1703 | 2248 | 1960 | 149 | 72 | ||
| load | 1741 | 2340 | 1994 | 158 | 76 | ||
| domInteractive | 14 | 251 | 63 | 49 | 24 | ||
| backgroundConnect | 9 | 150 | 34 | 32 | 15 | ||
| firstReactRender | 56 | 295 | 114 | 50 | 24 | ||
| getState | 5 | 97 | 18 | 24 | 12 | ||
| initialActions | 0 | 1 | 0 | 0 | 0 | ||
| loadScripts | 1221 | 1709 | 1465 | 124 | 60 | ||
| setupStore | 12 | 76 | 42 | 25 | 12 | ||
| uiStartup | 1914 | 3022 | 2274 | 278 | 134 |
Builds ready [c6a408d]
- 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
Page Load Metrics (2046 ± 72 ms)
| Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
|---|---|---|---|---|---|---|---|
| Chrome | Home | firstPaint | 1832 | 2465 | 2053 | 146 | 70 |
| domContentLoaded | 1773 | 2410 | 1998 | 137 | 66 | ||
| load | 1821 | 2462 | 2046 | 149 | 72 | ||
| domInteractive | 27 | 109 | 51 | 20 | 10 | ||
| backgroundConnect | 8 | 143 | 45 | 38 | 18 | ||
| firstReactRender | 53 | 205 | 103 | 28 | 14 | ||
| getState | 6 | 61 | 27 | 22 | 11 | ||
| initialActions | 0 | 1 | 0 | 0 | 0 | ||
| loadScripts | 1315 | 1874 | 1501 | 118 | 56 | ||
| setupStore | 11 | 96 | 27 | 23 | 11 | ||
| uiStartup | 2027 | 2854 | 2290 | 209 | 100 |
Bundle size diffs [🚨 Warning! Bundle size has increased!]
- background: 22 Bytes (0.00%)
- ui: 5.52 KiB (0.07%)
- common: 359 Bytes (0.00%)
Builds ready [a2074cd]
- 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
Page Load Metrics (2146 ± 104 ms)
| Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
|---|---|---|---|---|---|---|---|
| Chrome | Home | firstPaint | 327 | 2680 | 1963 | 562 | 270 |
| domContentLoaded | 1766 | 2620 | 2106 | 206 | 99 | ||
| load | 1792 | 2680 | 2146 | 217 | 104 | ||
| domInteractive | 18 | 139 | 52 | 29 | 14 | ||
| backgroundConnect | 8 | 184 | 37 | 41 | 19 | ||
| firstReactRender | 53 | 295 | 132 | 62 | 30 | ||
| getState | 7 | 58 | 25 | 18 | 9 | ||
| initialActions | 0 | 1 | 0 | 0 | 0 | ||
| loadScripts | 1289 | 2039 | 1575 | 180 | 86 | ||
| setupStore | 17 | 95 | 39 | 27 | 13 | ||
| uiStartup | 1997 | 3055 | 2450 | 288 | 138 |
Bundle size diffs [🚨 Warning! Bundle size has increased!]
- background: 22 Bytes (0.00%)
- ui: 5.49 KiB (0.07%)
- common: 359 Bytes (0.00%)
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
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%)
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)'
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
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%)
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
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%)
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
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%)