Description

This PR addresses the first action item of MDP-274 - "Deposit: page header revisions".

Problem

The Deposit page header had incorrect and misaligned button icons:

• Left side: Settings icon (⚙️) when showConfiguration was enabled
• Right side: Close button (✕) to dismiss the flow

This pattern was inconsistent with standard navigation patterns and the updated design requirements.

Solution

Updated getDepositNavbarOptions in app/components/UI/Navbar/index.js to:

• Left side: Back arrow (←) button that navigates back and optionally calls onClose callback
• Right side: Settings/configuration icon (⚙️) when showConfiguration is enabled

Changes Made

1. Core navbar function (Navbar/index.js):

   • Refactored getDepositNavbarOptions to show back button on left when showBack || showClose
   • Moved configuration (settings) icon to right side via closeButtonProps
   • Added new testID deposit-back-navbar-button for the back button
   • Removed old deposit-close-navbar-button testID

2. Deposit views:

   • BuildQuote.tsx: Simplified options (removed explicit showBack: false, showClose: true)
   • DepositOrderDetails.tsx: Removed showClose: false

3. Aggregator views (also use getDepositNavbarOptions):

   • OrderDetails.tsx: Removed showClose: false
   • SendTransaction.tsx: Removed showClose: false

4. Test updates:

   • Updated BuildQuote.test.tsx and Quotes.test.tsx to use new testID
   • Renamed tests from "cancel button press" to "back button press"
   • Added pop: mockPop to navigation mocks

5. Snapshot updates:

   • 11 snapshot files updated to reflect new header structure
   • Close button removed from right side
   • Back arrow with new testID on left side

Changelog

CHANGELOG entry: fix: Updated Deposit page header to use back button instead of close button

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MDP-274 (first action item)

Manual testing steps

Feature: Deposit Page Header Navigation

  Scenario: User navigates back from Deposit BuildQuote screen
    Given user is on the Deposit BuildQuote screen
    And user sees a back arrow button on the left side of the header
    And user sees a settings icon on the right side of the header

    When user taps the back arrow button
    Then user is navigated back to the previous screen

  Scenario: User opens configuration from Deposit BuildQuote screen
    Given user is on the Deposit BuildQuote screen
    And user sees a settings icon on the right side of the header

    When user taps the settings icon
    Then the configuration modal is displayed

  Scenario: User navigates back from Deposit sub-screens
    Given user is on any Deposit sub-screen (EnterEmail, BasicInfo, etc.)
    And user sees a back arrow button on the left side of the header

    When user taps the back arrow button
    Then user is navigated back to the previous screen in the flow

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.