[pull] main from MetaMask:main

CHANGELOG.md

@@ -7,6 +7,63 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [7.71.0]
+
+### Added
+
+- Added backend-provided intent typedData for signing intent swap txs (#25913)
+- Added Security & Trust section to Token Details page showing risk level, contract security features, buy/sell tax, token distribution, and official links powered by Blockaid (#27073)
+- Added a "Withdraw" button to the unstaked TRX banner so users can claim TRX that has completed the lock period (#27076)
+- Added handling for aggregated balance on the new home page (#27172)
+- Added LD flags to consume price impact threshold (#27196)
+- Added Segment event tracking for mUSD Quick Convert flow and enriched generic Transaction\* events for mUSD conversion transactions (#27305)
+- Improved bridge/swap quote expiry experience; expired quotes now remain visible inline with a prompt to refresh, replacing a separate modal flow (#27340)
+- Added support for ramps providers such as PayPal, Robinhood & Coinbase that use a different checkout browser (#27364)
+- Added authentication for transaction submission to sentinel and transaction API (#27410)
+- Added skeleton loading indicator to NFT grid items while images are loading (#27413)
+- Embedded the metal card checkout flow into the Card onboarding/sign-up flow (#27420)
+- Added attention badge on Card button (#27425)
+- Added a new tab for users to see their NFTs and fixed NFT flicker on that view (#27437)
+- Added press opacity feedback to NFT grid items (#27488)
+- Applied a minimum $0.01 threshold for showing the "Claim bonus" CTA for Merkl rewards so that amounts below the threshold show the 3% bonus label instead (#27522)
+- Updated Predict withdraw to default to the user’s last used destination token before falling back to the remote preferred token (#27532)
+- Enabled campaigns view under feature flag (#27556)
+- Redirected buy deeplinks to the new Ramps Buy flow when Ramps Unified V2 is enabled; deprecated cash deposit deeplinks (#27557)
+- Restored mUSD claimable bonus claim section on asset overview screen (#27567)
+- Added campaign opt-in flow with details and mechanics screens in the Rewards section (#27619)
+- Updated Ramp buy flow modal headers and typography to use shared compact header and design system components (#27627)
+- Migrated Card authentication to CardController with new `useCardAuth` hook for controller-based auth flow (#27656)
+- Extracted Card supported-country check into `selectIsUserInSupportedCardCountry` selector (#27695)
+- Updated mUSD aggregated balance row to redirect to the Cash tokens list when the user holds mUSD on any network (#27703)
+
+### Changed
+
+- Removed deprecated payment request (#27519)
+- Updated earn balance row layout (logo size, badge size, balance/percentage placement) and added privacy mode support for StakingBalance and EarnLendingBalance (#27457)
+- Refactored Card onboarding to use the `useRegions` hook instead of Redux `selectedCountry` for region/country data (#27539)
+- Adjusted spacing in homepage (#27637)
+
+### Fixed
+
+- Fixed a bug where closing the "Token not available" modal left the user in a stuck state instead of navigating back to the token selection screen (#27277)
+- Fixed false "Token Not Available" errors during Buy flow when payment methods are still loading after provider change; fixed missing "Token Not Available" modal in home buy flow; fixed crash when navigating back from "Token Not Available" modal in token info buy flow (#27448)
+- Fixed token row display on homepage to show price and variation separated by a dot for consistency with token list items (#27449)
+- Fixed stop loss banner rendering issue (#27458)
+- Fixed Order Details screen displaying excessive decimal places for crypto amounts after ramp purchases (#27469)
+- Fixed remove network confirmation header casing to sentence case (#27480)
+- Fixed the custom network header trash icon color to match other trash icons in the app (#27481)
+- Fixed a bug where the RPC URL field in network details could appear focused after blur and had inconsistent typography between states (#27482)
+- Fixed RAMP_INTERNAL_BUILD default for OTA push (#27507)
+- Fixed a bug where Perps activity could appear blank after reopening the Activity screen from Perps home (#27509)
+- Fixed universal link handling for redirect-oauth (#27511)
+- Fixed Network Details so network name is required and no longer labeled optional (#27541)
+- Fixed onboarding import button text being invisible in dark mode; ensured both CTAs have proper contrast in dark mode (#27550)
+- Removed a stale feature-flag gate so the Networks menu item is always available (#27591)
+- Fixed MegaETH explorer button to display "View on Megaeth Explorer" instead of "View on Megaeth" (#27592)
+- Fixed padding in security screen header (#27621)
+- Fixed TokenList crash when switching networks (#27655)
+- Fixed miscategorization of BRENTOIL and other non-crypto instruments appearing in the "Explore Crypto" section on Perps Home (#27699)
+
 ## [7.70.1]
 
 ### Fixed
@@ -11015,7 +11072,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#957](https://github.com/MetaMask/metamask-mobile/pull/957): fix timeouts (#957)
 - [#954](https://github.com/MetaMask/metamask-mobile/pull/954): Bugfix: onboarding navigation (#954)
 
-[Unreleased]: https://github.com/MetaMask/metamask-mobile/compare/v7.70.1...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-mobile/compare/v7.71.0...HEAD
+[7.71.0]: https://github.com/MetaMask/metamask-mobile/compare/v7.70.1...v7.71.0
 [7.70.1]: https://github.com/MetaMask/metamask-mobile/compare/v7.70.0...v7.70.1
 [7.70.0]: https://github.com/MetaMask/metamask-mobile/compare/v7.69.1...v7.70.0
 [7.69.1]: https://github.com/MetaMask/metamask-mobile/compare/v7.69.0...v7.69.1

app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx

@@ -21,9 +21,9 @@ import {
   Button,
   ButtonVariant,
   ButtonSize,
+  TextColor,
 } from '@metamask/design-system-react-native';
 import { useStyles } from '../../../../../component-library/hooks';
-import { TextColor } from '../../../../../component-library/components/Texts/Text';
 import { strings } from '../../../../../../locales/i18n';
 import { formatPnl, formatPercentage } from '../../utils/formatUtils';
 import Routes from '../../../../../constants/navigation/Routes';
@@ -141,10 +141,9 @@ const PerpsHomeView = () => {
   const { positionsSubtitle, positionsSubtitleColor, positionsSubtitleSuffix } =
     useMemo(() => {
       const pnlNum = parseFloat(unrealizedPnl);
-      const isPnlZero = BigNumber(unrealizedPnl).isZero();
 
-      // Only show subtitle when there are positions and P&L is non-zero
-      if (!hasPositions || isPnlZero) {
+      // Open (filled) positions only — hide when flat so spacing matches homepage sections
+      if (!hasPositions) {
         return {
           positionsSubtitle: undefined,
           positionsSubtitleColor: undefined,
@@ -154,12 +153,11 @@ const PerpsHomeView = () => {
 
       const color =
         pnlNum > 0
-          ? TextColor.Success
+          ? TextColor.SuccessDefault
           : pnlNum < 0
-            ? TextColor.Error
-            : TextColor.Alternative;
+            ? TextColor.ErrorDefault
+            : TextColor.TextDefault;
 
-      // Format: "-$18.47 (2.1%)" colored + "Unrealized PnL" in default color
       const subtitle = `${formatPnl(pnlNum)} (${formatPercentage(roe, 1)})`;
       const suffix = strings('perps.unrealized_pnl');
 

app/components/UI/Perps/components/PerpsHomeSection/PerpsHomeSection.test.tsx

@@ -4,7 +4,7 @@ import { View, Text } from 'react-native';
 import PerpsHomeSection from './PerpsHomeSection';
 import { PerpsHomeSectionTestIds } from './PerpsHomeSection.testIds';
 
-import { TextColor } from '../../../../../component-library/components/Texts/Text';
+import { TextColor } from '@metamask/design-system-react-native';
 
 describe('PerpsHomeSection', () => {
   const mockSkeleton = () => <View testID="skeleton-loader" />;
@@ -445,7 +445,7 @@ describe('PerpsHomeSection', () => {
         <PerpsHomeSection
           title="Test Section"
           subtitle="+$50.00 (5.0%) Unrealized P&L"
-          subtitleColor={TextColor.Success}
+          subtitleColor={TextColor.SuccessDefault}
           isLoading={false}
           isEmpty={false}
           renderSkeleton={mockSkeleton}
@@ -481,7 +481,7 @@ describe('PerpsHomeSection', () => {
         <PerpsHomeSection
           title="Positions"
           subtitle="-$18.47 (2.1%)"
-          subtitleColor={TextColor.Error}
+          subtitleColor={TextColor.ErrorDefault}
           isLoading={false}
           isEmpty={false}
           onActionPress={mockOnActionPress}
@@ -504,7 +504,7 @@ describe('PerpsHomeSection', () => {
         <PerpsHomeSection
           title="Positions"
           subtitle="-$18.47 (2.1%)"
-          subtitleColor={TextColor.Error}
+          subtitleColor={TextColor.ErrorDefault}
           subtitleSuffix="Unrealized PnL"
           subtitleTestID="test-subtitle"
           isLoading={false}

app/components/UI/Perps/components/PerpsHomeSection/PerpsHomeSection.tsx

@@ -1,17 +1,19 @@
 import React, { ReactNode } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import Text, {
-  TextVariant,
-  TextColor,
-} from '../../../../../component-library/components/Texts/Text';
 import {
+  Box,
+  Text,
+  TextColor,
+  TextVariant,
   BoxJustifyContent,
   Icon,
   IconColor,
   IconName,
   IconSize,
+  FontWeight,
 } from '@metamask/design-system-react-native';
 import SectionHeader from '../../../../../component-library/components-temp/SectionHeader';
+import HomepageSectionUnrealizedPnlRow from '../../../../Views/Homepage/components/HomepageSectionUnrealizedPnlRow';
 import { PerpsHomeSectionTestIds } from './PerpsHomeSection.testIds';
 
 export interface PerpsHomeSectionProps {
@@ -24,15 +26,15 @@ export interface PerpsHomeSectionProps {
    */
   subtitle?: string;
   /**
-   * Color for subtitle text (e.g., Success for profit, Error for loss)
+   * Color for subtitle value text (e.g., Success for profit, Error for loss)
    */
   subtitleColor?: TextColor;
   /**
-   * Optional suffix for subtitle (rendered in default color, e.g., "Unrealized PnL")
+   * Optional suffix for subtitle (rendered in muted color, e.g., "Unrealized P&L")
    */
   subtitleSuffix?: string;
   /**
-   * Test ID for subtitle element
+   * Test ID for subtitle value element
    */
   subtitleTestID?: string;
   /**
@@ -107,7 +109,7 @@ const styles = StyleSheet.create({
 const PerpsHomeSection: React.FC<PerpsHomeSectionProps> = ({
   title,
   subtitle,
-  subtitleColor = TextColor.Alternative,
+  subtitleColor = TextColor.TextDefault,
   subtitleSuffix,
   subtitleTestID,
   isLoading,
@@ -146,29 +148,34 @@ const PerpsHomeSection: React.FC<PerpsHomeSectionProps> = ({
               </TouchableOpacity>
             ) : undefined
           }
-          twClassName="px-0 mb-2"
+          twClassName="px-0 mb-0"
         />
 
-        {/* Subtitle - NOT pressable */}
-        {subtitle && (
-          <Text
-            variant={TextVariant.BodySM}
-            color={subtitleColor}
-            testID={subtitleTestID}
-          >
-            {subtitle}
-            {subtitleSuffix && (
-              <Text
-                variant={TextVariant.BodySM}
-                color={TextColor.Alternative}
-                testID={subtitleTestID ? `${subtitleTestID}-suffix` : undefined}
-              >
-                {' '}
-                {subtitleSuffix}
-              </Text>
-            )}
-          </Text>
-        )}
+        {/* Value + muted label: same row as wallet homepage unrealized P&L (8px gap). */}
+        {subtitle && subtitleSuffix ? (
+          <HomepageSectionUnrealizedPnlRow
+            label={subtitleSuffix}
+            valueText={subtitle}
+            valueColor={subtitleColor}
+            paddingHorizontal={0}
+            marginTop={1}
+            valueTestID={subtitleTestID}
+            labelTestID={
+              subtitleTestID ? `${subtitleTestID}-suffix` : undefined
+            }
+          />
+        ) : subtitle ? (
+          <Box marginTop={1}>
+            <Text
+              variant={TextVariant.BodyMd}
+              color={subtitleColor}
+              fontWeight={FontWeight.Medium}
+              testID={subtitleTestID}
+            >
+              {subtitle}
+            </Text>
+          </Box>
+        ) : null}
       </View>
 
       {/* Section Content */}

app/components/UI/Predict/Predict.testIds.ts

@@ -80,6 +80,14 @@ export const getPredictFeedMockSelector = {
 // PREDICT MARKET DETAILS SELECTORS
 // ========================================
 
+export type PredictMarketDetailsTabKey = 'positions' | 'outcomes' | 'about';
+
+export const getPredictMarketDetailsSelector = {
+  tabBarTab: (tabKey: PredictMarketDetailsTabKey) =>
+    `predict-market-details-tab-bar-tab-${tabKey}`,
+  icon: (name: string) => `icon-${name}`,
+} as const;
+
 export const PredictMarketDetailsSelectorsIDs = {
   // Main screen
   SCREEN: 'predict-market-details-screen',
@@ -96,9 +104,9 @@ export const PredictMarketDetailsSelectorsIDs = {
   OUTCOMES_TAB: 'predict-market-details-outcomes-tab',
 
   // Tab labels
-  POSITIONS_TAB_LABEL: 'predict-market-details-tab-bar-tab-0',
-  OUTCOMES_TAB_LABEL: 'predict-market-details-tab-bar-tab-1',
-  ABOUT_TAB_LABEL: 'predict-market-details-tab-bar-tab-2',
+  POSITIONS_TAB_LABEL: getPredictMarketDetailsSelector.tabBarTab('positions'),
+  OUTCOMES_TAB_LABEL: getPredictMarketDetailsSelector.tabBarTab('outcomes'),
+  ABOUT_TAB_LABEL: getPredictMarketDetailsSelector.tabBarTab('about'),
 
   // Tab content containers
   ABOUT_TAB_CONTENT: 'about-tab-content',
@@ -119,11 +127,6 @@ export const PredictMarketDetailsSelectorsIDs = {
     'predict-details-buttons-skeleton-button-1',
 } as const;
 
-export const getPredictMarketDetailsSelector = {
-  tabBarTab: (index: number) => `predict-market-details-tab-bar-tab-${index}`,
-  icon: (name: string) => `icon-${name}`,
-} as const;
-
 export const PredictMarketDetailsSelectorsText = {
   // Tab content containers
   ABOUT_TAB_TEXT: 'About',

app/components/UI/Predict/components/PredictPositionsHeader/PredictPositionsHeader.tsx

@@ -49,7 +49,11 @@ import { usePredictPositions } from '../../hooks/usePredictPositions';
 import { selectPredictWonPositions } from '../../selectors/predictController';
 import { PredictPosition } from '../../types';
 import { PredictNavigationParamList } from '../../types/navigation';
-import { formatPercentage, formatPrice } from '../../utils/format';
+import {
+  formatPercentage,
+  formatPredictUnrealizedPnLStringParts,
+  formatPrice,
+} from '../../utils/format';
 import { Skeleton } from '../../../../../component-library/components-temp/Skeleton';
 import PredictClaimButton from '../PredictActionButtons/PredictClaimButton';
 import { PredictEventValues } from '../../constants/eventNames';
@@ -163,16 +167,10 @@ const PredictPositionsHeader = forwardRef<
 
   const unrealizedAmount = unrealizedPnL?.cashUpnl ?? 0;
   const unrealizedPercent = unrealizedPnL?.percentUpnl ?? 0;
-
-  const formatAmount = (amount: number) => {
-    const sign = amount >= 0 ? '+' : '-';
-    return `${sign}$${Math.abs(amount).toFixed(2)}`;
-  };
-
-  const formatPercent = (percent: number) => {
-    const sign = percent >= 0 ? '+' : '';
-    return `${sign}${formatPercentage(percent)}`;
-  };
+  const unrealizedPnLDisplayParts = formatPredictUnrealizedPnLStringParts({
+    cashUpnl: unrealizedAmount,
+    percentUpnl: unrealizedPercent,
+  });
 
   const hasClaimableAmount =
     wonPositions.length > 0 && totalClaimableAmount !== undefined;
@@ -315,10 +313,10 @@ const PredictPositionsHeader = forwardRef<
                     isHidden={privacyMode}
                     length={SensitiveTextLength.Long}
                   >
-                    {strings('predict.unrealized_pnl_value', {
-                      amount: formatAmount(unrealizedAmount),
-                      percent: formatPercent(unrealizedPercent),
-                    })}
+                    {strings(
+                      'predict.unrealized_pnl_value',
+                      unrealizedPnLDisplayParts,
+                    )}
                   </SensitiveText>
                 )}
               </Box>

app/components/UI/Predict/utils/format.test.ts

@@ -11,6 +11,7 @@ import {
   calculateNetAmount,
   formatPriceWithSubscriptNotation,
   formatGameStartTime,
+  formatPredictUnrealizedPnLStringParts,
 } from './format';
 import { Recurrence, PredictSeries } from '../types';
 
@@ -2118,6 +2119,35 @@ describe('format utils', () => {
     });
   });
 
+  describe('formatPredictUnrealizedPnLStringParts', () => {
+    it('formats positive cash and percent with explicit + on percent', () => {
+      expect(
+        formatPredictUnrealizedPnLStringParts({
+          cashUpnl: 95.39,
+          percentUpnl: 9.4,
+        }),
+      ).toEqual({ amount: '+$95.39', percent: '+9.4%' });
+    });
+
+    it('formats negative cash and percent', () => {
+      expect(
+        formatPredictUnrealizedPnLStringParts({
+          cashUpnl: -10.5,
+          percentUpnl: -3.25,
+        }),
+      ).toEqual({ amount: '-$10.50', percent: '-3.25%' });
+    });
+
+    it('formats zero with + on cash and percent (matches positions header)', () => {
+      expect(
+        formatPredictUnrealizedPnLStringParts({
+          cashUpnl: 0,
+          percentUpnl: 0,
+        }),
+      ).toEqual({ amount: '+$0.00', percent: '+0%' });
+    });
+  });
+
   describe('formatGameStartTime', () => {
     // Store original Intl.DateTimeFormat
     const OriginalDateTimeFormat = Intl.DateTimeFormat;