chore: enable multiselect in asset-picker network modal #28975

micaelae · 2024-12-05T21:28:06Z

Description

Figma: https://www.figma.com/design/IuOIRmU3wI0IdJIfol0ESu/Cross-Chain-Swaps?node-id=7-24563&node-type=canvas&m=dev

Changes

enables multi network selection in the Asset Picker, and displaying tokens from multiple chains
adds support for searching tokens by address
updates the PickerNetwork component to show multiple network icons
refactors TokenListItem for less truncation

Related issues

Fixes:

Manual testing steps

To test locally set BRIDGE_USE_DEV_APIS=1 in .metamaskrc, then try selecting networks/tokens in the Bridge experience
Also try to do some e2e tests in the Send and Swap/Send flows

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.

NidhiKJha

I am not able to select Tokens to bridge to 🤔
https://github.com/user-attachments/assets/a76c493a-9dce-4c96-9ab4-8fc418a51745

NidhiKJha

Asset Picker seems to be broken in storybook

NidhiKJha · 2024-12-09T11:34:13Z

ui/components/component-library/picker-network/picker-network.tsx

+        {avatarComponent ?? (
+          <AvatarNetwork
+            className="mm-picker-network__avatar-network"
+            src={src}
+            name={label}
+            size={AvatarNetworkSize.Xs}
+            {...avatarNetworkProps}
+          />
+        )}
+


Picker Network is for changing a network so I am not sure why we are making it conditional.

Refactored this so an override for the avatar is no longer required. The PickerNetwork for bridge has multiple stacked network icons so we need to be able to render an AvatarGroup. Will add a story for this as well

metamaskbot · 2024-12-10T05:31:29Z

Builds ready [c73adde]

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, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1983 ± 138 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1599	2933	1988	285	137
		domContentLoaded	1587	2868	1964	278	134
		load	1591	2931	1983	287	138
		domInteractive	23	66	35	13	6
		backgroundConnect	9	45	20	11	5
		firstReactRender	15	32	19	5	2
		getState	103	145	124	11	5
		initialActions	0	0	0	0	0
		loadScripts	1173	2404	1536	265	127
		setupStore	7	19	8	3	1
		uiStartup	1819	3182	2245	306	147

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

background: 0 Bytes (0.00%)
ui: 6.96 KiB (0.09%)
common: 5.1 KiB (0.06%)

NidhiKJha

Looks really good. Changes I have reviewed:

verified that the Send flow works as expected
verified that the asset list shows expected data
verified that the bridge network picker (excl asset picker) has the expected networks
AvatarGroup + PickerNetwork styling changes are visible in bridge network picker

Before, I approve. Just one last question: The select all box looks different in Bridge than in other flows:

Bridge experience select all

Extension view select all

micaelae · 2024-12-10T17:59:34Z

Looks really good. Changes I have reviewed:

verified that the Send flow works as expected

verified that the asset list shows expected data

verified that the bridge network picker (excl asset picker) has the expected networks

AvatarGroup + PickerNetwork styling changes are visible in bridge network picker

Before, I approve. Just one last question: The select all box looks different in Bridge than in other flows:

Bridge experience select all

Extension view select all

This is intentional! In a separate PR I'll be updating the shape of the avatar and this size works better for the bridge picker

metamaskbot · 2024-12-10T18:33:58Z

Builds ready [19d57f3]

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, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1827 ± 73 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1638	2296	1827	147	71
		domContentLoaded	1591	2247	1792	149	72
		load	1639	2299	1827	152	73
		domInteractive	25	75	35	13	6
		backgroundConnect	8	90	36	25	12
		firstReactRender	15	91	25	21	10
		getState	78	395	135	74	35
		initialActions	0	0	0	0	0
		loadScripts	1208	1813	1386	143	69
		setupStore	7	20	8	3	1
		uiStartup	1844	2642	2117	236	113

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

background: 0 Bytes (0.00%)
ui: 7.08 KiB (0.09%)
common: 5.1 KiB (0.06%)

metamaskbot · 2024-12-10T23:48:25Z

Builds ready [31734e1]

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, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2005 ± 127 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1679	2555	2000	256	123
		domContentLoaded	1656	2529	1964	260	125
		load	1665	2553	2005	265	127
		domInteractive	25	73	42	18	8
		backgroundConnect	9	65	33	20	10
		firstReactRender	16	95	37	29	14
		getState	74	377	173	95	46
		initialActions	0	1	0	0	0
		loadScripts	1273	2043	1550	228	109
		setupStore	6	27	9	4	2
		uiStartup	1892	3167	2414	412	198

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

background: 0 Bytes (0.00%)
ui: 6.59 KiB (0.08%)
common: 5.1 KiB (0.06%)

georgewrmarshall

Component Library changes LGTM could we please add a unit test for avatarGroupProps

georgewrmarshall · 2024-12-11T00:05:08Z

ui/components/component-library/picker-network/picker-network.tsx

@@ -27,6 +28,7 @@ export const PickerNetwork: PickerNetworkComponent = React.forwardRef(
  <C extends React.ElementType = 'button'>(
    {
      className = '',
+      avatarGroupProps,


Could we add a unit test for this prop to ensure the testing coverage is 100% 🙏

metamaskbot · 2024-12-11T03:34:12Z

Builds ready [d9c1d7b]

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, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1878 ± 106 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	222	2512	1790	423	203
		domContentLoaded	1625	2501	1853	226	109
		load	1636	2512	1878	221	106
		domInteractive	24	58	32	10	5
		backgroundConnect	7	60	26	18	9
		firstReactRender	15	38	20	5	3
		getState	98	138	125	10	5
		initialActions	0	0	0	0	0
		loadScripts	1212	2054	1441	213	102
		setupStore	7	11	8	1	1
		uiStartup	1859	2891	2141	260	125

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

background: 0 Bytes (0.00%)
ui: 6.59 KiB (0.08%)
common: 5.1 KiB (0.06%)

metamaskbot · 2024-12-11T03:34:35Z

Builds ready [d9c1d7b]

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, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1878 ± 106 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	222	2512	1790	423	203
		domContentLoaded	1625	2501	1853	226	109
		load	1636	2512	1878	221	106
		domInteractive	24	58	32	10	5
		backgroundConnect	7	60	26	18	9
		firstReactRender	15	38	20	5	3
		getState	98	138	125	10	5
		initialActions	0	0	0	0	0
		loadScripts	1212	2054	1441	213	102
		setupStore	7	11	8	1	1
		uiStartup	1859	2891	2141	260	125

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

background: 0 Bytes (0.00%)
ui: 6.59 KiB (0.08%)
common: 5.1 KiB (0.06%)

metamaskbot · 2024-12-11T05:10:55Z

Builds ready [5cfaf7f]

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, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1773 ± 67 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	160	1982	1616	488	234
		domContentLoaded	1514	1973	1758	139	67
		load	1522	1983	1773	139	67
		domInteractive	23	36	28	4	2
		backgroundConnect	7	64	20	17	8
		firstReactRender	15	91	29	25	12
		getState	71	303	137	59	28
		initialActions	0	1	0	0	0
		loadScripts	1149	1560	1359	124	59
		setupStore	7	39	11	9	4
		uiStartup	1765	2626	2090	218	105

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

background: 0 Bytes (0.00%)
ui: 6.59 KiB (0.08%)
common: 5.06 KiB (0.06%)

metamaskbot · 2024-12-11T20:32:27Z

Builds ready [139c9c3]

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, 12, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 13, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1782 ± 71 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	243	2035	1571	560	269
		domContentLoaded	1520	2008	1753	139	67
		load	1524	2043	1782	147	71
		domInteractive	26	81	42	19	9
		backgroundConnect	7	74	34	16	8
		firstReactRender	16	100	46	30	14
		getState	4	87	37	31	15
		initialActions	0	1	0	0	0
		loadScripts	1089	1509	1317	127	61
		setupStore	6	23	9	4	2
		uiStartup	1715	2401	2046	190	91

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

background: 0 Bytes (0.00%)
ui: 6.59 KiB (0.08%)
common: 5.09 KiB (0.06%)

metamaskbot added the team-bridge label Dec 5, 2024

micaelae force-pushed the mb894-asset-picker-updates-2 branch 2 times, most recently from 19797c7 to 8dd03fd Compare December 5, 2024 22:30

micaelae mentioned this pull request Dec 6, 2024

feat: cross-chain swaps ui re-design #28373

Merged

7 tasks

micaelae marked this pull request as ready for review December 9, 2024 06:03

micaelae requested review from a team as code owners December 9, 2024 06:03

NidhiKJha reviewed Dec 9, 2024

View reviewed changes

NidhiKJha requested changes Dec 9, 2024

View reviewed changes

micaelae force-pushed the mb894-asset-picker-updates-2 branch 4 times, most recently from 49df7cb to 79e5326 Compare December 10, 2024 01:02

micaelae requested a review from NidhiKJha December 10, 2024 05:28

NidhiKJha reviewed Dec 10, 2024

View reviewed changes

micaelae force-pushed the mb894-asset-picker-updates-2 branch 3 times, most recently from bb7fa63 to fbb0117 Compare December 10, 2024 22:50

georgewrmarshall reviewed Dec 11, 2024

View reviewed changes

micaelae force-pushed the mb894-asset-picker-updates-2 branch from 31734e1 to d9c1d7b Compare December 11, 2024 01:56

matthewwalsh0 previously approved these changes Dec 11, 2024

View reviewed changes

NidhiKJha previously approved these changes Dec 11, 2024

View reviewed changes

micaelae added 15 commits December 11, 2024 11:48

refactor: PickerNetwork + AvatarGroup + stories

257f3b4

chore: rm unused message

27e8ae4

fix: unit tests

2b08a75

fix: e2e tests

84faab7

fix: hide token balances when chain is not in wallet

e7c4d49

fix: bridge token list

59a6247

fix: unit tests

d007c9b

chore: add snapshot tests for TokenListItem

3576bbb

chore: refactor TokenListItem for less truncation

e2604f9

fix: update token-list-item snapshots

8fa13f8

fix: e2e tests

a9d2b11

fix: unit tests

ad5f129

chore: add unit tests for PickerNetwork

300954f

fix: double border in AvatarGroup for networks

d83cd7c

fix: snapshots

696ece7

micaelae dismissed georgewrmarshall’s stale review via 0ce3565 December 11, 2024 19:48

micaelae force-pushed the mb894-asset-picker-updates-2 branch from 3fb8583 to 0ce3565 Compare December 11, 2024 19:48

fix: missing translation

139c9c3

micaelae force-pushed the mb894-asset-picker-updates-2 branch from 0ce3565 to 139c9c3 Compare December 11, 2024 19:50

georgewrmarshall approved these changes Dec 11, 2024

View reviewed changes

vinnyhoward approved these changes Dec 11, 2024

View reviewed changes

micaelae enabled auto-merge December 11, 2024 20:36

sleepytanya approved these changes Dec 11, 2024

View reviewed changes

micaelae added this pull request to the merge queue Dec 11, 2024

Merged via the queue into main with commit 70bdc86 Dec 11, 2024
77 checks passed

micaelae deleted the mb894-asset-picker-updates-2 branch December 11, 2024 21:13

github-actions bot locked and limited conversation to collaborators Dec 11, 2024

metamaskbot added the release-12.10.1 Issue or pull request that will be included in release 12.10.1 label Dec 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: enable multiselect in asset-picker network modal #28975

chore: enable multiselect in asset-picker network modal #28975

micaelae commented Dec 5, 2024 •

edited

Loading

NidhiKJha left a comment

NidhiKJha left a comment

NidhiKJha Dec 9, 2024

micaelae Dec 10, 2024

metamaskbot commented Dec 10, 2024

NidhiKJha left a comment