Adding "What's New" notification for Ledger Support Update (#11188)

* Adding "What's New" notification for Ledger Support Update

* Using Typography component

app/_locales/en/messages.json

@@ -1295,6 +1295,22 @@
     "message": "Your \"Seed Phrase\" is now called your \"Secret Recovery Phrase.\"",
     "description": "Description of a notification in the 'See What's New' popup. Describes the seed phrase wording update."
   },
+  "notifications6DescriptionOne": {
+    "message": "As of Chrome version 91, the API that enabled our Ledger support (U2F) no longer supports hardware wallets. MetaMask has implemented a new Ledger Live support that allows you to continue to connect to your Ledger device via the Ledger Live desktop app.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionThree": {
+    "message": "When interacting with your Ledger account in MetaMask, a new tab will open and you will be asked to open the Ledger Live app.  Once the app opens, you'll be asked to allow a WebSocket connection to your MetaMask account.  That's all!",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6DescriptionTwo": {
+    "message": "You can enable Ledger Live support by clicking Settings > Advanced > Use Ledger Live.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
+  },
+  "notifications6Title": {
+    "message": "Ledger Support Update for Chrome Users",
+    "description": "Title for a notification in the 'See What's New' popup. Lets users know about the Ledger support update"
+  },
   "ofTextNofM": {
     "message": "of"
   },

shared/notifications/index.js

@@ -26,6 +26,10 @@ export const UI_NOTIFICATIONS = {
     id: 5,
     date: '2021-05-18',
   },
+  6: {
+    id: 6,
+    date: '2021-05-26',
+  },
 };
 
 export const getTranslatedUINoficiations = (t, locale) => {
@@ -66,5 +70,17 @@ export const getTranslatedUINoficiations = (t, locale) => {
         new Date(UI_NOTIFICATIONS[5].date),
       ),
     },
+    6: {
+      ...UI_NOTIFICATIONS[6],
+      title: t('notifications6Title'),
+      description: [
+        t('notifications6DescriptionOne'),
+        t('notifications6DescriptionTwo'),
+        t('notifications6DescriptionThree'),
+      ],
+      date: new Intl.DateTimeFormat(locale).format(
+        new Date(UI_NOTIFICATIONS[6].date),
+      ),
+    },
   };
 };

test/e2e/fixtures/address-entry/state.json

@@ -60,6 +60,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/connected-state/state.json

@@ -50,6 +50,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/custom-rpc/state.json

@@ -46,6 +46,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/import-ui/state.json

@@ -101,6 +101,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/imported-account/state.json

@@ -46,6 +46,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/localization/state.json

@@ -46,6 +46,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/metrics-enabled/state.json

@@ -50,6 +50,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/send-edit/state.json

@@ -47,6 +47,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/threebox-enabled/state.json

@@ -57,6 +57,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },

ui/components/app/whats-new-popup/whats-new-popup.js

@@ -8,10 +8,12 @@ import { I18nContext } from '../../../contexts/i18n';
 import { useEqualityCheck } from '../../../hooks/useEqualityCheck';
 import Button from '../../ui/button';
 import Popover from '../../ui/popover';
+import Typography from '../../ui/typography';
 import { updateViewedNotifications } from '../../../store/actions';
 import { getTranslatedUINoficiations } from '../../../../shared/notifications';
 import { getSortedNotificationsToShow } from '../../../selectors';
 import { BUILD_QUOTE_ROUTE } from '../../../helpers/constants/routes';
+import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
 
 function getActionFunctionById(id, history) {
   const actionFunctions = {
@@ -41,6 +43,31 @@ function getActionFunctionById(id, history) {
   return actionFunctions[id];
 }
 
+const renderDescription = (description) => {
+  if (!Array.isArray(description)) {
+    return (
+      <Typography variant={TYPOGRAPHY.Paragraph}>{description}</Typography>
+    );
+  }
+
+  return (
+    <>
+      {description.map((piece, index) => {
+        const isLast = index === description.length - 1;
+        return (
+          <Typography
+            key={`item-${index}`}
+            variant={TYPOGRAPHY.Paragraph}
+            boxProps={{ marginBottom: isLast ? 0 : 2 }}
+          >
+            {piece}
+          </Typography>
+        );
+      })}
+    </>
+  );
+};
+
 const renderFirstNotification = (notification, idRefMap, history) => {
   const { id, date, title, description, image, actionText } = notification;
   const actionFunction = getActionFunctionById(id, history);
@@ -58,14 +85,14 @@ const renderFirstNotification = (notification, idRefMap, history) => {
       className={classnames(
         'whats-new-popup__notification whats-new-popup__first-notification',
       )}
-      key={`whats-new-popop-notificatiion-${id}`}
+      key={`whats-new-popop-notification-${id}`}
       ref={idRefMap[id]}
     >
       {!placeImageBelowDescription && imageComponent}
       <div className="whats-new-popup__notification-title">{title}</div>
       <div className="whats-new-popup__description-and-date">
         <div className="whats-new-popup__notification-description">
-          {description}
+          {renderDescription(description)}
         </div>
         <div className="whats-new-popup__notification-date">{date}</div>
       </div>
@@ -91,13 +118,13 @@ const renderSubsequentNotification = (notification, idRefMap, history) => {
   return (
     <div
       className={classnames('whats-new-popup__notification')}
-      key={`whats-new-popop-notificatiion-${id}`}
+      key={`whats-new-popop-notification-${id}`}
       ref={idRefMap[id]}
     >
       <div className="whats-new-popup__notification-title">{title}</div>
       <div className="whats-new-popup__description-and-date">
         <div className="whats-new-popup__notification-description">
-          {description}
+          {renderDescription(description)}
         </div>
         <div className="whats-new-popup__notification-date">{date}</div>
       </div>

ui/selectors/selectors.js

@@ -529,6 +529,7 @@ function getAllowedNotificationIds(state) {
     3: true,
     4: getCurrentChainId(state) === BSC_CHAIN_ID,
     5: true,
+    6: true,
   };
 }