Skip to content

feat: use design-system-react components on shield confirmation screens#40832

Merged
HowardBraham merged 3 commits intomainfrom
feat/ds-migrate-shield-confirmation
Mar 17, 2026
Merged

feat: use design-system-react components on shield confirmation screens#40832
HowardBraham merged 3 commits intomainfrom
feat/ds-migrate-shield-confirmation

Conversation

@lionellbriones
Copy link
Contributor

@lionellbriones lionellbriones commented Mar 12, 2026

Description

The Shield confirmation UI components currently depend on the internal component-library for foundational primitives (Text, Box, ButtonLink) and on helpers/constants/design-system for enum values (TextVariant, TextColor, Display, FlexDirection, etc.).

Open in GitHub Codespaces

Changelog

CHANGELOG entry: use design-system-react components on shield confirmation screens

Related issues

Fixes:

Manual testing steps

Testing transaction confirmation page

  1. Login to and account with shield subscription
  2. Initiate a transaction or signature request to open the confirmation page.
  3. Check confirmation indicator at the bottom and the modal when you click it

Testing Shield subscription confirmation page

  1. Login to an account without shield subscription and has crypto balance
  2. Subscribe to shield on settings page
  3. Should redirect to shield-plan page
  4. Choose crypto as payment and submit
  5. Check confirmation page

Screenshots/Recordings

There should be no changes on before/after screens

Before

before-coverage-indicator before-confirm-screen before-alert

After

after-confirm-screen after-coverage-indicator after-alert

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.

Note

Low Risk
Primarily a UI refactor swapping component primitives and style enums, with minimal behavioral change. Risk is limited to potential styling/regression differences in Shield confirmation footers and alert messaging links.

Overview
Updates Shield confirmation screens to use @metamask/design-system-react primitives instead of the internal component-library and most helpers/constants/design-system enums.

This refactors footer agreement, coverage indicator, subscription details, and the Shield coverage alert message to the new Text/Box APIs (new TextVariant/TextColor values, explicit FontWeight) and replaces ButtonLink with TextButton wrapping an external <a> via asChild.

Written by Cursor Bugbot for commit 0d519ba. This will update automatically on new commits. Configure here.

@github-actions
Copy link
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.

@metamaskbot metamaskbot added the team-onboarding Onboarding team label Mar 12, 2026
@metamaskbotv2
Copy link
Contributor

metamaskbotv2 bot commented Mar 12, 2026

✨ Files requiring CODEOWNER review ✨

@MetaMask/confirmations (4 files, +66 -59)
  • 📁 ui/
    • 📁 pages/
      • 📁 confirmations/
        • 📁 components/
          • 📁 confirm/
            • 📁 footer/
              • 📁 shield-footer-coverage-indicator/
                • 📄 shield-footer-coverage-indicator.tsx +18 -14
                • 📄 shield-footer-agreement.tsx +23 -23
            • 📁 info/
              • 📁 shield-subscription-approve/
                • 📄 subscription-details.tsx +11 -8
        • 📁 hooks/
          • 📁 alerts/
            • 📁 transactions/
              • 📄 ShieldCoverageAlertMessage.tsx +14 -14

🔐 @MetaMask/web3auth (3 files, +43 -36)
  • 📁 ui/
    • 📁 pages/
      • 📁 confirmations/
        • 📁 components/
          • 📁 confirm/
            • 📁 footer/
              • 📁 shield-footer-coverage-indicator/
                • 📄 shield-footer-coverage-indicator.tsx +18 -14
            • 📁 info/
              • 📁 shield-subscription-approve/
                • 📄 subscription-details.tsx +11 -8
        • 📁 hooks/
          • 📁 alerts/
            • 📁 transactions/
              • 📄 ShieldCoverageAlertMessage.tsx +14 -14

@metamaskbotv2
Copy link
Contributor

metamaskbotv2 bot commented Mar 12, 2026

Builds ready [b0fdb99]
⚡ Performance Benchmarks
👆 Interaction Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Load New Accountload_new_account2792682918279291
total2792682918279291
Confirm Txconfirm_tx6034600760562260556056
total6034600760562260556056
Bridge User Actionsbridge_load_page20719022413214224
bridge_load_asset_picker26824330526295305
bridge_search_token7507477543751754
total1229119212763512651276
🔌 Startup Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Standard HomeuiStartup13991176168310814521618
load1159949141710012121352
domContentLoaded115194613719712031343
domInteractive2917110212687
firstPaint197621200184216382
backgroundConnect20418930716206232
firstReactRender18113751928
initialActions107124
loadScripts96476111829610201157
setupStore1373961526
numNetworkReqs362795182785
Power User HomeuiStartup5291244914874214463368094
load13341139232716613611659
domContentLoaded13131127216515513481646
domInteractive43203044534130
firstPaint227852193244273434
backgroundConnect170331011748193522754630
firstReactRender27185062941
initialActions106113
loadScripts1079914186414211021387
setupStore1675271829
numNetworkReqs1909336047216277
🧭 User Journey Benchmarks

⚠️ Missing data: chrome/browserify/userJourneyOnboardingNew, chrome/browserify/userJourneyAccountManagement

BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Onboarding Import WalletimportWalletToSocialScreen2212172243224224
srpButtonToSrpForm96959819798
confirmSrpToPwForm22222302223
pwFormToMetricsScreen16151701617
metricsToWalletReadyScreen17161701717
doneButtonToHomeScreen70459582392800823
openAccountMenuToAccountListLoaded293429272939529382939
total40193906417010041004170
Asset DetailsassetClickToPriceChart71501001884100
total71501001884100
Solana Asset DetailsassetClickToPriceChart100961033103103
total100961033103103
Send TransactionsopenSendPageFromHome23202632626
selectTokenToSendFormLoaded31273743137
reviewTransactionToConfirmationPage930659116117210571161
total991717124918011101249
SwapopenSwapPageFromHome1062116656163166
fetchAndDisplaySwapQuotes2699268727101027092710
total2805271128635628532863
🌐 Dapp Page Load Benchmarks

Current Commit: b0fdb99 | Date: 3/12/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.04s (±42ms) 🟡 | historical mean value: 1.05s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 727ms (±37ms) 🟢 | historical mean value: 740ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 80ms (±11ms) 🟢 | historical mean value: 85ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.04s 42ms 1.02s 1.34s 1.07s 1.34s
domContentLoaded 727ms 37ms 709ms 1.01s 745ms 1.01s
firstPaint 80ms 11ms 64ms 168ms 92ms 168ms
firstContentfulPaint 80ms 11ms 64ms 168ms 92ms 168ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs
  • background: 58 Bytes (0%)
  • ui: -454 Bytes (-0.01%)
  • common: 20 Bytes (0%)

@metamaskbotv2
Copy link
Contributor

metamaskbotv2 bot commented Mar 12, 2026

Builds ready [b0fdb99]
⚡ Performance Benchmarks
👆 Interaction Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Load New Accountload_new_account2792682918279291
total2792682918279291
Confirm Txconfirm_tx6034600760562260556056
total6034600760562260556056
Bridge User Actionsbridge_load_page20719022413214224
bridge_load_asset_picker26824330526295305
bridge_search_token7507477543751754
total1229119212763512651276
🔌 Startup Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Standard HomeuiStartup13991176168310814521618
load1159949141710012121352
domContentLoaded115194613719712031343
domInteractive2917110212687
firstPaint197621200184216382
backgroundConnect20418930716206232
firstReactRender18113751928
initialActions107124
loadScripts96476111829610201157
setupStore1373961526
numNetworkReqs362795182785
Power User HomeuiStartup5291244914874214463368094
load13341139232716613611659
domContentLoaded13131127216515513481646
domInteractive43203044534130
firstPaint227852193244273434
backgroundConnect170331011748193522754630
firstReactRender27185062941
initialActions106113
loadScripts1079914186414211021387
setupStore1675271829
numNetworkReqs1909336047216277
🧭 User Journey Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Onboarding Import WalletimportWalletToSocialScreen2212172243224224
srpButtonToSrpForm96959819798
confirmSrpToPwForm22222302223
pwFormToMetricsScreen16151701617
metricsToWalletReadyScreen17161701717
doneButtonToHomeScreen70459582392800823
openAccountMenuToAccountListLoaded293429272939529382939
total40193906417010041004170
Onboarding New WalletcreateWalletToSocialScreen2232192284225228
srpButtonToPwForm1091051112111111
createPwToRecoveryScreen98111911
skipBackupToMetricsScreen36353813738
agreeButtonToOnboardingSuccess17171701717
doneButtonToAssetList5265245292529529
total91689993613914936
Asset DetailsassetClickToPriceChart71501001884100
total71501001884100
Solana Asset DetailsassetClickToPriceChart100961033103103
total100961033103103
Import Srp HomeloginToHomeScreen2283219423665723092366
openAccountMenuAfterLogin924618853110188
homeAfterImportWithNewWallet2353228624476123622447
total4741460748017847924801
Send TransactionsopenSendPageFromHome23202632626
selectTokenToSendFormLoaded31273743137
reviewTransactionToConfirmationPage930659116117210571161
total991717124918011101249
SwapopenSwapPageFromHome1062116656163166
fetchAndDisplaySwapQuotes2699268727101027092710
total2805271128635628532863
🌐 Dapp Page Load Benchmarks

Current Commit: b0fdb99 | Date: 3/12/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.04s (±42ms) 🟡 | historical mean value: 1.05s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 727ms (±37ms) 🟢 | historical mean value: 740ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 80ms (±11ms) 🟢 | historical mean value: 85ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.04s 42ms 1.02s 1.34s 1.07s 1.34s
domContentLoaded 727ms 37ms 709ms 1.01s 745ms 1.01s
firstPaint 80ms 11ms 64ms 168ms 92ms 168ms
firstContentfulPaint 80ms 11ms 64ms 168ms 92ms 168ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs
  • background: 58 Bytes (0%)
  • ui: -454 Bytes (-0.01%)
  • common: 20 Bytes (0%)

Copy link

@cursor cursor bot left a comment

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.

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

@sonarqubecloud
Copy link

@metamaskbotv2
Copy link
Contributor

metamaskbotv2 bot commented Mar 12, 2026

Builds ready [0d519ba]
⚡ Performance Benchmarks
👆 Interaction Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Load New Accountload_new_account2742682825275282
total2742682825275282
Confirm Txconfirm_tx603360286041660416041
total603360286041660416041
Bridge User Actionsbridge_load_page25221229131283291
bridge_load_asset_picker20311825649232256
bridge_search_token74169876124761761
total1196110712765712291276
🔌 Startup Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Standard HomeuiStartup14511209180810815221644
load1209100315269912661380
domContentLoaded120299815159812611371
domInteractive291893192689
firstPaint177751334204205283
backgroundConnect21519629914219237
firstReactRender21135872234
initialActions1010224
loadScripts100480813049710581173
setupStore1363261626
numNetworkReqs362789173981
Power User HomeuiStartup56152002180903495654216620
load13011125166611713591551
domContentLoaded12811119163210713361518
domInteractive3620191293384
firstPaint2138550592288359
backgroundConnect2177289146433244205913421
firstReactRender27195273038
initialActions106113
loadScripts1056919139910111071267
setupStore1654871928
numNetworkReqs1316025239139224
🧭 User Journey Benchmarks
BenchmarkMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P75 (ms)P95 (ms)
Onboarding Import WalletimportWalletToSocialScreen2202202210221221
srpButtonToSrpForm93939309393
confirmSrpToPwForm22212202222
pwFormToMetricsScreen15151601616
metricsToWalletReadyScreen16151711617
doneButtonToHomeScreen63360066628654666
openAccountMenuToAccountListLoaded290929072910129102910
total3913387239372539303937
Onboarding New WalletcreateWalletToSocialScreen2202172232220223
srpButtonToPwForm1081061112111111
createPwToRecoveryScreen888088
skipBackupToMetricsScreen39364434244
agreeButtonToOnboardingSuccess16161701717
doneButtonToAssetList53348060045544600
total9258691007529291007
Asset DetailsassetClickToPriceChart724495198895
total724495198895
Solana Asset DetailsassetClickToPriceChart1028211915113119
total1028211915113119
Import Srp HomeloginToHomeScreen23082168251111823502511
openAccountMenuAfterLogin59596016060
homeAfterImportWithNewWallet1598521237085422912370
total39782816477184446484771
Send TransactionsopenSendPageFromHome452172227172
selectTokenToSendFormLoaded29283113131
reviewTransactionToConfirmationPage1032805124917511571249
total1106865134219312581342
SwapopenSwapPageFromHome944915941119159
fetchAndDisplaySwapQuotes268926822698626942698
total2783273628574528032857
🌐 Dapp Page Load Benchmarks

Current Commit: 0d519ba | Date: 3/12/2026

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.05s (±41ms) 🟡 | historical mean value: 1.05s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 739ms (±39ms) 🟢 | historical mean value: 742ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 82ms (±14ms) 🟢 | historical mean value: 85ms ⬇️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.05s 41ms 1.02s 1.38s 1.06s 1.38s
domContentLoaded 739ms 39ms 715ms 1.04s 745ms 1.04s
firstPaint 82ms 14ms 68ms 212ms 88ms 212ms
firstContentfulPaint 82ms 14ms 68ms 212ms 88ms 212ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs
  • background: 58 Bytes (0%)
  • ui: -872 Bytes (-0.01%)
  • common: 78 Bytes (0%)

@chaitanyapotti chaitanyapotti added this pull request to the merge queue Mar 16, 2026
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Mar 16, 2026
@HowardBraham HowardBraham added this pull request to the merge queue Mar 17, 2026
Merged via the queue into main with commit 43373f5 Mar 17, 2026
184 checks passed
@HowardBraham HowardBraham deleted the feat/ds-migrate-shield-confirmation branch March 17, 2026 01:47
@github-actions github-actions bot locked and limited conversation to collaborators Mar 17, 2026
@metamaskbot metamaskbot added the release-13.24.0 Issue or pull request that will be included in release 13.24.0 label Mar 17, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-13.24.0 Issue or pull request that will be included in release 13.24.0 size-M team-shield Shield team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants