From 629da90d724b82e1179d6dcc045f6c7139b5b701 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/custom-rpc/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 ++++++++++++++++---
 ui/selectors/selectors.js                     |  1 +
 13 files changed, 91 insertions(+), 4 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index bda06fe82..e864d40f2 100644
--- a/app/_locales/en/messages.json
+++ b/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"
   },
diff --git a/shared/notifications/index.js b/shared/notifications/index.js
index ee5aabbe5..8311693ea 100644
--- a/shared/notifications/index.js
+++ b/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),
+      ),
+    },
   };
 };
diff --git a/test/e2e/fixtures/address-entry/state.json b/test/e2e/fixtures/address-entry/state.json
index abf7e220c..0bc9f3b9d 100644
--- a/test/e2e/fixtures/address-entry/state.json
+++ b/test/e2e/fixtures/address-entry/state.json
@@ -60,6 +60,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/connected-state/state.json b/test/e2e/fixtures/connected-state/state.json
index 4f3e724af..baebea6b7 100644
--- a/test/e2e/fixtures/connected-state/state.json
+++ b/test/e2e/fixtures/connected-state/state.json
@@ -50,6 +50,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/custom-rpc/state.json b/test/e2e/fixtures/custom-rpc/state.json
index df646bb0d..aa93a938c 100644
--- a/test/e2e/fixtures/custom-rpc/state.json
+++ b/test/e2e/fixtures/custom-rpc/state.json
@@ -46,6 +46,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/import-ui/state.json b/test/e2e/fixtures/import-ui/state.json
index 380d28b22..1e6572574 100644
--- a/test/e2e/fixtures/import-ui/state.json
+++ b/test/e2e/fixtures/import-ui/state.json
@@ -101,6 +101,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/imported-account/state.json b/test/e2e/fixtures/imported-account/state.json
index fc3ea0a4f..7c4a2108a 100644
--- a/test/e2e/fixtures/imported-account/state.json
+++ b/test/e2e/fixtures/imported-account/state.json
@@ -46,6 +46,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/localization/state.json b/test/e2e/fixtures/localization/state.json
index d0ddfd0f9..009e8ac77 100644
--- a/test/e2e/fixtures/localization/state.json
+++ b/test/e2e/fixtures/localization/state.json
@@ -46,6 +46,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/metrics-enabled/state.json b/test/e2e/fixtures/metrics-enabled/state.json
index 91e3553d2..8e0f082d5 100644
--- a/test/e2e/fixtures/metrics-enabled/state.json
+++ b/test/e2e/fixtures/metrics-enabled/state.json
@@ -50,6 +50,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/send-edit/state.json b/test/e2e/fixtures/send-edit/state.json
index 228cf7004..a5f3a8bab 100644
--- a/test/e2e/fixtures/send-edit/state.json
+++ b/test/e2e/fixtures/send-edit/state.json
@@ -47,6 +47,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/test/e2e/fixtures/threebox-enabled/state.json b/test/e2e/fixtures/threebox-enabled/state.json
index 5908d0a25..f182c5d47 100644
--- a/test/e2e/fixtures/threebox-enabled/state.json
+++ b/test/e2e/fixtures/threebox-enabled/state.json
@@ -57,6 +57,9 @@
         },
         "5": {
           "isShown": true
+        },
+        "6": {
+          "isShown": true
         }
       }
     },
diff --git a/ui/components/app/whats-new-popup/whats-new-popup.js b/ui/components/app/whats-new-popup/whats-new-popup.js
index df0656810..0c9ce98d2 100644
--- a/ui/components/app/whats-new-popup/whats-new-popup.js
+++ b/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>
diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
index 5b429c8f7..70c249ed1 100644
--- a/ui/selectors/selectors.js
+++ b/ui/selectors/selectors.js
@@ -529,6 +529,7 @@ function getAllowedNotificationIds(state) {
     3: true,
     4: getCurrentChainId(state) === BSC_CHAIN_ID,
     5: true,
+    6: true,
   };
 }