Skip to content

chore: upgrade MetaMask design system packages#43344

Open
georgewrmarshall wants to merge 3 commits into
mainfrom
codex/upgrade-design-system-v43
Open

chore: upgrade MetaMask design system packages#43344
georgewrmarshall wants to merge 3 commits into
mainfrom
codex/upgrade-design-system-v43

Conversation

@georgewrmarshall

@georgewrmarshall georgewrmarshall commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

Description

Upgrades the MetaMask Extension design system dependencies to the latest MetaMask Design System release line.

Release links:

Package updates:

  • @metamask/design-system-react: ^0.23.1 -> ^0.25.0
  • @metamask/design-system-shared: ^0.19.0 -> ^0.21.0
  • @metamask/design-system-tailwind-preset: ^0.8.0 -> ^0.9.0
  • @metamask/design-tokens: ^8.4.0 -> ^8.5.0

Release changes covered by this upgrade:

  • @metamask/design-system-react@0.24.0
    • Adds TextField
    • Adds FlashFilled icon support
  • @metamask/design-system-react@0.25.0
    • Adds Popover
    • Adds TextArea
    • Adds TextFieldSearch
    • Adds FormTextField
    • Drops Node 18 support in favor of Node 20+
    • Updates avatar fallback handling
  • @metamask/design-system-shared@0.20.0
    • Adds shared props and icon support for new React components
  • @metamask/design-system-shared@0.21.0
    • Adds shared content props
    • Drops Node 18 support in favor of Node 20+
  • @metamask/design-system-tailwind-preset@0.9.0
    • Drops Node 18 support in favor of Node 20+
  • @metamask/design-tokens@8.5.0
    • Drops Node 18 support in favor of Node 20+

Repository changes:

  • Updates package.json and yarn.lock
  • Regenerates LavaMoat policies for browserify and build-system policy files
  • Adds @deprecated JSDoc migration notices to legacy ui/components/component-library components that now have MMDS React replacements:
    • FormTextField
    • HeaderBase
    • HelpText
    • Label
    • Modal
    • ModalBody
    • ModalContent
    • ModalFocus
    • ModalFooter
    • ModalHeader
    • ModalOverlay
    • Popover
    • PopoverHeader
    • SensitiveText
    • Skeleton
    • TextField
    • TextFieldSearch
    • Textarea -> TextArea

Migration review:

  • Confirmed this repo is using Node v24.13, satisfying the Node 20+ breaking change.
  • Checked migration docs and searched for removed/deprecated API usages including isReactNodeRenderable, WarningAlternative, SuccessAlternative, InfoAlternative, TextAreaPropsShared, panGestureHandlerProps, HeaderBaseVariant, and BottomSheetHeaderVariant.
  • No product-code migration was required for those removed APIs.

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

  1. Pull this branch.
  2. Run yarn install.
  3. Run yarn lint:changed and yarn lint:tsc.

Pre-merge author checklist

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.

Validation run:

  • yarn lint:lockfile:dedupe:fix
  • yarn allow-scripts auto
  • yarn lavamoat:auto
  • yarn lint:changed:fix
  • yarn lint:tsc
  • git diff --check

Notes:

  • yarn lint:changed:fix completed with one existing warning in ui/components/component-library/modal-content/modal-content.tsx for react-hooks/exhaustive-deps; no lint errors were reported.

Note

Low Risk
Dependency and styling-token updates with generated policy/snapshot churn; no auth or transaction logic changes, though avatar background shifts are visible across many screens.

Overview
Bumps MetaMask Design System packages (design-system-react 0.25.0, shared, tailwind-preset, design-tokens) and refreshes yarn.lock, including newer @floating-ui versions pulled in by the React package.

LavaMoat browserify policies (beta, experimental, flask, main) now allow @floating-ui/react-dom and its DOM/core subpackages for @metamask/design-system-react.

Legacy ui/components/component-library exports gain @deprecated JSDoc with links to the matching @metamask/design-system-react components and migration docs (modal stack, popover, form fields, etc.)—behavior unchanged.

Jest snapshots update because upgraded avatars use bg-alternative instead of bg-section for fallback surfaces (accounts, bridge, confirmations, snaps, and related UI).

Reviewed by Cursor Bugbot for commit 80351e5. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions

github-actions Bot commented Jun 8, 2026

Copy link
Copy Markdown
Contributor

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 mm-token-exchange-service Bot added the team-design-system All issues relating to design system in Extension label Jun 8, 2026
@mm-token-exchange-service

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

Copy link
Copy Markdown

✨ Files requiring CODEOWNER review ✨

🔑 @MetaMask/accounts-engineers (3 files, +8 -8)
  • 📁 ui/
    • 📁 components/
      • 📁 multichain/
        • 📁 account-list-item/
          • 📁 __snapshots__/
            • 📄 account-list-item.test.js.snap +4 -4
        • 📁 account-picker/
          • 📁 __snapshots__/
            • 📄 account-picker.test.js.snap +1 -1
    • 📁 pages/
      • 📁 multichain-accounts/
        • 📁 multichain-accounts-connect-page/
          • 📁 __snapshots__/
            • 📄 multichain-accounts-connect-page.test.tsx.snap +3 -3

@MetaMask/confirmations (13 files, +33 -33)
  • 📁 ui/
    • 📁 pages/
      • 📁 confirmations/
        • 📁 components/
          • 📁 confirm/
            • 📁 header/
              • 📁 __snapshots__/
                • 📄 header.test.tsx.snap +3 -3
            • 📁 info/
              • 📁 __snapshots__/
                • 📄 info.test.tsx.snap +8 -8
              • 📁 approve/
                • 📁 __snapshots__/
                  • 📄 approve.test.tsx.snap +1 -1
              • 📁 base-transaction-info/
                • 📁 __snapshots__/
                  • 📄 base-transaction-info.test.tsx.snap +1 -1
              • 📁 native-transfer/
                • 📁 __snapshots__/
                  • 📄 native-transfer.test.tsx.snap +4 -4
              • 📁 nft-token-transfer/
                • 📁 __snapshots__/
                  • 📄 nft-token-transfer.test.tsx.snap +3 -3
              • 📁 set-approval-for-all-info/
                • 📁 __snapshots__/
                  • 📄 set-approval-for-all-info.test.tsx.snap +1 -1
              • 📁 shared/
                • 📁 edit-gas-fees-row/
                  • 📁 __snapshots__/
                    • 📄 edit-gas-fees-row.test.tsx.snap +1 -1
                • 📁 gas-fees-section/
                  • 📁 __snapshots__/
                    • 📄 gas-fees-section.test.tsx.snap +1 -1
              • 📁 token-transfer/
                • 📁 __snapshots__/
                  • 📄 token-transfer.test.tsx.snap +3 -3
                  • 📄 transaction-flow-section.test.tsx.snap +2 -2
        • 📁 confirm/
          • 📁 __snapshots__/
            • 📄 confirm.test.tsx.snap +4 -4
        • 📁 confirmation/
          • 📁 templates/
            • 📁 __snapshots__/
              • 📄 remove-snap-account.test.js.snap +1 -1

👨‍🔧 @MetaMask/core-extension-ux (7 files, +16 -16)
  • 📁 ui/
    • 📁 components/
      • 📁 multichain/
        • 📁 account-list-item/
          • 📁 __snapshots__/
            • 📄 account-list-item.test.js.snap +4 -4
        • 📁 account-picker/
          • 📁 __snapshots__/
            • 📄 account-picker.test.js.snap +1 -1
        • 📁 badge-status/
          • 📁 __snapshots__/
            • 📄 badge-status.test.js.snap +2 -2
        • 📁 pages/
          • 📁 gator-permissions/
            • 📁 components/
              • 📁 __snapshots__/
                • 📄 permission-group-list-item.test.tsx.snap +1 -1
                • 📄 review-gator-permission-item.test.tsx.snap +6 -6
        • 📁 toast/
          • 📁 __snapshots__/
            • 📄 toast.test.tsx.snap +1 -1
    • 📁 pages/
      • 📁 settings/
        • 📁 preferences-and-display-tab/
          • 📁 __snapshots__/
            • 📄 preferences-and-display-tab.test.tsx.snap +1 -1

🫰 @MetaMask/core-platform (3 files, +20 -20)
  • 📁 ui/
    • 📁 components/
      • 📁 app/
        • 📁 snaps/
          • 📁 snap-ui-address/
            • 📁 __snapshots__/
              • 📄 snap-ui-address.test.tsx.snap +13 -13
          • 📁 snap-ui-renderer/
            • 📁 components/
              • 📁 __snapshots__/
                • 📄 account-selector.test.ts.snap +4 -4
                • 📄 address-input.test.ts.snap +3 -3

🎨 @MetaMask/design-system-engineers (18 files, +143 -0)
  • 📁 ui/
    • 📁 components/
      • 📁 component-library/
        • 📁 form-text-field/
          • 📄 form-text-field.tsx +7 -0
        • 📁 header-base/
          • 📄 header-base.tsx +7 -0
        • 📁 help-text/
          • 📄 help-text.tsx +7 -0
        • 📁 label/
          • 📄 label.tsx +7 -0
        • 📁 modal/
          • 📄 modal.tsx +7 -0
        • 📁 modal-body/
          • 📄 modal-body.tsx +7 -0
        • 📁 modal-content/
          • 📄 modal-content.tsx +7 -0
        • 📁 modal-focus/
          • 📄 modal-focus.tsx +6 -0
        • 📁 modal-footer/
          • 📄 modal-footer.tsx +7 -0
        • 📁 modal-header/
          • 📄 modal-header.tsx +16 -0
        • 📁 modal-overlay/
          • 📄 modal-overlay.tsx +7 -0
        • 📁 popover/
          • 📄 popover.tsx +7 -0
        • 📁 popover-header/
          • 📄 popover-header.tsx +16 -0
        • 📁 sensitive-text/
          • 📄 sensitive-text.tsx +7 -0
        • 📁 skeleton/
          • 📄 skeleton.tsx +7 -0
        • 📁 text-field/
          • 📄 text-field.tsx +7 -0
        • 📁 text-field-search/
          • 📄 text-field-search.tsx +7 -0
        • 📁 textarea/
          • 📄 textarea.tsx +7 -0

📜 @MetaMask/policy-reviewers (4 files, +152 -0)
  • 📁 lavamoat/
    • 📁 browserify/
      • 📁 beta/
        • 📄 policy.json +38 -0
      • 📁 experimental/
        • 📄 policy.json +38 -0
      • 📁 flask/
        • 📄 policy.json +38 -0
      • 📁 main/
        • 📄 policy.json +38 -0

Tip

Follow the policy review process outlined in the LavaMoat Policy Review Process doc before expecting an approval from Policy Reviewers.


🔄 @MetaMask/swaps-engineers (6 files, +42 -42)
  • 📁 ui/
    • 📁 pages/
      • 📁 bridge/
        • 📁 __snapshots__/
          • 📄 index.test.tsx.snap +4 -4
        • 📁 prepare/
          • 📁 __snapshots__/
            • 📄 bridge-input-group.test.tsx.snap +10 -10
            • 📄 prepare-bridge-page.test.tsx.snap +8 -8
          • 📁 components/
            • 📁 __snapshots__/
              • 📄 destination-account-picker-modal.test.tsx.snap +6 -6
            • 📁 bridge-asset-picker/
              • 📁 __snapshots__/
                • 📄 asset.test.tsx.snap +8 -8
                • 📄 selected-asset-button.test.tsx.snap +6 -6

@socket-security

socket-security Bot commented Jun 8, 2026

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Updated@​metamask/​design-system-shared@​0.19.0 ⏵ 0.21.0100 +110077 +198 +1100
Updated@​metamask/​design-system-react@​0.23.1 ⏵ 0.25.09810080 +198 +1100
Updated@​metamask/​design-system-tailwind-preset@​0.8.0 ⏵ 0.9.01001009193 +2100
Updated@​metamask/​design-tokens@​8.4.0 ⏵ 8.5.010010010094 +1100

View full report

@github-actions github-actions Bot added the size-M label Jun 8, 2026

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

Bugbot Autofix prepared a fix for the issue found in the latest run.

  • ✅ Fixed: Linux CI LavaMoat binding removed
    • Restored the missing @unrs/resolver-binding-linux-x64-gnu entry alongside the existing Darwin binding in lavamoat/build-system/policy.json for eslint-import-resolver-typescript>unrs-resolver.

Create PR

Or push these changes by commenting:

@cursor push 979fded4a3
Preview (979fded4a3)
diff --git a/lavamoat/build-system/policy.json b/lavamoat/build-system/policy.json
--- a/lavamoat/build-system/policy.json
+++ b/lavamoat/build-system/policy.json
@@ -6905,7 +6905,8 @@
         "process.versions.pnp": true
       },
       "packages": {
-        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-darwin-arm64": true
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-darwin-arm64": true,
+        "eslint-import-resolver-typescript>unrs-resolver>@unrs/resolver-binding-linux-x64-gnu": true
       }
     },
     "uri-js": {

You can send follow-ups to the cloud agent here.

Reviewed by Cursor Bugbot for commit 825e326. Configure here.

Comment thread lavamoat/build-system/policy.json Outdated
@metamaskbotv2

metamaskbotv2 Bot commented Jun 8, 2026

Copy link
Copy Markdown
Contributor
Builds ready [84df567]
Deprecated Browserify fallback builds
⚡ Performance Benchmarks (Total: 🟢 19 pass · 🟡 6 warn · 🔴 0 fail)

Baseline (latest main): 51036da | Date: 5/2/2026 | Pipeline: 27165272667 | Baseline logs

Interaction Benchmarks · Samples: 5
Benchmarkchrome-webpackfirefox-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: -76%
  • loadNewAccount/total: -76%
  • bridgeUserActions/bridge_load_page: -70%
  • bridgeUserActions/bridge_load_asset_picker: -59%
  • bridgeUserActions/bridge_search_token: -30%
  • bridgeUserActions/total: -44%
  • loadNewAccount/load_new_account: -36%
  • loadNewAccount/total: -36%
  • bridgeUserActions/bridge_load_page: -38%
  • bridgeUserActions/bridge_load_asset_picker: -40%
  • bridgeUserActions/bridge_search_token: -28%
  • bridgeUserActions/total: -32%
Startup Benchmarks · Samples: 100
Benchmarkchrome-webpackfirefox-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

  • startupStandardHome/uiStartup: -19%
  • startupStandardHome/load: -23%
  • startupStandardHome/domContentLoaded: -23%
  • startupStandardHome/domInteractive: -33%
  • startupStandardHome/firstPaint: -10%
  • startupStandardHome/backgroundConnect: -13%
  • startupStandardHome/loadScripts: -23%
  • startupStandardHome/numNetworkReqs: -67%
  • startupPowerUserHome/uiStartup: -34%
  • startupPowerUserHome/load: -14%
  • startupPowerUserHome/domContentLoaded: -13%
  • startupPowerUserHome/domInteractive: -41%
  • startupPowerUserHome/firstPaint: -32%
  • startupPowerUserHome/backgroundConnect: -65%
  • startupPowerUserHome/firstReactRender: +21%
  • startupPowerUserHome/loadScripts: -13%
  • startupPowerUserHome/setupStore: +17%
  • startupPowerUserHome/numNetworkReqs: -59%
  • startupStandardHome/domInteractive: -47%
  • startupStandardHome/backgroundConnect: +16%
  • startupStandardHome/firstReactRender: +39%
  • startupStandardHome/initialActions: +20%
  • startupStandardHome/setupStore: -51%
  • startupStandardHome/numNetworkReqs: -37%
  • startupPowerUserHome/uiStartup: -27%
  • startupPowerUserHome/domInteractive: -56%
  • startupPowerUserHome/backgroundConnect: -61%
  • startupPowerUserHome/firstReactRender: +41%
  • startupPowerUserHome/setupStore: -25%
  • startupPowerUserHome/numNetworkReqs: -76%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)

  • 🔴 startupPowerUserHome/INP: p75 512ms
  • 🟡 startupPowerUserHome/INP: p75 240ms
  • 🟡 startupPowerUserHome/LCP: p75 3.2s
User Journey Benchmarks · Samples: 5 · mock API
Benchmarkchrome-webpackfirefox-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/srpButtonToSrpForm: -64%
  • onboardingImportWallet/pwFormToMetricsScreen: +547%
  • onboardingImportWallet/metricsToWalletReadyScreen: -29%
  • onboardingImportWallet/doneButtonToHomeScreen: -62%
  • onboardingImportWallet/openAccountMenuToAccountListLoaded: -15%
  • onboardingImportWallet/total: -43%
  • onboardingNewWallet/srpButtonToPwForm: -77%
  • onboardingNewWallet/createPwToRecoveryScreen: +1020%
  • onboardingNewWallet/skipBackupToMetricsScreen: -66%
  • onboardingNewWallet/doneButtonToAssetList: +15%
  • onboardingNewWallet/total: +11%
  • assetDetails/assetClickToPriceChart: -53%
  • assetDetails/total: -53%
  • solanaAssetDetails/assetClickToPriceChart: -82%
  • solanaAssetDetails/total: -82%
  • importSrpHome/loginToHomeScreen: -29%
  • importSrpHome/openAccountMenuAfterLogin: -72%
  • importSrpHome/homeAfterImportWithNewWallet: -77%
  • importSrpHome/total: -71%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)

  • 🟡 solanaAssetDetails/FCP: p75 1.8s
  • 🟡 importSrpHome/FCP: p75 2.0s
  • 🟡 sendTransactions/FCP: p75 1.8s
Dapp Page Load Benchmarks · Samples: 100
Benchmarkchrome-webpack
dappPageLoad
[Sentry log · main/release]
🟢 [CI log]

📈 Results compared to the previous 5 runs on main

  • dappPageLoad/pageLoadTime: +27%
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 45 Bytes (0%)
  • ui: 49.44 KiB (0.44%)
  • common: 19 Bytes (0%)

@georgewrmarshall georgewrmarshall marked this pull request as ready for review June 8, 2026 21:18
@georgewrmarshall georgewrmarshall requested review from a team as code owners June 8, 2026 21:18
@georgewrmarshall georgewrmarshall marked this pull request as draft June 8, 2026 21:19
@georgewrmarshall georgewrmarshall marked this pull request as ready for review June 8, 2026 21:29
@metamaskbotv2

metamaskbotv2 Bot commented Jun 8, 2026

Copy link
Copy Markdown
Contributor
Builds ready [80351e5] [reused from 84df567]
Deprecated Browserify fallback builds
⚡ Performance Benchmarks (Total: 🟢 19 pass · 🟡 6 warn · 🔴 0 fail)

Baseline (latest main): 51036da | Date: 5/2/2026 | Pipeline: 27167217598 | Baseline logs

Interaction Benchmarks · Samples: 5
Benchmarkchrome-webpackfirefox-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: -76%
  • loadNewAccount/total: -76%
  • bridgeUserActions/bridge_load_page: -70%
  • bridgeUserActions/bridge_load_asset_picker: -59%
  • bridgeUserActions/bridge_search_token: -30%
  • bridgeUserActions/total: -44%
  • loadNewAccount/load_new_account: -36%
  • loadNewAccount/total: -36%
  • bridgeUserActions/bridge_load_page: -38%
  • bridgeUserActions/bridge_load_asset_picker: -40%
  • bridgeUserActions/bridge_search_token: -28%
  • bridgeUserActions/total: -32%
Startup Benchmarks · Samples: 100
Benchmarkchrome-webpackfirefox-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

  • startupStandardHome/uiStartup: -19%
  • startupStandardHome/load: -23%
  • startupStandardHome/domContentLoaded: -23%
  • startupStandardHome/domInteractive: -33%
  • startupStandardHome/firstPaint: -10%
  • startupStandardHome/backgroundConnect: -13%
  • startupStandardHome/loadScripts: -23%
  • startupStandardHome/numNetworkReqs: -67%
  • startupPowerUserHome/uiStartup: -34%
  • startupPowerUserHome/load: -14%
  • startupPowerUserHome/domContentLoaded: -13%
  • startupPowerUserHome/domInteractive: -41%
  • startupPowerUserHome/firstPaint: -32%
  • startupPowerUserHome/backgroundConnect: -65%
  • startupPowerUserHome/firstReactRender: +21%
  • startupPowerUserHome/loadScripts: -13%
  • startupPowerUserHome/setupStore: +17%
  • startupPowerUserHome/numNetworkReqs: -59%
  • startupStandardHome/domInteractive: -47%
  • startupStandardHome/backgroundConnect: +16%
  • startupStandardHome/firstReactRender: +39%
  • startupStandardHome/initialActions: +20%
  • startupStandardHome/setupStore: -51%
  • startupStandardHome/numNetworkReqs: -37%
  • startupPowerUserHome/uiStartup: -27%
  • startupPowerUserHome/domInteractive: -56%
  • startupPowerUserHome/backgroundConnect: -61%
  • startupPowerUserHome/firstReactRender: +41%
  • startupPowerUserHome/setupStore: -25%
  • startupPowerUserHome/numNetworkReqs: -76%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)

  • 🔴 startupPowerUserHome/INP: p75 512ms
  • 🟡 startupPowerUserHome/INP: p75 240ms
  • 🟡 startupPowerUserHome/LCP: p75 3.2s
User Journey Benchmarks · Samples: 5 · mock API
Benchmarkchrome-webpackfirefox-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/srpButtonToSrpForm: -64%
  • onboardingImportWallet/pwFormToMetricsScreen: +547%
  • onboardingImportWallet/metricsToWalletReadyScreen: -29%
  • onboardingImportWallet/doneButtonToHomeScreen: -62%
  • onboardingImportWallet/openAccountMenuToAccountListLoaded: -15%
  • onboardingImportWallet/total: -43%
  • onboardingNewWallet/srpButtonToPwForm: -77%
  • onboardingNewWallet/createPwToRecoveryScreen: +1020%
  • onboardingNewWallet/skipBackupToMetricsScreen: -66%
  • onboardingNewWallet/doneButtonToAssetList: +15%
  • onboardingNewWallet/total: +11%
  • assetDetails/assetClickToPriceChart: -53%
  • assetDetails/total: -53%
  • solanaAssetDetails/assetClickToPriceChart: -82%
  • solanaAssetDetails/total: -82%
  • importSrpHome/loginToHomeScreen: -29%
  • importSrpHome/openAccountMenuAfterLogin: -72%
  • importSrpHome/homeAfterImportWithNewWallet: -77%
  • importSrpHome/total: -71%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)

  • 🟡 solanaAssetDetails/FCP: p75 1.8s
  • 🟡 importSrpHome/FCP: p75 2.0s
  • 🟡 sendTransactions/FCP: p75 1.8s
Dapp Page Load Benchmarks · Samples: 100
Benchmarkchrome-webpack
dappPageLoad
[Sentry log · main/release]
🟢 [CI log]

📈 Results compared to the previous 5 runs on main

  • dappPageLoad/pageLoadTime: +27%
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 45 Bytes (0%)
  • ui: 49.44 KiB (0.44%)
  • common: 19 Bytes (0%)

@georgewrmarshall

Copy link
Copy Markdown
Contributor Author

LavaMoat Policy Review

Per the process in docs/lavamoat-policy-review-process.md, here is my analysis of the policy.json changes on this PR.


Context

This PR upgrades @metamask/design-system-react which migrated its Popover component from popper.js (archived/unmaintained) to @floating-ui/react-dom. The floating-ui packages were already present as transitive dependencies in the repo, but this upgrade promotes @floating-ui/react-dom to a direct dependency of @metamask/design-system-react and bumps its version.


New packages introduced into policy

Three new package entries appear across all four build configs (main, beta, flask, experimental) — the changes are identical in each:

  1. @metamask/design-system-react>@floating-ui/react-dom

    • Globals: define, document
    • Packages: @floating-ui/dom, react, react-dom
    • Expected. @floating-ui/react-dom is a React binding for floating-ui that needs to read and write to the DOM to compute floating element positions. Access to document is required for DOM queries, and define is standard AMD interop shimming. Dependencies on react, react-dom, and its own @floating-ui/dom sub-package are correct.
  2. @metamask/design-system-react>@floating-ui/react-dom>@floating-ui/dom

    • Globals: CSS, Element, HTMLElement, IntersectionObserver, Node, ResizeObserver, ShadowRoot, cancelAnimationFrame, clearTimeout, define, document, getComputedStyle, requestAnimationFrame, setTimeout
    • Packages: @floating-ui/core
    • Expected. @floating-ui/dom is the platform-specific layer that handles all the real DOM measurements needed to position floating elements (tooltips, popovers, dropdowns). Every global listed here is a standard browser API used for:
      • Geometry/layout: Element, HTMLElement, Node, ShadowRoot, getComputedStyle, CSS — measuring element positions, sizes, and styles
      • Observers: IntersectionObserver, ResizeObserver — detecting when reference elements enter/leave the viewport or resize (to reposition the floating element)
      • Animation/timing: requestAnimationFrame, cancelAnimationFrame, setTimeout, clearTimeout — throttling position updates
      • DOM root: document — traversal and coordinate calculations
      • None of these are elevated or dangerous capabilities. This is essentially the same surface area that popper.js required.
  3. @metamask/design-system-react>@floating-ui/react-dom>@floating-ui/dom>@floating-ui/core

    • Globals: define
    • Expected. @floating-ui/core is a pure platform-agnostic computation layer (middleware pipeline for position calculations). It needs no DOM access — only define for AMD interop.

Summary

  • No new dangerous capabilities are introduced. The globals are standard read-only browser layout APIs — no eval, fetch, XMLHttpRequest, WebSocket, localStorage, crypto, or child_process access.
  • No unexpected new packages. All three new entries are direct sub-packages of @floating-ui/react-dom, which is the intended replacement for popper.js.
  • popper.js is not removed from the lockfile by this PR (it may still be an indirect dependency of other packages), but its entry does not appear in the policy changes, so no policy capabilities were removed.
  • The change is a straightforward like-for-like swap: both popper.js and floating-ui exist solely to compute floating element positions in the DOM. The capability surface is equivalent.

Everything looks in order. @policy-reviewers please take a look when you get a chance.

@georgewrmarshall

Copy link
Copy Markdown
Contributor Author

Correction to my previous analysis: I stated that @floating-ui/react-dom was "already present as a transitive dependency" — that's partially misleading and worth clarifying.

The floating-ui packages (@floating-ui/core, @floating-ui/dom, @floating-ui/react-dom) do already exist in yarn.lock on main, but they arrive via @mantine/core, not via @metamask/design-system-react. Since LavaMoat scopes capabilities per package path, @mantine/core>@floating-ui/... is a distinct policy identity from @metamask/design-system-react>@floating-ui/.... So the policy entries added here are genuinely new — not previously covered by any existing policy path.

The capability analysis in my previous comment still stands. The globals requested are the same standard DOM layout APIs that any positioning library needs.

@gantunesr gantunesr left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved for Accounts COs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

risk:medium size-M team-design-system All issues relating to design system in Extension

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants