Description

In the QuickBuy bottom sheet, the Buy button sometimes took longer to become enabled than the amount-section quote loader took to disappear. The user expects the CTA to become tappable as soon as the quote completes.

Reason for the change: the loader and the Buy button were gated by two conditions that drifted out of sync for one render. The loader is driven by isBlockingQuoteLoad (gated by isQuoteLoading), which clears the instant the fetch resolves. The button is gated by isConfirmDisabled, which includes isPendingQuoteRefresh — and that value was derived from settledSourceTokenAmountRef, a ref updated only inside a post-commit useEffect. On the render where the quote arrived, the loader hid but the ref had not caught up, and ref writes do not schedule a re-render, so the CTA only re-enabled on the next unrelated render (a redux tick, gas-estimate update, quote countdown, etc.) — producing the variable lag.

Solution: replace the timing/effect-based "settled amount" tracking with a synchronous derivation. A displayed quote is for the current amount when the quote's own srcTokenAmount equals the requested amount (the request is built with calcTokenValue(sourceTokenAmount, decimals).toFixed(0) and the bridge echoes that exact value back). isPendingQuoteRefresh now derives from this synchronous check, so isBlockingQuoteLoad and isConfirmDisabled settle on the same render the matching quote lands. Background refreshes of the same amount keep srcTokenAmount unchanged, so the CTA stays enabled as before.

Changelog

CHANGELOG entry: Fixed the QuickBuy Buy button sometimes staying disabled briefly after the quote finished loading.

Related issues

Fixes: An issue where he QuickBuy Buy button sometimes staying disabled briefly after the quote finished loading.

Manual testing steps

Feature: QuickBuy Buy button enablement

  Scenario: Buy button enables as soon as the quote loads
    Given I open the QuickBuy bottom sheet for a token
    When I enter or select an amount and the quote loader spins
    Then the loader disappears when the quote completes
    And the Buy button becomes enabled on the same frame (no lag)

  Scenario: Buy button stays disabled while a new amount is being quoted
    Given a quote is already displayed for an amount
    When I change the amount so a new quote is fetched
    Then the Buy button is disabled until the quote for the new amount arrives

Screenshots/Recordings

Before

N/A

After

N/A

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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.

Made with Cursor