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