feat: predict confirmation metrics

app/components/UI/Predict/selectors/predictController/index.ts

@@ -1,5 +1,6 @@
 import { createSelector } from 'reselect';
 import { RootState } from '../../../../../reducers';
+import { PredictPositionStatus } from '../../types';
 
 const selectPredictControllerState = (state: RootState) =>
   state.engine.backgroundState.PredictController;
@@ -20,9 +21,32 @@ const selectPredictClaimablePositions = createSelector(
   (predictControllerState) => predictControllerState?.claimablePositions || [],
 );
 
+const selectPredictWonPositions = createSelector(
+  selectPredictClaimablePositions,
+  (claimablePositions) =>
+    claimablePositions.filter(
+      (position) => position.status === PredictPositionStatus.WON,
+    ),
+);
+
+const selectPredictWinFiat = createSelector(
+  selectPredictWonPositions,
+  (winningPositions) =>
+    winningPositions.reduce((acc, position) => acc + position.currentValue, 0),
+);
+
+const selectPredictWinPnl = createSelector(
+  selectPredictWonPositions,
+  (winningPositions) =>
+    winningPositions.reduce((acc, position) => acc + position.cashPnl, 0),
+);
+
 export {
   selectPredictControllerState,
   selectPredictDepositTransaction,
   selectPredictClaimTransaction,
   selectPredictClaimablePositions,
+  selectPredictWonPositions,
+  selectPredictWinFiat,
+  selectPredictWinPnl,
 };

app/components/Views/confirmations/__mocks__/controllers/other-controllers-mock.ts

@@ -1,5 +1,6 @@
 import { merge } from 'lodash';
 import { toHex } from '@metamask/controller-utils';
+import { PredictPositionStatus } from '../../../../UI/Predict/types';
 
 export const accountMock = '0xdc47789de4ceff0e8fe9d15d728af7f17550c164';
 export const tokenAddress1Mock = '0x1234567890abcdef1234567890abcdef12345678';
@@ -233,6 +234,152 @@ export const gasFeeControllerMock = {
   },
 };
 
+export const predictControllerMock = {
+  engine: {
+    backgroundState: {
+      PredictController: {
+        claimablePositions: [
+          {
+            id: 'position-1',
+            providerId: 'polymarket',
+            marketId: 'market-1',
+            outcomeId: 'outcome-1',
+            outcomeTokenId: 'token-1',
+            outcome: 'Yes',
+            title: 'Market 1',
+            icon: 'https://example.com/icon1.png',
+            amount: 100,
+            price: 1.0,
+            status: PredictPositionStatus.WON,
+            size: 100,
+            outcomeIndex: 0,
+            realizedPnl: 0,
+            curPrice: 1.5,
+            conditionId: 'condition-1',
+            percentPnl: 50,
+            cashPnl: 50,
+            initialValue: 100,
+            avgPrice: 1.0,
+            currentValue: 150,
+            endDate: '2025-01-01',
+            claimable: true,
+            redeemable: true,
+            negRisk: false,
+          },
+          {
+            id: 'position-2',
+            providerId: 'polymarket',
+            marketId: 'market-2',
+            outcomeId: 'outcome-2',
+            outcomeTokenId: 'token-2',
+            outcome: 'No',
+            title: 'Market 2',
+            icon: 'https://example.com/icon2.png',
+            amount: 200,
+            price: 1.2,
+            status: PredictPositionStatus.WON,
+            size: 200,
+            outcomeIndex: 1,
+            realizedPnl: 0,
+            curPrice: 1.8,
+            conditionId: 'condition-2',
+            percentPnl: 50,
+            cashPnl: 100,
+            initialValue: 200,
+            avgPrice: 1.2,
+            currentValue: 300,
+            endDate: '2025-01-02',
+            claimable: true,
+            redeemable: true,
+            negRisk: false,
+          },
+          {
+            id: 'position-3',
+            providerId: 'polymarket',
+            marketId: 'market-3',
+            outcomeId: 'outcome-3',
+            outcomeTokenId: 'token-3',
+            outcome: 'Yes',
+            title: 'Market 3',
+            icon: 'https://example.com/icon3.png',
+            amount: 300,
+            price: 0.8,
+            status: PredictPositionStatus.WON,
+            size: 300,
+            outcomeIndex: 0,
+            realizedPnl: 0,
+            curPrice: 1.2,
+            conditionId: 'condition-3',
+            percentPnl: 50,
+            cashPnl: 150,
+            initialValue: 300,
+            avgPrice: 0.8,
+            currentValue: 450,
+            endDate: '2025-01-03',
+            claimable: true,
+            redeemable: true,
+            negRisk: false,
+          },
+          {
+            id: 'position-4',
+            providerId: 'polymarket',
+            marketId: 'market-4',
+            outcomeId: 'outcome-4',
+            outcomeTokenId: 'token-4',
+            outcome: 'No',
+            title: 'Market 4',
+            icon: 'https://example.com/icon4.png',
+            amount: 400,
+            price: 0.9,
+            status: PredictPositionStatus.WON,
+            size: 400,
+            outcomeIndex: 1,
+            realizedPnl: 0,
+            curPrice: 1.4,
+            conditionId: 'condition-4',
+            percentPnl: 55,
+            cashPnl: 200,
+            initialValue: 400,
+            avgPrice: 0.9,
+            currentValue: 600,
+            endDate: '2025-01-04',
+            claimable: true,
+            redeemable: true,
+            negRisk: false,
+          },
+          {
+            id: 'position-5',
+            providerId: 'polymarket',
+            marketId: 'market-5',
+            outcomeId: 'outcome-5',
+            outcomeTokenId: 'token-5',
+            outcome: 'Yes',
+            title: 'Market 5',
+            icon: 'https://example.com/icon5.png',
+            amount: 500,
+            price: 1.1,
+            status: PredictPositionStatus.WON,
+            size: 500,
+            outcomeIndex: 0,
+            realizedPnl: 0,
+            curPrice: 1.6,
+            conditionId: 'condition-5',
+            percentPnl: 45,
+            cashPnl: 250,
+            initialValue: 500,
+            avgPrice: 1.1,
+            currentValue: 750,
+            endDate: '2025-01-05',
+            claimable: true,
+            redeemable: true,
+            negRisk: false,
+          },
+        ],
+      },
+    },
+  },
+};
+
 export const otherControllersMock = merge(
   {},
   accountsControllerMock,
@@ -251,4 +398,5 @@ export const otherControllersMock = merge(
   tokenRatesControllerMock,
   tokensControllerMock,
   gasFeeControllerMock,
+  predictControllerMock,
 );

app/components/Views/confirmations/components/info/predict-claim-info/predict-claim-info.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 import { PredictClaimAmount } from '../../predict-confirmations/predict-claim-amount';
 import { PredictClaimBackground } from '../../predict-confirmations/predict-claim-background';
 import { useModalNavbar } from '../../../hooks/ui/useNavbar';
+import { usePredictClaimConfirmationMetrics } from '../../../hooks/metrics/usePredictClaimConfirmationMetrics';
 
 export function PredictClaimInfo() {
   useModalNavbar();
+  usePredictClaimConfirmationMetrics();
 
   return (
     <>

app/components/Views/confirmations/components/predict-confirmations/predict-claim-amount/predict-claim-amount.test.tsx

@@ -5,7 +5,6 @@ import { simpleSendTransactionControllerMock } from '../../../__mocks__/controll
 import { transactionApprovalControllerMock } from '../../../__mocks__/controllers/approval-controller-mock';
 import { otherControllersMock } from '../../../__mocks__/controllers/other-controllers-mock';
 import { PredictClaimAmount } from './predict-claim-amount';
-import { PredictPositionStatus } from '../../../../../UI/Predict';
 
 function render() {
   return renderWithProvider(<PredictClaimAmount />, {
@@ -14,43 +13,6 @@ function render() {
       simpleSendTransactionControllerMock,
       transactionApprovalControllerMock,
       otherControllersMock,
-      {
-        engine: {
-          backgroundState: {
-            PredictController: {
-              claimablePositions: [
-                {
-                  id: 'position-1',
-                  providerId: 'polymarket',
-                  marketId: 'market-1',
-                  outcomeId: 'outcome-1',
-                  outcomeTokenId: 'token-1',
-                  outcome: 'Yes',
-                  title: 'Test Position 1',
-                  icon: 'icon.png',
-                  amount: 100,
-                  price: 1.0,
-                  status: PredictPositionStatus.WON,
-                  size: 100,
-                  outcomeIndex: 0,
-                  realizedPnl: 0,
-                  curPrice: 1.5,
-                  conditionId: 'condition-1',
-                  percentPnl: 20.23,
-                  cashPnl: 46.35,
-                  initialValue: 182.74,
-                  avgPrice: 1.0,
-                  currentValue: 229.09,
-                  endDate: '2025-01-01',
-                  claimable: true,
-                  redeemable: true,
-                  negRisk: false,
-                },
-              ],
-            },
-          },
-        },
-      },
     ),
   });
 }
@@ -61,14 +23,14 @@ describe('PredictClaimAmount', () => {
     const { getByText } = render();
 
     // Then the formatted winnings amount is displayed
-    expect(getByText('$229.09')).toBeDefined();
+    expect(getByText('$2,250.00')).toBeDefined();
   });
 
   it('renders formatted change and percentage', () => {
     // Given a won position with cashPnl of 46.35 and currentValue of 229.09
     const { getByText } = render();
 
     // Then the formatted change and percentage is displayed
-    expect(getByText('+$46.35 (+20.23%)')).toBeDefined();
+    expect(getByText('+$750.00 (+33.33%)')).toBeDefined();
   });
 });

app/components/Views/confirmations/components/predict-confirmations/predict-claim-amount/predict-claim-amount.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
 import { strings } from '../../../../../../../locales/i18n';
 import Text, {
@@ -7,57 +7,47 @@ import Text, {
 } from '../../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../../component-library/hooks';
 import { Box } from '../../../../../UI/Box/Box';
-import { selectPredictClaimablePositions } from '../../../../../UI/Predict/selectors/predictController';
+import {
+  selectPredictWinFiat,
+  selectPredictWinPnl,
+} from '../../../../../UI/Predict/selectors/predictController';
 import {
   formatPercentage,
   formatPrice,
 } from '../../../../../UI/Predict/utils/format';
 import styleSheet from './predict-claim-amount.styles';
-import { PredictPositionStatus } from '../../../../../UI/Predict/types';
 
 export function PredictClaimAmount() {
   const { styles } = useStyles(styleSheet, {});
-
-  const claimablePositions = useSelector(selectPredictClaimablePositions);
-  const wonPositions = useMemo(
-    () =>
-      claimablePositions.filter(
-        (position) => position.status === PredictPositionStatus.WON,
-      ),
-    [claimablePositions],
-  );
-
-  const winningsFiat = useMemo(
-    () =>
-      wonPositions.reduce((acc, position) => acc + position.currentValue, 0),
-    [wonPositions],
-  );
-
-  const winningsPnl = useMemo(
-    () => wonPositions.reduce((acc, position) => acc + position.cashPnl, 0),
-    [wonPositions],
-  );
+  const winningsFiat = useSelector(selectPredictWinFiat);
+  const winningsPnl = useSelector(selectPredictWinPnl);
 
   if (!(winningsFiat && winningsPnl)) {
     return null;
   }
 
+  const formattedWinningsFiat = formatPrice(winningsFiat, {
+    maximumDecimals: 2,
+  });
+
+  const formattedWinningsPnl = `+${formatPrice(winningsPnl, {
+    maximumDecimals: 2,
+  })} (${formatPercentage((winningsPnl / winningsFiat) * 100)})`;
+
   return (
     <Box style={styles.container}>
       <Text variant={TextVariant.HeadingLG} color={TextColor.Alternative}>
         {strings('confirm.predict_claim.summary')}
       </Text>
       <Text variant={TextVariant.BodyMDMedium} style={styles.value}>
-        {formatPrice(winningsFiat, { maximumDecimals: 2 })}
+        {formattedWinningsFiat}
       </Text>
       <Text
         variant={TextVariant.BodyMDMedium}
         color={TextColor.Success}
         style={styles.change}
       >
-        {`+${formatPrice(winningsPnl, {
-          maximumDecimals: 2,
-        })} (${formatPercentage((winningsPnl / winningsFiat) * 100)})`}
+        {formattedWinningsPnl}
       </Text>
     </Box>
   );