Description

Refactors the Perps Market Details screen to use the shared HeaderStandardAnimated component instead of the custom PerpsMarketHeader and navbar options, aligning with patterns used elsewhere (e.g. Perps home, Token Details).

1. Reason for the change: Market Details used getPerpsMarketDetailsNavbar (navigation.setOptions) and a custom PerpsMarketHeader component; this was inconsistent with other screens that use component-library header primitives and scroll-linked header animation.
2. Improvement: Replaced PerpsMarketHeader with HeaderStandardAnimated. Title is ${getPerpsDisplaySymbol(market.symbol)}-USD; subtitle is LivePriceHeader (symbol, current price, throttle). Back button, fullscreen (expand) and watchlist (star) actions are passed as endButtonIconProps. Removed the navbar useEffect. Scroll content is now an Animated.ScrollView with scroll passed to the header; a TitleSubpage block at the top (token logo, title, leverage badge, and LivePriceHeader as bottom accessory) drives the title section height via onLayout and useHeaderStandardAnimated. LivePriceHeader text variants were updated to BodySM and price color to Alternative for the compact header context.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/issues?jql=issueKey%20in%20(DSYS-555%2CDSYS-556%2CDSYS-557%2CDSYS-558)&selectedIssue=DSYS-558

Manual testing steps

Feature: Perps Market Details header

  Scenario: Market Details shows animated header and title section
    Given the app is open and user has access to Perps

    When user opens a market (e.g. ETH-USD) from the Perps list
    Then the screen shows HeaderStandardAnimated with market title (e.g. "ETH-USD") and live price as subtitle
    And the header shows back button, fullscreen (expand) and watchlist (star) actions
    And the scroll area shows TitleSubpage with token logo, title, leverage badge, and live price
    When user scrolls the page
    Then the header animates (collapses/expands) in sync with scroll
    And chart, stats, and rest of content remain usable

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.