feat(predict): Predict details outcome / status improvements (#21486)

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

- Increases parity towards to the designs wrt to handling of the
outcomes when a market is closed and subsequently resolved (signaled by
the `resolutionStatus` field on the outcome)
- As discussed, a little concerned about how convoluted the logic on
`<PredictMarketDetails>` is getting. Feeling is we go with it for now
and plan for a refactor post beta.
- Note it currently doesn't address the handled of a closed / resolved
multiple market (primarily because I don't currently have an easy way to
create one without mocking which will be a bit fiddly). Will add in a
follow-up.

<!--
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:
[PRED-189](https://consensyssoftware.atlassian.net/browse/PRED-189)

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

<img width="420" alt="image"
src="https://github.com/user-attachments/assets/3d0e6a40-c67d-475d-887c-ffebbc7b02b5"
/>

## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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.


[PRED-189]:
https://consensyssoftware.atlassian.net/browse/PRED-189?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds UMA resolution status from Polymarket and updates market
details/outcome UI to show winners/losers with resolved/ended messaging,
plus broad i18n refactors and tests.
> 
> - **Predict Market Details (UI/Logic)**:
> - Auto-switch timeframe to `MAX` when market is closed; compute
`winningOutcomeToken`/`losingOutcomeToken` via `useMemo`.
> - Closed markets: show winner/loser outcomes, render resolved vs ended
messaging, and "waiting for final resolution" when unresolved.
> - Only render action buttons for single-outcome markets; outcomes tab
always for closed markets.
> - Replace hardcoded strings with i18n keys (`predict.loading`,
`predict.market_details.*`).
> - **Outcome Card (`PredictMarketOutcome`)**:
>   - Title fallback: `groupItemTitle || title`.
> - Closed-market badges/icons: show Winner only when `price === 1`;
show lose icon otherwise; show % when open.
> - **Data/Types**:
> - Add `umaResolutionStatus` to `PolymarketApiMarket`; map to
`resolutionStatus` on parsed outcomes; add optional `resolutionStatus`
to `PredictOutcome` type.
> - **Localization**:
> - New strings under `predict.market_details` (volume, end date,
resolver, powered by, yes/no, on, market_ended_on/market_resulted_to,
waiting_for_final_resolution) and `predict.loading`.
> - **Tests**:
> - Update/expand unit tests for parsing, market details rendering,
closed-market flows, i18n text, and button behaviors.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
17a7f9a. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: kevinbluer

app/components/UI/Predict/components/PredictMarketOutcome/PredictMarketOutcome.tsx

@@ -73,7 +73,7 @@ const PredictMarketOutcome: React.FC<PredictMarketOutcomeProps> = ({
     if (isClosed && outcomeToken) {
       return outcomeToken.title;
     }
-    return outcome.groupItemTitle;
+    return outcome.groupItemTitle || outcome.title || '';
   };
 
   const getImageUrl = (): string => outcome.image;
@@ -150,7 +150,7 @@ const PredictMarketOutcome: React.FC<PredictMarketOutcomeProps> = ({
               >
                 {getTitle()}
               </Text>
-              {isClosed && outcomeToken && (
+              {isClosed && outcomeToken && outcomeToken.price === 1 && (
                 <Text
                   variant={TextVariant.BodyXS}
                   color={TextColor.Success}
@@ -167,9 +167,15 @@ const PredictMarketOutcome: React.FC<PredictMarketOutcomeProps> = ({
           <Text>
             {isClosed && outcomeToken ? (
               <Icon
-                name={IconName.CheckBold}
+                name={
+                  outcomeToken.price === 1
+                    ? IconName.CheckBold
+                    : IconName.CircleX
+                }
                 size={IconSize.Md}
-                color={TextColor.Success}
+                color={
+                  outcomeToken.price === 1 ? TextColor.Success : TextColor.Muted
+                }
               />
             ) : (
               <Text>{getYesPercentage()}</Text>

app/components/UI/Predict/providers/polymarket/types.ts

@@ -141,6 +141,7 @@ export interface PolymarketApiMarket {
   resolvedBy: string;
   orderPriceMinTickSize: number;
   events?: PolymarketApiEvent[];
+  umaResolutionStatus: string;
 }
 
 export interface PolymarketApiSeries {

app/components/UI/Predict/providers/polymarket/utils.test.ts

@@ -882,6 +882,7 @@ describe('polymarket utils', () => {
           status: 'open',
           active: true,
           resolvedBy: '0x0000000000000000000000000000000000000000',
+          umaResolutionStatus: 'unresolved',
         },
       ],
       liquidity: 1000000,
@@ -914,6 +915,7 @@ describe('polymarket utils', () => {
             groupItemTitle: 'Weather',
             status: 'open',
             volume: 1000,
+            resolutionStatus: 'unresolved',
             tokens: [
               {
                 id: 'token-1',
@@ -1426,6 +1428,7 @@ describe('polymarket utils', () => {
           status: 'open',
           active: true,
           resolvedBy: '0x0000000000000000000000000000000000000000',
+          umaResolutionStatus: 'unresolved',
         },
       ],
       liquidity: 1000000,
@@ -1539,6 +1542,7 @@ describe('polymarket utils', () => {
       status: 'open',
       active: true,
       resolvedBy: '0x0000000000000000000000000000000000000000',
+      umaResolutionStatus: 'unresolved',
     };
 
     it('fetch single market successfully', async () => {

app/components/UI/Predict/providers/polymarket/utils.ts

@@ -409,6 +409,7 @@ export const parsePolymarketEvents = (
             negRisk: market.negRisk,
             tickSize: market.orderPriceMinTickSize.toString(),
             resolvedBy: market.resolvedBy,
+            resolutionStatus: market.umaResolutionStatus,
           };
         }),
       liquidity: event.liquidity,

app/components/UI/Predict/types/index.ts

@@ -114,6 +114,7 @@ export type PredictOutcome = {
   negRisk?: boolean;
   tickSize?: string;
   resolvedBy?: string;
+  resolutionStatus?: string;
 };
 
 export type PredictOutcomeToken = {