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 (
+