chore(predict): cash out screen changes (MetaMask#22272)

<!--
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**

- cash out changes

<!--
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:

## **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**

<!-- 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]
> Updates the Predict cash out preview to show per‑share price with
fallback, localizes copy, refactors layout/styles, adds locale strings,
and adjusts tests accordingly.
> 
> - **Predict Sell Preview (UI/Logic)**:
> - Localizes header/button text and replaces hardcoded labels with
`strings('predict.cash_out')`.
> - Displays per‑share price using `preview.sharePrice ??
position.price` and adds line under current value via
`predict.at_price_per_share`.
> - Shows initial position info (amount, outcome, avg entry price) via
`predict.cashout_info`.
> - Refactors layout to `Box` components, tweaks icon container, and
simplifies details rendering.
> - **State/Computation**:
> - Adds `currentPrice` derived from `preview?.sharePrice ??
position?.price`; leverages `position.avgPrice` for display.
> - **Styles**:
> -
`app/components/UI/Predict/components/PredictPosition/PredictPosition.styles.ts`:
make `positionDetails` `flex: 1`; remove extra width/flex on
`positionPnl`.
> -
`app/components/UI/Predict/views/PredictSellPreview/PredictSellPreview.styles.ts`:
remove unused containers/fields; keep core layout and button styles.
> - **Tests** (`PredictSellPreview.test.tsx`):
> - Update assertions to new copy (“Cash out”, `$50.00 on Yes at 50¢`),
and add test for undefined `preview.sharePrice` using fallback.
> - **Locales** (`locales/languages/en.json`):
> - Add `predict.at_price_per_share` and `predict.cashout_info`; ensure
“Cash out” casing alignment.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
fae7da8. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Luis Taniça <matallui@gmail.com>

Author: caieu

app/components/UI/Predict/components/PredictPosition/PredictPosition.styles.ts

@@ -20,8 +20,7 @@ const styleSheet = () =>
       flexDirection: 'column',
       justifyContent: 'flex-start',
       alignItems: 'flex-start',
-      width: '100%',
-      flex: 5,
+      flex: 1,
     },
     positionImageContainer: {
       paddingTop: 4,
@@ -36,8 +35,6 @@ const styleSheet = () =>
       flexDirection: 'column',
       justifyContent: 'flex-end',
       alignItems: 'flex-end',
-      width: '100%',
-      flex: 2,
     },
     marketEntry: {
       flexDirection: 'column',

app/components/UI/Predict/views/PredictSellPreview/PredictSellPreview.styles.ts

@@ -41,18 +41,6 @@ const styleSheet = (params: { theme: Theme }) => {
       paddingBottom: 0,
       gap: 16,
     },
-    positionContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 16,
-      width: '100%',
-    },
-    positionDetails: {
-      flexDirection: 'column',
-      gap: 4,
-      flex: 1,
-      minWidth: 0,
-    },
     detailsLine: {
       flexDirection: 'row',
       gap: 16,
@@ -62,11 +50,6 @@ const styleSheet = (params: { theme: Theme }) => {
       flex: 1,
       minWidth: 0,
     },
-    detailsResolves: {
-      flex: 1,
-      minWidth: 0,
-      color: theme.colors.text.alternative,
-    },
     detailsRight: {
       flexShrink: 0,
       color: theme.colors.text.alternative,

app/components/UI/Predict/views/PredictSellPreview/PredictSellPreview.test.tsx

@@ -440,16 +440,16 @@ describe('PredictSellPreview', () => {
 
   describe('rendering', () => {
     it('renders cash out screen with position details', () => {
-      const { getByText, queryByText } = renderWithProvider(
+      const { getAllByText, getByText, queryByText } = renderWithProvider(
         <PredictSellPreview />,
         {
           state: initialState,
         },
       );
 
-      expect(getByText('Cash Out')).toBeOnTheScreen();
+      expect(getAllByText('Cash out').length).toBeGreaterThan(0);
       expect(getByText('Will Bitcoin reach $150,000?')).toBeOnTheScreen();
-      expect(getByText('$50.00 on Yes')).toBeOnTheScreen();
+      expect(getByText('$50.00 on Yes at 50¢')).toBeOnTheScreen();
 
       expect(
         queryByText('Funds will be added to your available balance'),
@@ -512,6 +512,29 @@ describe('PredictSellPreview', () => {
       expect(mockFormatPercentage).toHaveBeenCalledWith(-20);
     });
 
+    it('uses position price when preview sharePrice is undefined', () => {
+      mockPreview = {
+        marketId: 'market-1',
+        outcomeId: 'outcome-456',
+        outcomeTokenId: 'outcome-token-789',
+        timestamp: Date.now(),
+        side: 'SELL',
+        sharePrice: undefined as unknown as number,
+        maxAmountSpent: 100,
+        minAmountReceived: 60,
+        slippage: 0.005,
+        tickSize: 0.01,
+        minOrderSize: 1,
+        negRisk: false,
+      };
+
+      const { getByText } = renderWithProvider(<PredictSellPreview />, {
+        state: initialState,
+      });
+
+      expect(getByText('At price: 50¢ per share')).toBeOnTheScreen();
+    });
+
     it('renders position icon with correct source', () => {
       renderWithProvider(<PredictSellPreview />, {
         state: initialState,

app/components/UI/Predict/views/PredictSellPreview/PredictSellPreview.tsx

@@ -126,7 +126,8 @@ const PredictSellPreview = () => {
   }, [dispatch, result]);
 
   const currentValue = preview?.minAmountReceived ?? 0;
-  const { cashPnl, percentPnl } = position;
+  const currentPrice = preview?.sharePrice ?? position?.price;
+  const { cashPnl, percentPnl, avgPrice } = position;
 
   const signal = useMemo(() => (cashPnl >= 0 ? '+' : '-'), [cashPnl]);
 
@@ -198,7 +199,9 @@ const PredictSellPreview = () => {
   return (
     <SafeAreaView style={tw.style('flex-1 bg-background-default')}>
       <BottomSheetHeader onClose={() => goBack()}>
-        <Text variant={TextVariant.HeadingMD}>Cash Out</Text>
+        <Text variant={TextVariant.HeadingMD}>
+          {strings('predict.cash_out')}
+        </Text>
       </BottomSheetHeader>
       <View
         testID={PredictCashOutSelectorsIDs.CONTAINER}
@@ -208,6 +211,14 @@ const PredictSellPreview = () => {
           <Text style={styles.currentValue} variant={TextVariant.BodyMDMedium}>
             {formatPrice(currentValue, { maximumDecimals: 2 })}
           </Text>
+          <Text
+            variant={TextVariant.BodyMDMedium}
+            color={TextColor.Alternative}
+          >
+            {strings('predict.at_price_per_share', {
+              price: (currentPrice * 100).toFixed(0),
+            })}
+          </Text>
           <Text
             style={styles.percentPnl}
             color={percentPnl > 0 ? TextColor.Success : TextColor.Error}
@@ -228,30 +239,26 @@ const PredictSellPreview = () => {
               {strings('predict.order.order_failed_generic')}
             </Text>
           )}
-          <View style={styles.positionContainer}>
-            <View>
+          <Box twClassName="flex-row items-center gap-4">
+            <Box twClassName="w-10 h-10 self-start mt-1">
               <Image source={{ uri: icon }} style={styles.positionIcon} />
-            </View>
-            <View style={styles.positionDetails}>
-              <Text
-                numberOfLines={1}
-                ellipsizeMode="tail"
-                style={styles.detailsLeft}
-                variant={TextVariant.HeadingSM}
-              >
-                {outcomeTitle}
-              </Text>
+            </Box>
+            <Box twClassName="flex-col gap-1 flex-1">
+              <Text variant={TextVariant.HeadingSM}>{outcomeTitle}</Text>
               <Text
                 numberOfLines={1}
                 ellipsizeMode="tail"
-                style={styles.detailsResolves}
                 variant={TextVariant.BodySMMedium}
+                color={TextColor.Alternative}
               >
-                {formatPrice(initialValue, { maximumDecimals: 2 })} on{' '}
-                {outcomeSideText}
+                {strings('predict.cashout_info', {
+                  amount: formatPrice(initialValue, { maximumDecimals: 2 }),
+                  outcome: outcomeSideText,
+                  initialPrice: (avgPrice * 100).toFixed(0),
+                })}
               </Text>
-            </View>
-          </View>
+            </Box>
+          </Box>
           <View style={styles.cashOutButtonContainer}>
             {renderCashOutButton()}
             <Text variant={TextVariant.BodyXS} style={styles.cashOutButtonText}>

locales/languages/en.json

@@ -1771,6 +1771,8 @@
     "sell_position": "Sell Position",
     "cash_out": "Cash out",
     "cash_out_info": "Funds will be added to your available balance",
+    "at_price_per_share": "At price: {{price}}¢ per share",
+    "cashout_info": "{{amount}} on {{outcome}} at {{initialPrice}}¢",
     "buy_yes": "Yes",
     "buy_no": "No",
     "outcomes": "outcomes",