Merge branch 'main' into MMQA-1633

Author: cortisiko

app/components/UI/AssetOverview/Balance/Balance.tsx

@@ -23,8 +23,6 @@ import BadgeWrapper, {
 } from '../../../../component-library/components/Badges/BadgeWrapper';
 import { BadgeVariant } from '../../../../component-library/components/Badges/Badge/Badge.types';
 import Badge from '../../../../component-library/components/Badges/Badge/Badge';
-import AvatarToken from '../../../../component-library/components/Avatars/Avatar/variants/AvatarToken';
-import { AvatarSize } from '../../../../component-library/components/Avatars/Avatar';
 import NetworkAssetLogo from '../../NetworkAssetLogo';
 import Text, {
   TextColor,
@@ -53,6 +51,7 @@ import { ACCOUNT_TYPE_LABELS } from '../../../../constants/account-type-labels';
 import { useRWAToken } from '../../Bridge/hooks/useRWAToken';
 import { BridgeToken } from '../../Bridge/types';
 import StockBadge from '../../shared/StockBadge';
+import AssetLogo from '../../Assets/components/AssetLogo/AssetLogo';
 
 export const ACCOUNT_TYPE_LABEL_TEST_ID = 'account-type-label';
 
@@ -186,13 +185,7 @@ const Balance = ({
       );
     }
 
-    return (
-      <AvatarToken
-        name={asset.symbol}
-        imageSource={{ uri: asset.image }}
-        size={AvatarSize.Lg}
-      />
-    );
+    return <AssetLogo asset={asset} />;
   }, [asset, styles.ethLogo]);
 
   const isDisabled = useMemo(

app/components/UI/Predict/components/PredictActionButtons/PredictActionButtons.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Box } from '@metamask/design-system-react-native';
 import PredictBetButtons from './PredictBetButtons';
 import PredictClaimButton from './PredictClaimButton';
@@ -166,30 +166,60 @@ const PredictActionButtons: React.FC<PredictActionButtonsProps> = ({
   }
 
   if (market.status === PredictMarketStatus.OPEN && buttonConfig) {
-    const drawToken = buttonConfig.drawToken;
-
     return (
-      <Box twClassName="w-full mt-4">
-        <PredictBetButtons
-          yesLabel={buttonConfig.yesLabel}
-          yesPrice={buttonConfig.yesPrice}
-          onYesPress={() => onBetPress(buttonConfig.yesToken)}
-          drawLabel={buttonConfig.drawLabel}
-          drawPrice={buttonConfig.drawPrice}
-          onDrawPress={drawToken ? () => onBetPress(drawToken) : undefined}
-          noLabel={buttonConfig.noLabel}
-          noPrice={buttonConfig.noPrice}
-          onNoPress={() => onBetPress(buttonConfig.noToken)}
-          yesTeamColor={buttonConfig.yesTeamColor}
-          noTeamColor={buttonConfig.noTeamColor}
-          testID={`${testID}${PREDICT_ACTION_BUTTONS_TEST_IDS.PREDICT_BET_BUTTON}`}
-          isCarousel={isCarousel}
-        />
-      </Box>
+      <PredictBetButtonsContainer
+        buttonConfig={buttonConfig}
+        onBetPress={onBetPress}
+        testID={testID}
+        isCarousel={isCarousel}
+      />
     );
   }
 
   return null;
 };
 
+function PredictBetButtonsContainer(props: {
+  buttonConfig: ButtonConfig;
+  onBetPress: (token: PredictOutcomeToken) => void;
+  testID: string;
+  isCarousel?: boolean;
+}) {
+  const { buttonConfig, onBetPress, testID, isCarousel } = props;
+  const { yesToken, drawToken, noToken } = buttonConfig;
+
+  const onYesPress = useCallback(
+    () => onBetPress(yesToken),
+    [onBetPress, yesToken],
+  );
+  const onDrawPress = useMemo(
+    () => (drawToken ? () => onBetPress(drawToken) : undefined),
+    [onBetPress, drawToken],
+  );
+  const onNoPress = useCallback(
+    () => onBetPress(noToken),
+    [onBetPress, noToken],
+  );
+
+  return (
+    <Box twClassName="w-full mt-4">
+      <PredictBetButtons
+        yesLabel={buttonConfig.yesLabel}
+        yesPrice={buttonConfig.yesPrice}
+        onYesPress={onYesPress}
+        drawLabel={buttonConfig.drawLabel}
+        drawPrice={buttonConfig.drawPrice}
+        onDrawPress={onDrawPress}
+        noLabel={buttonConfig.noLabel}
+        noPrice={buttonConfig.noPrice}
+        onNoPress={onNoPress}
+        yesTeamColor={buttonConfig.yesTeamColor}
+        noTeamColor={buttonConfig.noTeamColor}
+        testID={`${testID}${PREDICT_ACTION_BUTTONS_TEST_IDS.PREDICT_BET_BUTTON}`}
+        isCarousel={isCarousel}
+      />
+    </Box>
+  );
+}
+
 export default PredictActionButtons;

app/components/UI/Predict/constants/transactions.ts

@@ -7,6 +7,15 @@ export const PREDICT_BALANCE_CHAIN_ID = '0x89' as Hex;
 
 export const MINIMUM_BET = 1; // $1 minimum bet
 
+// Keeps the CTA locked long enough for the payment selector to close and the
+// new quote-loading state to arrive, while avoiding a laggy return to the buy
+// sheet after normal blur/focus navigation.
+export const PAYMENT_SELECTOR_NAVIGATION_UNLOCK_DELAY_MS = 1000;
+
+// Fallback recovery if the payment-selector route does not emit the expected
+// blur/focus events, such as transparent modal or interrupted navigation cases.
+export const PAYMENT_SELECTOR_NAVIGATION_SAFETY_UNLOCK_MS = 5000;
+
 export const PREDICT_BALANCE_TOKEN_KEY = 'predict-balance';
 
 export const PREDICTION_ERROR_TRANSACTION_BATCH_ID = 'NA';

app/components/UI/Predict/constants/worldCupTabs.ts

@@ -0,0 +1,35 @@
+import type { PredictWorldCupConfig } from '../types/flags';
+
+export const PREDICT_WORLD_CUP_FEED_PARAM = 'world-cup';
+
+export const PREDICT_WORLD_CUP_TAB_KEYS = {
+  ALL: 'all',
+  LIVE: 'live',
+  PROPS: 'props',
+} as const;
+
+export type PredictWorldCupTabKey = string;
+
+export const getPredictWorldCupAvailableTabKeys = (
+  config?: Pick<PredictWorldCupConfig, 'stages'>,
+): string[] => [
+  ...Object.values(PREDICT_WORLD_CUP_TAB_KEYS),
+  ...(config?.stages ?? []).map((stage) => stage.key),
+];
+
+export const resolvePredictWorldCupInitialTab = (
+  requestedTab?: string | null,
+  config?: Pick<PredictWorldCupConfig, 'stages'>,
+): PredictWorldCupTabKey => {
+  const normalizedTab = requestedTab?.toLowerCase();
+
+  if (!normalizedTab) {
+    return PREDICT_WORLD_CUP_TAB_KEYS.ALL;
+  }
+
+  const availableTabKeys = getPredictWorldCupAvailableTabKeys(config);
+
+  return availableTabKeys.includes(normalizedTab)
+    ? normalizedTab
+    : PREDICT_WORLD_CUP_TAB_KEYS.ALL;
+};

app/components/UI/Predict/routes/index.test.tsx

@@ -43,6 +43,11 @@ jest.mock('../views/PredictFeed', () => {
   );
 });
 
+jest.mock('../views/PredictWorldCup', () => {
+  const { View } = jest.requireActual('react-native');
+  return () => <View testID="predict-world-cup" />;
+});
+
 jest.mock('../views/PredictMarketDetails', () => {
   const { View } = jest.requireActual('react-native');
   return () => <View testID="predict-market-details" />;
@@ -135,6 +140,16 @@ describe('PredictScreenStack', () => {
     expect(screen.getByTestId('predict-market-details')).toBeOnTheScreen();
   });
 
+  it('navigates to WORLD_CUP screen', async () => {
+    renderWithNavigation(<PredictScreenStack />);
+
+    await act(async () => {
+      navigationRef.current?.navigate(Routes.PREDICT.WORLD_CUP);
+    });
+
+    expect(screen.getByTestId('predict-world-cup')).toBeOnTheScreen();
+  });
+
   it('navigates to BUY_PREVIEW with PredictBuyPreview when payWithAnyToken is off', async () => {
     mockPayWithAnyTokenEnabled = false;
 

app/components/UI/Predict/routes/index.tsx

@@ -12,6 +12,7 @@ import PredictActivityDetail from '../components/PredictActivityDetail/PredictAc
 import { PredictNavigationParamList } from '../types/navigation';
 import PredictAddFundsModal from '../views/PredictAddFundsModal/PredictAddFundsModal';
 import PredictFeed from '../views/PredictFeed';
+import PredictWorldCup from '../views/PredictWorldCup';
 import PredictGTMModal from '../components/PredictGTMModal';
 import { Dimensions } from 'react-native';
 import { useSelector } from 'react-redux';
@@ -162,6 +163,15 @@ const PredictScreenStack = () => {
           }}
         />
 
+        <Stack.Screen
+          name={Routes.PREDICT.WORLD_CUP}
+          component={PredictWorldCup}
+          options={{
+            headerShown: false,
+            cardStyleInterpolator: slideFromRightInterpolator,
+          }}
+        />
+
         <Stack.Screen
           name={Routes.PREDICT.MODALS.BUY_PREVIEW}
           component={BuyPreviewComponent}

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

@@ -13,6 +13,7 @@ import {
 } from '.';
 import { PredictEventValues } from '../constants/eventNames';
 import type { TransactionActiveAbTestEntry } from '../../../../util/transactions/transaction-active-ab-test-attribution-registry';
+import type { PredictWorldCupTabKey } from '../constants/worldCupTabs';
 
 export type PredictEntryPoint =
   | typeof PredictEventValues.ENTRY_POINT.CAROUSEL
@@ -47,6 +48,12 @@ export interface PredictMarketDetailsParams {
   transactionActiveAbTests?: TransactionActiveAbTestEntry[];
 }
 
+/** Predict World Cup feed parameters */
+export interface PredictWorldCupParams {
+  entryPoint?: string;
+  initialTab?: PredictWorldCupTabKey;
+}
+
 /** Predict activity detail parameters */
 export interface PredictActivityDetailParams {
   activity: PredictActivityItem;
@@ -100,7 +107,7 @@ export interface PredictNavigationParamList extends ParamListBase {
   Predict: undefined;
   PredictMarketList: PredictMarketListParams;
   PredictMarketDetails: PredictMarketDetailsParams;
-  PredictWorldCup: undefined;
+  PredictWorldCup: PredictWorldCupParams | undefined;
   PredictSellPreview: PredictSellPreviewParams;
   PredictBuyPreview: PredictBuyPreviewParams;
   PredictActivityDetail: PredictActivityDetailParams;