Description

Fix Perps UI layout and rendering issues
This PR addresses a collection of visual bugs found across the Perps order flow on iOS and Android.

What changed
Order header back button overlap The header was applying top: topInset as a relative offset, which visually shifted it down without affecting the layout box. This caused the back button to render on top of the amount input, making taps on the back button focus the input instead. Changed to paddingTop: topInset so the header grows correctly in the flex layout.

Android safe area for the order button The fixed "Place Order" button was jumping on re-render on Android. The root cause was spreading a StyleSheet object into a plain object inside useMemo, which made the base style reference unstable and caused Fabric to flash the un-overridden bottom: 0 before the dynamic value resolved. Separated the stable StyleSheet reference from the dynamic safe area padding using a style array.

TPSL back button vertical alignment The absolutely-positioned back button was missing top/bottom anchors, so it defaulted to top: 0 and ignored the parent's alignItems. Added top: 0, bottom: 0, and justifyContent: center so the icon sits centered with the header title.

Leverage bottom sheet button off-screen on iOS The bottom sheet's overflow: hidden was clipping the footer button when content exceeded the available height. Wrapped the scrollable content in a ScrollView with flexShrink: 1 and moved the footer outside it so the button is always visible and never clipped.

Leverage price icon color The Icon component's color prop was not being applied because a raw hex string was passed via the style prop instead of the color prop. Moved the color to the correct prop.

i18n and test coverage

• Added the price_unavailable string to the leverage bottom sheet's i18n mock in tests (previously fell through to returning the key itself).
• Fixed the PerpsFlipPositionConfirmSheet test's Icon mock to target @metamask/design-system-react-native instead of the local component library, which is what the component actually imports from.

Also replaced several instances of deprecated component library components. Namely Text and Icon

Changelog

CHANGELOG entry: SafeArea view style polish

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before:

After:

Also after (back arrow aligned):

Also after (order button not cut off on Samsung Galaxy):

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.