feat: quickbuy bottom sheet redesign

[joaosantos15]

Description

Updates the Social AI Quick Buy bottom sheet to match the latest Swap Next / Trade Figma design, and hardens amount / keypad / pay-with UX.

Why: The previous sheet layout (colored Buy/Sell toggle, settings on the right, Rate row, white CTA, keypad closed by default on the keyboard treatment) no longer matched the product design. Follow-up polish keeps amount entry, over-balance CTAs, sheet height, and pay-with selection consistent.

What changed:

Layout / design

• Taller sheet: keyboard treatment keeps the amount footer and numeric keypad visible together; keypad opens by default
• Toolbar: settings gear top-left, centered neutral Buy/Sell toggle (white/dark, no green/orange), close (X) top-right
• Confirm CTA: lime success for Buy, red error for Sell (not ButtonHero/primary blue)
• Rate row replaced with Total (fiat total including network fee); chevron opens quote details (quoteDetails enabled)
• Fee copy: “Includes {{fee}}% MetaMask fee”

Amount / keypad

• Blinking caret while the keypad is open, placed after the digits (before currency/token suffix)
• Editing digits use the same locale decimal separator as the keypad (e.g. 12,5 for EUR)
• Tapping a buy/sell preset pill dismisses the keypad; it reopens only when tapping the main amount
• Keyboard amounts above balance show enabled Add funds (same as pills), not disabled Insufficient funds
• Changing the Pay with token preserves the entered amount; max-spend mode is only cleared when the token identity changes

Sheet height

• Pay with / Quotes lock to the current main-page height (keypad open or collapsed), not only the taller first-open height
• Edit default amounts stays independently taller / dynamic

Edit default amounts

• Dynamic full-height sheet; first keypad digit after focusing a field replaces the whole value
• Buy preset max validation raised to 9,999,999

Quick-amount pills

• Compact K/M labels for amounts ≥ 1000 in all currencies
• Compact labels reuse formatCurrency so currency symbol placement stays locale-consistent (prefix or suffix)

Design: https://www.figma.com/design/GO9uJiYlhdWRuXJe8dzZfR/Swap-Next?node-id=3254-9838

Changelog

CHANGELOG entry: Updated the Quick Buy bottom sheet layout, colors, keypad behavior, and amount formatting to match the latest Trade design

Related issues

Refs: TSA-943

Manual testing steps

Feature: Quick Buy bottom sheet Figma layout

  Scenario: user opens Quick Buy and sees the updated sheet
    Given the user is on a trader position with Quick Buy available
    And the keyboard A/B treatment is assigned

    When the user opens Quick Buy
    Then the settings gear is in the top-left
    And the Buy/Sell toggle is centered with a white/dark selected state
    And a close button is in the top-right
    And the numeric keypad is visible by default
    And a blinking caret appears after the amount digits
    And the confirm button is lime green for Buy

  Scenario: user switches to Sell
    Given Quick Buy is open in Buy mode with a sellable balance

    When the user taps Sell
    Then the confirm button is red
    And the Buy/Sell toggle remains white/dark (not colored)

  Scenario: user taps a preset amount with the keypad open
    Given Quick Buy is open with the keypad visible

    When the user taps a buy quick-amount pill
    Then the keypad dismisses
    And tapping the main amount reopens the keypad

  Scenario: user enters more than their balance via keypad
    Given Quick Buy is open with a spendable balance of less than 250

    When the user types 250 on the keypad
    Then the confirm CTA shows Add funds and is enabled

  Scenario: user changes pay-with token
    Given Quick Buy is open with a typed amount

    When the user opens Pay with and selects a different token
    Then the entered amount is preserved

  Scenario: user opens quote details / pay with with keypad collapsed
    Given Quick Buy is open and the keypad has been dismissed

    When the user opens Pay with or quote details
    Then the sheet height matches the collapsed main page (no jump to keypad-open height)

  Scenario: user opens quote details from Total
    Given Quick Buy is open with a quoted amount

    When the user taps the Total row chevron
    Then the quote details screen opens

  Scenario: user edits default amounts
    Given Quick Buy is open

    When the user taps the settings gear
    Then the edit default amounts screen opens at full sheet height
    And focusing a field and typing the first digit replaces the whole value
    And amounts at or above 1000 show compact K/M pill labels with currency placement matching smaller amounts

  Scenario: compact pill labels stay locale-consistent
    Given the user’s display currency places the symbol as a suffix (e.g. US$)

    When Quick Buy shows a pill for 10 and a pill for 1500
    Then both labels place US$ in the same position (e.g. "10 US$" and "1.5K US$")

Screenshots/Recordings

Before

Previous Quick Buy sheet: Buy/Sell toggle top-left with green/orange fill, settings gear top-right, Rate row, white primary CTA, keypad closed by default on the keyboard treatment. Compact K/M pills could force a currency prefix while smaller amounts used a suffix.

After

Matches Figma frame: https://www.figma.com/design/GO9uJiYlhdWRuXJe8dzZfR/Swap-Next?node-id=3254-9838

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.

[github-actions]

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.

[metamask-ci]

PR template — items to address before "Ready for review"

Warnings — informational, address before merging:

• Pre-merge author checklist has unchecked items (e.g. "I've tested on Android"). Every box must be consciously checked — see docs/readme/ready-for-review.md.

See docs/readme/ready-for-review.md for the full Definition of Ready for Review.

[github-actions]

🧪 Flaky unit test detection

Run history flaky detection

View recent run history

Historical failure rate is a hint, not proof — review each suggestion in context. See the flaky-test-detection skill for the full pattern reference and manual audit workflow.

Failures / runs sampled per window:

File	7d	15d	30d
app/components/Views/SocialLeaderboard/TraderPositionView/components/QuickBuy/QuickBuySheet.test.tsx	0/199	0/329	0/381

AI-detected flaky patterns

app/components/Views/SocialLeaderboard/TraderPositionView/components/QuickBuy/QuickBuySheet.test.tsx

• J3 — Shared mock state — redundant clearAllMocks + resetAllMocks combination (high)
  • afterEach(jest.resetAllMocks) resets all mock implementations (including mockReturnValue / mockImplementation set by setMockQuickBuyController(), setMockQuickBuyPreferences(), and useQuickBuySetup in beforeEach). Because beforeEach re-establishes those implementations before each test, the tests themselves are currently safe — but the pattern is fragile: any test that sets a mock implementation and relies on it persisting into a nested afterEach or cleanup callback will silently lose it. More critically, resetAllMocks also resets the mockControllerState.getResult closure set by setMockQuickBuyController, which could cause the QuickBuyActionFooter mock's onPress handler to call a stale getter. The safest fix is to drop afterEach(jest.resetAllMocks) and rely solely on beforeEach(jest.clearAllMocks), which already resets call counts without destroying implementations.
  • Suggested fix in app/components/Views/SocialLeaderboard/TraderPositionView/components/QuickBuy/QuickBuySheet.test.tsx:1:

    -describe('QuickBuy.Root', () => {
    -  beforeEach(() => {
    -    jest.clearAllMocks();
    -    storedOnOpenCallback = undefined;
    -    mockUseKeyboard = false;
    -    setMockQuickBuyController();
    -    setMockQuickBuyPreferences();
    -    (useQuickBuySetup as jest.Mock).mockReturnValue({
    -      chainId: '0x1',
    -      destToken: undefined,
    -      isLoading: false,
    -      isUnsupportedChain: false,
    -    });
    -  });
    -
    -  afterEach(() => {
    -    jest.resetAllMocks();
    -  });
    +describe('QuickBuy.Root', () => {
    +  beforeEach(() => {
    +    jest.clearAllMocks();
    +    storedOnOpenCallback = undefined;
    +    mockUseKeyboard = false;
    +    setMockQuickBuyController();
    +    setMockQuickBuyPreferences();
    +    (useQuickBuySetup as jest.Mock).mockReturnValue({
    +      chainId: '0x1',
    +      destToken: undefined,
    +      isLoading: false,
    +      isUnsupportedChain: false,
    +    });
    +  });
    +  // afterEach(jest.resetAllMocks) removed — beforeEach(jest.clearAllMocks) is sufficient
    +});

This check is informational only and does not block merging.

[cursor]

Cursor Bugbot has reviewed your changes and found 3 potential issues.

^{❌ 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 6616d57. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeAccounts, SmokeConfirmations, SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeSwap, SmokeStake, SmokeWalletPlatform, SmokeMoney, SmokePerps, SmokeMultiChainAPI, SmokePredictions, SmokeSeedlessOnboarding, SmokeBrowser, SmokeSnaps, SmokeMMConnect
• Selected Performance tags: None (no tests recommended)
• Risk Level: high
• AI Confidence: 100%

click to see 🤖 AI reasoning details

E2E Test Selection:
Hard rule (en-locale-change): locales/languages/en.json changed — UI strings and E2E text/label selectors may diverge (including platform casing like Android textAllCaps). Running all tests.

Performance Test Selection:
The changes are to the QuickBuy UI component within the Perps trading flow. While there are logic changes to the controller and UI rendering, none of these changes affect app launch, onboarding, login, asset loading, account list rendering, or swap performance flows that are measured by the available performance tags. The QuickBuy/Perps UI is not covered by any of the available performance test tags (@PerformancePreps covers perps market loading and position management, but the changes here are to the QuickBuy bottom sheet UI logic, not the perps market loading or order execution performance paths). No performance tests are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
91.9% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud