fix: PPOM - What's New copy text refers to OpenSea previous feature -…

… non existing in Mobile (#7797)

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR updates the copy we show on the What's New modal for Blockaid.
The new copy should mirror the image below. See
[comment](#7782 (comment))
for ref.

<img width="506" alt="Screenshot 2023-11-13 at 13 49 17"
src="https://github.com/MetaMask/metamask-mobile/assets/29962968/11eab3c7-9449-4043-9b16-51ce94a8758d">



## **Related issues**

Fixes: #7782 

## **Manual testing steps**

1. Include blockaid in .env
2. Start app

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

![Screenshot from 2023-11-13
17-40-26](https://github.com/MetaMask/metamask-mobile/assets/54408225/fb9f1014-7af8-41f3-a667-9edc661a4aba)

### **After**

<img width="440" alt="Screenshot 2023-11-15 at 09 50 20"
src="https://github.com/MetaMask/metamask-mobile/assets/29962968/fbd1649c-b4bd-4575-9c1b-ed97693358db">


## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [x] I've linked related issues
- [x] I've included manual testing steps
- [x] I've included screenshots/recordings if applicable
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [x] I’ve properly set the pull request status:
  - [x] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

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"
     }
   },