From 6ac82cefe2ab331aa9b6a6f40981e05833aaf688 Mon Sep 17 00:00:00 2001 From: Frederik Bolding Date: Mon, 4 Sep 2023 16:41:06 +0200 Subject: [PATCH] Add what's new popup for snaps (#20686) * Add what's new popup for snaps * Update SVG * Update copy and link out * Update SVG and fix lint * Fix unnecessary space in copy --------- Co-authored-by: Howard Braham --- app/_locales/en/messages.json | 15 +++ app/images/introducing-snaps.svg | 93 +++++++++++++++++++ shared/notifications/index.js | 26 ++++++ .../app/whats-new-popup/whats-new-popup.js | 12 ++- ui/selectors/selectors.js | 2 + 5 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 app/images/introducing-snaps.svg diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 84803dba1..3a11bd6d6 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -2850,6 +2850,21 @@ "notificationsMarkAllAsRead": { "message": "Mark all as read" }, + "notificationsOpenBetaSnapsActionText": { + "message": "Learn more" + }, + "notificationsOpenBetaSnapsDescriptionOne": { + "message": "🎉 We're excited to announce the Open Beta of MetaMask Snaps!" + }, + "notificationsOpenBetaSnapsDescriptionThree": { + "message": "Personalize your wallet with snaps built by the developer community!" + }, + "notificationsOpenBetaSnapsDescriptionTwo": { + "message": "Snaps help you do more with MetaMask — like connect to more networks, see transaction insights, and get custom notifications." + }, + "notificationsOpenBetaSnapsTitle": { + "message": "Introducing MetaMask Snaps" + }, "numberOfNewTokensDetectedPlural": { "message": "$1 new tokens found in this account", "description": "$1 is the number of new tokens detected" diff --git a/app/images/introducing-snaps.svg b/app/images/introducing-snaps.svg new file mode 100644 index 000000000..84b0d5918 --- /dev/null +++ b/app/images/introducing-snaps.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/shared/notifications/index.js b/shared/notifications/index.js index f7f38ceec..2d667208f 100644 --- a/shared/notifications/index.js +++ b/shared/notifications/index.js @@ -1,4 +1,7 @@ // Messages and descriptions for these locale keys are in app/_locales/en/messages.json + +export const NOTIFICATION_OPEN_BETA_SNAPS = 26; + export const UI_NOTIFICATIONS = { 1: { id: 1, @@ -125,6 +128,14 @@ export const UI_NOTIFICATIONS = { id: 24, date: null, }, + [NOTIFICATION_OPEN_BETA_SNAPS]: { + id: Number(NOTIFICATION_OPEN_BETA_SNAPS), + date: null, + image: { + src: 'images/introducing-snaps.svg', + width: '100%', + }, + }, }; export const getTranslatedUINotifications = (t, locale) => { @@ -346,5 +357,20 @@ export const getTranslatedUINotifications = (t, locale) => { ) : '', }, + [NOTIFICATION_OPEN_BETA_SNAPS]: { + ...UI_NOTIFICATIONS[NOTIFICATION_OPEN_BETA_SNAPS], + title: t('notificationsOpenBetaSnapsTitle'), + description: [ + t('notificationsOpenBetaSnapsDescriptionOne'), + t('notificationsOpenBetaSnapsDescriptionTwo'), + t('notificationsOpenBetaSnapsDescriptionThree'), + ], + actionText: t('notificationsOpenBetaSnapsActionText'), + date: UI_NOTIFICATIONS[NOTIFICATION_OPEN_BETA_SNAPS].date + ? new Intl.DateTimeFormat(formattedLocale).format( + new Date(UI_NOTIFICATIONS[NOTIFICATION_OPEN_BETA_SNAPS].date), + ) + : '', + }, }; }; 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 15ec13270..8d1384fb0 100644 --- a/ui/components/app/whats-new-popup/whats-new-popup.js +++ b/ui/components/app/whats-new-popup/whats-new-popup.js @@ -16,7 +16,10 @@ import { } from '../../component-library'; import { Text } from '../../component-library/text/deprecated'; import { updateViewedNotifications } from '../../../store/actions'; -import { getTranslatedUINotifications } from '../../../../shared/notifications'; +import { + NOTIFICATION_OPEN_BETA_SNAPS, + getTranslatedUINotifications, +} from '../../../../shared/notifications'; import { getSortedAnnouncementsToShow } from '../../../selectors'; import { BUILD_QUOTE_ROUTE, @@ -106,6 +109,12 @@ function getActionFunctionById(id, history) { 24: () => { updateViewedNotifications({ 24: true }); }, + [NOTIFICATION_OPEN_BETA_SNAPS]: () => { + updateViewedNotifications({ [NOTIFICATION_OPEN_BETA_SNAPS]: true }); + global.platform.openTab({ + url: 'https://metamask.io/snaps/', + }); + }, }; return actionFunctions[id]; @@ -368,6 +377,7 @@ export default function WhatsNewPopup({ 21: renderFirstNotification, 22: renderFirstNotification, 24: renderFirstNotification, + [NOTIFICATION_OPEN_BETA_SNAPS]: renderFirstNotification, }; return ( diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index e6ae9e425..b647bfa8c 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -93,6 +93,7 @@ import { hexToDecimal, } from '../../shared/modules/conversion.utils'; import { BackgroundColor } from '../helpers/constants/design-system'; +import { NOTIFICATION_OPEN_BETA_SNAPS } from '../../shared/notifications'; ///: BEGIN:ONLY_INCLUDE_IN(snaps) import { SNAPS_VIEW_ROUTE } from '../helpers/constants/routes'; import { getPermissionSubjects } from './permissions'; @@ -1032,6 +1033,7 @@ function getAllowedAnnouncementIds(state) { 21: isSwapsChain, 22: true, 24: state.metamask.hadAdvancedGasFeesSetPriorToMigration92_3 === true, + [NOTIFICATION_OPEN_BETA_SNAPS]: true, }; }