chore: merge main resolve conflict

Author: nickewansmith

app/actions/user/index.ts

@@ -26,6 +26,7 @@ import {
   type SetIsConnectionRemovedAction,
   type SetMultichainAccountsIntroModalSeenAction,
   type SetMusdConversionEducationSeenAction,
+  type SetMusdConversionAssetDetailCtaSeenAction,
   UserActionType,
 } from './types';
 
@@ -226,3 +227,12 @@ export function setMusdConversionEducationSeen(
     payload: { seen },
   };
 }
+
+export function setMusdConversionAssetDetailCtaSeen(
+  key: string,
+): SetMusdConversionAssetDetailCtaSeenAction {
+  return {
+    type: UserActionType.SET_MUSD_CONVERSION_ASSET_DETAIL_CTA_SEEN,
+    payload: { key },
+  };
+}

app/actions/user/types.ts

@@ -29,6 +29,7 @@ export enum UserActionType {
   SET_IS_CONNECTION_REMOVED = 'SET_IS_CONNECTION_REMOVED',
   SET_MULTICHAIN_ACCOUNTS_INTRO_MODAL_SEEN = 'SET_MULTICHAIN_ACCOUNTS_INTRO_MODAL_SEEN',
   SET_MUSD_CONVERSION_EDUCATION_SEEN = 'SET_MUSD_CONVERSION_EDUCATION_SEEN',
+  SET_MUSD_CONVERSION_ASSET_DETAIL_CTA_SEEN = 'SET_MUSD_CONVERSION_ASSET_DETAIL_CTA_SEEN',
 }
 
 // User actions
@@ -115,6 +116,11 @@ export type SetMusdConversionEducationSeenAction =
     payload: { seen: boolean };
   };
 
+export type SetMusdConversionAssetDetailCtaSeenAction =
+  Action<UserActionType.SET_MUSD_CONVERSION_ASSET_DETAIL_CTA_SEEN> & {
+    payload: { key: string };
+  };
+
 /**
  * User actions union type
  */
@@ -144,4 +150,5 @@ export type UserAction =
   | SetExistingUserAction
   | SetIsConnectionRemovedAction
   | SetMultichainAccountsIntroModalSeenAction
-  | SetMusdConversionEducationSeenAction;
+  | SetMusdConversionEducationSeenAction
+  | SetMusdConversionAssetDetailCtaSeenAction;

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -112,6 +112,8 @@ import DSText, {
 } from '../../../component-library/components/Texts/Text';
 import { getTokenExchangeRate } from '../Bridge/utils/exchange-rates';
 import { isNonEvmChainId } from '../../../core/Multichain/utils';
+import MerklRewards from '../Earn/components/MerklRewards';
+import { selectMerklCampaignClaimingEnabledFlag } from '../Earn/selectors/featureFlags';
 ///: BEGIN:ONLY_INCLUDE_IF(tron)
 import {
   selectTronResourcesBySelectedAccountGroup,
@@ -217,6 +219,9 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
   const allTokenMarketData = useSelector(selectTokenMarketData);
   const selectedChainId = useSelector(selectEvmChainId);
   const isPerpsEnabled = useSelector(selectPerpsEnabledFlag);
+  const isMerklCampaignClaimingEnabled = useSelector(
+    selectMerklCampaignClaimingEnabledFlag,
+  );
   const { navigateToSendPage } = useSendNavigation();
 
   const nativeCurrency = useSelector((state: RootState) =>
@@ -826,6 +831,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
             )
             ///: END:ONLY_INCLUDE_IF
           }
+          {isMerklCampaignClaimingEnabled && <MerklRewards asset={asset} />}
           {isPerpsEnabled && hasPerpsMarket && marketData && (
             <>
               <View style={styles.perpsPositionHeader}>

app/components/UI/Earn/Views/EarnMusdConversionEducationView/index.test.tsx

@@ -13,6 +13,7 @@ import renderWithProvider from '../../../../../util/test/renderWithProvider';
 import { strings } from '../../../../../../locales/i18n';
 import { useMusdConversion } from '../../hooks/useMusdConversion';
 import { useParams } from '../../../../../util/navigation/navUtils';
+import { MUSD_CONVERSION_APY } from '../../constants/musd';
 
 const FIXED_NOW_MS = 1730000000000;
 const mockTrackEvent = jest.fn();
@@ -160,10 +161,18 @@ describe('EarnMusdConversionEducationView', () => {
       );
 
       expect(
-        getByText(strings('earn.musd_conversion.education.heading')),
+        getByText(
+          strings('earn.musd_conversion.education.heading', {
+            percentage: MUSD_CONVERSION_APY,
+          }),
+        ),
       ).toBeOnTheScreen();
       expect(
-        getByText(strings('earn.musd_conversion.education.description')),
+        getByText(
+          strings('earn.musd_conversion.education.description', {
+            percentage: MUSD_CONVERSION_APY,
+          }),
+        ),
       ).toBeOnTheScreen();
       expect(
         getByText(strings('earn.musd_conversion.education.primary_button')),

app/components/UI/Earn/Views/EarnMusdConversionEducationView/index.tsx

@@ -27,6 +27,7 @@ import {
 import { strings } from '../../../../../../locales/i18n';
 import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
 import { MUSD_EVENTS_CONSTANTS } from '../../constants/events';
+import { MUSD_CONVERSION_APY } from '../../constants/musd';
 interface EarnMusdConversionEducationViewRouteParams {
   /**
    * The payment token to preselect in the confirmation screen
@@ -180,10 +181,14 @@ const EarnMusdConversionEducationView = () => {
     <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
       <View style={styles.content}>
         <Text style={styles.heading} numberOfLines={3} adjustsFontSizeToFit>
-          {strings('earn.musd_conversion.education.heading')}
+          {strings('earn.musd_conversion.education.heading', {
+            percentage: MUSD_CONVERSION_APY,
+          })}
         </Text>
         <Text variant={TextVariant.BodyMD} style={styles.bodyText}>
-          {strings('earn.musd_conversion.education.description')}
+          {strings('earn.musd_conversion.education.description', {
+            percentage: MUSD_CONVERSION_APY,
+          })}
         </Text>
       </View>
       <View style={styles.imageContainer}>

app/components/UI/Earn/components/EarnLendingBalance/EarnLendingBalance.test.tsx

@@ -737,6 +737,54 @@ describe('EarnLendingBalance', () => {
     expect(queryByTestId(EARN_EMPTY_STATE_CTA_TEST_ID)).toBeNull();
   });
 
+  it('updates user state when close button is pressed on mUSD CTA', async () => {
+    (
+      selectStablecoinLendingEnabledFlag as jest.MockedFunction<
+        typeof selectStablecoinLendingEnabledFlag
+      >
+    ).mockReturnValue(false);
+
+    (
+      selectIsMusdConversionFlowEnabledFlag as jest.MockedFunction<
+        typeof selectIsMusdConversionFlowEnabledFlag
+      >
+    ).mockReturnValue(true);
+
+    (
+      useMusdConversionTokens as jest.MockedFunction<
+        typeof useMusdConversionTokens
+      >
+    ).mockReturnValue({
+      isConversionToken: jest.fn().mockReturnValue(true),
+      filterAllowedTokens: jest.fn().mockReturnValue([]),
+      isMusdSupportedOnChain: jest.fn().mockReturnValue(true),
+      getMusdOutputChainId: jest.fn().mockReturnValue('0x1'),
+      tokens: [],
+    });
+
+    mockShouldShowAssetOverviewCta.mockReturnValue(true);
+
+    const { getByTestId, store } = renderWithProvider(
+      <EarnLendingBalance asset={mockDaiMainnet} />,
+      { state: mockInitialState },
+    );
+
+    const closeButton = getByTestId(
+      EARN_TEST_IDS.MUSD.ASSET_OVERVIEW_CONVERSION_CTA_CLOSE_BUTTON,
+    );
+
+    await act(async () => {
+      fireEvent.press(closeButton);
+    });
+
+    const expectedCtaKey = '0x1-0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48';
+    const updatedState = store.getState();
+
+    expect(
+      updatedState.user.musdConversionAssetDetailCtasSeen[expectedCtaKey],
+    ).toBe(true);
+  });
+
   it('hides mUSD conversion CTA when user is geo-blocked', () => {
     const mockEmptyReceiptToken = {
       ...mockADAIMainnet,
@@ -754,18 +802,6 @@ describe('EarnLendingBalance', () => {
       earnToken: mockDaiMainnet,
     });
 
-    (
-      selectStablecoinLendingEnabledFlag as jest.MockedFunction<
-        typeof selectStablecoinLendingEnabledFlag
-      >
-    ).mockReturnValue(false);
-
-    (
-      selectIsMusdConversionFlowEnabledFlag as jest.MockedFunction<
-        typeof selectIsMusdConversionFlowEnabledFlag
-      >
-    ).mockReturnValue(true);
-
     // Geo-blocked: shouldShowAssetOverviewCta returns false
     mockShouldShowAssetOverviewCta.mockReturnValue(false);
 
@@ -816,7 +852,6 @@ describe('EarnLendingBalance', () => {
       <EarnLendingBalance asset={mockDaiMainnet} />,
       { state: mockInitialState },
     );
-
     // mUSD CTA visible because geo-eligible (useMusdCtaVisibility returns true)
     expect(
       getByTestId(EARN_TEST_IDS.MUSD.ASSET_OVERVIEW_CONVERSION_CTA),

app/components/UI/Earn/components/EarnLendingBalance/index.tsx

@@ -1,9 +1,9 @@
-import { Hex } from '@metamask/utils';
+import { Hex, add0x } from '@metamask/utils';
 import { useNavigation } from '@react-navigation/native';
 import BigNumber from 'bignumber.js';
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { View } from 'react-native';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { strings } from '../../../../../../locales/i18n';
 import PercentageChange from '../../../../../component-library/components-temp/Price/PercentageChange';
 import { AvatarSize } from '../../../../../component-library/components/Avatars/Avatar';
@@ -34,6 +34,8 @@ import { useTokenPricePercentageChange } from '../../../Tokens/hooks/useTokenPri
 import { TokenI } from '../../../Tokens/types';
 import { EARN_EXPERIENCES } from '../../constants/experiences';
 import { selectStablecoinLendingEnabledFlag } from '../../selectors/featureFlags';
+import { setMusdConversionAssetDetailCtaSeen } from '../../../../../actions/user';
+import { toHexadecimal } from '../../../../../util/number';
 import Earnings from '../Earnings';
 import EarnEmptyStateCta from '../EmptyStateCta';
 import styleSheet from './EarnLendingBalance.styles';
@@ -56,6 +58,7 @@ export interface EarnLendingBalanceProps {
 const { selectEarnTokenPair, selectEarnOutputToken } = earnSelectors;
 const EarnLendingBalance = ({ asset }: EarnLendingBalanceProps) => {
   const { shouldShowAssetOverviewCta } = useMusdCtaVisibility();
+  const dispatch = useDispatch();
 
   const { trackEvent, createEventBuilder } = useMetrics();
 
@@ -171,9 +174,18 @@ const EarnLendingBalance = ({ asset }: EarnLendingBalanceProps) => {
     }
   };
 
+  const handleMusdConversionAssetDetailCtaSeen = useCallback(() => {
+    if (!asset?.address || !asset?.chainId) return;
+    const ctaKey = `${add0x(toHexadecimal(asset.chainId))}-${asset.address.toLowerCase()}`;
+    dispatch(setMusdConversionAssetDetailCtaSeen(ctaKey));
+  }, [asset?.address, asset?.chainId, dispatch]);
+
   const renderMusdConversionCta = () => (
     <View style={styles.musdConversionCta}>
-      <MusdConversionAssetOverviewCta asset={asset} />
+      <MusdConversionAssetOverviewCta
+        asset={asset}
+        onDismiss={handleMusdConversionAssetDetailCtaSeen}
+      />
     </View>
   );