Merge branch 'main' into chore/predict-adds-no-search-visual-state

Author: kevinbluer

app/components/UI/Card/components/Onboarding/PhysicalAddress.tsx

@@ -185,7 +185,7 @@ export const AddressFields = ({
           numberOfLines={1}
           size={TextFieldSize.Lg}
           value={zipCode}
-          keyboardType="number-pad"
+          keyboardType="default"
           maxLength={255}
           accessibilityLabel={strings(
             'card.card_onboarding.physical_address.zip_code_label',

app/components/UI/Perps/components/PerpsMarketTabs/PerpsMarketTabs.tsx

@@ -688,7 +688,10 @@ const PerpsMarketTabs: React.FC<PerpsMarketTabsProps> = ({
 
   // Sync TabsList to active tab after remount (when key changes)
   useEffect(() => {
-    if (tabsListRef.current && activeIndex >= 0) {
+    // Enabled only in test mode
+    // https://github.com/MetaMask/metamask-mobile/pull/22632
+    const isInTestMode = process.env.JEST_WORKER_ID || process.env.E2E;
+    if (tabsListRef.current && activeIndex >= 0 && isInTestMode) {
       tabsListRef.current.goToTabIndex(activeIndex);
     }
   }, [tabsKey, activeIndex, activeTabId]);

app/components/UI/Predict/components/PredictFeeSummary/PredictFeeSummary.tsx

@@ -55,7 +55,7 @@ const PredictFeeSummary: React.FC<PredictFeeSummaryProps> = ({
     <Box twClassName="pt-4 px-4 pb-6 flex-col gap-4">
       {/* Fees Row with Info Icon */}
       <Box twClassName="flex-row justify-between items-center">
-        <Box twClassName="flex-row items-center gap-1">
+        <Box twClassName="flex-row items-center">
           <Text color={TextColor.Alternative} variant={TextVariant.BodyMD}>
             {strings('predict.fee_summary.fees')}
           </Text>

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

@@ -10,6 +10,8 @@ const BASE_WIDTH = 375;
 const BASE_HEIGHT_IOS = 812; // iPhone X/11/12/13/14/15 Pro base
 const BASE_HEIGHT_ANDROID = 736; // Common Android base
 
+const MIN_SCREEN_HEIGHT_FOR_SMALL_SCREEN_STYLES = 750;
+
 // Calculate platform-aware scaling factors
 const isIOS = Platform.OS === 'ios';
 const baseHeight = isIOS ? BASE_HEIGHT_IOS : BASE_HEIGHT_ANDROID;
@@ -49,7 +51,11 @@ const createStyles = (theme: Theme) =>
       right: 0,
       bottom: 0,
       width: screenWidth * 1.07, // 7% wider for edge coverage
-      height: screenHeight * 1.12, // 12% taller for edge coverage
+      height:
+        screenHeight *
+        (screenHeight < MIN_SCREEN_HEIGHT_FOR_SMALL_SCREEN_STYLES
+          ? 1.12
+          : 1.14), // 12% taller for edge coverage
       resizeMode: 'cover',
     },
     contentContainer: {
@@ -60,26 +66,38 @@ const createStyles = (theme: Theme) =>
       paddingHorizontal: scaleHorizontal(16),
       paddingVertical: scaleVertical(16),
     },
+    poweredByImage: {
+      width: scaleHorizontal(200),
+      height: scaleVertical(24),
+      marginBottom: 8,
+    },
     spacer: {
       flex: 1,
     },
     title: {
       fontFamily: Platform.OS === 'ios' ? 'MM Poly' : 'MM Poly Regular',
       fontWeight: '400',
-      fontSize: 50,
-      lineHeight: 50, // 100% of font size
+      // make it smaller on smaller screens
+      fontSize:
+        screenHeight < MIN_SCREEN_HEIGHT_FOR_SMALL_SCREEN_STYLES ? 40 : 50,
+      lineHeight:
+        screenHeight < MIN_SCREEN_HEIGHT_FOR_SMALL_SCREEN_STYLES ? 40 : 50, // 100% of font size
       letterSpacing: 0,
       textAlign: 'center',
-      paddingTop: scaleVertical(12),
+      paddingTop: scaleVertical(
+        screenHeight < MIN_SCREEN_HEIGHT_FOR_SMALL_SCREEN_STYLES ? 8 : 12,
+      ),
       color: theme.colors.accent02.light,
     },
     titleDescription: {
+      // make it smaller on smaller screens
+      fontSize:
+        screenHeight < MIN_SCREEN_HEIGHT_FOR_SMALL_SCREEN_STYLES ? 14 : 16,
       paddingTop: scaleVertical(10),
       paddingHorizontal: scaleHorizontal(8),
       textAlign: 'center',
       fontFamily: Platform.OS === 'ios' ? 'System' : 'Roboto', // Default system font
       fontWeight: '500',
-      fontSize: 16, // BodyMd
       lineHeight: 24, // Line Height BodyMd
       letterSpacing: 0,
       color: theme.colors.accent02.light,

app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.tsx

@@ -16,6 +16,7 @@ import { useMetrics } from '../../../../../components/hooks/useMetrics';
 import Routes from '../../../../../constants/navigation/Routes';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import PredictMarketingImage from '../../../../../images/predict-marketing.png';
+import PoweredByPolymarketImage from '../../../../../images/powered-by-polymarket.png';
 import StorageWrapper from '../../../../../store/storage-wrapper';
 import { PREDICT_GTM_MODAL_SHOWN } from '../../../../../constants/storage';
 import { useTheme } from '../../../../../util/theme';
@@ -84,6 +85,11 @@ const PredictGTMModal = () => {
       <SafeAreaView style={styles.contentContainer}>
         {/* Header Section */}
         <View style={styles.headerContainer}>
+          <Image
+            source={PoweredByPolymarketImage}
+            style={styles.poweredByImage}
+            resizeMode="contain"
+          />
           <Text style={styles.title} variant={TextVariant.HeadingLG}>
             {titleText}
           </Text>

app/components/UI/Rewards/components/Tabs/OverviewTab/WaysToEarn/WaysToEarn.tsx

@@ -96,7 +96,7 @@ const waysToEarn: WayToEarn[] = [
     type: WayToEarnType.DEPOSIT_MUSD,
     title: strings('rewards.ways_to_earn.deposit_musd.title'),
     description: strings('rewards.ways_to_earn.deposit_musd.description'),
-    icon: IconName.AttachMoney,
+    icon: IconName.Coin,
   },
 ];