fix(ramps): fixes 0 ETH ramps issue when order data is not yet available cp-7.71.0

[georgeweiler]

Description

"0 ETH" was displayed on some order pages when the order info was not yet available. This bug fixes by adding "..." placeholder until the info arrives.

TRAM-3360

Changelog

CHANGELOG entry: Fixes small UI issue with ramps orders

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

After

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.

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

Medium Risk
Adjusts order-details loading/terminal-state logic and amount formatting, which could change what users see for certain pending/failed orders; impact is limited to UI display and snapshots.

Overview
Prevents ramps order UIs from showing 0 ETH/0 amounts when data hasn’t arrived by treating 0/missing cryptoAmount (and related fiat fields) as unknown and rendering an ... placeholder in both the orders list (displayOrder) and order details (OrderContent).

Order details now distinguishes loading vs terminal statuses (e.g., Failed, Cancelled) so terminal orders without amounts render placeholders instead of skeleton loaders, and fiat fees/total formatting is switched to formatWithThreshold currency formatting (snapshot updates included).

^{Written by Cursor Bugbot for commit a9bc072. This will update automatically on new commits. Configure here.}

[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.

[georgeweiler]

@cursoragent please fix the orderslist test app/components/UI/Ramp/Aggregator/Views/OrdersList/OrdersList.test.tsx

[cursor]

Perfect! I've successfully fixed the OrdersList test. Here's what I did:

Summary

✅ Fixed the failing OrdersList test snapshots

The test was failing because the PR changes now display "—" (em dash placeholder) instead of 0 when crypto amounts are missing or zero. This is the correct behavior for the bug fix.

Changes Made:

• Updated 3 test snapshots in OrdersList.test.tsx.snap to reflect the new placeholder behavior
• All 10 tests now pass successfully
• Committed and pushed the changes to ramps-empty-order-bugfix branch

Test Results:

All tests passed:

• ✓ renders correctly
• ✓ renders buy only correctly when pressing buy filter
• ✓ renders sell only correctly when pressing sell filter
• ✓ renders empty sell message
• ✓ renders empty buy message
• ✓ resets filter to all after other filter was set
• ✓ navigates when pressing item
• ✓ navigates to ramps order details when pressing RAMPS_V2 order item
• ✓ navigates to deposit order details when pressing deposit order item
• ✓ navigates to deposit flow when pressing created deposit order item

The snapshot updates are now live on the PR and align with the bug fix behavior.

  

[amitabh94]

Can we use ... instead of - ?

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeRamps
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 92%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are entirely contained within the Ramp/fiat on-ramp/off-ramp UI components:

1. displayOrder.ts: Changed cryptoAmount fallback from 0 to '...' (AMOUNT_PLACEHOLDER) when the value is null, undefined, or zero. This affects how order amounts are displayed in order lists.

2. OrderContent.tsx:

   • Improved isLoading detection to consider both fiat/crypto amounts AND terminal order statuses (Completed, Failed, Cancelled, IdExpired) - prevents infinite loading state for terminal orders with no amounts
   • Replaced renderFiat with formatWithThreshold for fee and fiat amount display (better currency formatting)
   • Shows placeholder '...' instead of 0 for missing amounts

3. Test files (3 snapshot/unit test files): Updated to reflect new behavior.

These changes are purely within the Ramp UI layer - no controllers, no Engine, no navigation, no shared components affected. The SmokeRamps tag covers the on-ramp/off-ramp flows including order details display, which is exactly what these changes affect. No other tags are needed as there are no cross-cutting impacts.

Performance Test Selection:
These changes are purely UI/display logic within the Ramp order details component - changing how placeholder amounts are shown and improving loading state detection. There are no performance-sensitive operations, no list rendering changes, no state management changes, and no data fetching changes that would impact app performance metrics.

View GitHub Actions results

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
18 value mismatches detected (expected — fixture represents an existing user).
View details

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud