Merge branch 'release/7.62.0' into chore/build/7.62.91

Author: weitingsun

android/app/build.gradle

@@ -187,8 +187,8 @@ android {
         applicationId "io.metamask"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionName "7.62.90"
-        versionCode 3497
+        versionName "7.62.91"
+        versionCode 3505
         testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         manifestPlaceholders.MM_BRANCH_KEY_TEST = "$System.env.MM_BRANCH_KEY_TEST"

app/components/UI/AssetOverview/AssetOverview.test.tsx

@@ -1891,7 +1891,7 @@ describe('getSwapTokens', () => {
     });
   });
 
-  it('returns default pair token as sourceToken and native gas token as destToken when asset is native gas token', () => {
+  it('returns native gas token as sourceToken when asset is native gas token from home page', () => {
     const nativeGasToken = {
       ...asset,
       address: '0x0000000000000000000000000000000000000000',
@@ -1900,18 +1900,8 @@ describe('getSwapTokens', () => {
 
     const result = getSwapTokens(nativeGasToken);
 
-    // sourceToken is the default pair token for mainnet (mUSD)
+    // sourceToken is the native gas token (user wants to swap FROM it)
     expect(result.sourceToken).toEqual({
-      symbol: 'mUSD',
-      name: 'MetaMask USD',
-      address: '0xaca92e438df0b2401ff60da7e4337b687a2435da',
-      decimals: 6,
-      image:
-        'https://static.cx.metamask.io/api/v2/tokenIcons/assets/eip155/1/erc20/0xaca92e438df0b2401ff60da7e4337b687a2435da.png',
-      chainId: MOCK_CHAIN_ID,
-    });
-    // destToken is the native gas token
-    expect(result.destToken).toEqual({
       ...nativeGasToken,
       address: '0x0000000000000000000000000000000000000000',
       chainId: MOCK_CHAIN_ID,
@@ -1920,5 +1910,25 @@ describe('getSwapTokens', () => {
       name: nativeGasToken.name,
       image: nativeGasToken.image,
     });
+    // destToken is undefined (will be determined by swap UI)
+    expect(result.destToken).toBeUndefined();
+  });
+
+  it('returns native gas token as destToken when asset is native gas token from trending', () => {
+    const trendingNativeGasToken = {
+      ...asset,
+      address: '0x0000000000000000000000000000000000000000',
+      isETH: true,
+      isFromTrending: true,
+    };
+
+    const result = getSwapTokens(trendingNativeGasToken);
+
+    // When coming from trending with native token, user wants to BUY it (dest position)
+    expect(result.destToken).toBeDefined();
+    expect(result.destToken?.address).toBe(
+      '0x0000000000000000000000000000000000000000',
+    );
+    expect(result.destToken?.symbol).toBe(trendingNativeGasToken.symbol);
   });
 });

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -126,12 +126,10 @@ import { BridgeToken } from '../Bridge/types';
 /**
  * Determines the source and destination tokens for swap/bridge navigation.
  *
- * When the asset is a native gas token (e.g., ETH), we set sourceToken to the default
- * pair token for that chain (e.g., mUSD on mainnet) and destToken to the native token,
- * allowing the user to swap INTO the native token.
- *
  * When coming from the trending tokens list, the user likely wants to BUY the token,
- * so we configure the swap with the native token as source and the asset as destination.
+ * so we configure the swap with the asset as destination:
+ * - For native tokens (ETH, BNB, etc.): use default pair token as source
+ * - For other tokens: use native token as source
  *
  * Otherwise, we assume they want to SELL, so the asset is the source.
  *
@@ -145,6 +143,7 @@ export const getSwapTokens = (
   destToken: BridgeToken | undefined;
 } => {
   const wantsToBuyToken = isAssetFromTrending(asset);
+  const isNative = isNativeAddress(asset.address);
 
   // Build bridge token from asset
   const bridgeToken: BridgeToken = {
@@ -157,22 +156,23 @@ export const getSwapTokens = (
     image: asset.image,
   };
 
-  // If the asset is a native gas token, set source to the default pair token for that chain
-  // and dest to the native token, allowing the user to swap INTO the native token
-  if (isNativeAddress(asset.address)) {
-    return {
-      sourceToken: getDefaultDestToken(bridgeToken.chainId),
-      destToken: bridgeToken,
-    };
-  }
-
+  // Trending page: user wants to BUY the token (token as destination)
   if (wantsToBuyToken) {
+    // For native tokens, use default pair token as source (e.g., mUSD for ETH)
+    if (isNative) {
+      return {
+        sourceToken: getDefaultDestToken(bridgeToken.chainId),
+        destToken: bridgeToken,
+      };
+    }
+    // For non-native tokens, use native token as source
     return {
       sourceToken: getNativeSourceToken(bridgeToken.chainId),
       destToken: bridgeToken,
     };
   }
 
+  // Home page: user wants to SELL the token (token as source)
   return {
     sourceToken: bridgeToken,
     destToken: undefined,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Text, TextColor } from '@metamask/design-system-react-native';
+import { Button, Text } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { useTheme } from '../../../../../util/theme';
 import { PredictBetButtonProps } from './PredictActionButtons.types';
@@ -25,13 +25,11 @@ const PredictBetButton: React.FC<PredictBetButtonProps> = ({
     return variant === 'yes' ? colors.success.muted : colors.error.muted;
   };
 
-  const getTextColor = (): TextColor => {
+  const getTextColor = (): string => {
     if (hasTeamColor) {
-      return TextColor.TextDefault;
+      return 'text-white';
     }
-    return variant === 'yes'
-      ? TextColor.SuccessDefault
-      : TextColor.ErrorDefault;
+    return variant === 'yes' ? 'text-success-default' : 'text-error-default';
   };
 
   return (
@@ -42,7 +40,7 @@ const PredictBetButton: React.FC<PredictBetButtonProps> = ({
       style={{ backgroundColor: getBackgroundColor() }}
       isFullWidth
     >
-      <Text color={getTextColor()} style={tw.style('font-medium')}>
+      <Text style={tw.style('font-medium ', getTextColor())}>
         {label.toUpperCase()} · {price}¢
       </Text>
     </Button>

app/components/UI/Predict/components/PredictGameChart/ChartTooltip.test.tsx

@@ -118,8 +118,8 @@ describe('ChartTooltip', () => {
       const textElements = getAllByTestId('svg-text');
       const textContents = textElements.map((el) => el.children[0]);
 
-      expect(textContents).toContain('Team A');
-      expect(textContents).toContain('Team B');
+      expect(textContents).toContain('TEAM A');
+      expect(textContents).toContain('TEAM B');
       expect(textContents).toContain('55%');
       expect(textContents).toContain('45%');
     });

app/components/UI/Predict/components/PredictGameChart/ChartTooltip.tsx

@@ -134,7 +134,7 @@ const ChartTooltip: React.FC<ChartTooltipProps> = ({
               fontSize={FONT_SIZE_LABEL}
               fontWeight="500"
             >
-              {pos.label}
+              {pos.label.toUpperCase()}
             </SvgText>
             <SvgText
               x={labelStartX}

app/components/UI/Predict/components/PredictGameChart/EndpointDots.test.tsx

@@ -91,8 +91,8 @@ describe('EndpointDots', () => {
       const textElements = getAllByTestId('svg-text');
       const textContents = textElements.map((el) => el.children[0]);
 
-      expect(textContents).toContain('Team A');
-      expect(textContents).toContain('Team B');
+      expect(textContents).toContain('TEAM A');
+      expect(textContents).toContain('TEAM B');
     });
 
     it('renders values with percentage format', () => {

app/components/UI/Predict/components/PredictGameChart/EndpointDots.tsx

@@ -87,7 +87,7 @@ const EndpointDots: React.FC<EndpointDotsProps> = ({
               fontSize={FONT_SIZE_LABEL}
               fontWeight="500"
             >
-              {pos.label}
+              {pos.label.toUpperCase()}
             </SvgText>
             <SvgText
               x={labelX}

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

@@ -7,8 +7,8 @@ export const DOT_RADIUS = 6;
 export const DOT_STROKE_WIDTH = 2;
 export const GLOW_RADIUS = 16;
 export const GLOW_OPACITY = 0.15;
-export const LABEL_OFFSET_X = 12;
-export const RIGHT_LABEL_OFFSET = 12;
+export const LABEL_OFFSET_X = 20;
+export const RIGHT_LABEL_OFFSET = 20;
 export const LABEL_TEXT_OFFSET_Y = 8;
 export const VALUE_TEXT_OFFSET_Y = 16;
 export const TIMESTAMP_Y = 12;

app/components/UI/Predict/components/PredictGameChart/PredictGameChart.tsx

@@ -149,6 +149,13 @@ const PredictGameChart: React.FC<PredictGameChartProps> = ({
     });
   }, [priceHistories, tokenIds, seriesConfig]);
 
+  useEffect(() => {
+    if (isLive && isFetching) {
+      initialDataLoadedRef.current = false;
+      setLiveChartData([]);
+    }
+  }, [isLive, isFetching]);
+
   useEffect(() => {
     if (!isLive) {
       initialDataLoadedRef.current = false;