Merge branch 'main' of github.com:MetaMask/metamask-mobile into cursor/defi-explore-sites-5eb2

Author: Prithpal-Sooriya

.github/guidelines/E2E_DECISION_TREE.md

@@ -33,7 +33,7 @@ To save infra resources while waiting for static analysis findings and potential
 - E2E tests are skipped and merge is blocked while the label is present, **unless** all changes are ignorable-only.
 - If E2E tests are needed, they should pass to be able to merge.
 
-## AI test selection
+## Smart AI E2E test selection
 
 Runs only when all of the following are true:
 
@@ -53,3 +53,10 @@ Flakiness detection is applied to modified E2E test files in PRs:
 - Modified E2E test files run twice
 - It applies to existing test files as well as new test files added in the PR
 - It can be disabled by adding the label `skip-e2e-flakiness-detection`. Useful when making large refactors or when changes don't pose flakiness risk.
+
+## Release branches
+
+PRs to release branches (cherry-picked from main) are exempt from the following:
+
+- Label `pr-not-ready-for-e2e` is not applied
+- Smart AI E2E selection is skipped - all E2E suites are run (if changes are not ignorable-only, e.g. only docs)

app/components/UI/Identity/BackupAndSyncFeaturesToggles/BackupAndSyncFeaturesToggles.tsx

@@ -1,10 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
 import { View, Switch, InteractionManager } from 'react-native';
 
-import Text, {
+import {
+  Text,
   TextColor,
   TextVariant,
-} from '../../../../component-library/components/Texts/Text';
+  Icon,
+  IconName,
+} from '@metamask/design-system-react-native';
 import { useTheme } from '../../../../util/theme';
 import styles from './BackupAndSyncFeaturesToggles.styles';
 import { useBackupAndSync } from '../../../../util/identity/hooks/useBackupAndSync';
@@ -16,9 +19,6 @@ import {
   selectIsBackupAndSyncUpdateLoading,
 } from '../../../../selectors/identity';
 import { BACKUPANDSYNC_FEATURES } from '@metamask/profile-sync-controller/user-storage';
-import Icon, {
-  IconName,
-} from '../../../../component-library/components/Icons/Icon';
 import { strings } from '../../../../../locales/i18n';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
@@ -126,10 +126,10 @@ const BackupAndSyncFeaturesToggles = () => {
   return (
     <View style={styles.setting}>
       <View style={styles.heading}>
-        <Text variant={TextVariant.HeadingSM}>
+        <Text variant={TextVariant.HeadingSm}>
           {strings('backupAndSync.manageWhatYouSync.title')}
         </Text>
-        <Text variant={TextVariant.BodySM} color={TextColor.Alternative}>
+        <Text variant={TextVariant.BodySm} color={TextColor.TextAlternative}>
           {strings('backupAndSync.manageWhatYouSync.description')}
         </Text>
       </View>

app/components/UI/Identity/BackupAndSyncToggle/BackupAndSyncToggle.tsx

@@ -3,10 +3,11 @@ import React, { useCallback, useEffect } from 'react';
 import { View, Switch, Linking, InteractionManager } from 'react-native';
 // import { useNavigation } from '@react-navigation/native';
 
-import Text, {
+import {
+  Text,
   TextVariant,
   TextColor,
-} from '../../../../component-library/components/Texts/Text';
+} from '@metamask/design-system-react-native';
 import { useTheme } from '../../../../util/theme';
 // import { strings } from '../../../../../locales/i18n';
 import styles from './BackupAndSyncToggle.styles';
@@ -150,7 +151,7 @@ const BackupAndSyncToggle = ({
   return (
     <View style={styles.setting}>
       <View style={styles.heading}>
-        <Text variant={TextVariant.HeadingSM}>
+        <Text variant={TextVariant.HeadingSm}>
           {strings('backupAndSync.title')}
         </Text>
         <Switch
@@ -165,9 +166,9 @@ const BackupAndSyncToggle = ({
           testID={BACKUP_AND_SYNC_TOGGLE_TEST_IDS.TOGGLE}
         />
       </View>
-      <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+      <Text variant={TextVariant.BodyMd} color={TextColor.TextAlternative}>
         {strings('backupAndSync.enable.description')}
-        <Text color={TextColor.Info} onPress={handleLink}>
+        <Text color={TextColor.InfoDefault} onPress={handleLink}>
           {strings('backupAndSync.privacyLink')}
         </Text>
       </Text>

app/components/UI/Identity/ConfirmTurnOnBackupAndSyncModal/ConfirmTurnOnBackupAndSyncModal.tsx

@@ -1,15 +1,13 @@
 import React, { useRef } from 'react';
 
-import BottomSheet, {
-  BottomSheetRef,
-} from '../../../../component-library/components/BottomSheets/BottomSheet';
-import { strings } from '../../../../../locales/i18n';
-
 import {
+  BottomSheet,
+  type BottomSheetRef,
   IconColor,
   IconName,
   IconSize,
-} from '../../../../component-library/components/Icons/Icon';
+} from '@metamask/design-system-react-native';
+import { strings } from '../../../../../locales/i18n';
 import ModalContent from '../../Notification/Modal';
 import { toggleBasicFunctionality } from '../../../../actions/settings';
 import { useParams } from '../../../../util/navigation/navUtils';
@@ -45,7 +43,7 @@ const ConfirmTurnOnBackupAndSyncModal = () => {
   const turnContent = {
     icon: {
       name: IconName.Check,
-      color: IconColor.Success,
+      color: IconColor.SuccessDefault,
     },
     bottomSheetTitle: strings('backupAndSync.enable.title'),
     bottomSheetMessage: strings('backupAndSync.enable.confirmation'),

app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.test.tsx

@@ -23,6 +23,7 @@ import { strings } from '../../../../../../locales/i18n';
 import MOCK_MONEY_TRANSACTIONS from '../../constants/mockActivityData';
 import useMoneyAccountBalance from '../../hooks/useMoneyAccountBalance';
 import { selectIsCardholder } from '../../../../../selectors/cardController';
+import { getDetectedGeolocation } from '../../../../../reducers/fiatOrders';
 import { moneyFormatFiat } from '../../utils/moneyFormatFiat';
 
 const mockGoBack = jest.fn();
@@ -85,7 +86,13 @@ jest.mock('../../../../../selectors/cardController', () => ({
   selectIsCardholder: jest.fn(),
 }));
 
+jest.mock('../../../../../reducers/fiatOrders', () => ({
+  ...jest.requireActual('../../../../../reducers/fiatOrders'),
+  getDetectedGeolocation: jest.fn(),
+}));
+
 const mockSelectIsCardholder = jest.mocked(selectIsCardholder);
+const mockGetDetectedGeolocation = jest.mocked(getDetectedGeolocation);
 
 const mockUseMoneyAccountTransactions = jest.mocked(
   useMoneyAccountTransactions,
@@ -134,6 +141,7 @@ describe('MoneyHomeView', () => {
     global.alert = jest.fn();
 
     mockSelectIsCardholder.mockReturnValue(false);
+    mockGetDetectedGeolocation.mockReturnValue('US');
 
     mockUseMoneyAccountBalance.mockReturnValue({
       totalFiatFormatted: '$3.00',
@@ -592,4 +600,82 @@ describe('MoneyHomeView', () => {
       });
     });
   });
+
+  describe('Metal card geolocation gating', () => {
+    it('renders the Metal card row when geolocation is US', () => {
+      mockGetDetectedGeolocation.mockReturnValue('US');
+
+      const { getByTestId } = renderWithProvider(<MoneyHomeView />);
+
+      expect(
+        getByTestId(MoneyMetaMaskCardTestIds.METAL_CARD_ROW),
+      ).toBeOnTheScreen();
+      expect(
+        getByTestId(MoneyMetaMaskCardTestIds.VIRTUAL_CARD_ROW),
+      ).toBeOnTheScreen();
+    });
+
+    it('renders the Metal card row when geolocation is a US sub-region (e.g. US-CA)', () => {
+      mockGetDetectedGeolocation.mockReturnValue('us-ca');
+
+      const { getByTestId } = renderWithProvider(<MoneyHomeView />);
+
+      expect(
+        getByTestId(MoneyMetaMaskCardTestIds.METAL_CARD_ROW),
+      ).toBeOnTheScreen();
+    });
+
+    it('hides the Metal card row when geolocation is GB', () => {
+      mockGetDetectedGeolocation.mockReturnValue('GB');
+
+      const { queryByTestId, getByTestId } = renderWithProvider(
+        <MoneyHomeView />,
+      );
+
+      expect(
+        queryByTestId(MoneyMetaMaskCardTestIds.METAL_CARD_ROW),
+      ).not.toBeOnTheScreen();
+      expect(
+        getByTestId(MoneyMetaMaskCardTestIds.VIRTUAL_CARD_ROW),
+      ).toBeOnTheScreen();
+    });
+
+    it('hides the Metal card row when geolocation is undefined (loading/unknown - fail closed)', () => {
+      mockGetDetectedGeolocation.mockReturnValue(undefined);
+
+      const { queryByTestId, getByTestId } = renderWithProvider(
+        <MoneyHomeView />,
+      );
+
+      expect(
+        queryByTestId(MoneyMetaMaskCardTestIds.METAL_CARD_ROW),
+      ).not.toBeOnTheScreen();
+      expect(
+        getByTestId(MoneyMetaMaskCardTestIds.VIRTUAL_CARD_ROW),
+      ).toBeOnTheScreen();
+    });
+  });
+
+  describe('Get now navigation', () => {
+    it('navigates to the card sign-up flow when the virtual card Get now button is pressed', () => {
+      mockGetDetectedGeolocation.mockReturnValue('GB');
+
+      const { getByText } = renderWithProvider(<MoneyHomeView />);
+
+      fireEvent.press(getByText(strings('money.metamask_card.get_now')));
+
+      expect(mockNavigate).toHaveBeenCalledWith(Routes.CARD.ROOT);
+    });
+
+    it('navigates to the card sign-up flow when the metal card Get now button is pressed', () => {
+      mockGetDetectedGeolocation.mockReturnValue('US');
+
+      const { getAllByText } = renderWithProvider(<MoneyHomeView />);
+      const buttons = getAllByText(strings('money.metamask_card.get_now'));
+
+      fireEvent.press(buttons[1]);
+
+      expect(mockNavigate).toHaveBeenCalledWith(Routes.CARD.ROOT);
+    });
+  });
 });

app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.tsx

@@ -36,6 +36,7 @@ import { TokenDetailsSource } from '../../../TokenDetails/constants/constants';
 import AppConstants from '../../../../../core/AppConstants';
 import NavigationService from '../../../../../core/NavigationService';
 import { selectIsCardholder } from '../../../../../selectors/cardController';
+import { getDetectedGeolocation } from '../../../../../reducers/fiatOrders';
 import Logger from '../../../../../util/Logger';
 import { AssetType } from '../../../../Views/confirmations/types/token';
 import { Hex } from '@metamask/utils';
@@ -73,6 +74,8 @@ const MoneyHomeView = () => {
   const { allTransactions, moneyAddress } = useMoneyAccountTransactions();
 
   const isCardholder = useSelector(selectIsCardholder);
+  const geolocation = useSelector(getDetectedGeolocation);
+  const isUS = geolocation?.toUpperCase().split('-')[0] === 'US';
 
   const homeState = getMoneyHomeState(allTransactions.length);
   const isMilestone = homeState === 'milestone' || homeState === 'filled';
@@ -296,6 +299,7 @@ const MoneyHomeView = () => {
           onHeaderPress={handleHeaderPress}
           onLinkPress={handleLinkCardPress}
           apy={apyPercent}
+          showMetalCard={isUS}
         />
         <Divider />
         {isMilestone && (

app/components/UI/Money/components/MoneyMetaMaskCard/MoneyMetaMaskCard.test.tsx

@@ -32,9 +32,9 @@ describe('MoneyMetaMaskCard', () => {
     ).toBeOnTheScreen();
   });
 
-  it('renders metal card row', () => {
+  it('renders metal card row when showMetalCard is true', () => {
     const { getByText, getByTestId } = render(
-      <MoneyMetaMaskCard onGetNowPress={jest.fn()} />,
+      <MoneyMetaMaskCard onGetNowPress={jest.fn()} showMetalCard />,
     );
 
     expect(
@@ -48,14 +48,36 @@ describe('MoneyMetaMaskCard', () => {
     ).toBeOnTheScreen();
   });
 
+  it('hides metal card row by default (showMetalCard not provided)', () => {
+    const { queryByTestId, queryByText } = render(
+      <MoneyMetaMaskCard onGetNowPress={jest.fn()} />,
+    );
+
+    expect(
+      queryByTestId(MoneyMetaMaskCardTestIds.METAL_CARD_ROW),
+    ).not.toBeOnTheScreen();
+    expect(
+      queryByText(strings('money.metamask_card.metal_card')),
+    ).not.toBeOnTheScreen();
+  });
+
+  it('hides metal card row when showMetalCard is false', () => {
+    const { queryByTestId } = render(
+      <MoneyMetaMaskCard onGetNowPress={jest.fn()} showMetalCard={false} />,
+    );
+
+    expect(
+      queryByTestId(MoneyMetaMaskCardTestIds.METAL_CARD_ROW),
+    ).not.toBeOnTheScreen();
+  });
+
   it('calls onGetNowPress when virtual card Get now is pressed', () => {
     const mockGetNow = jest.fn();
-    const { getAllByText } = render(
+    const { getByText } = render(
       <MoneyMetaMaskCard onGetNowPress={mockGetNow} />,
     );
-    const getNowButtons = getAllByText(strings('money.metamask_card.get_now'));
 
-    fireEvent.press(getNowButtons[0]);
+    fireEvent.press(getByText(strings('money.metamask_card.get_now')));
 
     expect(mockGetNow).toHaveBeenCalledTimes(1);
     expect(mockGetNow.mock.calls[0]).toEqual([]);
@@ -64,7 +86,7 @@ describe('MoneyMetaMaskCard', () => {
   it('calls onGetNowPress when metal card Get now is pressed', () => {
     const mockGetNow = jest.fn();
     const { getAllByText } = render(
-      <MoneyMetaMaskCard onGetNowPress={mockGetNow} />,
+      <MoneyMetaMaskCard onGetNowPress={mockGetNow} showMetalCard />,
     );
     const getNowButtons = getAllByText(strings('money.metamask_card.get_now'));
 
@@ -174,9 +196,9 @@ describe('MoneyMetaMaskCard', () => {
   });
 
   describe('upsell mode (default)', () => {
-    it('renders virtual and metal card rows', () => {
+    it('renders virtual and metal card rows when showMetalCard is true', () => {
       const { getByTestId } = render(
-        <MoneyMetaMaskCard onGetNowPress={jest.fn()} />,
+        <MoneyMetaMaskCard onGetNowPress={jest.fn()} showMetalCard />,
       );
 
       expect(
@@ -187,6 +209,19 @@ describe('MoneyMetaMaskCard', () => {
       ).toBeOnTheScreen();
     });
 
+    it('renders only the virtual card row when showMetalCard is false', () => {
+      const { getByTestId, queryByTestId } = render(
+        <MoneyMetaMaskCard onGetNowPress={jest.fn()} showMetalCard={false} />,
+      );
+
+      expect(
+        getByTestId(MoneyMetaMaskCardTestIds.VIRTUAL_CARD_ROW),
+      ).toBeOnTheScreen();
+      expect(
+        queryByTestId(MoneyMetaMaskCardTestIds.METAL_CARD_ROW),
+      ).not.toBeOnTheScreen();
+    });
+
     it('does not render link mode elements', () => {
       const { queryByTestId } = render(
         <MoneyMetaMaskCard onGetNowPress={jest.fn()} />,

app/components/UI/Money/components/MoneyMetaMaskCard/MoneyMetaMaskCard.tsx

@@ -34,6 +34,12 @@ interface MoneyMetaMaskCardProps {
   onLinkPress?: () => void;
   /** Current APY value displayed in the link mode bullet. */
   apy?: number;
+  /**
+   * Whether to render the Metal card row in upsell mode. Defaults to `false`
+   * because the Metal card is currently only available to US users; the parent
+   * is expected to pass the geolocation-derived flag.
+   */
+  showMetalCard?: boolean;
 }
 
 const CardRow = ({
@@ -166,6 +172,7 @@ const MoneyMetaMaskCard = ({
   onHeaderPress,
   onLinkPress,
   apy,
+  showMetalCard = false,
 }: MoneyMetaMaskCardProps) => {
   const handleLinkPress = useCallback(() => onLinkPress?.(), [onLinkPress]);
 
@@ -200,13 +207,15 @@ const MoneyMetaMaskCard = ({
             onPress={onGetNowPress}
             testID={MoneyMetaMaskCardTestIds.VIRTUAL_CARD_ROW}
           />
-          <CardRow
-            imageSource={mmCardMetal}
-            cardName={strings('money.metamask_card.metal_card')}
-            cashbackPercentage="3"
-            onPress={onGetNowPress}
-            testID={MoneyMetaMaskCardTestIds.METAL_CARD_ROW}
-          />
+          {showMetalCard && (
+            <CardRow
+              imageSource={mmCardMetal}
+              cardName={strings('money.metamask_card.metal_card')}
+              cashbackPercentage="3"
+              onPress={onGetNowPress}
+              testID={MoneyMetaMaskCardTestIds.METAL_CARD_ROW}
+            />
+          )}
         </>
       )}
     </Box>