fix: PPOM - What's New copy text refers to OpenSea previous feature - non existing in Mobile

app/components/UI/WhatsNewModal/WhatsNewModal.tsx

@@ -2,16 +2,13 @@ import React, { useCallback, useRef, useState } from 'react';
 import {
   StyleSheet,
   View,
-  Text,
   TouchableOpacity,
   Image,
   TouchableWithoutFeedback,
   NativeSyntheticEvent,
   NativeScrollEvent,
   Platform,
 } from 'react-native';
-import { fontStyles } from '../../../styles/common';
-import Icon from 'react-native-vector-icons/FontAwesome';
 import { strings } from '../../../../locales/i18n';
 import Device from '../../../util/device';
 import AsyncStorage from '../../../store/async-storage-wrapper';
@@ -21,6 +18,15 @@ import {
 } from '../../../constants/storage';
 import StyledButton from '../StyledButton';
 import { useTheme } from '../../../util/theme';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../component-library/components/Texts/Text';
+import Icon, {
+  IconColor,
+  IconName,
+  IconSize,
+} from '../../../component-library/components/Icons/Icon';
 import ReusableModal, { ReusableModalRef } from '../ReusableModal';
 import { whatsNewList } from './';
 import { Colors } from '../../../util/theme/models';
@@ -77,18 +83,10 @@ const createStyles = (colors: Colors) =>
       marginBottom: 20,
       paddingHorizontal: modalPadding,
     },
-    headerCenterAux: {
-      flex: 1,
-    },
     headerClose: {
       flex: 1,
       alignItems: 'flex-end',
     },
-    headerText: {
-      ...fontStyles.bold,
-      fontSize: 18,
-      color: colors.text.default,
-    },
     slideImageContainer: {
       flexDirection: 'row',
       borderRadius: 10,
@@ -101,16 +99,10 @@ const createStyles = (colors: Colors) =>
       height: slideImageHeight,
     },
     slideTitle: {
-      ...fontStyles.bold,
-      fontSize: 16,
       marginBottom: 12,
-      color: colors.text.default,
     },
     slideDescription: {
-      ...fontStyles.normal,
-      fontSize: 14,
       lineHeight: 20,
-      color: colors.text.default,
       marginBottom: 24,
     },
     screen: { justifyContent: 'center', alignItems: 'center' },
@@ -151,10 +143,24 @@ const WhatsNewModal = () => {
   const renderSlideElement = (elementInfo: any) => {
     switch (elementInfo.type) {
       case 'title':
-        return <Text style={styles.slideTitle}>{elementInfo.title}</Text>;
+        return (
+          <Text
+            color={TextColor.Default}
+            variant={TextVariant.BodyLGMedium}
+            style={styles.slideTitle}
+          >
+            {elementInfo.title}
+          </Text>
+        );
       case 'description':
         return (
-          <Text style={styles.slideDescription}>{elementInfo.description}</Text>
+          <Text
+            color={TextColor.Default}
+            variant={TextVariant.HeadingSMRegular}
+            style={styles.slideDescription}
+          >
+            {elementInfo.description}
+          </Text>
         );
       case 'image':
         return (
@@ -208,15 +214,20 @@ const WhatsNewModal = () => {
 
   const renderHeader = () => (
     <View style={styles.header}>
-      <View style={styles.headerCenterAux} />
-      <Text style={styles.headerText}>{strings('whats_new.title')}</Text>
+      <Text color={TextColor.Default} variant={TextVariant.HeadingMD}>
+        {strings('whats_new.title')}
+      </Text>
       <View style={styles.headerClose}>
         <TouchableOpacity
           onPress={() => dismissModal()}
           hitSlop={{ top: 10, left: 10, bottom: 10, right: 10 }}
           {...generateTestId(Platform, WhatsNewModalSelectorsIDs.CLOSE_BUTTON)}
         >
-          <Icon name="times" size={16} color={colors.icon.default} />
+          <Icon
+            name={IconName.Close}
+            size={IconSize.Md}
+            color={IconColor.Default}
+          />
         </TouchableOpacity>
       </View>
     </View>

app/components/UI/WhatsNewModal/whatsNewList.ts

@@ -19,25 +19,21 @@ export const whatsNew: WhatsNew = {
   slides: isBlockaidFeatureEnabled()
     ? [
         [
-          {
-            type: 'image',
-            image: require('../../../images/whats_new_blockaid.png'),
-          },
           {
             type: 'title',
             title: strings('whats_new.blockaid.title'),
           },
           {
-            type: 'description',
-            description: strings('whats_new.blockaid.description_1'),
+            type: 'image',
+            image: require('../../../images/whats_new_blockaid.png'),
           },
           {
             type: 'description',
-            description: strings('whats_new.blockaid.description_2'),
+            description: strings('whats_new.blockaid.description_1'),
           },
           {
             type: 'description',
-            description: strings('whats_new.blockaid.description_3'),
+            description: strings('whats_new.blockaid.description_2'),
           },
           {
             type: 'button',

locales/languages/en.json

@@ -2207,12 +2207,11 @@
     "ok": "OK"
   },
   "whats_new": {
-    "title": "See what's new",
+    "title": "What's new",
     "blockaid": {
       "title": "Stay safe with security alerts",
-      "description_1": "Steer clear of known scams while still preserving your privacy with security alerts powered by Blockaid.",
+      "description_1": "Steer clear of known scams while still preserving your privacy with security alerts powered by Blockaid on Ethereum Mainnet.",
       "description_2": "Always do your own due diligence before approving requests.",
-      "description_3": "If you enabled security alerts from OpenSea, we've moved you over to this feature.",
       "action_text": "Enable security alerts"
     }
   },