Description

This PR introduces the Amount Input screen as part of the Ramps Unified Buy V2 feature.

What changed:

• Added AMOUNT_INPUT route constant to Routes.ts
• Created new AmountInput component with:
  • Custom navbar showing token avatar, network badge, and "Buy [TICKER]" / "on [Network]" labels with skeleton loading state
  • Numeric keypad for amount entry
  • QuickAmounts component with preset amount buttons ($50, $100, $200, $400) - shown when no amount entered
  • PaymentMethodPill component showing selected payment method
  • "Powered by [Provider]" text always visible above quick amounts/continue button
  • "Continue" button that appears when an amount is entered (replaces quick amounts)
  • Currency formatting using formatCurrency utility
• Created getRampsAmountInputNavbarOptions in Navbar for custom header
• Registered the new screen in Ramp routes
• Added V2 routing logic in useRampNavigation hook - when V2 is enabled and assetId is provided, navigation goes to AmountInput instead of the legacy flow
• Updated TokenSelection to use centralized goToBuy navigation with conditional modal dismissal:
  • V1 flow: closes the TokenSelection modal before navigating to Deposit/Aggregator (preserves original behavior)
  • V2 flow: navigates within the same stack without closing modal
• Added translation strings for navbar labels, payment method pill, continue button, and powered by text

Why:

When rampsUnifiedBuyV2 feature flag is enabled, users selecting a token in the token list will now navigate to this new Amount Input screen. This sets up the core UI for the V2 buy flow.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TRAM-3037

Manual testing steps

Feature: Ramps Unified Buy V2 Amount Input Screen

  Scenario: user navigates to Amount Input when V2 is enabled
    Given the rampsUnifiedBuyV2 feature flag is enabled
    And the user is on the Token Selection screen
    When user selects a token
    Then user navigates to the Amount Input screen
    And the navbar shows the token avatar with network badge
    And the navbar shows "Buy [TICKER]" and "on [Network]"
    And "Powered by Transak" text is displayed
    And quick amount buttons ($50, $100, $200, $400) are displayed
    And the payment method pill shows "Debit card"
    And the keypad is displayed

  Scenario: user enters amount using keypad
    Given user is on the Amount Input screen
    When user presses keypad digits
    Then the amount display updates accordingly
    And quick amounts are replaced by Continue button
    And "Powered by Transak" text remains visible

  Scenario: user selects quick amount
    Given user is on the Amount Input screen
    When user presses the $100 quick amount button
    Then the amount display shows $100
    And quick amounts are replaced by Continue button

  Scenario: user follows legacy flow when V2 is disabled
    Given the rampsUnifiedBuyV2 feature flag is disabled
    And the user is on the Token Selection screen
    When user selects a token
    Then the TokenSelection modal closes
    And user navigates to the Deposit or Aggregator flow (legacy behavior)

Screenshots/Recordings

Before

Token selection → modal closes → Deposit/Aggregator

After

Token selection → Amount Input screen (when V2 enabled) with:

• Custom navbar with token/network info
• "Powered by [Provider]" text
• Quick amount preset buttons (no amount) OR Continue button (with amount)
• Payment method pill
• Numeric keypad

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.