feat: MUSD-187 mUSD conversion design changes ahead of UAT

app/components/UI/Earn/Views/EarnMusdConversionEducationView/EarnMusdConversionEducationView.styles.ts

@@ -1,14 +1,11 @@
 import { StyleSheet } from 'react-native';
 import type { Theme } from '../../../../../util/theme/models';
 
-export const styleSheet = (params: { theme: Theme }) => {
-  const { theme } = params;
-  const { colors } = theme;
-
-  return StyleSheet.create({
+export const styleSheet = (_params: { theme: Theme }) =>
+  StyleSheet.create({
     container: {
       flex: 1,
-      backgroundColor: theme.brandColors.indigo100,
+      paddingTop: 40,
     },
     imageContainer: {
       flex: 1,
@@ -22,22 +19,22 @@ export const styleSheet = (params: { theme: Theme }) => {
     content: {
       paddingHorizontal: 16,
       alignItems: 'center',
-      paddingVertical: 24,
     },
     heading: {
-      marginBottom: 16,
-      fontFamily: 'MMSans-Regular',
-      color: colors.accent04.dark,
-      fontWeight: 500,
+      fontFamily: 'MMPoly-Regular',
+      fontSize: 40,
+      lineHeight: 40,
+      paddingVertical: 16,
+      textAlign: 'center',
+      textOverflow: 'ellipsis',
     },
     bodyText: {
       textAlign: 'center',
-      color: colors.accent04.dark,
+      paddingHorizontal: 30,
     },
-    continueButton: {
-      alignSelf: 'stretch',
+    buttonsContainer: {
       marginHorizontal: 32,
-      marginBottom: 24,
+      gap: 8,
+      marginBottom: 16,
     },
   });
-};

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

@@ -139,7 +139,10 @@ describe('EarnMusdConversionEducationView', () => {
         getByText(strings('earn.musd_conversion.education.description')),
       ).toBeOnTheScreen();
       expect(
-        getByText(strings('earn.musd_conversion.education.continue_button')),
+        getByText(strings('earn.musd_conversion.education.primary_button')),
+      ).toBeOnTheScreen();
+      expect(
+        getByText(strings('earn.musd_conversion.education.secondary_button')),
       ).toBeOnTheScreen();
     });
   });
@@ -153,7 +156,7 @@ describe('EarnMusdConversionEducationView', () => {
 
       await act(async () => {
         fireEvent.press(
-          getByText(strings('earn.musd_conversion.education.continue_button')),
+          getByText(strings('earn.musd_conversion.education.primary_button')),
         );
       });
 
@@ -183,7 +186,7 @@ describe('EarnMusdConversionEducationView', () => {
 
       await act(async () => {
         fireEvent.press(
-          getByText(strings('earn.musd_conversion.education.continue_button')),
+          getByText(strings('earn.musd_conversion.education.primary_button')),
         );
       });
 
@@ -202,7 +205,7 @@ describe('EarnMusdConversionEducationView', () => {
 
       await act(async () => {
         fireEvent.press(
-          getByText(strings('earn.musd_conversion.education.continue_button')),
+          getByText(strings('earn.musd_conversion.education.primary_button')),
         );
       });
 
@@ -230,7 +233,7 @@ describe('EarnMusdConversionEducationView', () => {
 
       await act(async () => {
         fireEvent.press(
-          getByText(strings('earn.musd_conversion.education.continue_button')),
+          getByText(strings('earn.musd_conversion.education.primary_button')),
         );
       });
 
@@ -258,7 +261,7 @@ describe('EarnMusdConversionEducationView', () => {
 
       await act(async () => {
         fireEvent.press(
-          getByText(strings('earn.musd_conversion.education.continue_button')),
+          getByText(strings('earn.musd_conversion.education.primary_button')),
         );
       });
 
@@ -282,7 +285,7 @@ describe('EarnMusdConversionEducationView', () => {
 
       await act(async () => {
         fireEvent.press(
-          getByText(strings('earn.musd_conversion.education.continue_button')),
+          getByText(strings('earn.musd_conversion.education.primary_button')),
         );
       });
 

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

@@ -1,26 +1,30 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Hex } from '@metamask/utils';
 import { useDispatch } from 'react-redux';
-import { View, Image } from 'react-native';
+import { View, Image, useColorScheme } from 'react-native';
 import { setMusdConversionEducationSeen } from '../../../../../actions/user';
 import Logger from '../../../../../util/Logger';
-import { strings } from '../../../../../../locales/i18n';
 import Text, {
   TextVariant,
 } from '../../../../../component-library/components/Texts/Text';
 import Button, {
   ButtonSize,
   ButtonVariants,
+  ButtonWidthTypes,
 } from '../../../../../component-library/components/Buttons/Button';
 import { useStyles } from '../../../../../component-library/hooks';
 import { styleSheet } from './EarnMusdConversionEducationView.styles';
-import musdEducationBackground from '../../../../../images/musd-education-screen-background-3x.png';
+import musdEducationBackgroundV2Dark from '../../../../../images/musd-conversion-education-screen-v2-dark-3x.png';
+import musdEducationBackgroundV2Light from '../../../../../images/musd-conversion-education-screen-v2-light-3x.png';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useMusdConversion } from '../../hooks/useMusdConversion';
 import { useParams } from '../../../../../util/navigation/navUtils';
-import { useFocusEffect, useNavigation } from '@react-navigation/native';
-import { getCloseOnlyNavbar } from '../../../Navbar';
-import { useTheme } from '../../../../../util/theme';
+import { useNavigation } from '@react-navigation/native';
+import {
+  Button as DesignSystemButton,
+  ButtonVariant as DesignSystemButtonVariant,
+} from '@metamask/design-system-react-native';
+import { strings } from '../../../../../../locales/i18n';
 
 interface EarnMusdConversionEducationViewRouteParams {
   /**
@@ -42,23 +46,24 @@ interface EarnMusdConversionEducationViewRouteParams {
  */
 const EarnMusdConversionEducationView = () => {
   const dispatch = useDispatch();
+
   const { initiateConversion } = useMusdConversion();
+
   const { preferredPaymentToken, outputChainId } =
     useParams<EarnMusdConversionEducationViewRouteParams>();
+
   const { styles } = useStyles(styleSheet, {});
+
   const navigation = useNavigation();
-  const { brandColors, colors } = useTheme();
 
-  useFocusEffect(
-    useCallback(() => {
-      navigation.setOptions(
-        getCloseOnlyNavbar({
-          navigation,
-          themeColors: colors,
-          backgroundColor: brandColors.indigo100,
-        }),
-      );
-    }, [navigation, colors, brandColors.indigo100]),
+  const colorScheme = useColorScheme();
+
+  const backgroundImage = useMemo(
+    () =>
+      colorScheme === 'dark'
+        ? musdEducationBackgroundV2Dark
+        : musdEducationBackgroundV2Light,
+    [colorScheme],
   );
 
   const handleContinue = useCallback(async () => {
@@ -88,36 +93,45 @@ const EarnMusdConversionEducationView = () => {
     }
   }, [dispatch, initiateConversion, outputChainId, preferredPaymentToken]);
 
-  return (
-    <SafeAreaView style={styles.container} edges={['bottom']}>
-      <View style={styles.imageContainer}>
-        <Image
-          source={musdEducationBackground}
-          style={styles.backgroundImage}
-        />
-      </View>
+  const handleGoBack = () => {
+    if (navigation.canGoBack()) {
+      navigation.goBack();
+    }
+  };
 
+  return (
+    // Do not remove the top edge as this screen does not have a navbar set in the route options.
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
       <View style={styles.content}>
-        <Text
-          variant={TextVariant.HeadingLG}
-          style={styles.heading}
-          numberOfLines={1}
-          adjustsFontSizeToFit
-        >
+        <Text style={styles.heading} numberOfLines={3} adjustsFontSizeToFit>
           {strings('earn.musd_conversion.education.heading')}
         </Text>
-
         <Text variant={TextVariant.BodyMD} style={styles.bodyText}>
           {strings('earn.musd_conversion.education.description')}
         </Text>
       </View>
-      <Button
-        variant={ButtonVariants.Primary}
-        label={strings('earn.musd_conversion.education.continue_button')}
-        onPress={handleContinue}
-        size={ButtonSize.Lg}
-        style={styles.continueButton}
-      />
+      <View style={styles.imageContainer}>
+        <Image source={backgroundImage} style={styles.backgroundImage} />
+      </View>
+
+      <View style={styles.buttonsContainer}>
+        <Button
+          variant={ButtonVariants.Primary}
+          label={strings('earn.musd_conversion.education.primary_button')}
+          onPress={handleContinue}
+          size={ButtonSize.Lg}
+          width={ButtonWidthTypes.Full}
+        />
+        <DesignSystemButton
+          variant={DesignSystemButtonVariant.Tertiary}
+          isFullWidth
+          onPress={handleGoBack}
+        >
+          <Text variant={TextVariant.BodyMDMedium}>
+            {strings('earn.musd_conversion.education.secondary_button')}
+          </Text>
+        </DesignSystemButton>
+      </View>
     </SafeAreaView>
   );
 };

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

@@ -8,24 +8,14 @@ jest.mock('../../../hooks/useMusdCtaVisibility');
 jest.mock('../../../../Ramp/hooks/useRampNavigation');
 jest.mock('../../../../../../util/Logger');
 
-jest.mock('../../../../../../../locales/i18n', () => ({
-  strings: (key: string) => {
-    const map: Record<string, string> = {
-      'earn.musd_conversion.buy_musd': 'Buy mUSD',
-      'earn.musd_conversion.get_musd': 'Get mUSD',
-      'earn.musd_conversion.earn_points_daily': 'Earn points daily',
-    };
-    return map[key] ?? key;
-  },
-}));
-
 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_APY,
   MUSD_CONVERSION_DEFAULT_CHAIN_ID,
   MUSD_TOKEN_ASSET_ID_BY_CHAIN,
 } from '../../../constants/musd';
@@ -34,6 +24,7 @@ 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';
+import { strings } from '../../../../../../../locales/i18n';
 
 const mockToken = {
   address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
@@ -137,7 +128,7 @@ describe('MusdConversionAssetListCta', () => {
       expect(getByText('MetaMask USD')).toBeOnTheScreen();
     });
 
-    it('displays earn points daily text', () => {
+    it('displays earn percentage text', () => {
       (
         useMusdConversionTokens as jest.MockedFunction<
           typeof useMusdConversionTokens
@@ -156,7 +147,13 @@ describe('MusdConversionAssetListCta', () => {
         state: initialRootState,
       });
 
-      expect(getByText('Earn points daily')).toBeOnTheScreen();
+      expect(
+        getByText(
+          strings('earn.earn_a_percentage_bonus', {
+            percentage: MUSD_CONVERSION_APY,
+          }),
+        ),
+      ).toBeOnTheScreen();
     });
   });
 

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

@@ -11,6 +11,7 @@ import {
   ButtonVariant,
 } from '@metamask/design-system-react-native';
 import {
+  MUSD_CONVERSION_APY,
   MUSD_CONVERSION_DEFAULT_CHAIN_ID,
   MUSD_TOKEN,
   MUSD_TOKEN_ASSET_ID_BY_CHAIN,
@@ -139,8 +140,10 @@ const MusdConversionAssetListCta = () => {
           <Text variant={TextVariant.BodyMDMedium} color={TextColor.Default}>
             MetaMask USD
           </Text>
-          <Text variant={TextVariant.BodySMMedium} color={TextColor.Success}>
-            {strings('earn.musd_conversion.earn_points_daily')}
+          <Text variant={TextVariant.BodySMMedium} color={TextColor.Primary}>
+            {strings('earn.earn_a_percentage_bonus', {
+              percentage: MUSD_CONVERSION_APY,
+            })}
           </Text>
         </View>
       </View>

app/components/UI/Earn/constants/musd.ts

@@ -40,3 +40,4 @@ export const MUSD_TOKEN_ASSET_ID_BY_CHAIN: Record<Hex, string> = {
 };
 
 export const MUSD_CURRENCY = 'MUSD';
+export const MUSD_CONVERSION_APY = 3;