feat: use design-system-react components on shield confirmation screens#40832
feat: use design-system-react components on shield confirmation screens#40832HowardBraham merged 3 commits intomainfrom
Conversation
|
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. |
✨ Files requiring CODEOWNER review ✨✅ @MetaMask/confirmations (4 files, +66 -59)
🔐 @MetaMask/web3auth (3 files, +43 -36)
|
Builds ready [b0fdb99]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs
|
Builds ready [b0fdb99]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs
|
...ponents/confirm/footer/shield-footer-coverage-indicator/shield-footer-coverage-indicator.tsx
Show resolved
Hide resolved
ui/pages/confirmations/components/confirm/footer/shield-footer-agreement.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
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.
ui/pages/confirmations/components/confirm/footer/shield-footer-agreement.tsx
Show resolved
Hide resolved
|
Builds ready [0d519ba]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs
|



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.).
Changelog
CHANGELOG entry: use design-system-react components on shield confirmation screens
Related issues
Fixes:
Manual testing steps
Testing transaction confirmation page
Testing Shield subscription confirmation page
Screenshots/Recordings
There should be no changes on before/after screens
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist
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-reactprimitives instead of the internalcomponent-libraryand mosthelpers/constants/design-systemenums.This refactors footer agreement, coverage indicator, subscription details, and the Shield coverage alert message to the new
Text/BoxAPIs (newTextVariant/TextColorvalues, explicitFontWeight) and replacesButtonLinkwithTextButtonwrapping an external<a>viaasChild.Written by Cursor Bugbot for commit 0d519ba. This will update automatically on new commits. Configure here.