chore: memoize Swaps QuoteRow rendering

[infiniteflower]

Description

Reduces unnecessary Bridge quote-row work during quote updates. Currency and destination-token selectors now run once in QuoteList instead of once per row, while a memoized presentational row receives primitive display props and skips rendering when its quote values are unchanged.

Automated validation:

• yarn jest app/components/UI/Bridge/components/QuoteSelectorView/ — 70 tests passed.
• yarn lint:tsc — passed.
• Targeted ESLint — no errors; one pre-existing deprecated number-utility warning remains in QuoteRow.tsx.

Changelog

CHANGELOG entry: null

Related issues

Fixes: #31367

Manual testing steps

Feature: Bridge quote row render isolation

  Scenario: refresh quotes while the quote selector is open
    Given the Bridge quote selector displays at least three quotes
    And React Native DevTools Profiler is recording component renders

    When a quote refresh updates one quote
    Then the updated quote row re-renders
    And unchanged quote rows do not re-render
    And the displayed providers, costs, and receive amounts remain correct

Screenshots/Recordings

Before

N/A — internal performance change with no visual impact.

After

N/A — internal performance change with no visual impact.

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 applied the right labels on the PR (see labeling guidelines. Not required for external contributors."). 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.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.40%. Comparing base (96abde9) to head (fbcc709).
⚠️ Report is 13 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff            @@
##             main   #33392    +/-   ##
========================================
  Coverage   84.40%   84.40%            
========================================
  Files        6133     6134     +1     
  Lines      163917   163814   -103     
  Branches    40007    39988    -19     
========================================
- Hits       138354   138274    -80     
+ Misses      16054    16050     -4     
+ Partials     9509     9490    -19     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeSwap, SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR modifies Bridge QuoteSelectorView components (QuoteList.tsx and QuoteRow.tsx) with a meaningful refactoring:

1. QuoteRow.tsx: Splits the component into QuoteRowView (pure, memoized presentational component) and QuoteRow (container with Redux selectors). The QuoteRowView now accepts pre-computed formattedReceiveAmountFiat, providerName, and destTokenSymbol as props instead of computing them internally.

2. QuoteList.tsx: Now handles the currency conversion logic at the list level using Redux selectors (selectDestToken, selectTokenMarketData, selectCurrencyRates, selectCurrentCurrency, selectMultichainAssetsRates) and passes pre-computed values down to QuoteRowView.

This is a performance optimization (React.memo on QuoteRowView, moving selector calls up to the list level) and a structural refactoring of the bridge quote display UI. The changes affect:

• How bridge quotes are displayed (receive amount, fiat value, provider name)
• The data flow for currency conversion in the quote selector
• Multi-chain asset rates integration (keyring-snaps conditional)

SmokeSwap is selected because the bridge-action-smoke.spec.ts directly tests the bridge flow (ETH to Base bridge) which exercises the QuoteSelectorView. The quote list and row components are part of the bridge quote selection UI that users interact with during a bridge transaction.

SmokeConfirmations is selected per the SmokeSwap tag description: "When selecting SmokeSwap, also select SmokeConfirmations (transaction confirmations are part of the flow)."

No other tags are needed as the changes are isolated to the Bridge QuoteSelectorView UI components with no impact on other wallet flows.

Performance Test Selection:
The changes are UI component refactoring in the Bridge QuoteSelectorView. While the refactoring adds React.memo to QuoteRowView (a performance optimization), this is a UI-level change that doesn't affect the core performance scenarios measured by the available performance test tags (app launch, login, onboarding, account list, asset loading, swaps, predict, perps). The @PerformanceSwaps tag covers swap flow performance metrics, but the changes here are a structural refactoring of the quote display UI rather than changes to quote fetching, execution timing, or transaction completion flows that would be measured by performance tests.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud