fix: update cancel/speedup modal UI and migrate to non-deprecated components#39661
Merged
georgewrmarshall merged 1 commit intomainfrom Feb 4, 2026
Merged
Conversation
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. |
2143bfd to
2af64a9
Compare
Contributor
Builds ready [2af64a9]
UI Startup Metrics (1353 ± 116 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs
|
ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js
Outdated
Show resolved
Hide resolved
Contributor
Builds ready [765d532]
UI Startup Metrics (1314 ± 118 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
765d532 to
3e21f1c
Compare
3e21f1c to
9f7dbc1
Compare
georgewrmarshall
commented
Feb 2, 2026
| TextButton, | ||
| TextVariant, | ||
| } from '../../../helpers/constants/design-system'; | ||
| } from '@metamask/design-system-react'; |
Contributor
Author
There was a problem hiding this comment.
Migrated from deprecated design-system imports to the new @metamask/design-system-react package. This is part of the ongoing effort to remove deprecated components.
georgewrmarshall
commented
Feb 2, 2026
| ModalContent, | ||
| ModalHeader, | ||
| ModalFooter, | ||
| } from '../../component-library'; |
Contributor
Author
There was a problem hiding this comment.
Replaced deprecated ModalHeader and ModalContent with their current versions from component-library. The deprecated versions were scheduled for removal.
georgewrmarshall
commented
Feb 2, 2026
| {editGasMode === EditGasModes.cancel | ||
| ? `❌${t('cancel')}` | ||
| : `🚀${t('speedUp')}`} | ||
| {editGasMode === EditGasModes.cancel ? t('cancel') : t('speedUp')} |
Contributor
Author
There was a problem hiding this comment.
Removed emoji decorations from modal headers per design feedback. The emojis felt out of place and made the modal headers less professional.
georgewrmarshall
commented
Feb 2, 2026
| paddingBottom={2} | ||
| className="cancel-speedup-popover__description" | ||
| className="cancel-speedup-popover__description flex items-center mb-2 pb-2" | ||
| variant={TextVariant.BodySm} |
Contributor
Author
There was a problem hiding this comment.
Using TextVariant.BodySm with PascalCase to match the design-system-react exports. The old constants used camelCase which is incompatible with the new package.
georgewrmarshall
commented
Feb 2, 2026
| {t('cancelSpeedUpLabel', [ | ||
| <strong key="cancelSpeedupReplace">{t('replace')}</strong>, | ||
| ])} | ||
| {t('cancelSpeedUpLabel', [t('replace')])} |
Contributor
Author
There was a problem hiding this comment.
Removed bold formatting from the description text to match design specs. The strong tag was making the text too visually prominent.
georgewrmarshall
commented
Feb 2, 2026
| > | ||
| {t('learnMoreUpperCase')} | ||
| </ButtonLink> | ||
| <TextButton asChild className="inline"> |
Contributor
Author
There was a problem hiding this comment.
Replaced ButtonLink with TextButton using the asChild pattern. TextButton wraps an anchor tag for proper link semantics while maintaining button styling. Also added rel="noopener noreferrer" for security.
georgewrmarshall
commented
Feb 2, 2026
| } | ||
| /> | ||
| </Text> | ||
| <Box |
Contributor
Author
There was a problem hiding this comment.
Migrated from deprecated Box component to design-system-react Box. Using BoxAlignItems and BoxFlexDirection enums instead of the old constant values.
georgewrmarshall
commented
Feb 2, 2026
| </Box> | ||
| <Button onClick={submitTransactionChange}>{t('submit')}</Button> | ||
| </div> | ||
| <ModalFooter |
Contributor
Author
There was a problem hiding this comment.
Replaced standalone Button with ModalFooter component for consistent full-width button styling. ModalFooter handles the submit action and button props, ensuring consistent modal UX across the application.
georgewrmarshall
commented
Feb 2, 2026
| it('should have Cancel in header if editGasMode is cancel', async () => { | ||
| await act(async () => render()); | ||
| expect(screen.queryByText('❌Cancel')).toBeInTheDocument(); | ||
| expect(screen.queryByText('Cancel')).toBeInTheDocument(); |
Contributor
Author
There was a problem hiding this comment.
Updated test assertions to verify the emoji-free modal headers. These tests ensure the UI changes for MDP-485 and MDP-486 are working correctly.
Contributor
Builds ready [9f7dbc1]
UI Startup Metrics (1379 ± 93 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs
|
brianacnguyen
approved these changes
Feb 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR addresses several UI papercuts in the cancel and speedup transaction modals by removing emojis, updating button styling, removing bold text formatting, and migrating from deprecated Modal components to their current versions.
The modals had several UI issues identified in MDP-485, MDP-486, and MDP-491: emoji decorations felt out of place, the submit button wasn't full-width, and bold text made the description too prominent. Additionally, the component was using deprecated Modal components scheduled for removal.
Changes included:
ModalHeaderandModalContentimports to current component library versionsButtonLinkwithTextButtonusing the asChild pattern for proper link semanticsBoxand design-system constants to@metamask/design-system-reactcomponentsButtonwithModalFootercomponent for consistent full-width button styling<strong>tag from description text to match design specsTextVariantenum usage to use PascalCase (BodySm) instead of camelCase (bodySm)Changelog
CHANGELOG entry: Fixed cancel and speedup modal UI by removing emojis, standardizing button width, and migrating to current component versions
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/MDP-485
Fixes: https://consensyssoftware.atlassian.net/browse/MDP-486
Fixes: https://consensyssoftware.atlassian.net/browse/MDP-491
Manual testing steps
Screenshots/Recordings
Before
beforespeedup720.mov
After
speedupafter720.mov
Pre-merge author checklist
Pre-merge reviewer checklist