[pull] main from MetaMask:main

.js.env.example

@@ -111,7 +111,7 @@ export MM_MUSD_CONVERSION_FLOW_ENABLED="false"
 # IMPORTANT: Must use SINGLE QUOTES to preserve JSON format
 # Example: MM_MUSD_CONVERTIBLE_TOKENS_ALLOWLIST='{"0x1":["USDC","USDT"],"0xa4b1":["USDC","DAI"]}'
 export MM_MUSD_CONVERTIBLE_TOKENS_ALLOWLIST=''
-
+export MM_MUSD_CTA_ENABLED="false"
 # Activates remote feature flag override mode.
 # Remote feature flag values won't be updated,
 # and selectors should return their fallback values

app/components/Nav/App/App.test.tsx

@@ -835,7 +835,7 @@ describe('App', () => {
       const { getByText } = renderAppWithRouteState(routeState);
 
       await waitFor(() => {
-        expect(getByText('Share Address')).toBeTruthy();
+        expect(getByText('Share address')).toBeTruthy();
       });
     });
   });

app/components/UI/Bridge/components/QuoteDetailsCard/__snapshots__/QuoteDetailsCard.test.tsx.snap

@@ -573,7 +573,7 @@ exports[`QuoteDetailsCard renders initial state 1`] = `
                                   Network fee
                                 </Text>
                                 <TouchableOpacity
-                                  accessibilityLabel="Network Fee tooltip"
+                                  accessibilityLabel="Network fee tooltip"
                                   accessibilityRole="button"
                                   accessible={true}
                                   activeOpacity={1}
@@ -870,7 +870,7 @@ exports[`QuoteDetailsCard renders initial state 1`] = `
                                   Price impact
                                 </Text>
                                 <TouchableOpacity
-                                  accessibilityLabel="Price Impact tooltip"
+                                  accessibilityLabel="Price impact tooltip"
                                   accessibilityRole="button"
                                   accessible={true}
                                   activeOpacity={1}

app/components/UI/Bridge/components/TransactionDetails/BlockExplorersModal.test.tsx

@@ -60,7 +60,7 @@ describe('BlockExplorersModal', () => {
       },
       { state: mockState },
     );
-    expect(getByText('View on Block Explorer')).toBeTruthy();
+    expect(getByText('View on block explorer')).toBeTruthy();
   });
 
   it('should display both source and destination chain block explorer buttons', () => {

app/components/UI/Card/Views/CardHome/CardHome.test.tsx

@@ -392,16 +392,16 @@ jest.mock('../../../../../../locales/i18n', () => ({
       'card.card_home.kyc_status.pending.title': 'Verification in Progress',
       'card.card_home.kyc_status.pending.description':
         'Your identity verification is being processed. This usually takes a few minutes. Please check back shortly to enable your card.',
-      'card.card_home.kyc_status.rejected.title': 'Verification Not Approved',
+      'card.card_home.kyc_status.rejected.title': 'Verification not approved',
       'card.card_home.kyc_status.rejected.description':
         'We were unable to verify your identity. Please contact support for assistance.',
       'card.card_home.kyc_status.rejected.support_description':
         "We were unable to verify your identity at this time. Please contact our support team for assistance and we'll help you resolve this issue.",
-      'card.card_home.kyc_status.unverified.title': 'Verification Required',
+      'card.card_home.kyc_status.unverified.title': 'Verification required',
       'card.card_home.kyc_status.unverified.description':
         'You need to complete identity verification before enabling your card. Please complete the onboarding process.',
       'card.card_home.kyc_status.error.title':
-        'Verification Status Unavailable',
+        'Verification status unavailable',
       'card.card_home.kyc_status.error.description':
         "We couldn't check your verification status. Please try again later or contact support if the issue persists.",
       'card.card_home.kyc_status.ok_button': 'OK',
@@ -2981,7 +2981,7 @@ describe('CardHome Component', () => {
 
         await waitFor(() => {
           expect(Alert.alert).toHaveBeenCalledWith(
-            'Verification Not Approved',
+            'Verification not approved',
             "We were unable to verify your identity at this time. Please contact our support team for assistance and we'll help you resolve this issue.",
             [{ text: 'OK', style: 'default' }],
           );
@@ -3002,7 +3002,7 @@ describe('CardHome Component', () => {
 
         await waitFor(() => {
           expect(Alert.alert).toHaveBeenCalledWith(
-            'Verification Required',
+            'Verification required',
             'You need to complete identity verification before enabling your card. Please complete the onboarding process.',
             [{ text: 'OK', style: 'default' }],
           );
@@ -3111,7 +3111,7 @@ describe('CardHome Component', () => {
 
         await waitFor(() => {
           expect(Alert.alert).toHaveBeenCalledWith(
-            'Verification Status Unavailable',
+            'Verification status unavailable',
             "We couldn't check your verification status. Please try again later or contact support if the issue persists.",
             [{ text: 'OK', style: 'default' }],
           );
@@ -3133,7 +3133,7 @@ describe('CardHome Component', () => {
 
         await waitFor(() => {
           expect(Alert.alert).not.toHaveBeenCalledWith(
-            'Verification Status Unavailable',
+            'Verification status unavailable',
             expect.any(String),
             expect.any(Array),
           );
@@ -3155,7 +3155,7 @@ describe('CardHome Component', () => {
 
         await waitFor(() => {
           expect(Alert.alert).not.toHaveBeenCalledWith(
-            'Verification Status Unavailable',
+            'Verification status unavailable',
             expect.any(String),
             expect.any(Array),
           );
@@ -3217,7 +3217,7 @@ describe('CardHome Component', () => {
 
         await waitFor(() => {
           expect(Alert.alert).toHaveBeenCalledWith(
-            expect.stringContaining('Not Approved'),
+            expect.stringContaining('Verification not approved'),
             expect.stringContaining('contact our support team'),
             expect.any(Array),
           );
@@ -3238,7 +3238,7 @@ describe('CardHome Component', () => {
 
         await waitFor(() => {
           expect(Alert.alert).toHaveBeenCalledWith(
-            expect.stringContaining('Required'),
+            expect.stringContaining('Verification required'),
             expect.stringContaining('complete identity verification'),
             expect.any(Array),
           );

app/components/UI/Earn/components/Musd/MusdConversionAssetListCta/MusdConversionAssetListCta.styles.ts

@@ -11,11 +11,15 @@ const styleSheet = () =>
     assetInfo: {
       flexDirection: 'row',
       gap: 20,
+      alignItems: 'center',
     },
     button: {
       alignSelf: 'center',
       height: 32,
     },
+    badge: {
+      alignSelf: 'center',
+    },
   });
 
 export default styleSheet;

app/components/UI/Earn/components/Musd/MusdConversionAssetListCta/MusdConversionAssetListCta.test.tsx

@@ -4,6 +4,7 @@ import { Hex } from '@metamask/utils';
 
 jest.mock('../../../hooks/useMusdConversionTokens');
 jest.mock('../../../hooks/useMusdConversion');
+jest.mock('../../../hooks/useMusdCtaVisibility');
 jest.mock('../../../../Ramp/hooks/useRampNavigation');
 jest.mock('../../../../../../util/Logger');
 
@@ -22,6 +23,7 @@ import renderWithProvider from '../../../../../../util/test/renderWithProvider';
 import MusdConversionAssetListCta from '.';
 import { useMusdConversionTokens } from '../../../hooks/useMusdConversionTokens';
 import { useMusdConversion } from '../../../hooks/useMusdConversion';
+import { useMusdCtaVisibility } from '../../../hooks/useMusdCtaVisibility';
 import { useRampNavigation } from '../../../../Ramp/hooks/useRampNavigation';
 import {
   MUSD_CONVERSION_DEFAULT_CHAIN_ID,
@@ -30,6 +32,8 @@ import {
 import { EARN_TEST_IDS } from '../../../constants/testIds';
 import initialRootState from '../../../../../../util/test/initial-root-state';
 import Logger from '../../../../../../util/Logger';
+import { CHAIN_IDS } from '@metamask/transaction-controller';
+import { BADGE_WRAPPER_BADGE_TEST_ID } from '../../../../../../component-library/components/Badges/BadgeWrapper/BadgeWrapper.constants';
 
 const mockToken = {
   address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
@@ -68,6 +72,15 @@ describe('MusdConversionAssetListCta', () => {
       error: null,
       hasSeenConversionEducationScreen: true,
     });
+
+    // Default mock for visibility - show CTA without network icon
+    (
+      useMusdCtaVisibility as jest.MockedFunction<typeof useMusdCtaVisibility>
+    ).mockReturnValue({
+      shouldShowCta: true,
+      showNetworkIcon: false,
+      selectedChainId: null,
+    });
   });
 
   afterEach(() => {
@@ -373,4 +386,152 @@ describe('MusdConversionAssetListCta', () => {
       });
     });
   });
+
+  describe('visibility behavior', () => {
+    beforeEach(() => {
+      (
+        useMusdConversionTokens as jest.MockedFunction<
+          typeof useMusdConversionTokens
+        >
+      ).mockReturnValue({
+        tokens: [],
+        tokenFilter: jest.fn(),
+        isConversionToken: jest.fn(),
+        isMusdSupportedOnChain: jest.fn().mockReturnValue(true),
+        getMusdOutputChainId: jest.fn((chainId) => (chainId ?? '0x1') as Hex),
+      });
+    });
+
+    it('renders null when shouldShowCta is false', () => {
+      (
+        useMusdCtaVisibility as jest.MockedFunction<typeof useMusdCtaVisibility>
+      ).mockReturnValue({
+        shouldShowCta: false,
+        showNetworkIcon: false,
+        selectedChainId: null,
+      });
+
+      const { queryByTestId } = renderWithProvider(
+        <MusdConversionAssetListCta />,
+        { state: initialRootState },
+      );
+
+      expect(
+        queryByTestId(EARN_TEST_IDS.MUSD.ASSET_LIST_CONVERSION_CTA),
+      ).toBeNull();
+    });
+
+    it('renders component when shouldShowCta is true', () => {
+      (
+        useMusdCtaVisibility as jest.MockedFunction<typeof useMusdCtaVisibility>
+      ).mockReturnValue({
+        shouldShowCta: true,
+        showNetworkIcon: false,
+        selectedChainId: null,
+      });
+
+      const { getByTestId } = renderWithProvider(
+        <MusdConversionAssetListCta />,
+        { state: initialRootState },
+      );
+
+      expect(
+        getByTestId(EARN_TEST_IDS.MUSD.ASSET_LIST_CONVERSION_CTA),
+      ).toBeOnTheScreen();
+    });
+  });
+
+  describe('network badge', () => {
+    beforeEach(() => {
+      (
+        useMusdConversionTokens as jest.MockedFunction<
+          typeof useMusdConversionTokens
+        >
+      ).mockReturnValue({
+        tokens: [],
+        tokenFilter: jest.fn(),
+        isConversionToken: jest.fn(),
+        isMusdSupportedOnChain: jest.fn().mockReturnValue(true),
+        getMusdOutputChainId: jest.fn((chainId) => (chainId ?? '0x1') as Hex),
+      });
+    });
+
+    it('renders without network badge when showNetworkIcon is false', () => {
+      (
+        useMusdCtaVisibility as jest.MockedFunction<typeof useMusdCtaVisibility>
+      ).mockReturnValue({
+        shouldShowCta: true,
+        showNetworkIcon: false,
+        selectedChainId: null,
+      });
+
+      const { getByTestId, queryByTestId } = renderWithProvider(
+        <MusdConversionAssetListCta />,
+        { state: initialRootState },
+      );
+
+      expect(
+        getByTestId(EARN_TEST_IDS.MUSD.ASSET_LIST_CONVERSION_CTA),
+      ).toBeOnTheScreen();
+      // Badge wrapper is not rendered when showNetworkIcon is false
+      expect(queryByTestId(BADGE_WRAPPER_BADGE_TEST_ID)).toBeNull();
+    });
+
+    it('renders with network badge when showNetworkIcon is true and mainnet selected', () => {
+      (
+        useMusdCtaVisibility as jest.MockedFunction<typeof useMusdCtaVisibility>
+      ).mockReturnValue({
+        shouldShowCta: true,
+        showNetworkIcon: true,
+        selectedChainId: CHAIN_IDS.MAINNET,
+      });
+
+      const { getByTestId } = renderWithProvider(
+        <MusdConversionAssetListCta />,
+        { state: initialRootState },
+      );
+
+      expect(
+        getByTestId(EARN_TEST_IDS.MUSD.ASSET_LIST_CONVERSION_CTA),
+      ).toBeOnTheScreen();
+    });
+
+    it('renders with network badge when showNetworkIcon is true and Linea selected', () => {
+      (
+        useMusdCtaVisibility as jest.MockedFunction<typeof useMusdCtaVisibility>
+      ).mockReturnValue({
+        shouldShowCta: true,
+        showNetworkIcon: true,
+        selectedChainId: CHAIN_IDS.LINEA_MAINNET,
+      });
+
+      const { getByTestId } = renderWithProvider(
+        <MusdConversionAssetListCta />,
+        { state: initialRootState },
+      );
+
+      expect(
+        getByTestId(EARN_TEST_IDS.MUSD.ASSET_LIST_CONVERSION_CTA),
+      ).toBeOnTheScreen();
+    });
+
+    it('renders with network badge when showNetworkIcon is true and BSC selected', () => {
+      (
+        useMusdCtaVisibility as jest.MockedFunction<typeof useMusdCtaVisibility>
+      ).mockReturnValue({
+        shouldShowCta: true,
+        showNetworkIcon: true,
+        selectedChainId: CHAIN_IDS.BSC,
+      });
+
+      const { getByTestId } = renderWithProvider(
+        <MusdConversionAssetListCta />,
+        { state: initialRootState },
+      );
+
+      expect(
+        getByTestId(EARN_TEST_IDS.MUSD.ASSET_LIST_CONVERSION_CTA),
+      ).toBeOnTheScreen();
+    });
+  });
 });