feat: Implement new UI for transaction Speed Up and Cancel#39918
Merged
vinistevam merged 21 commits intomainfrom Mar 3, 2026
Merged
feat: Implement new UI for transaction Speed Up and Cancel#39918vinistevam merged 21 commits intomainfrom
vinistevam merged 21 commits intomainfrom
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. |
Contributor
✨ Files requiring CODEOWNER review ✨✅ @MetaMask/confirmations (3 files, +690 -0)
👨🔧 @MetaMask/core-extension-ux (1 files, +2 -5)
🧪 @MetaMask/qa (1 files, +2 -4)
|
Contributor
Builds ready [0acbb26]
UI Startup Metrics (1421 ± 94 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
…nd network configuration
Contributor
Builds ready [ab7d229]
UI Startup Metrics (1339 ± 92 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
…ferencedCurrency hook
Contributor
Builds ready [f537fce]
UI Startup Metrics (1347 ± 107 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚀 Bundle size reduced!]
|
…tamask-extension into vs/speedup-cancel-ui
…tamask-extension into vs/speedup-cancel-ui
Contributor
Builds ready [dedfe06]
⚡ Performance Benchmarks (1377 ± 113 ms)
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚀 Bundle size reduced!]
|
jpuri
reviewed
Feb 24, 2026
| mode={editGasMode} | ||
| onClose={() => closeModal(['cancelSpeedUpTransaction'])} | ||
| /> | ||
| </GasFeeContextProvider> |
Contributor
There was a problem hiding this comment.
An important goal for us is to get rid of GasFeeContextProvider context. We should not use it in new implementation.
Contributor
Author
There was a problem hiding this comment.
100% that is the main goal, sorry I should have that more clean in the PR. What I'm trying in this PR is to match the new UI first, due to sizing, maintaining the legacy logic and in a second phase (this PR) remove the GasFeeContextProvider and modernize the logic behind. I would say that I might need a third phase to remove old code and at least migrate some components (GasTiming, NetworkStatistics and StatusSlider ) to typescript that are heavily coupled to GasFeeContextProvider. Once that is all done we also can remove the GasFeeContextProvider from confirmations as well.
Contributor
There was a problem hiding this comment.
That sounds good, can you please add this detail as comment here.
jpuri
requested changes
Feb 24, 2026
Contributor
jpuri
left a comment
There was a problem hiding this comment.
I think we need to get rid of GasFeeContextProvider.
Contributor
Builds ready [c8dda2a]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚀 Bundle size reduced!]
|
Contributor
Author
|
Implementation Phases Phase 2: (draft PR) Remove Phase 3: Migrate This phased approach ensures stability and allows for incremental testing at each stage. |
jpuri
previously approved these changes
Feb 27, 2026
jpuri
approved these changes
Mar 2, 2026
| currency: secondaryCurrency, | ||
| }); | ||
|
|
||
| return ( |
Contributor
There was a problem hiding this comment.
Do we hide these controls for 7702 transactions?
Contributor
Author
There was a problem hiding this comment.
This is pure UI refactor. I've opened one ticket to hide the controls when transaction is 7702.
|
Contributor
Builds ready [e6a80ed]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚀 Bundle size reduced!]
|
pedronfigueiredo
approved these changes
Mar 2, 2026
n3ps
approved these changes
Mar 2, 2026
Contributor
n3ps
left a comment
There was a problem hiding this comment.
@vinistevam looks like the cancel-speedup-popover components is no longer used, can it be removed in a follow up?
cortisiko
approved these changes
Mar 2, 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.
6 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 introduces the new UI components for transaction "Speed Up" and "Cancel" actions, migrating from legacy views to the modern Confirmation-based architecture using
@metamask/design-system-react.Reason for change:
The current speed up and cancel flows rely on legacy UI patterns that are inconsistent with the new design system and harder to maintain. This change is the first part of a two-step refactor to modernize these critical user flows.
Improvement/Solution:
CancelSpeedupfunctional component using TypeScript.ConfirmInfoSectionandConfirmInfoRowto match the "Gas Fee" section pattern.Modalcomponent from the internal component library for a consistent overlay experience.GasTimingcomponent to provide users with visual feedback on estimated transaction speeds.**NOTE: ** The business logic refactor (moving to standalone hooks) will follow in a subsequent PR.
Changelog
CHANGELOG entry: Updated the UI for speeding up and cancelling transactions
Related issues
Fixes: https://github.com/MetaMask/MetaMask-planning/issues/6995
Manual testing steps
Speed up
Cancel
Screenshots/Recordings
canceled_tx.webm
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
Touches the pending-transaction speed-up/cancel flow and gas-fee initialization logic, so regressions could impact users’ ability to replace transactions or see correct fees. Changes are mostly UI refactor but still exercise transaction-modifying actions and estimate selection.
Overview
Replaces the legacy
CancelSpeedupPopoverused fromtransaction-list-itemwith a new TypeScriptCancelSpeedupmodal under confirmations, using the design system and the confirmations info-row layout (network fee + speed) and wiring confirm tocreateSpeedUpTransaction/createCancelTransaction.Adds new i18n strings for cancel/speed-up titles and descriptions, updates the E2E page-object to target the new confirm button test id, and introduces a new unit test suite for the modal (including 10%/medium-estimate fee selection behavior). Also updates gas-fee input initialization to carry
chainIdin the retry meta and adjusts the Jest console baseline for the new tests.Written by Cursor Bugbot for commit e6a80ed. This will update automatically on new commits. Configure here.