feat: Add new account selector page for hardware wallets by david0xd · Pull Request #43501 · MetaMask/metamask-extension

david0xd · 2026-06-12T12:38:42Z

Description

This PR adds new stack of UI components that will be used for new hardware wallet onboarding in the near future. The purpose of these components is to enable users to select and unlock their hardware wallet accounts.

Changes on this PR do not affect any production code or functionality in general. Integration is not done.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MUL-1831

Manual testing steps

Start storybook and check the new components (Components/MultichainAccounts/HardwareAccountAddressRow, Components/MultichainAccounts/HardwareAccountCard, Pages/CreateAccount/ConnectHardware/SelectHardwareAccountsPage).
Make sure that new components are matching Figma specification.

Screenshots/Recordings

Before

These components did not exist before. Nothing to show here.

After

Storybook screenshots

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 · 2026-06-12T12:38:51Z

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.

mm-token-exchange-service · 2026-06-12T12:39:00Z

✨ Files requiring CODEOWNER review ✨

🔑 @MetaMask/accounts-engineers (15 files, +1223 -0)

📁 ui/
- 📁 components/
  - 📁 multichain-accounts/
    - 📁 hardware-account-address-row/
      - 📄 hardware-account-address-row.stories.tsx +36 -0
      - 📄 hardware-account-address-row.test.tsx +76 -0
      - 📄 hardware-account-address-row.tsx +102 -0
      - 📄 hardware-account-address-row.types.ts +25 -0
      - 📄 index.ts +7 -0
    - 📁 hardware-account-card/
      - 📄 hardware-account-card.stories.tsx +70 -0
      - 📄 hardware-account-card.test.tsx +160 -0
      - 📄 hardware-account-card.tsx +111 -0
      - 📄 hardware-account-card.types.ts +17 -0
      - 📄 index.ts +5 -0
- 📁 pages/
  - 📁 create-account/
    - 📁 connect-hardware/
      - 📁 select-hardware-accounts-page/
        
        📄 index.ts +13 -0
        
        📄 select-hardware-accounts-page.stories.tsx +182 -0
        
        📄 select-hardware-accounts-page.test.tsx +248 -0
        
        📄 select-hardware-accounts-page.tsx +155 -0
        
        📄 select-hardware-accounts-page.types.ts +16 -0

mm-token-exchange-service · 2026-06-12T19:14:24Z

Builds ready [7756dd1]

⚠️ Make sure the build is safe before downloading and running this build.
- Please do not use these builds with accounts that contain significant real money.
- Beware the security risks of cache poisoning.
Webpack builds: chrome, firefox
Webpack builds (beta): chrome, firefox
Webpack builds (flask): chrome, firefox
Webpack builds (test): chrome, firefox
Webpack builds (test-flask): chrome, firefox
bundle size: Bundle Size Stats
bundle analyzer: Bundle Analyzer
interaction-benchmark: Interaction Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts

Deprecated Browserify fallback builds

Browserify builds: chrome, firefox
Browserify builds (beta): chrome, firefox
Browserify builds (flask): chrome, firefox
Browserify builds (test): chrome, firefox
Browserify builds (test-flask): chrome, firefox

⚡ Performance Benchmarks (Total: 🟢 16 pass · 🟡 9 warn · 🔴 0 fail)

Baseline (latest main): b349190 | Date: 6/12/2026 | Pipeline: 27435863742 | Baseline logs

Interaction Benchmarks · Samples: 5

Benchmark chrome-webpack firefox-webpack
loadNewAccount
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]
confirmTx
[Sentry log · main/release] 🟢 [CI log] 🟡 [CI log]
bridgeUserActions
[Sentry log · main/release] 🟢 [CI log] 🟡 [CI log]

📈 Results compared to the previous 5 runs on main
↓ loadNewAccount/load_new_account: -21%
↓ loadNewAccount/total: -21%
↓ loadNewAccount/inp: -29%
↓ confirmTx/tbt: -12%
↑ confirmTx/lcp: +15%
↓ bridgeUserActions/inp: -23%
↑ loadNewAccount/load_new_account: +34%
↑ loadNewAccount/total: +34%
↓ loadNewAccount/inp: -21%
↓ loadNewAccount/fcp: -48%
↑ loadNewAccount/lcp: +1144%
↑ confirmTx/confirm_tx: +12%
↓ confirmTx/longTaskCount: -100%
↓ confirmTx/longTaskTotalDuration: -100%
↓ confirmTx/longTaskMaxDuration: -100%
↓ confirmTx/tbt: -100%
↑ confirmTx/total: +12%
↑ confirmTx/inp: +53%
↑ confirmTx/fcp: +13%
↑ confirmTx/lcp: +1287%
↑ bridgeUserActions/bridge_load_page: +107%
↑ bridgeUserActions/bridge_load_asset_picker: +43%
↓ bridgeUserActions/longTaskCount: -100%
↓ bridgeUserActions/longTaskTotalDuration: -100%
↓ bridgeUserActions/longTaskMaxDuration: -100%
↓ bridgeUserActions/tbt: -100%
↑ bridgeUserActions/total: +140%
↑ bridgeUserActions/lcp: +1242%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)
🟡 confirmTx/FCP: p75 1.9s
🟡 bridgeUserActions/FCP: p75 1.8s

Startup Benchmarks · Samples: 100

Benchmark chrome-webpack firefox-webpack
startupStandardHome
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]
startupPowerUserHome
[Sentry log · main/release] 🟡 [CI log] 🟡 [CI log]

📈 Results compared to the previous 5 runs on main
↑ startupPowerUserHome/uiStartup: +25%
↑ startupPowerUserHome/load: +17%
↑ startupPowerUserHome/domContentLoaded: +17%
↑ startupPowerUserHome/domInteractive: +11%
↑ startupPowerUserHome/backgroundConnect: +14%
↑ startupPowerUserHome/firstReactRender: +14%
↑ startupPowerUserHome/loadScripts: +17%
↑ startupPowerUserHome/setupStore: +13%
↓ startupPowerUserHome/numNetworkReqs: -11%
↑ startupPowerUserHome/longTaskTotalDuration: +16%
↑ startupPowerUserHome/longTaskMaxDuration: +12%
↑ startupPowerUserHome/tbt: +20%
↑ startupPowerUserHome/inp: +15%
↑ startupPowerUserHome/fcp: +14%
↓ startupStandardHome/domInteractive: -20%
↓ startupStandardHome/firstReactRender: -10%
↓ startupStandardHome/fcp: -17%
↑ startupPowerUserHome/domInteractive: +21%
↑ startupPowerUserHome/backgroundConnect: +11%
↑ startupPowerUserHome/setupStore: +25%
↓ startupPowerUserHome/numNetworkReqs: -14%
↑ startupPowerUserHome/fcp: +15%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)
🔴 startupPowerUserHome/INP: p75 600ms
🟡 startupPowerUserHome/LCP: p75 2.8s

User Journey Benchmarks · Samples: 5 · mock API

Benchmark chrome-webpack firefox-webpack
onboardingImportWallet
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]
onboardingNewWallet
[Sentry log · main/release] 🟢 [CI log] 🟡 [CI log]
🟡 total
assetDetails
[Sentry log · main/release] 🟢 [CI log] 🟡 [CI log]
solanaAssetDetails
[Sentry log · main/release] 🟢 [CI log] 🟡 [CI log]
importSrpHome
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]
sendTransactions
[Sentry log · main/release] 🟡 [CI log] 🟡 [CI log]
swap
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]

📈 Results compared to the previous 5 runs on main
↑ onboardingImportWallet/pwFormToMetricsScreen: +16%
↓ onboardingImportWallet/doneButtonToHomeScreen: -86%
↓ onboardingImportWallet/openAccountMenuToAccountListLoaded: -67%
↓ onboardingImportWallet/longTaskCount: -76%
↓ onboardingImportWallet/longTaskTotalDuration: -93%
↓ onboardingImportWallet/longTaskMaxDuration: -91%
↓ onboardingImportWallet/tbt: -99%
↓ onboardingImportWallet/total: -83%
↑ onboardingNewWallet/skipBackupToMetricsScreen: +12%
↓ onboardingNewWallet/doneButtonToAssetList: -33%
↓ onboardingNewWallet/longTaskCount: -50%
↓ onboardingNewWallet/longTaskTotalDuration: -54%
↓ onboardingNewWallet/longTaskMaxDuration: -28%
↓ onboardingNewWallet/tbt: -65%
↓ onboardingNewWallet/total: -28%
↓ solanaAssetDetails/assetClickToPriceChart: -72%
↓ solanaAssetDetails/longTaskCount: -100%
↓ solanaAssetDetails/longTaskTotalDuration: -100%
↓ solanaAssetDetails/longTaskMaxDuration: -100%
↓ solanaAssetDetails/tbt: -100%
↓ solanaAssetDetails/total: -72%
↓ solanaAssetDetails/cls: -93%
↓ importSrpHome/loginToHomeScreen: -19%
↑ importSrpHome/openAccountMenuAfterLogin: +22%
↓ importSrpHome/homeAfterImportWithNewWallet: -39%
↓ importSrpHome/longTaskCount: -32%
↓ importSrpHome/longTaskTotalDuration: -26%
↓ importSrpHome/longTaskMaxDuration: -15%
↓ importSrpHome/tbt: -33%
↓ importSrpHome/total: -34%
↓ importSrpHome/inp: -35%
↑ sendTransactions/openSendPageFromHome: +110%
↑ sendTransactions/selectTokenToSendFormLoaded: +51%
↑ sendTransactions/longTaskTotalDuration: +10%
↑ sendTransactions/tbt: +37%
↓ sendTransactions/inp: -19%
↓ sendTransactions/cls: -71%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)
🟡 sendTransactions/INP: p75 208ms
🟡 assetDetails/FCP: p75 1.9s
🟡 solanaAssetDetails/FCP: p75 2.0s
🟡 sendTransactions/FCP: p75 1.9s

Dapp Page Load Benchmarks · Samples: 100

Benchmark chrome-webpack
dappPageLoad
[Sentry log · main/release] 🟢 [CI log]

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

background: 137.19 KiB (2.03%)
ui: 19.05 KiB (0.17%)
common: 427.98 KiB (3.26%)

david0xd · 2026-06-15T11:15:01Z

bugbot run

cursor · 2026-06-15T11:15:03Z

Skipping Bugbot: Bugbot is globally disabled for this team. Visit the Bugbot dashboard to update your settings.

mm-token-exchange-service · 2026-06-15T11:17:36Z

Builds ready [2bba5f0] [reused from 4f8e019]

⚠️ Make sure the build is safe before downloading and running this build.
- Please do not use these builds with accounts that contain significant real money.
- Beware the security risks of cache poisoning.
Webpack builds: chrome, firefox
Webpack builds (beta): chrome, firefox
Webpack builds (flask): chrome, firefox
Webpack builds (test): chrome, firefox
Webpack builds (test-flask): chrome, firefox
bundle size: Bundle Size Stats
bundle analyzer: Bundle Analyzer
interaction-benchmark: Interaction Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts

Deprecated Browserify fallback builds

Browserify builds: chrome, firefox
Browserify builds (beta): chrome, firefox
Browserify builds (flask): chrome, firefox
Browserify builds (test): chrome, firefox
Browserify builds (test-flask): chrome, firefox

⚡ Performance Benchmarks (Total: 🟢 13 pass · 🟡 6 warn · 🔴 0 fail)

Baseline (latest main): 5682526 | Date: 6/13/2026 | Pipeline: 27541244689 | Baseline logs

Interaction Benchmarks · Samples: 5

Benchmark chrome-webpack firefox-webpack
loadNewAccount
[Sentry log · main/release] 🟢 [CI log] 🟡 [CI log]
🔴 load_new_account
confirmTx
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]
bridgeUserActions
[Sentry log · main/release] 🟢 [CI log] 🟡 [CI log]

📈 Results compared to the previous 5 runs on main
↑ loadNewAccount/load_new_account: +12%
↑ loadNewAccount/total: +12%
↓ confirmTx/inp: -10%
↓ confirmTx/lcp: -12%
↑ bridgeUserActions/bridge_load_asset_picker: +11%
↓ bridgeUserActions/tbt: -11%
↓ bridgeUserActions/inp: -24%
↑ loadNewAccount/load_new_account: +777%
↑ loadNewAccount/total: +777%
↑ loadNewAccount/inp: +27%
↑ loadNewAccount/fcp: +27%
↑ loadNewAccount/lcp: +1257%
↑ confirmTx/confirm_tx: +16%
↓ confirmTx/longTaskCount: -100%
↓ confirmTx/longTaskTotalDuration: -100%
↓ confirmTx/longTaskMaxDuration: -100%
↓ confirmTx/tbt: -100%
↑ confirmTx/total: +16%
↓ confirmTx/inp: -10%
↓ confirmTx/fcp: -32%
↑ confirmTx/lcp: +1274%
↑ bridgeUserActions/bridge_load_page: +111%
↑ bridgeUserActions/bridge_load_asset_picker: +59%
↑ bridgeUserActions/bridge_search_token: +39%
↓ bridgeUserActions/longTaskCount: -100%
↓ bridgeUserActions/longTaskTotalDuration: -100%
↓ bridgeUserActions/longTaskMaxDuration: -100%
↓ bridgeUserActions/tbt: -100%
↑ bridgeUserActions/total: +217%
↑ bridgeUserActions/fcp: +35%
↑ bridgeUserActions/lcp: +1383%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)
🟡 loadNewAccount/FCP: p75 2.2s
🟡 bridgeUserActions/FCP: p75 2.3s
🟡 bridgeUserActions/LCP: p75 2.5s

Startup Benchmarks · Samples: 100

⚠️ Missing data: chrome/webpack/startupPowerUserHome

Benchmark chrome-webpack firefox-webpack
startupStandardHome
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]

User Journey Benchmarks · Samples: 5 · mock API

⚠️ Missing data: chrome/webpack/userJourneyTransactions, firefox/webpack/userJourneyTransactions

Benchmark chrome-webpack firefox-webpack
onboardingImportWallet
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]
onboardingNewWallet
[Sentry log · main/release] 🟢 [CI log] 🟡 [CI log]
🟡 total
assetDetails
[Sentry log · main/release] 🟡 [CI log] 🟢 [CI log]
solanaAssetDetails
[Sentry log · main/release] 🟢 [CI log] 🟢 [CI log]
importSrpHome
[Sentry log · main/release] 🟡 [CI log] 🟡 [CI log]

📈 Results compared to the previous 5 runs on main
↓ onboardingImportWallet/doneButtonToHomeScreen: -87%
↓ onboardingImportWallet/openAccountMenuToAccountListLoaded: -97%
↓ onboardingImportWallet/longTaskCount: -77%
↓ onboardingImportWallet/longTaskTotalDuration: -92%
↓ onboardingImportWallet/longTaskMaxDuration: -89%
↓ onboardingImportWallet/tbt: -98%
↓ onboardingImportWallet/total: -86%
↓ onboardingNewWallet/createPwToRecoveryScreen: -14%
↓ onboardingNewWallet/doneButtonToAssetList: -35%
↓ onboardingNewWallet/longTaskCount: -55%
↓ onboardingNewWallet/longTaskTotalDuration: -62%
↓ onboardingNewWallet/longTaskMaxDuration: -35%
↓ onboardingNewWallet/tbt: -73%
↓ onboardingNewWallet/total: -31%
↓ solanaAssetDetails/assetClickToPriceChart: -46%
↓ solanaAssetDetails/longTaskCount: -100%
↓ solanaAssetDetails/longTaskTotalDuration: -100%
↓ solanaAssetDetails/longTaskMaxDuration: -100%
↓ solanaAssetDetails/tbt: -100%
↓ solanaAssetDetails/total: -46%
↓ solanaAssetDetails/cls: -89%
↓ importSrpHome/loginToHomeScreen: -16%
↑ importSrpHome/openAccountMenuAfterLogin: +68%
↓ importSrpHome/homeAfterImportWithNewWallet: -36%
↓ importSrpHome/longTaskCount: -22%
↓ importSrpHome/longTaskTotalDuration: -34%
↓ importSrpHome/longTaskMaxDuration: -15%
↓ importSrpHome/tbt: -39%
↓ importSrpHome/total: -31%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)
🟡 assetDetails/INP: p75 224ms
🟡 assetDetails/FCP: p75 2.2s
🟡 importSrpHome/INP: p75 232ms
🟡 importSrpHome/FCP: p75 1.8s

Dapp Page Load Benchmarks · Samples: 100

Benchmark chrome-webpack
dappPageLoad
[Sentry log · main/release] 🟢 [CI log]

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

background: 58 Bytes (0%)
ui: 3.55 KiB (0.03%)
common: 472 Bytes (0%)

david0xd self-assigned this Jun 12, 2026

david0xd added team-accounts-framework Accounts team no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed skip-release-validation labels Jun 12, 2026

david0xd temporarily deployed to pr-comment June 12, 2026 12:38 — with GitHub Actions Inactive

mm-token-exchange-service Bot added the team-extension-platform Extension Platform team label Jun 12, 2026

github-actions Bot added the size-XL label Jun 12, 2026

david0xd temporarily deployed to pr-comment June 12, 2026 12:53 — with GitHub Actions Inactive

david0xd removed the team-extension-platform Extension Platform team label Jun 12, 2026

david0xd temporarily deployed to pr-comment June 12, 2026 13:22 — with GitHub Actions Inactive

david0xd temporarily deployed to pr-comment June 12, 2026 14:27 — with GitHub Actions Inactive

david0xd had a problem deploying to pr-comment June 12, 2026 14:56 — with GitHub Actions Failure

david0xd temporarily deployed to pr-comment June 12, 2026 18:17 — with GitHub Actions Inactive

david0xd temporarily deployed to pr-comment June 12, 2026 18:21 — with GitHub Actions Inactive

david0xd temporarily deployed to pr-comment June 12, 2026 18:43 — with GitHub Actions Inactive

david0xd temporarily deployed to pr-comment June 12, 2026 19:13 — with GitHub Actions Inactive

david0xd temporarily deployed to pr-comment June 15, 2026 10:33 — with GitHub Actions Inactive

david0xd added 7 commits June 15, 2026 12:36

Add new account selector page for hardware wallets

4f08bd7

Add lint fix changes

5631cb3

Fix some unit test issues

41a64ae

Refine unit tests

c6e508c

Refactor types and imports

ddbbe7d

Refactor docstring

577a6a8

Add some more refinement and refactoring changes

4f8e019

david0xd force-pushed the dd/add-new-hw-acc-selector branch from 9d3377f to 4f8e019 Compare June 15, 2026 10:36

david0xd temporarily deployed to pr-comment June 15, 2026 10:36 — with GitHub Actions Inactive

Add small update to storybook

2bba5f0

david0xd temporarily deployed to pr-comment June 15, 2026 10:51 — with GitHub Actions Inactive

david0xd marked this pull request as ready for review June 15, 2026 10:52

david0xd requested a review from a team as a code owner June 15, 2026 10:52

david0xd temporarily deployed to pr-comment June 15, 2026 10:52 — with GitHub Actions Inactive

github-actions Bot added the risk:low label Jun 15, 2026

david0xd temporarily deployed to pr-comment June 15, 2026 11:16 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add new account selector page for hardware wallets#43501

feat: Add new account selector page for hardware wallets#43501
david0xd wants to merge 8 commits into
mainfrom
dd/add-new-hw-acc-selector

david0xd commented Jun 12, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 12, 2026

Uh oh!

mm-token-exchange-service Bot commented Jun 12, 2026 •

edited

Loading

Uh oh!

mm-token-exchange-service Bot commented Jun 12, 2026

Uh oh!

david0xd commented Jun 15, 2026

Uh oh!

cursor Bot commented Jun 15, 2026

Uh oh!

mm-token-exchange-service Bot commented Jun 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

david0xd commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Storybook screenshots

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Jun 12, 2026

Uh oh!

mm-token-exchange-service Bot commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✨ Files requiring CODEOWNER review ✨

Uh oh!

mm-token-exchange-service Bot commented Jun 12, 2026

Uh oh!

david0xd commented Jun 15, 2026

Uh oh!

cursor Bot commented Jun 15, 2026

Uh oh!

mm-token-exchange-service Bot commented Jun 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

david0xd commented Jun 12, 2026 •

edited

Loading

mm-token-exchange-service Bot commented Jun 12, 2026 •

edited

Loading