chore(runway): cherry-pick feat(predict): cp-7.62.0 add PredictPicks components for position display (#24594)

- feat(predict): cp-7.62.0 add PredictPicks components for position
display (#24579)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Adds new `PredictPicks` components to display user positions in
prediction markets.

**What changed:**
- `PredictPicks` - Main component showing user picks with position
details (size, outcome, P&L) and "Cash Out" button on market details
view
- `PredictPicksForCard` - Compact version for displaying picks within
market cards with P&L and amount display

**Why:**
Users need visibility into their active positions on market detail views
to track their picks and take action (cash out).

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

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

## **Manual testing steps**

```gherkin
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**
<img width="387" height="114" alt="Screenshot 2026-01-15 at 17 54 00"

src="https://github.com/user-attachments/assets/1b4998ce-e7ec-4e13-84f2-e4a503c50afe"
/>
<img width="383" height="38" alt="Screenshot 2026-01-15 at 17 55 41"

src="https://github.com/user-attachments/assets/25352d0e-2aef-41af-83a2-d2a7cf5f60fb"
/>

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding

Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling

guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Introduces UI to surface users’ active positions with real-time P&L
and a guarded cash-out action.
> 
> - Adds `PredictPicks` (market details) and `PredictPicksForCard`
(compact) to display `initialValue/outcome`, live `cashPnl`, and amount;
cash-out triggers guarded navigation to
`Routes.PREDICT.MODALS.SELL_PREVIEW`
> - Implements `useLivePositions` to compute live `currentValue`,
`cashPnl`, and `percentPnl` from `bestBid` via `useLiveMarketPrices`;
exports added in hooks index
> - Updates i18n with `your_picks` and pick strings; includes
comprehensive tests for components and the new hook
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
5853f5e. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[d0ae183](d0ae183)

Co-authored-by: Caainã Jeronimo <caainaje@gmail.com>

Author: runway-github[bot]

app/components/UI/Predict/components/PredictPicks/PredictPicks.test.tsx

@@ -0,0 +1,118 @@
+import {
+  Box,
+  Button,
+  ButtonVariant,
+  Text,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react-native';
+import React from 'react';
+import { usePredictPositions } from '../../hooks/usePredictPositions';
+import { useLivePositions } from '../../hooks/useLivePositions';
+import { formatPrice } from '../../utils/format';
+import { PredictEventValues } from '../../constants/eventNames';
+import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { usePredictActionGuard } from '../../hooks/usePredictActionGuard';
+import { PredictMarket, PredictPosition } from '../../types';
+import Routes from '../../../../../constants/navigation/Routes';
+import { PredictNavigationParamList } from '../../types/navigation';
+import { strings } from '../../../../../../locales/i18n';
+
+interface PredictPicksProps {
+  market: PredictMarket;
+  /**
+   * TestID for the component
+   */
+  testID?: string;
+}
+
+const PredictPicks: React.FC<PredictPicksProps> = ({
+  market,
+  testID = 'predict-picks',
+}) => {
+  const { positions } = usePredictPositions({
+    marketId: market.id,
+    autoRefreshTimeout: 10000,
+  });
+  const { livePositions } = useLivePositions(positions);
+  const navigation =
+    useNavigation<NavigationProp<PredictNavigationParamList>>();
+  const { navigate } = navigation;
+  const { executeGuardedAction } = usePredictActionGuard({
+    providerId: market.providerId,
+    navigation,
+  });
+
+  const onCashOut = (position: PredictPosition) => {
+    executeGuardedAction(
+      () => {
+        const _outcome = market?.outcomes.find(
+          (o) => o.id === position.outcomeId,
+        );
+        navigate(Routes.PREDICT.MODALS.SELL_PREVIEW, {
+          market,
+          position,
+          outcome: _outcome,
+          entryPoint: PredictEventValues.ENTRY_POINT.PREDICT_MARKET_DETAILS,
+        });
+      },
+      { attemptedAction: PredictEventValues.ATTEMPTED_ACTION.CASHOUT },
+    );
+  };
+
+  const hasPositions = livePositions.length > 0;
+
+  if (!hasPositions) {
+    return null;
+  }
+
+  return (
+    <Box testID={testID} twClassName="flex-col">
+      <Text variant={TextVariant.HeadingMd} twClassName="font-medium py-2">
+        {strings('predict.market_details.your_picks')}
+      </Text>
+      {livePositions.map((position) => (
+        <Box
+          testID={testID}
+          twClassName="flex-row justify-between items-center py-3"
+          key={position.id}
+        >
+          <Box>
+            <Text variant={TextVariant.BodyMd} twClassName="font-medium">
+              {strings('predict.position_pick_info', {
+                initialValue: formatPrice(position.initialValue, {
+                  maximumDecimals: 2,
+                }),
+                outcome: position.outcome,
+              })}
+            </Text>
+            <Text
+              variant={TextVariant.BodyMd}
+              color={
+                position.cashPnl < 0
+                  ? TextColor.ErrorDefault
+                  : TextColor.SuccessDefault
+              }
+              twClassName="font-medium"
+              testID={`predict-picks-pnl-${position.id}`}
+            >
+              {formatPrice(position.cashPnl, { maximumDecimals: 2 })}
+            </Text>
+          </Box>
+          <Button
+            variant={ButtonVariant.Secondary}
+            twClassName="py-3 px-4 bg-muted/5"
+            onPress={() => onCashOut(position)}
+            testID={`predict-picks-cash-out-button-${position.id}`}
+          >
+            <Text variant={TextVariant.BodyMd} twClassName="font-medium">
+              {strings('predict.cash_out')}
+            </Text>
+          </Button>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default PredictPicks;