chore: extract MusdTag component logic from RewardsTag logic

[nickewansmith]

Description

This PR extracts the OutputAmountTag component for mUSD conversion flows, separating it from rewards-related functionality that has a blocker.

Changes included:

1. OutputAmountTag component - A standalone generic tag component that displays output amounts with symbols in conversion flows (e.g., "100.57 mUSD")

2. useCustomAmount hook - Simplified hook that only handles output amount logic for mUSD conversions:

   • shouldShowOutputAmountTag - Whether to display the tag
   • outputAmount - Formatted amount with 2 decimal places
   • outputSymbol - Token symbol (mUSD)

3. Removed rewards-related code that had a blocker:

   • Removed RewardsTag component (empty directory cleaned up)
   • Removed RewardsTooltipBottomSheet component (empty directory cleaned up)
   • Removed useRewardsAccountOptedIn hook
   • Removed useCustomAmountRewards hook
   • Removed rewards-related properties from tests (shouldShowRewardsTag, estimatedPoints, onRewardsTagPress, renderRewardsTooltip)

4. Test cleanup - Updated test files to remove references to non-existent rewards functionality:

   • useCustomAmount.test.ts - Removed rewards opt-in tests, points calculation tests, and tooltip tests
   • musd-conversion-info.test.tsx - Fixed import names and mock values

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MUSD-101

Manual testing steps

Feature: mUSD Conversion Output Amount Display

  Scenario: user views output amount during mUSD conversion
    Given user is on the mUSD conversion confirmation screen
    And mUSD feature flag is enabled

    When user enters an amount to convert
    Then the OutputAmountTag displays the formatted output amount with "mUSD" symbol## **Screenshots/Recordings**

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

Introduces OutputAmountTag and useCustomAmount, and integrates them into mUSD conversion via a new overrideContent in CustomAmountInfo with accompanying tests.

• UI/Components:
  • OutputAmountTag (app/components/UI/Earn/components/OutputAmountTag): New pill tag to display formatted amount with optional symbol and background.
  • CustomAmountInfo: Adds overrideContent(amountHuman) prop to replace default content (hides PayTokenAmount, PayWithRow, and children).
  • MusdConversionInfo: Renders MusdOverrideContent using useCustomAmount to show OutputAmountTag (mUSD) and conditionally PayWithRow; ensures mUSD token is added per outputChainId.
• Hooks:
  • useCustomAmount (hooks/earn): Determines when to show output tag for musdConversion, formats amount to 2 decimals, and sets mUSD symbol based on feature flag and transaction type.
• Tests:
  • Adds tests for OutputAmountTag and useCustomAmount.
  • Updates custom-amount-info and musd-conversion-info tests to validate overrideContent, labels, and token availability behavior.

^{Written by Cursor Bugbot for commit e9b4de8. 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.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeStake, SmokeConfirmationsRedesigned
• Risk Level: medium
• AI Confidence: 85%

click to see 🤖 AI reasoning details

The changes introduce new UI components and hooks related to the mUSD conversion flow within the Earn/Staking feature. Here's the breakdown:

1. New OutputAmountTag component - A reusable UI component in the Earn module for displaying output amounts in conversion flows.

2. New useCustomAmount hook - Handles custom amount logic specifically for mUSD conversion transactions, determining when to show output amount tags.

3. Modified CustomAmountInfo component - Added overrideContent prop for customizable rendering. This component is used by multiple confirmation info components (mUSD, perps, predictions).

4. Modified MusdConversionInfo - Now uses the new components to provide custom rendering for mUSD conversion confirmations.

The changes primarily affect:

• Staking/Earn flows - mUSD conversion is part of the Earn feature
• Confirmation UI - Modifications to confirmation components in the redesigned flow

While CustomAmountInfo is shared across perps and predictions, the changes add an optional overrideContent prop that doesn't modify existing behavior when not provided. The existing code paths remain unchanged. All changes include comprehensive unit tests.

Selected tags:

• SmokeStake - Directly tests Earn/Staking features including mUSD conversion
• SmokeConfirmationsRedesigned - Tests the confirmation UI components that were modified

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