From 6ee90ac8b2805c4ed6b1b70e0eae729c9710e882 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 | 24 +++++ .../app/whats-new-popup/whats-new-popup.js | 11 +++ ui/selectors/selectors.js | 6 +- 5 files changed, 148 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 efb9a1482..91c64e2d9 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -2900,6 +2900,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 9d6c958a8..eef336bc7 100644 --- a/shared/notifications/index.js +++ b/shared/notifications/index.js @@ -5,6 +5,7 @@ * into numbers in only one place. This should make merge conflicts easier. */ export const NOTIFICATION_DROP_LEDGER_FIREFOX = 25; +export const NOTIFICATION_OPEN_BETA_SNAPS = 26; export const UI_NOTIFICATIONS = { 1: { @@ -147,6 +148,14 @@ export const UI_NOTIFICATIONS = { id: Number(NOTIFICATION_DROP_LEDGER_FIREFOX), 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) => { @@ -395,5 +404,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 9372746db..ef3064050 100644 --- a/ui/components/app/whats-new-popup/whats-new-popup.js +++ b/ui/components/app/whats-new-popup/whats-new-popup.js @@ -18,6 +18,7 @@ import { import { updateViewedNotifications } from '../../../store/actions'; import { NOTIFICATION_DROP_LEDGER_FIREFOX, + NOTIFICATION_OPEN_BETA_SNAPS, getTranslatedUINotifications, } from '../../../../shared/notifications'; import { getSortedAnnouncementsToShow } from '../../../selectors'; @@ -115,6 +116,15 @@ function getActionFunctionById(id, history) { 24: () => { updateViewedNotifications({ 24: true }); }, + [NOTIFICATION_DROP_LEDGER_FIREFOX]: () => { + updateViewedNotifications({ [NOTIFICATION_DROP_LEDGER_FIREFOX]: true }); + }, + [NOTIFICATION_OPEN_BETA_SNAPS]: () => { + updateViewedNotifications({ [NOTIFICATION_OPEN_BETA_SNAPS]: true }); + global.platform.openTab({ + url: 'https://metamask.io/snaps/', + }); + }, }; return actionFunctions[id]; @@ -400,6 +410,7 @@ export default function WhatsNewPopup({ 24: renderFirstNotification, // This syntax is unusual, but very helpful here. It's equivalent to `notificationRenderers[NOTIFICATION_DROP_LEDGER_FIREFOX] =` [NOTIFICATION_DROP_LEDGER_FIREFOX]: renderFirstNotification, + [NOTIFICATION_OPEN_BETA_SNAPS]: renderFirstNotification, }; return ( diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index 1ccb6eb09..29d801fa3 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -93,7 +93,10 @@ import { hexToDecimal, } from '../../shared/modules/conversion.utils'; import { BackgroundColor } from '../helpers/constants/design-system'; -import { NOTIFICATION_DROP_LEDGER_FIREFOX } from '../../shared/notifications'; +import { + NOTIFICATION_DROP_LEDGER_FIREFOX, + NOTIFICATION_OPEN_BETA_SNAPS, +} from '../../shared/notifications'; ///: BEGIN:ONLY_INCLUDE_IN(snaps) import { SNAPS_VIEW_ROUTE } from '../helpers/constants/routes'; import { getPermissionSubjects } from './permissions'; @@ -1052,6 +1055,7 @@ function getAllowedAnnouncementIds(state) { 24: state.metamask.hadAdvancedGasFeesSetPriorToMigration92_3 === true, // This syntax is unusual, but very helpful here. It's equivalent to `unnamedObject[NOTIFICATION_DROP_LEDGER_FIREFOX] =` [NOTIFICATION_DROP_LEDGER_FIREFOX]: currentKeyringIsLedger && isFirefox, + [NOTIFICATION_OPEN_BETA_SNAPS]: true, }; }