fix: musd get started page

Author: AxelGes

app/components/UI/Ramp/Deposit/Views/Root/GetStarted/GetStarted.tsx

@@ -11,6 +11,8 @@ import ScreenLayout from '../../../../Aggregator/components/ScreenLayout';
 import { getDepositNavbarOptions } from '../../../../../Navbar';
 import { useStyles } from '../../../../../../../component-library/hooks';
 import getStartedIcon from '../../../assets/deposit-get-started-illustration.png';
+import getStartedIconMUSD from '../../../assets/deposit-get-started-illustration-musd.png';
+import useDepositFeatureFlags from '../../../hooks/useDepositFeatureFlags';
 
 import Button, {
   ButtonSize,
@@ -22,27 +24,43 @@ import Icon, {
   IconSize,
 } from '../../../../../../../component-library/components/Icons/Icon';
 
-const bulletPoints = [
-  {
-    title: strings('deposit.get_started.bullet_1_title'),
-    description: strings('deposit.get_started.bullet_1_description'),
-  },
-  {
-    title: strings('deposit.get_started.bullet_2_title'),
-    description: strings('deposit.get_started.bullet_2_description'),
-  },
-  {
-    title: strings('deposit.get_started.bullet_3_title'),
-    description: strings('deposit.get_started.bullet_3_description'),
-  },
-];
-
 const GetStarted: React.FC = () => {
   const navigation = useNavigation();
 
   const { styles, theme } = useStyles(styleSheet, {});
 
   const { getStarted, setGetStarted } = useDepositSDK();
+  const { metamaskUsdEnabled } = useDepositFeatureFlags();
+
+  const bulletPoints = metamaskUsdEnabled
+    ? [
+        {
+          title: strings('deposit.get_started.bullet_1_title_musd'),
+          description: strings('deposit.get_started.bullet_1_description_musd'),
+        },
+        {
+          title: strings('deposit.get_started.bullet_2_title_musd'),
+          description: strings('deposit.get_started.bullet_2_description_musd'),
+        },
+        {
+          title: strings('deposit.get_started.bullet_3_title_musd'),
+          description: strings('deposit.get_started.bullet_3_description_musd'),
+        },
+      ]
+    : [
+        {
+          title: strings('deposit.get_started.bullet_1_title'),
+          description: strings('deposit.get_started.bullet_1_description'),
+        },
+        {
+          title: strings('deposit.get_started.bullet_2_title'),
+          description: strings('deposit.get_started.bullet_2_description'),
+        },
+        {
+          title: strings('deposit.get_started.bullet_3_title'),
+          description: strings('deposit.get_started.bullet_3_description'),
+        },
+      ];
 
   useEffect(() => {
     navigation.setOptions(
@@ -70,15 +88,19 @@ const GetStarted: React.FC = () => {
           <ScreenLayout.Content>
             <View style={styles.getStartedImageWrapper}>
               <Image
-                source={getStartedIcon}
+                source={
+                  metamaskUsdEnabled ? getStartedIconMUSD : getStartedIcon
+                }
                 style={styles.getStartedImage}
                 resizeMode="contain"
               />
             </View>
           </ScreenLayout.Content>
           <ScreenLayout.Content>
             <Text variant={TextVariant.HeadingLG} style={styles.title}>
-              {strings('deposit.get_started.title')}
+              {metamaskUsdEnabled
+                ? strings('deposit.get_started.title_musd')
+                : strings('deposit.get_started.title')}
             </Text>
             {bulletPoints.map((bulletPoint, index) => (
               <View key={index} style={styles.bulletPointContainer}>

app/components/UI/Ramp/Deposit/assets/deposit-get-started-illustration-musd.png

@@ -613,7 +613,14 @@
       "bullet_2_description": "USDC is designed to stay stable, making it easier to plan, save, and spend.",
       "bullet_3_title": "Faster than banks",
       "bullet_3_description": "Send and receive in minutes, no waiting for bank hours or international delays.",
-      "button": "Get started"
+      "button": "Get started",
+      "title_musd": "Starting is easy with mUSD",
+      "bullet_1_title_musd": "Stable cryptocurrency",
+      "bullet_1_description_musd": "mUSD is a digital dollar that is pegged 1 to 1 with the US dollar.",
+      "bullet_2_title_musd": "Low volatility",
+      "bullet_2_description_musd": "mUSD is designed to stay stable, making it easier to plan, save, and spend.",
+      "bullet_3_title_musd": "Faster than banks",
+      "bullet_3_description_musd": "Send and receive in minutes, no waiting for bank hours or international delays."
     },
     "enter_email": {
       "navbar_title": "Verify your identity",