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

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

@@ -8,17 +8,6 @@ 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';
@@ -137,7 +126,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 +145,7 @@ describe('MusdConversionAssetListCta', () => {
         state: initialRootState,
       });
 
-      expect(getByText('Earn points daily')).toBeOnTheScreen();
+      expect(getByText('Earn 2%')).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_percentage', {
+              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 = 2;

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

@@ -99,8 +99,6 @@ describe('useEarnToasts', () => {
       const testConfig =
         result.current.EarnToastOptions.mUsdConversion.inProgress({
           tokenSymbol: 'ETH',
-          tokenIcon: 'https://example.com/eth.png',
-          estimatedTimeSeconds: 15,
         });
 
       result.current.showToast(testConfig);
@@ -145,14 +143,10 @@ describe('useEarnToasts', () => {
       const inProgressToast =
         result.current.EarnToastOptions.mUsdConversion.inProgress({
           tokenSymbol: 'ETH',
-          tokenIcon: 'https://example.com/eth.png',
-          estimatedTimeSeconds: 15,
         });
 
       expect(inProgressToast.variant).toBe(ToastVariants.Icon);
       expect(inProgressToast.iconName).toBe(IconName.Loading);
-      expect(inProgressToast.iconColor).toBeDefined();
-      expect(inProgressToast.backgroundColor).toBeDefined();
       expect(inProgressToast.hapticsType).toBe(
         NotificationFeedbackType.Warning,
       );
@@ -178,8 +172,6 @@ describe('useEarnToasts', () => {
       const inProgressToast =
         result.current.EarnToastOptions.mUsdConversion.inProgress({
           tokenSymbol: 'ETH',
-          tokenIcon: 'https://example.com/eth.png',
-          estimatedTimeSeconds: 15,
         });
 
       expect(inProgressToast.startAccessory).toBeDefined();
@@ -193,8 +185,6 @@ describe('useEarnToasts', () => {
       const inProgressToast =
         result.current.EarnToastOptions.mUsdConversion.inProgress({
           tokenSymbol: 'ETH',
-          tokenIcon: 'https://example.com/eth.png',
-          estimatedTimeSeconds: 15,
         });
 
       expect(inProgressToast.labelOptions).toBeDefined();
@@ -231,8 +221,6 @@ describe('useEarnToasts', () => {
       const inProgressToast =
         result.current.EarnToastOptions.mUsdConversion.inProgress({
           tokenSymbol: 'ETH',
-          tokenIcon: 'https://example.com/eth.png',
-          estimatedTimeSeconds: 15,
         });
 
       expect(inProgressToast.closeButtonOptions).toBeDefined();
@@ -303,7 +291,6 @@ describe('useEarnToasts', () => {
       const inProgressToast =
         result.current.EarnToastOptions.mUsdConversion.inProgress({
           tokenSymbol: 'USDC',
-          estimatedTimeSeconds: 30,
         });
 
       expect(inProgressToast.variant).toBe(ToastVariants.Icon);
@@ -316,7 +303,6 @@ describe('useEarnToasts', () => {
       const inProgressToast =
         result.current.EarnToastOptions.mUsdConversion.inProgress({
           tokenSymbol: 'DAI',
-          tokenIcon: 'https://example.com/dai.png',
         });
 
       expect(inProgressToast.variant).toBe(ToastVariants.Icon);
@@ -355,30 +341,6 @@ describe('useEarnToasts', () => {
       expect(failedToast.iconColor).toBeDefined();
       expect(typeof failedToast.iconColor).toBe('string');
     });
-
-    it('sets iconColor on inProgress toast', () => {
-      const { result } = renderHook(() => useEarnToasts(), { wrapper });
-
-      const inProgressToast =
-        result.current.EarnToastOptions.mUsdConversion.inProgress({
-          tokenSymbol: 'ETH',
-        });
-
-      expect(inProgressToast.iconColor).toBeDefined();
-      expect(typeof inProgressToast.iconColor).toBe('string');
-    });
-
-    it('sets backgroundColor on inProgress toast', () => {
-      const { result } = renderHook(() => useEarnToasts(), { wrapper });
-
-      const inProgressToast =
-        result.current.EarnToastOptions.mUsdConversion.inProgress({
-          tokenSymbol: 'ETH',
-        });
-
-      expect(inProgressToast.backgroundColor).toBeDefined();
-      expect(typeof inProgressToast.backgroundColor).toBe('string');
-    });
   });
 
   describe('haptics types', () => {

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

@@ -13,7 +13,8 @@ import {
   ToastVariants,
 } from '../../../../component-library/components/Toast/Toast.types';
 import { useAppThemeFromContext } from '../../../../util/theme';
-import { TokenIconWithSpinner } from '../components/TokenIconWithSpinner';
+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';
 
 export type EarnToastOptions = Omit<
   Extract<ToastOptions, { variant: ToastVariants.Icon }>,
@@ -29,8 +30,6 @@ export type EarnToastOptions = Omit<
 
 export interface MusdConversionInProgressParams {
   tokenSymbol: string;
-  tokenIcon?: string;
-  estimatedTimeSeconds?: number;
 }
 
 export interface EarnToastOptionsConfig {
@@ -50,7 +49,7 @@ interface EarnToastLabelOptions {
 const getEarnToastLabels = ({
   primary,
   secondary,
-  primaryIsBold = true,
+  primaryIsBold = false,
 }: EarnToastLabelOptions) => {
   const labels = [
     {
@@ -75,28 +74,8 @@ const getEarnToastLabels = ({
   return labels;
 };
 
-const formatEstimatedTime = (seconds?: number): string => {
-  if (!seconds || seconds <= 0) {
-    return strings('earn.musd_conversion.toasts.eta', { time: '< 1 minute' });
-  }
-
-  if (seconds < 60) {
-    const secondText = seconds === 1 ? 'second' : 'seconds';
-    return strings('earn.musd_conversion.toasts.eta', {
-      time: `${seconds} ${secondText}`,
-    });
-  }
-
-  const minutes = Math.ceil(seconds / 60);
-  const minuteText = minutes === 1 ? 'minute' : 'minutes';
-  return strings('earn.musd_conversion.toasts.eta', {
-    time: `${minutes} ${minuteText}`,
-  });
-};
-
 const EARN_TOASTS_DEFAULT_OPTIONS: Partial<EarnToastOptions> = {
   hasNoTimeout: false,
-  customBottomOffset: 32,
 };
 
 const toastStyles = StyleSheet.create({
@@ -138,11 +117,23 @@ const useEarnToasts = (): {
             <Icon
               name={IconName.Confirmation}
               color={theme.colors.success.default}
-              size={IconSize.Xl}
+              size={IconSize.Lg}
             />
           </View>
         ),
       },
+      inProgress: {
+        ...(EARN_TOASTS_DEFAULT_OPTIONS as EarnToastOptions),
+        variant: ToastVariants.Icon,
+        iconName: IconName.Loading,
+        hapticsType: NotificationFeedbackType.Warning,
+        hasNoTimeout: true,
+        startAccessory: (
+          <View style={toastStyles.iconWrapper}>
+            <Spinner spinnerIconProps={{ size: ReactNativeDsIconSize.Lg }} />
+          </View>
+        ),
+      },
       error: {
         ...(EARN_TOASTS_DEFAULT_OPTIONS as EarnToastOptions),
         variant: ToastVariants.Icon,
@@ -176,32 +167,13 @@ const useEarnToasts = (): {
   const EarnToastOptions: EarnToastOptionsConfig = useMemo(
     () => ({
       mUsdConversion: {
-        inProgress: ({
-          tokenSymbol,
-          tokenIcon,
-          estimatedTimeSeconds,
-        }: MusdConversionInProgressParams) => ({
-          ...(EARN_TOASTS_DEFAULT_OPTIONS as EarnToastOptions),
-          variant: ToastVariants.Icon,
-          iconName: IconName.Loading,
-          iconColor: theme.colors.icon.default,
-          backgroundColor: theme.colors.background.default,
-          hapticsType: NotificationFeedbackType.Warning,
-          hasNoTimeout: true,
-          startAccessory: (
-            <TokenIconWithSpinner
-              tokenSymbol={tokenSymbol}
-              tokenIcon={tokenIcon}
-            />
-          ),
+        inProgress: ({ tokenSymbol }: MusdConversionInProgressParams) => ({
+          ...earnBaseToastOptions.inProgress,
           labelOptions: getEarnToastLabels({
             primary: strings('earn.musd_conversion.toasts.converting', {
               token: tokenSymbol,
             }),
           }),
-          descriptionOptions: {
-            description: formatEstimatedTime(estimatedTimeSeconds),
-          },
           closeButtonOptions,
         }),
         success: {
@@ -223,9 +195,8 @@ const useEarnToasts = (): {
     [
       closeButtonOptions,
       earnBaseToastOptions.error,
+      earnBaseToastOptions.inProgress,
       earnBaseToastOptions.success,
-      theme.colors.background.default,
-      theme.colors.icon.default,
     ],
   );