Skip to content

fix(confirmations): address minor issues with new MM Pay picker cp-7.80.0#30915

Merged
vinistevam merged 1 commit into
mainfrom
vs/fix-mmpay-picker-30820
Jun 2, 2026
Merged

fix(confirmations): address minor issues with new MM Pay picker cp-7.80.0#30915
vinistevam merged 1 commit into
mainfrom
vs/fix-mmpay-picker-30820

Conversation

@vinistevam

@vinistevam vinistevam commented Jun 2, 2026 •
edited by cursor Bot
Loading

Copy link
Copy Markdown
Contributor

Description

Addresses 7 polish issues reported in the new MM Pay picker bottom sheet after the pay-with bottom sheet. The bugs span copy corrections for withdrawal flows, conditional rendering of the "available" balance suffix, icon rendering, and styling inconsistencies.

The "available" suffix on token balance subtitles now only renders for pure-deposit flows (perpsDeposit, predictDeposit) where it semantically means "you have this much to spend." Order-and-deposit flows (perpsDepositAndOrder, predictDepositAndOrder) and withdrawal flows show the bare balance.

Perps and Predict balance icons are migrated to the component-library Icon with IconName.Candlestick and IconName.Predictions respectively.

Old i18n keys are removed and replaced with new keys so the translation pipeline can pick up the fresh copy. Stale translated entries for pay_with_modal.title and pay_with_modal.title_receive are cleaned from all 14 non-English locale files.

Changelog

CHANGELOG entry: Fixed minor UI issues in MM Pay picker: corrected withdraw flow titles, "available" balance display, selected token styling, balance amount color consistency, modal title, and Perps/Predict balance icons

Related issues

Fixes: #30820
Related to https://consensyssoftware.atlassian.net/browse/CONF-1466

Manual testing steps

Feature: MM Pay picker bottom sheet polish

  Scenario: Withdraw flow shows correct title and copy
    Given the user starts a Predict withdraw flow
    When the user taps the "Pay with" / "Receive" row
    Then the bottom sheet title is "Receive" (not "Withdraw as")
    And token balance subtitles show just the amount (no "available")
    And the "Other assets" subtitle says "Select the token you want to receive"

  Scenario: Deposit flow shows "available" suffix
    Given the user starts a Perps standalone deposit (Add Funds)
    When the user taps the "Pay with" row
    Then token balance subtitles show "{balance} available"

  Scenario: Order-and-deposit flow omits "available" suffix
    Given the user starts a Perps Long/Short order (perpsDepositAndOrder)
    When the user taps the "Pay with" row
    Then token balance subtitles show just the amount (no "available")
    And the "Other assets" subtitle says "Select from your tokens"

  Scenario: Modal title after tapping "Other assets"
    Given the user opens the PayWith bottom sheet (any flow)
    When the user taps "Other assets"
    Then the modal title is "Select a token" (not "Select payment method")

  Scenario: Selected token cell shows circle background
    Given the PayWith bottom sheet is open with a selected token
    Then the selected row's icon slot shows a muted background (bg-muted)
    And unselected rows show the default section background (bg-section)

  Scenario: Balance dollar amount color is consistent
    Given the user sees a "Pay with" row on a deposit confirmation screen
    Then the balance in parentheses (e.g. "($12.34)") is gray (TextAlternative), not white

  Scenario: Perps and Predict balance icons render correctly
    Given the user opens a Perps Long/Short order's PayWith bottom sheet
    Then the Perps account row shows the candlestick chart icon
    And the Predict account row shows the predictions (crystal ball) icon

Screenshots/Recordings

image image

Before

After

Pre-merge author checklist

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

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.

Note

Low Risk
UI and i18n-only changes in confirmation pay flows; no auth, payments logic, or transaction execution changes.

Overview
Polishes the MM Pay picker bottom sheet and related confirmation UI after the pay-with redesign.

Copy and titles: Withdraw flows use Receive for the bottom sheet header and receive-oriented “Other assets” helper text. The token list modal always shows Select a token instead of separate pay vs receive titles. English strings are updated; stale pay_with_modal title keys are removed from non-English locale files.

Balance subtitles: The “available” suffix on crypto and money-account row subtitles is shown only for standalone Perps/Predict deposit transaction types; order-and-deposit and withdraw paths show the bare fiat amount.

Visual tweaks: Selected payment rows use a muted circular background on the icon slot. The confirmation Pay with row renders the parenthesized USD balance in alternative text color. Perps and Predict account rows use design-system candlestick and predictions icons instead of remote token images.

Tests are extended to cover the new subtitle, title, styling, and icon behavior.

Reviewed by Cursor Bugbot for commit afd7152. Bugbot is set up for automated code reviews on this repo. Configure here.

@vinistevam vinistevam added the team-confirmations Push issues to confirmations team label Jun 2, 2026
@github-actions

github-actions Bot commented Jun 2, 2026

Copy link
Copy Markdown
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.

@github-actions github-actions Bot added the size-M label Jun 2, 2026
@github-actions

github-actions Bot commented Jun 2, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeConfirmations, SmokePerps, SmokePredictions, SmokeWalletPlatform, SmokeStake
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: medium
  • AI Confidence: 82%
click to see 🤖 AI reasoning details

E2E Test Selection:
The changes in this PR affect the payment method selection UI system used across multiple product areas:

  1. Payment UI Components (payment-method-row.tsx, pay-with-bottom-sheet.tsx, pay-with-modal.tsx, pay-with-row.tsx): These are core UI components for the "Pay With" flow used in Perps deposits/withdrawals, Predict deposits/orders, Earn (mUSD) conversions, and general confirmation payment selection.

  2. Payment Section Hooks (usePayWithCryptoSection.ts, usePayWithMoneyAccountSection.tsx, usePayWithPerpsSection.tsx, usePayWithPredictSection.tsx): These hooks drive the content of the pay-with bottom sheet for each product area.

  3. Locale string key renames (all 18 language files): Critical changes:

    • withdraw_title → receive_title (used in pay-with-bottom-sheet.tsx)
    • other_assets_withdraw_description → other_assets_receive_description (used in usePayWithCryptoSection.ts)
    • title/title_receive → modal_title (used in pay-with-modal.tsx)

    These key renames could break any E2E tests that look for the old string values.

Tag Selection Rationale:

  • SmokeConfirmations: The pay-with row and modal are part of confirmation flows (EIP-7702 gas fee token payments, general transaction confirmations). The pay-with-row.tsx is used in confirmation screens.
  • SmokePerps: usePayWithPerpsSection.tsx directly drives the Perps balance section in the pay-with bottom sheet. The Perps Add Funds flow uses PayWithBottomSheet and PayWithModal. Per tag description, SmokePerps also requires SmokeWalletPlatform (Trending section).
  • SmokePredictions: usePayWithPredictSection.tsx directly drives the Predict balance section. The predict-open-position flow uses these payment selection components. Per tag description, SmokePredictions also requires SmokeWalletPlatform (Trending section).
  • SmokeWalletPlatform: Required as a dependent tag for both SmokePerps and SmokePredictions (Perps and Predictions are sections inside Trending tab).
  • SmokeStake: The Earn/mUSD integration (usePayWithMoneyAccountSection.tsx references MUSD_TOKEN, useMusdConversionTokens) is part of the staking/lending flows. The money account section supports perpsDeposit, perpsWithdraw, predictDeposit, predictDepositAndOrder, predictWithdraw transaction types.

Not selected:

  • SmokeMoney: While the pay-with system supports fiat payment methods, the changes here are primarily to the crypto/perps/predict sections, not the fiat/ramps flows specifically.
  • SmokeSwap: No direct swap flow impact from these changes.

Performance Test Selection:
The changes are focused on UI component refactoring and locale string key renames in the payment method selection flow. While these components render in confirmation screens, the changes are not expected to impact rendering performance significantly - they are standard React component updates without changes to data fetching, list rendering algorithms, or state management patterns that would affect measurable performance metrics. No performance test tags are warranted.

View GitHub Actions results

@vinistevam vinistevam marked this pull request as ready for review June 2, 2026 04:59
@vinistevam vinistevam requested a review from a team as a code owner June 2, 2026 04:59
@vinistevam vinistevam changed the title fix(confirmations): address minor issues with new MM Pay picker fix(confirmations): address minor issues with new MM Pay picker cp-7.80.0 Jun 2, 2026
@github-actions github-actions Bot added the risk:low AI analysis: low risk label Jun 2, 2026
@vinistevam vinistevam enabled auto-merge June 2, 2026 09:04
@vinistevam vinistevam added this pull request to the merge queue Jun 2, 2026
Merged via the queue into main with commit 99549f6 Jun 2, 2026
415 of 451 checks passed
@vinistevam vinistevam deleted the vs/fix-mmpay-picker-30820 branch June 2, 2026 09:22
@github-actions github-actions Bot locked and limited conversation to collaborators Jun 2, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@OGPoyraz OGPoyraz OGPoyraz approved these changes

Assignees

No one assigned

Labels

risk:low AI analysis: low risk size-M team-confirmations Push issues to confirmations team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug]: issues with new MM Pay picker

2 participants

@vinistevam @OGPoyraz