Description

When FAK (Fill-And-Kill) orders are enabled, the PredictFeeBreakdownSheet now displays a footnote below the Total row explaining that prices assume a fully filled order and actual amounts may vary if the order is only partially filled.

Additionally, the component was refactored to use @metamask/design-system-react-native primitives (Text, TextColor, TextVariant, FontWeight) instead of the local component-library Text, aligning with the project's UI development guidelines.

Changes:

• Created selectPredictFakOrdersEnabledFlag Redux selector for the predictFakOrders version-gated remote feature flag
• Added fakOrdersEnabled prop to PredictFeeBreakdownSheet — conditionally renders a partial fill note
• Wired PredictBuyPreview to read the selector and pass it to the sheet
• Migrated Text, TextColor, TextVariant imports from component-library to @metamask/design-system-react-native
• Replaced TextVariant.BodyMDBold with TextVariant.BodyMd + fontWeight={FontWeight.Bold}

Changelog

CHANGELOG entry: Added a note in prediction price details explaining that prices assume a fully filled order when FAK orders are enabled

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/PRED-722

Manual testing steps

Feature: FAK partial fill note in price details

  Scenario: user sees partial fill note when FAK orders flag is enabled
    Given the predictFakOrders remote feature flag is enabled
    And the user is on the buy prediction preview screen

    When user taps on the price details row to open the fee breakdown sheet
    Then a note is displayed below the Total row reading "Prices shown assume your order is fully filled. Actual amounts may vary if the order is only partially filled."

  Scenario: user does not see partial fill note when FAK flag is disabled
    Given the predictFakOrders remote feature flag is disabled
    And the user is on the buy prediction preview screen

    When user taps on the price details row to open the fee breakdown sheet
    Then no partial fill note is displayed below the Total row

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.