feat: MMS-1872 destination account picker for sol-evm (standalone component and story) #30282

ghgoodreau · 2025-02-12T23:03:38Z

Description

new account picker component and child components for solana crosschain swaps

integration blocked by dependencies, separate integration PR will come in the future, probably next week, to add it to the prepare-bridge page.

Related issues

Fixes:

https://consensyssoftware.atlassian.net/browse/MMS-1872

Manual testing steps

Not relevant. Only on storybook for now. Component is not rendered anywhere in the app.

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-02-12T23:03:48Z

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 · 2025-02-12T23:49:40Z

Builds ready [c10abf4]

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 (1698 ± 53 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1510	1914	1700	107	51
		domContentLoaded	1467	1896	1679	110	53
		load	1508	1919	1698	110	53
		domInteractive	26	89	37	15	7
		backgroundConnect	12	47	19	11	5
		firstReactRender	16	102	40	27	13
		getState	5	58	18	19	9
		initialActions	0	0	0	0	0
		loadScripts	1046	1394	1217	88	42
		setupStore	7	69	23	23	11
		uiStartup	1749	2514	1983	173	83

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

…ne-component

metamaskbot · 2025-02-13T00:26:57Z

Builds ready [d0e7d70]

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 (1836 ± 84 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	250	2180	1672	498	239
		domContentLoaded	1519	2076	1810	165	79
		load	1528	2175	1836	176	84
		domInteractive	21	141	50	35	17
		backgroundConnect	9	129	38	33	16
		firstReactRender	17	103	55	27	13
		getState	5	82	17	19	9
		initialActions	0	1	0	0	0
		loadScripts	1087	1572	1325	146	70
		setupStore	9	87	22	21	10
		uiStartup	1800	2611	2157	222	107

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

micaelae · 2025-02-13T05:42:18Z

ui/pages/bridge/prepare/components/destination-account-list-item.tsx

+          </Text>
+          <Box display={Display.Flex} gap={2}>
+            {/* // TODO: not working - troubleshoot. */}
+            {/* {chainAvatars.length > 0 && (


Would getImageForChainId work here? Just merged my PR for adding support for multichain images

ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx

micaelae · 2025-02-13T06:16:19Z

ui/pages/bridge/prepare/components/destination-account-picker.tsx

+
+type DestinationAccountPickerProps = {
+  onAccountSelect: (account: InternalAccount | null) => void;
+  selectedSwapToAccount: InternalAccount | null;


Minor: use a more generic prop name for flexibility

metamaskbot · 2025-02-13T16:46:15Z

Builds ready [4397845]

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 (1611 ± 43 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1411	1800	1609	88	42
		domContentLoaded	1403	1770	1583	82	39
		load	1412	1806	1611	89	43
		domInteractive	23	75	32	11	5
		backgroundConnect	9	76	34	22	11
		firstReactRender	15	92	39	26	12
		getState	5	75	15	18	9
		initialActions	0	1	0	0	0
		loadScripts	983	1272	1137	70	33
		setupStore	6	60	16	16	7
		uiStartup	1599	2290	1847	137	66

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

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 478 Bytes (0.01%)

…ne-component

metamaskbot · 2025-02-13T20:32:26Z

Builds ready [41e6c24]

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
- 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 (1775 ± 106 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	173	2169	1668	388	186
		domContentLoaded	1507	2292	1742	216	104
		load	1526	2318	1775	221	106
		domInteractive	24	74	37	15	7
		backgroundConnect	13	79	39	22	11
		firstReactRender	14	72	26	18	9
		getState	6	55	26	20	9
		initialActions	0	1	0	0	0
		loadScripts	1092	1641	1280	172	83
		setupStore	6	57	20	18	9
		uiStartup	1664	2580	2015	261	126

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

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 478 Bytes (0.01%)

…ne-component

metamaskbot · 2025-02-14T01:11:55Z

Builds ready [41e6c24]

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
- 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 (1775 ± 106 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	173	2169	1668	388	186
		domContentLoaded	1507	2292	1742	216	104
		load	1526	2318	1775	221	106
		domInteractive	24	74	37	15	7
		backgroundConnect	13	79	39	22	11
		firstReactRender	14	72	26	18	9
		getState	6	55	26	20	9
		initialActions	0	1	0	0	0
		loadScripts	1092	1641	1280	172	83
		setupStore	6	57	20	18	9
		uiStartup	1664	2580	2015	261	126

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

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 478 Bytes (0.01%)

metamaskbot · 2025-02-14T01:42:26Z

Builds ready [4c86d20]

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
- 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 (1778 ± 73 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	231	2103	1702	368	177
		domContentLoaded	1544	2034	1753	151	72
		load	1577	2098	1778	152	73
		domInteractive	20	80	36	15	7
		backgroundConnect	9	61	26	16	8
		firstReactRender	14	74	23	17	8
		getState	6	59	25	20	10
		initialActions	0	1	0	0	0
		loadScripts	1104	1560	1280	131	63
		setupStore	6	67	21	20	10
		uiStartup	1779	2435	2054	184	88

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

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 478 Bytes (0.01%)

metamaskbot · 2025-02-14T16:41:38Z

Builds ready [d02fc73]

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
- 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 (1895 ± 75 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	280	2187	1739	500	240
		domContentLoaded	1571	2132	1863	148	71
		load	1638	2187	1895	156	75
		domInteractive	28	141	49	35	17
		backgroundConnect	8	69	32	22	11
		firstReactRender	15	76	33	22	10
		getState	5	56	20	19	9
		initialActions	0	1	0	0	0
		loadScripts	1130	1601	1367	126	60
		setupStore	8	63	15	15	7
		uiStartup	1907	2445	2170	150	72

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

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 227 Bytes (0.00%)

metamaskbot · 2025-02-14T17:14:33Z

Builds ready [38fab12]

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
- 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 (1577 ± 54 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1437	1822	1572	109	52
		domContentLoaded	1427	1782	1551	100	48
		load	1436	1826	1577	112	54
		domInteractive	23	139	38	27	13
		backgroundConnect	9	78	29	22	10
		firstReactRender	14	94	28	23	11
		getState	4	66	14	17	8
		initialActions	0	0	0	0	0
		loadScripts	1004	1339	1120	88	42
		setupStore	7	54	15	15	7
		uiStartup	1629	2298	1854	199	96

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

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 227 Bytes (0.00%)

infiniteflower · 2025-02-14T20:45:44Z

ui/pages/bridge/prepare/components/destination-account-picker.tsx

+      ? account.type === 'solana:data-account'
+      : account.type !== 'solana:data-account';


Is there some constant we can use instead?

…ne-component

metamaskbot · 2025-02-14T22:15:39Z

Builds ready [366986a]

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
- 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 (1830 ± 133 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	213	2880	1538	641	308
		domContentLoaded	1520	2773	1800	263	127
		load	1564	2884	1830	278	133
		domInteractive	23	132	50	33	16
		backgroundConnect	8	119	38	31	15
		firstReactRender	14	76	32	21	10
		getState	4	62	18	17	8
		initialActions	0	1	0	0	0
		loadScripts	1099	2204	1331	241	116
		setupStore	7	59	22	19	9
		uiStartup	1777	3160	2110	312	150

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

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 227 Bytes (0.00%)

ghgoodreau added 3 commits February 12, 2025 14:52

feat: account picker component and stories

31f0d53

feat: fix some styles

5392447

feat: resolve or expect errors

ea420d9

ghgoodreau added the team-swaps label Feb 12, 2025

feat: box shadow design token

c10abf4

ghgoodreau changed the title ~~draft: MMS-1872 destination account picker for sol-evm (standalone component and story)~~ feat: MMS-1872 destination account picker for sol-evm (standalone component and story) Feb 12, 2025

Merge branch 'main' into MMS-1872-destination-account-picker-standalo…

d0e7d70

…ne-component

micaelae reviewed Feb 13, 2025

View reviewed changes

ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx Outdated Show resolved Hide resolved

micaelae reviewed Feb 13, 2025

View reviewed changes

micaelae previously approved these changes Feb 13, 2025

View reviewed changes

feat: address comments

4397845

ghgoodreau dismissed micaelae’s stale review via 4397845 February 13, 2025 16:07

micaelae previously approved these changes Feb 13, 2025

View reviewed changes

Merge branch 'main' into MMS-1872-destination-account-picker-standalo…

41e6c24

…ne-component

ghgoodreau marked this pull request as ready for review February 13, 2025 19:57

ghgoodreau requested a review from a team as a code owner February 13, 2025 19:57

ghgoodreau dismissed micaelae’s stale review via 38c290d February 14, 2025 01:00

ghgoodreau requested a review from a team as a code owner February 14, 2025 01:00

ghgoodreau force-pushed the MMS-1872-destination-account-picker-standalone-component branch from 38c290d to 41e6c24 Compare February 14, 2025 01:06

ghgoodreau removed the request for review from a team February 14, 2025 01:07

ghgoodreau added 2 commits February 13, 2025 19:08

chore: fix linting errors in bridge dir

2b8e6e3

Merge branch 'main' into MMS-1872-destination-account-picker-standalo…

4c86d20

…ne-component

ghgoodreau added 3 commits February 14, 2025 09:53

fix: fix linting

4c3e8ec

fix: linting again

d02fc73

fix: revert

38fab12

micaelae previously approved these changes Feb 14, 2025

View reviewed changes

ghgoodreau requested a review from infiniteflower February 14, 2025 19:44

infiniteflower reviewed Feb 14, 2025

View reviewed changes

fix: use SolAccountType type for comparison

8732b64

ghgoodreau dismissed micaelae’s stale review via 8732b64 February 14, 2025 21:28

infiniteflower approved these changes Feb 14, 2025

View reviewed changes

Merge branch 'main' into MMS-1872-destination-account-picker-standalo…

366986a

…ne-component

ghgoodreau enabled auto-merge February 14, 2025 21:57

micaelae approved these changes Feb 14, 2025

View reviewed changes

ghgoodreau added this pull request to the merge queue Feb 14, 2025

Merged via the queue into main with commit 8be74f3 Feb 14, 2025
73 checks passed

ghgoodreau deleted the MMS-1872-destination-account-picker-standalone-component branch February 14, 2025 22:45

github-actions bot locked and limited conversation to collaborators Feb 14, 2025

metamaskbot added the release-12.14.0 Issue or pull request that will be included in release 12.14.0 label Feb 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: MMS-1872 destination account picker for sol-evm (standalone component and story) #30282

feat: MMS-1872 destination account picker for sol-evm (standalone component and story) #30282

ghgoodreau commented Feb 12, 2025 •

edited

Loading

github-actions bot commented Feb 12, 2025

metamaskbot commented Feb 12, 2025

metamaskbot commented Feb 13, 2025

micaelae Feb 13, 2025

micaelae Feb 13, 2025

metamaskbot commented Feb 13, 2025

metamaskbot commented Feb 13, 2025

metamaskbot commented Feb 14, 2025

metamaskbot commented Feb 14, 2025

metamaskbot commented Feb 14, 2025

metamaskbot commented Feb 14, 2025

infiniteflower Feb 14, 2025

metamaskbot commented Feb 14, 2025

		? account.type === 'solana:data-account'
		: account.type !== 'solana:data-account';

feat: MMS-1872 destination account picker for sol-evm (standalone component and story) #30282

feat: MMS-1872 destination account picker for sol-evm (standalone component and story) #30282

Conversation

ghgoodreau commented Feb 12, 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 Feb 12, 2025

metamaskbot commented Feb 12, 2025

metamaskbot commented Feb 13, 2025

micaelae Feb 13, 2025

Choose a reason for hiding this comment

micaelae Feb 13, 2025

Choose a reason for hiding this comment

metamaskbot commented Feb 13, 2025

metamaskbot commented Feb 13, 2025

metamaskbot commented Feb 14, 2025

metamaskbot commented Feb 14, 2025

metamaskbot commented Feb 14, 2025

metamaskbot commented Feb 14, 2025

infiniteflower Feb 14, 2025

Choose a reason for hiding this comment

metamaskbot commented Feb 14, 2025

ghgoodreau commented Feb 12, 2025 •

edited

Loading