feat: Updating mUSD conversion copy to reflect annualized bonus and claim timeline cp-7.69.0

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

@@ -57,7 +57,9 @@ describeForPlatforms('EarnMusdConversionEducationView', () => {
       ),
     ).toBeOnTheScreen();
     expect(
-      getByText(/Convert your stablecoins to mUSD.*receive up to a \d+% bonus/),
+      getByText(
+        /Convert your stablecoins to mUSD.*earn up to a \d+% annualized bonus/,
+      ),
     ).toBeOnTheScreen();
     expect(
       getByText(strings('earn.musd_conversion.education.primary_button')),
@@ -389,7 +391,7 @@ describeForPlatforms('EarnMusdConversionEducationView', () => {
 
     // Assert
     const description = getByText(
-      /Convert your stablecoins to mUSD.*receive up to a \d+% bonus/,
+      /Convert your stablecoins to mUSD.*earn up to a \d+% annualized bonus/,
     );
     expect(description).toBeOnTheScreen();
     expect(description.props.children[0]).toContain(`${MUSD_CONVERSION_APY}%`);

app/components/UI/Earn/Views/MusdQuickConvertView/MusdQuickConvertView.test.tsx

@@ -311,7 +311,7 @@ describe('MusdQuickConvertView', () => {
       expect(
         getByText(
           strings('earn.musd_conversion.quick_convert.title', {
-            apy: MUSD_CONVERSION_APY,
+            percentage: MUSD_CONVERSION_APY,
           }),
         ),
       ).toBeOnTheScreen();

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

@@ -258,12 +258,12 @@ const MusdQuickConvertView = () => {
         <View style={styles.headerTextContainer}>
           <Text variant={TextVariant.HeadingLG}>
             {strings('earn.musd_conversion.quick_convert.title', {
-              apy: MUSD_CONVERSION_APY,
+              percentage: MUSD_CONVERSION_APY,
             })}
           </Text>
           <Text variant={TextVariant.BodySM} color={TextColor.Alternative}>
             {strings('earn.musd_conversion.quick_convert.subtitle', {
-              apy: MUSD_CONVERSION_APY,
+              percentage: MUSD_CONVERSION_APY,
             })}{' '}
             <Text
               variant={TextVariant.BodySM}

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

@@ -131,7 +131,7 @@ describe('MusdConversionAssetOverviewCta', () => {
       ).toBeOnTheScreen();
       expect(
         getByText(
-          `Convert your stablecoins to mUSD and receive up to a ${MUSD_CONVERSION_APY}% bonus.`,
+          `Convert your stablecoins to mUSD and get a ${MUSD_CONVERSION_APY}% annualized bonus.`,
         ),
       ).toBeOnTheScreen();
     });

app/components/UI/Earn/components/Musd/MusdConversionAssetOverviewCta/MusdConversionAssetOverviewCta.view.test.tsx

@@ -103,7 +103,7 @@ describeForPlatforms('MusdConversionAssetOverviewCta', () => {
     ).toBeOnTheScreen();
     expect(
       getByText(
-        `Convert your stablecoins to mUSD and receive up to a ${MUSD_CONVERSION_APY}% bonus.`,
+        `Convert your stablecoins to mUSD and get a ${MUSD_CONVERSION_APY}% annualized bonus.`,
       ),
     ).toBeOnTheScreen();
   });
@@ -537,7 +537,7 @@ describeForPlatforms('MusdConversionAssetOverviewCta', () => {
     // Assert
     expect(
       getByText(
-        `Convert your stablecoins to mUSD and receive up to a ${MUSD_CONVERSION_APY}% bonus.`,
+        `Convert your stablecoins to mUSD and get a ${MUSD_CONVERSION_APY}% annualized bonus.`,
       ),
     ).toBeOnTheScreen();
   });

app/components/UI/Earn/hooks/useEarnToasts.test.tsx

@@ -200,7 +200,7 @@ describe('useEarnToasts', () => {
 
       expect(successToast.labelOptions).toBeDefined();
       expect(Array.isArray(successToast.labelOptions)).toBe(true);
-      expect(successToast.labelOptions).toHaveLength(1);
+      expect(successToast.labelOptions).toHaveLength(3);
     });
 
     it('includes labelOptions in failed toast', () => {

app/components/UI/Earn/hooks/useEarnToasts.tsx

@@ -14,7 +14,12 @@ import {
 } from '../../../../component-library/components/Toast/Toast.types';
 import { useAppThemeFromContext } from '../../../../util/theme';
 import { Spinner } from '@metamask/design-system-react-native/dist/components/temp-components/Spinner/index.cjs';
-import { IconSize as ReactNativeDsIconSize } from '@metamask/design-system-react-native';
+import {
+  IconSize as ReactNativeDsIconSize,
+  Text,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react-native';
 
 export type EarnToastOptions = Omit<
   Extract<ToastOptions, { variant: ToastVariants.Icon }>,
@@ -185,6 +190,14 @@ const useEarnToasts = (): {
           ...earnBaseToastOptions.success,
           labelOptions: getEarnToastLabels({
             primary: strings('earn.musd_conversion.toasts.delivered'),
+            secondary: (
+              <Text
+                variant={TextVariant.BodySm}
+                color={TextColor.TextAlternative}
+              >
+                {strings('earn.musd_conversion.toasts.delivered_description')}
+              </Text>
+            ),
           }),
           closeButtonOptions,
         },

app/components/Views/confirmations/components/rows/percentage-row/percentage-row.test.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import renderWithProvider from '../../../../../../util/test/renderWithProvider';
 import { PercentageRow } from './percentage-row';
 import { useIsTransactionPayLoading } from '../../../hooks/pay/useTransactionPayData';
+import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import { strings } from '../../../../../../../locales/i18n';
 import { MUSD_CONVERSION_APY } from '../../../../../UI/Earn/constants/musd';
-import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import { TransactionType } from '@metamask/transaction-controller';
 
 jest.mock('../../../hooks/pay/useTransactionPayData');
@@ -28,7 +28,7 @@ describe('PercentageRow', () => {
     useIsTransactionPayLoadingMock.mockReturnValue(false);
     useTransactionMetadataRequestMock.mockReturnValue({
       type: TransactionType.musdConversion,
-    } as never);
+    } as ReturnType<typeof useTransactionMetadataRequest>);
   });
 
   it('renders label, tooltip and APY when not loading', () => {
@@ -39,33 +39,21 @@ describe('PercentageRow', () => {
     expect(getByText(`${MUSD_CONVERSION_APY}%`)).toBeOnTheScreen();
   });
 
-  it('renders nothing when tx type is not supported', () => {
-    useTransactionMetadataRequestMock.mockReturnValue({
-      type: TransactionType.contractInteraction,
-    } as never);
-
-    const { queryByText, queryByTestId } = render();
-
-    expect(queryByTestId('percentage-row-skeleton')).toBeNull();
-    expect(queryByText(strings('earn.claimable_bonus'))).toBeNull();
-    expect(queryByText(`${MUSD_CONVERSION_APY}%`)).toBeNull();
-  });
-
-  it('renders nothing when transaction metadata is undefined', () => {
-    useTransactionMetadataRequestMock.mockReturnValue(undefined as never);
-
-    const { queryByText, queryByTestId } = render();
-
-    expect(queryByTestId('percentage-row-skeleton')).toBeNull();
-    expect(queryByText(strings('earn.claimable_bonus'))).toBeNull();
-    expect(queryByText(`${MUSD_CONVERSION_APY}%`)).toBeNull();
-  });
-
   it('renders skeleton when transaction pay is loading', () => {
     useIsTransactionPayLoadingMock.mockReturnValue(true);
 
     const { getByTestId } = render();
 
     expect(getByTestId('percentage-row-skeleton')).toBeOnTheScreen();
   });
+
+  it('renders nothing for non-musdConversion transactions', () => {
+    useTransactionMetadataRequestMock.mockReturnValue({
+      type: TransactionType.simpleSend,
+    } as ReturnType<typeof useTransactionMetadataRequest>);
+
+    const { toJSON } = render();
+
+    expect(toJSON()).toBeNull();
+  });
 });

app/components/Views/confirmations/components/rows/percentage-row/percentage-row.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleSheet, Linking } from 'react-native';
 import InfoRow from '../../UI/info-row';
 import { MUSD_CONVERSION_APY } from '../../../../../UI/Earn/constants/musd';
 import Text, {
@@ -8,45 +9,47 @@
 import { useIsTransactionPayLoading } from '../../../hooks/pay/useTransactionPayData';
 import { InfoRowSkeleton } from '../../UI/info-row/info-row';
 import { strings } from '../../../../../../../locales/i18n';
+import { IconColor } from '../../../../../../component-library/components/Icons/Icon';
+import AppConstants from '../../../../../../core/AppConstants';
 import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import { TransactionType } from '@metamask/transaction-controller';
-import { IconColor } from '../../../../../../component-library/components/Icons/Icon';
+import { hasTransactionType } from '../../../utils/transaction';
 
-function getTxTypeRowConfig(
-  transactionType?: TransactionType,
-): { label: string; tooltip: string } | undefined {
-  if (transactionType === TransactionType.musdConversion) {
-    return {
-      label: strings('earn.claimable_bonus'),
-      tooltip: strings('earn.claimable_bonus_tooltip'),
-    };
-  }
-
-  return undefined;
-}
+const styles = StyleSheet.create({
+  termsText: {
+    textDecorationLine: 'underline',
+  },
+});
 
 export function PercentageRow() {
-  const transactionMetadata = useTransactionMetadataRequest();
-
   const isLoading = useIsTransactionPayLoading();
 
-  const transactionType = transactionMetadata?.type;
-  const rowConfig = getTxTypeRowConfig(transactionType);
+  const transactionMetadata = useTransactionMetadataRequest();
 
-  if (!rowConfig) {
+  if (
+    !hasTransactionType(transactionMetadata, [TransactionType.musdConversion])
+  ) {
     return null;
   }
 
+  const redirectToBonusFaq = () =>
+    Linking.openURL(AppConstants.URLS.MUSD_CONVERSION_BONUS_TERMS_OF_USE);
+
   if (isLoading) {
     return <InfoRowSkeleton testId="percentage-row-skeleton" />;
   }
 
-  const { label, tooltip } = rowConfig;
-
   return (
     <InfoRow
-      label={label}
-      tooltip={tooltip}
+      label={strings('earn.claimable_bonus')}
+      tooltip={
+        <Text>
+          {strings('earn.claimable_bonus_tooltip')}{' '}
+          <Text style={styles.termsText} onPress={redirectToBonusFaq}>
+            {strings('earn.musd_conversion.education.terms_apply')}
+          </Text>
+        </Text>
+      }
       tooltipColor={IconColor.Alternative}
     >
       <Text variant={TextVariant.BodyMD} color={TextColor.Success}>

locales/languages/en.json

@@ -5915,7 +5915,7 @@
     "error_description": "Installation of {{snap}} failed."
   },
   "earn": {
-    "claimable_bonus_tooltip": "An annual bonus claimable daily from your wallet.",
+    "claimable_bonus_tooltip": "The annualized bonus you’ve earned for holding mUSD. Your bonus is claimable daily on Linea.",
     "earn_a_percentage_bonus": "Earn a {{percentage}}% bonus",
     "claimable_bonus": "Claimable bonus",
     "claim_bonus": "Claim bonus",
@@ -6023,30 +6023,30 @@
       "toasts": {
         "converting": "Converting {{token}} → mUSD",
         "eta": "~{{time}}",
-        "delivered": "Your mUSD is here!",
+        "delivered": "mUSD conversion successful",
+        "delivered_description": "Bonus will be claimable within a day.",
         "failed": "mUSD conversion failed"
       },
       "education": {
         "heading": "GET {{percentage}}% ON\nSTABLECOINS",
-        "description": "Convert your stablecoins to mUSD, MetaMask’s US dollar-backed stablecoin, and receive up to a {{percentage}}% bonus.",
+        "description": "Convert your stablecoins to mUSD and earn up to a {{percentage}}% annualized bonus that you can claim daily.",
         "terms_apply": "Terms apply.",
         "primary_button": "Get Started",
         "secondary_button": "Not now"
       },
       "buy_musd": "Buy mUSD",
       "get_musd": "Get mUSD",
       "bonus_title": "Get {{percentage}}% on your stablecoins",
-      "bonus_description": "Convert your stablecoins to mUSD and receive up to a {{percentage}}% bonus.",
+      "bonus_description": "Convert your stablecoins to mUSD and get a {{percentage}}% annualized bonus.",
       "powered_by_relay": "Powered by Relay",
       "max": "Max",
       "quick_convert_button": "Convert",
-      "cta_body_earn_apy": "Earn {{apy}} yield automatically for holding mUSD.",
       "learn_more": "Learn more",
       "tooltip_title": "Earn yield with mUSD",
       "tooltip_content": "Convert your USDC, USDT, or DAI for mUSD, MetaMask's dollar-backed stablecoin. Earn {{apy}} yield on every dollar you hold.",
       "quick_convert": {
-        "title": "Convert and get {{apy}}%",
-        "subtitle": "Convert your stablecoins to mUSD and receive up to a {{apy}}% bonus.",
+        "title": "Convert and get {{percentage}}%",
+        "subtitle": "Convert your stablecoins to mUSD and receive up to a {{percentage}}% annualized bonus that you can claim daily.",
         "inline_failed_message": "Conversion failed. Try again.",
         "confirmation": {
           "title": "Convert max"