feat: Add CreateSnapAccount component #30611

PatrykLucka · 2025-02-27T15:18:13Z

Description

This PR introduces a new form for built-in Snap account creation (currently limited to Solana), allowing users to select the SRP. It also standardizes the account creation UX across EVM and Solana networks.

Related issues

Jira ticket: https://consensyssoftware.atlassian.net/browse/MMMULTISRP-19
Design: Figma
SIP-30 doc: https://github.com/MetaMask/SIPs/blob/207518f3ea50fe536ac0e58264481d7679c46824/SIPS/sip-30.md#creating-accounts

Manual testing steps

With one SRP:

Open account menu
Click "Add account or hardware wallet"
Click "Solana account"

New form should be visible with an option to set Solana account name.

With more than one SRP:

Open account menu
Click "Add account or hardware wallet"
Click "Solana account"

New form should be visible with an option to select SRP and name.

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-27T15:18:26Z

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.

ui/components/multichain/account-list-menu/account-list-menu.tsx

metamaskbot · 2025-03-18T10:40:17Z

Builds ready [f829b9b]

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 (3930 ± 1925 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1739	20309	3688	4014	1928
		domContentLoaded	1710	20188	3414	4011	1926
		load	1770	20290	3930	4009	1925
		domInteractive	28	466	76	106	51
		backgroundConnect	49	1445	474	460	221
		firstReactRender	22	505	127	140	67
		getState	16	991	266	311	149
		initialActions	0	1	0	0	0
		loadScripts	1265	18799	2684	3805	1827
		setupStore	9	1046	157	243	117
		uiStartup	2027	20486	6751	5777	2774

Bundle size diffs

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

ui/components/multichain/account-list-menu/account-list-menu.tsx

ui/components/multichain/create-snap-account/create-snap-account.tsx

darkwing

Everything works, albeit a bit slow-ish on my machine. Found a usability issue:

If you set a custom name, then change the SRP the account should be associated with, the name field gets cleared out. That would be frustrating for users, so we should store that name in component state and restore it once the user comes back from choosing SRP.

Screen.Recording.2025-03-18.at.9.15.56.AM.mov

metamaskbot · 2025-03-20T14:15:07Z

Builds ready [1edcdd4]

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 (4502 ± 2036 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1913	19189	4265	4196	2015
		domContentLoaded	1762	18146	3891	4064	1951
		load	1973	19580	4502	4241	2036
		domInteractive	29	780	106	165	79
		backgroundConnect	149	1431	592	422	202
		firstReactRender	29	286	115	66	32
		getState	45	845	238	190	91
		initialActions	0	1	0	0	0
		loadScripts	1331	16050	3080	3694	1774
		setupStore	9	615	162	154	74
		uiStartup	2530	21948	6776	4543	2181

Bundle size diffs

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

PatrykLucka · 2025-03-20T14:21:32Z

Thanks for pointing this out @darkwing ! I really appreciate you taking the time to investigate this. This issue actually applies to the EVM account flow as well, so it might be better to address it in a separate PR. Additionally, this is something that’s about to change soon anyway.

The reason there’s no easy fix right now is that the name is stored in the CreateAccount component, which gets unmounted when switching to the SRP selector view. Fixing this would require moving the name state to the account-list-menu, which might not be worth the effort since this component is due for changes soon.

Happy to discuss further if you have thoughts on this!

aganglada · 2025-03-20T14:52:16Z

ui/components/multichain/account-list-menu/account-list-menu.tsx

+    switch (mode) {
+      case ACTION_MODES.ADD_BITCOIN:
+        return {
+          clientType: WalletClientType.Bitcoin,
+          chainId: MultichainNetworks.BITCOIN,
+        };
+      case ACTION_MODES.ADD_BITCOIN_TESTNET:
+        return {
+          clientType: WalletClientType.Bitcoin,
+          chainId: MultichainNetworks.BITCOIN_TESTNET,
+        };
+      case ACTION_MODES.ADD_SOLANA:
+        return {
+          clientType: WalletClientType.Solana,
+          chainId: MultichainNetworks.SOLANA,
+        };
+      default:
+        return {
+          clientType: null,
+          chainId: null,
+        };
+    }
+  };


I would move this somewhere else as a config that you import, not to interfere with UI stuff

Sounds good, I've changed it to map object and moved it the top of the file, so it will be easier to read

ui/components/multichain/create-snap-account/create-snap-account.test.tsx

ui/components/multichain/create-snap-account/create-snap-account.tsx

metamaskbot · 2025-03-24T10:47:00Z

Builds ready [e4c1709]

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 (2144 ± 228 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1618	3590	2028	439	211
		domContentLoaded	1532	3465	1884	421	202
		load	1631	3739	2144	475	228
		domInteractive	25	250	48	50	24
		backgroundConnect	104	557	267	113	54
		firstReactRender	31	122	75	23	11
		getState	32	311	138	73	35
		initialActions	0	1	0	0	0
		loadScripts	1136	2303	1334	243	116
		setupStore	13	303	90	79	38
		uiStartup	2038	8765	3785	1414	679

Bundle size diffs

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

metamaskbot added the team-mmi PRs from the MMI team label Feb 27, 2025

PatrykLucka force-pushed the MMMULTISRP-19-create-non-evm-account-from-n-srp branch 2 times, most recently from 49decfb to 260e856 Compare February 28, 2025 11:13

PatrykLucka force-pushed the MMMULTISRP-19-create-non-evm-account-from-n-srp branch from 260e856 to a426a97 Compare March 7, 2025 10:11

PatrykLucka changed the base branch from multi-srp-mvp-2 to feat/multi-srp-add-account March 7, 2025 10:11

darkwing reviewed Mar 7, 2025

View reviewed changes

ui/components/multichain/account-list-menu/account-list-menu.tsx Outdated Show resolved Hide resolved

PatrykLucka force-pushed the MMMULTISRP-19-create-non-evm-account-from-n-srp branch 5 times, most recently from 3547c2d to d1a54d6 Compare March 11, 2025 17:31

Base automatically changed from feat/multi-srp-add-account to main March 14, 2025 02:19

PatrykLucka force-pushed the MMMULTISRP-19-create-non-evm-account-from-n-srp branch 8 times, most recently from 26304f7 to 023d0a2 Compare March 17, 2025 15:39

PatrykLucka marked this pull request as ready for review March 17, 2025 16:01

PatrykLucka requested a review from a team as a code owner March 17, 2025 16:01

Tlees-MMI 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

PatrykLucka force-pushed the MMMULTISRP-19-create-non-evm-account-from-n-srp branch from 023d0a2 to f829b9b Compare March 18, 2025 10:02

darkwing reviewed Mar 18, 2025

View reviewed changes

ui/components/multichain/account-list-menu/account-list-menu.tsx Outdated Show resolved Hide resolved

darkwing reviewed Mar 18, 2025

View reviewed changes

ui/components/multichain/account-list-menu/account-list-menu.tsx Outdated Show resolved Hide resolved

darkwing reviewed Mar 18, 2025

View reviewed changes

ui/components/multichain/create-snap-account/create-snap-account.tsx Outdated Show resolved Hide resolved

darkwing requested changes Mar 18, 2025

View reviewed changes

github-project-automation bot moved this from Needs dev review to Needs more work from the author in PR review queue Mar 18, 2025

Tlees-MMI moved this from Needs more work from the author to Needs dev review in PR review queue Mar 18, 2025

PatrykLucka force-pushed the MMMULTISRP-19-create-non-evm-account-from-n-srp branch 2 times, most recently from 4e28ca1 to 1edcdd4 Compare March 20, 2025 13:33

aganglada reviewed Mar 20, 2025

View reviewed changes

aganglada approved these changes Mar 21, 2025

View reviewed changes

PatrykLucka added 3 commits March 24, 2025 11:09

feat: add Solana account form update

ccfeb4d

chore: add useCallbacks for create snap account component

2c27d4d

feat: refactor snap client configuration for action modes

e4c1709

PatrykLucka force-pushed the MMMULTISRP-19-create-non-evm-account-from-n-srp branch from f96b132 to e4c1709 Compare March 24, 2025 10:09

darkwing approved these changes Mar 24, 2025

View reviewed changes

github-project-automation bot moved this from Needs dev review to Review finalised - Ready to be merged in PR review queue Mar 24, 2025

PatrykLucka added this pull request to the merge queue Mar 24, 2025

Merged via the queue into main with commit 5bf44ce Mar 24, 2025
109 checks passed

PatrykLucka deleted the MMMULTISRP-19-create-non-evm-account-from-n-srp branch March 24, 2025 16:25

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add CreateSnapAccount component #30611

feat: Add CreateSnapAccount component #30611

PatrykLucka commented Feb 27, 2025 •

edited

Loading

github-actions bot commented Feb 27, 2025

metamaskbot commented Mar 18, 2025

darkwing left a comment

metamaskbot commented Mar 20, 2025

PatrykLucka commented Mar 20, 2025

aganglada Mar 20, 2025

PatrykLucka Mar 20, 2025

metamaskbot commented Mar 24, 2025

feat: Add CreateSnapAccount component #30611

feat: Add CreateSnapAccount component #30611

Conversation

PatrykLucka commented Feb 27, 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 27, 2025

metamaskbot commented Mar 18, 2025

darkwing left a comment

Choose a reason for hiding this comment

metamaskbot commented Mar 20, 2025

PatrykLucka commented Mar 20, 2025

aganglada Mar 20, 2025

Choose a reason for hiding this comment

PatrykLucka Mar 20, 2025

Choose a reason for hiding this comment

metamaskbot commented Mar 24, 2025

PatrykLucka commented Feb 27, 2025 •

edited

Loading