From 939a34f16cba4add56bd670ba93650a0c46d38bc Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Wed, 26 May 2021 14:29:19 -0700
Subject: [PATCH] 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                 | 16 +++++++++
 shared/notifications/index.js                 | 16 +++++++++
 test/e2e/fixtures/address-entry/state.json    |  3 ++
 test/e2e/fixtures/connected-state/state.json  |  3 ++
 test/e2e/fixtures/import-ui/state.json        |  3 ++
 test/e2e/fixtures/imported-account/state.json |  3 ++
 test/e2e/fixtures/localization/state.json     |  3 ++
 test/e2e/fixtures/metrics-enabled/state.json  |  3 ++
 test/e2e/fixtures/send-edit/state.json        |  3 ++
 test/e2e/fixtures/threebox-enabled/state.json |  3 ++
 .../app/whats-new-popup/whats-new-popup.js    | 35 ++++++++++++++++---
 11 files changed, 87 insertions(+), 4 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index a593774a3..66dcee019 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1270,6 +1270,22 @@
     "message": "Stay secure",
     "description": "Title for a notification in the 'See What's New' popup. Encourages users to consider security."
   },
+  "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"
   },
diff --git a/shared/notifications/index.js b/shared/notifications/index.js
index ea1f31706..ac14fc8da 100644
--- a/shared/notifications/index.js
+++ b/shared/notifications/index.js
@@ -18,6 +18,10 @@ export const UI_NOTIFICATIONS = {
     id: 3,
     date: '2021-03-08',
   },
+  6: {
+    id: 6,
+    date: '2021-05-26',
+  },
 };
 
 export const getTranslatedUINoficiations = (t, locale) => {
@@ -49,5 +53,17 @@ export const getTranslatedUINoficiations = (t, locale) => {
         new Date(UI_NOTIFICATIONS[3].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),
+      ),
+    },
   };
 };
diff --git a/test/e2e/fixtures/address-entry/state.json b/test/e2e/fixtures/address-entry/state.json
index e53e3a922..1c6f7c010 100644
--- a/test/e2e/fixtures/address-entry/state.json
+++ b/test/e2e/fixtures/address-entry/state.json
@@ -60,6 +60,9 @@
         },
         "3": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/connected-state/state.json b/test/e2e/fixtures/connected-state/state.json
index a88a31a74..b4f9f8e11 100644
--- a/test/e2e/fixtures/connected-state/state.json
+++ b/test/e2e/fixtures/connected-state/state.json
@@ -50,6 +50,9 @@
         },
         "3": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/import-ui/state.json b/test/e2e/fixtures/import-ui/state.json
index 350ed8848..920793cd7 100644
--- a/test/e2e/fixtures/import-ui/state.json
+++ b/test/e2e/fixtures/import-ui/state.json
@@ -101,6 +101,9 @@
         },
         "3": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/imported-account/state.json b/test/e2e/fixtures/imported-account/state.json
index a3d51e5d5..24396e734 100644
--- a/test/e2e/fixtures/imported-account/state.json
+++ b/test/e2e/fixtures/imported-account/state.json
@@ -46,6 +46,9 @@
         },
         "3": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/localization/state.json b/test/e2e/fixtures/localization/state.json
index 22d76151b..eb90a0398 100644
--- a/test/e2e/fixtures/localization/state.json
+++ b/test/e2e/fixtures/localization/state.json
@@ -46,6 +46,9 @@
         },
         "3": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/metrics-enabled/state.json b/test/e2e/fixtures/metrics-enabled/state.json
index 2fa9931c5..5b107f9c4 100644
--- a/test/e2e/fixtures/metrics-enabled/state.json
+++ b/test/e2e/fixtures/metrics-enabled/state.json
@@ -50,6 +50,9 @@
         },
         "3": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/send-edit/state.json b/test/e2e/fixtures/send-edit/state.json
index c5c548f4c..c93539f3a 100644
--- a/test/e2e/fixtures/send-edit/state.json
+++ b/test/e2e/fixtures/send-edit/state.json
@@ -47,6 +47,9 @@
         },
         "3": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/threebox-enabled/state.json b/test/e2e/fixtures/threebox-enabled/state.json
index 8bac5f889..5b6cf9bce 100644
--- a/test/e2e/fixtures/threebox-enabled/state.json
+++ b/test/e2e/fixtures/threebox-enabled/state.json
@@ -57,6 +57,9 @@
         },
         "3": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/ui/app/components/app/whats-new-popup/whats-new-popup.js b/ui/app/components/app/whats-new-popup/whats-new-popup.js
index 3eaad0af3..499d2ee45 100644
--- a/ui/app/components/app/whats-new-popup/whats-new-popup.js
+++ b/ui/app/components/app/whats-new-popup/whats-new-popup.js
@@ -7,9 +7,11 @@ 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 { TYPOGRAPHY } from '../../../helpers/constants/design-system';
 
 function getActionFunctionById(id) {
   const actionFunctions = {
@@ -29,6 +31,31 @@ function getActionFunctionById(id) {
   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) => {
   const { id, date, title, description, image, actionText } = notification;
   const actionFunction = getActionFunctionById(id);
@@ -46,14 +73,14 @@ const renderFirstNotification = (notification, idRefMap) => {
       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>
@@ -79,13 +106,13 @@ const renderSubsequentNotification = (notification, idRefMap) => {
   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>