feat: add disabled loading state to MMPay fiat confirmation components#29906
Conversation
| tooltipDisabled={tooltipDisabled} | ||
| tooltipColor={isDisabled ? IconColor.Muted : undefined} | ||
| rowVariant={InfoRowVariant.Small} | ||
| variant={labelColor} |
There was a problem hiding this comment.
Label color not muted when alert overrides disabled state
Low Severity
When isDisabled is true AND an alert is active on PayWithFee, the label's muted color (variant={TextColor.Muted}) is silently overridden by AlertRow, which unconditionally replaces variant with the alert severity color (e.g., TextColor.Error) when alertSelected is truthy. Meanwhile, valueColor correctly resolves to TextColor.Muted. This creates a visual inconsistency — label in red, value in gray — during the loading state that is meant to mute everything.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 75601ae. Configure here.
75601ae to
ff3c3d8
Compare
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 2 total unresolved issues (including 1 from previous review).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 723c43c. Configure here.
| name={IconName.ArrowDown} | ||
| size={IconSize.Sm} | ||
| color={IconColor.Alternative} | ||
| color={isDisabled ? IconColor.Muted : IconColor.Alternative} |
There was a problem hiding this comment.
Arrow icon now visible for hardware accounts unintentionally
Medium Severity
The arrow-down icon visibility condition was broadened beyond the PR's intent. Previously, the icon was hidden when !canEdit (hardware accounts) via {!isDisabled && from && ...}. Now the condition is just {from && ...}, always rendering the icon (muted when disabled). This means hardware account users now see a muted dropdown arrow suggesting editability, when they could never edit. The same regression applies in PayWithFiatPaymentMethodRow where {canEdit && hasFrom && ...} became {hasFrom && ...}. The condition needs to distinguish "permanently non-editable" (hardware account) from "temporarily disabled" (headless buy in progress).
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 723c43c. Configure here.
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection:
Tag Selection Rationale:
Dependent tags per descriptions:
Performance Test Selection: |
|
Description
Adds a disabled/loading state to all interactive components on the MMPay fiat confirmation screen while
startHeadlessBuyis in progress. This prevents user interaction during order preparation and provides clear visual feedback via muted styling and a native loading spinner on the CTA button.Note that
isHeadlessBuyInProgressis not currently used but it will be integrated on #28152Changes
ConfirmationContext: AddedisHeadlessBuyInProgressboolean + setter to shared context so all target components can read the state directly.ConfirmButton: Uses the design systemButton's built-inisLoading/loadingTextprops to show a spinner with "Preparing order" text.CustomAmount: Disables the amount input keyboard when loading.PayWithRow: Disables the token picker row; appliesTextColor.Muted/IconColor.Mutedfor consistent dimming while preserving layout (arrow-down icon stays visible).BridgeFeeRow: Disables the tooltip ⓘ button and applies muted text/icon colors.TotalRow: Applies muted text colors to label and value.Tooltip: Addeddisabledprop that guardshandlePressand passesdisabledto the underlyingButtonIconfor true non-interactivity.InfoRow/AlertRow: AddedtooltipDisabledprop forwarded toTooltip; fixedAlertRowto only override labelvariantwhen an alert is active (respects caller's prop otherwise).confirm.preparing_orderstring.Changelog
CHANGELOG entry: null
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
After
fiat.loading.mov
Pre-merge author checklist
Performance checks (if applicable)
Pre-merge reviewer checklist
Note
Medium Risk
Touches confirmation-screen interaction/CTA enablement by introducing a new shared loading flag that disables inputs and shows a loading state; risk is mainly UX/flow regressions if the flag is set/cleared incorrectly.
Overview
Adds a new
isHeadlessBuyInProgressflag (and setter) toConfirmationContextand threads it through MM Pay fiat confirmation components to freeze user interaction during order preparation.While this flag is true, the confirm CTA is disabled and shows a native loading spinner with new copy (
confirm.preparing_order), and interactive rows/inputs (custom amount, pay-with picker, transaction-fee tooltip) are disabled with muted styling. Also fixesAlertRowto only override thevariantcolor when an alert is present, and extendsTooltip/InfoRowwith adisabled/tooltipDisabledpath to prevent opening tooltips.Reviewed by Cursor Bugbot for commit cd87e35. Bugbot is set up for automated code reviews on this repo. Configure here.