From 958535d5df49701c3cc2fdd1f1b458ebbe2e367b Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Wed, 3 Nov 2021 20:05:39 -0230 Subject: [PATCH] Ledger WebHID What's New popup (#12501) * Add notification for ledger live users about how they can switch to WebHID * Add action button so that users can go right to settings from the what's new popup * Fix * Add notification 8 to e2e fixtures * Lint fix * Update ledger webhid notification wording * Update app/_locales/en/messages.json * Update ui/selectors/selectors.js --- 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/custom-token/state.json | 6 +++++- 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 +++ .../fixtures/navigate-transactions/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 | 9 ++++++++- ui/selectors/selectors.js | 9 ++++++++- 15 files changed, 83 insertions(+), 3 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 7142a2241..f4d146626 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1666,6 +1666,22 @@ "message": "Ledger firmware update", "description": "Title for a notification in the 'See What's New' popup. Notifies ledger users of the need to update firmware." }, + "notifications8ActionText": { + "message": "Go to Advanced Settings", + "description": "Description on an action button that appears in the What's New popup. Tells the user that if they click it, they will go to our Advanced Settings page." + }, + "notifications8DescriptionOne": { + "message": "As of MetaMask v10.4.0, you no longer need Ledger Live to connect your Ledger device to MetaMask.", + "description": "Description of a notification in the 'See What's New' popup. Describes changes for how Ledger Live is no longer needed to connect the device." + }, + "notifications8DescriptionTwo": { + "message": "For an easier and more stable ledger experience, go to the Advanced tab of settings and switch the 'Preferred Ledger Connection Type' to 'WebHID'.", + "description": "Description of a notification in the 'See What's New' popup. Describes how the user can turn off the Ledger Live setting." + }, + "notifications8Title": { + "message": "Ledger connection improvement", + "description": "Title for a notification in the 'See What's New' popup. Notifies ledger users that there is an improvement in how they can connect their device." + }, "ofTextNofM": { "message": "of" }, diff --git a/shared/notifications/index.js b/shared/notifications/index.js index da7c2f410..bad25a791 100644 --- a/shared/notifications/index.js +++ b/shared/notifications/index.js @@ -34,6 +34,10 @@ export const UI_NOTIFICATIONS = { id: 7, date: '2021-09-17', }, + 8: { + id: 8, + date: '2021-11-01', + }, }; export const getTranslatedUINoficiations = (t, locale) => { @@ -97,5 +101,17 @@ export const getTranslatedUINoficiations = (t, locale) => { new Date(UI_NOTIFICATIONS[7].date), ), }, + 8: { + ...UI_NOTIFICATIONS[8], + title: t('notifications8Title'), + description: [ + t('notifications8DescriptionOne'), + t('notifications8DescriptionTwo'), + ], + date: new Intl.DateTimeFormat(formattedLocale).format( + new Date(UI_NOTIFICATIONS[8].date), + ), + actionText: t('notifications8ActionText'), + }, }; }; diff --git a/test/e2e/fixtures/address-entry/state.json b/test/e2e/fixtures/address-entry/state.json index c17fd7e0c..59da933e5 100644 --- a/test/e2e/fixtures/address-entry/state.json +++ b/test/e2e/fixtures/address-entry/state.json @@ -63,6 +63,9 @@ }, "6": { "isShown": true + }, + "8": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/connected-state/state.json b/test/e2e/fixtures/connected-state/state.json index 5d3d2f68e..ccc9ab82d 100644 --- a/test/e2e/fixtures/connected-state/state.json +++ b/test/e2e/fixtures/connected-state/state.json @@ -53,6 +53,9 @@ }, "6": { "isShown": true + }, + "8": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/custom-rpc/state.json b/test/e2e/fixtures/custom-rpc/state.json index 54d6bb4a8..43319cd60 100644 --- a/test/e2e/fixtures/custom-rpc/state.json +++ b/test/e2e/fixtures/custom-rpc/state.json @@ -49,6 +49,9 @@ }, "6": { "isShown": true + }, + "8": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/custom-token/state.json b/test/e2e/fixtures/custom-token/state.json index 15a708f82..158ab303b 100644 --- a/test/e2e/fixtures/custom-token/state.json +++ b/test/e2e/fixtures/custom-token/state.json @@ -67,7 +67,11 @@ } }, "NotificationController": { - "notifications": {} + "notifications": { + "8": { + "isShown": true + } + } }, "OnboardingController": { "onboardingTabs": {}, diff --git a/test/e2e/fixtures/import-ui/state.json b/test/e2e/fixtures/import-ui/state.json index 9f5cb4459..75aa4e7da 100644 --- a/test/e2e/fixtures/import-ui/state.json +++ b/test/e2e/fixtures/import-ui/state.json @@ -104,6 +104,9 @@ }, "6": { "isShown": true + }, + "8": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/imported-account/state.json b/test/e2e/fixtures/imported-account/state.json index 42f5a7a54..449f6018b 100644 --- a/test/e2e/fixtures/imported-account/state.json +++ b/test/e2e/fixtures/imported-account/state.json @@ -49,6 +49,9 @@ }, "6": { "isShown": true + }, + "8": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/localization/state.json b/test/e2e/fixtures/localization/state.json index 73a3b97b2..952a3a502 100644 --- a/test/e2e/fixtures/localization/state.json +++ b/test/e2e/fixtures/localization/state.json @@ -49,6 +49,9 @@ }, "6": { "isShown": true + }, + "8": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/metrics-enabled/state.json b/test/e2e/fixtures/metrics-enabled/state.json index 67cbf9977..3b272611e 100644 --- a/test/e2e/fixtures/metrics-enabled/state.json +++ b/test/e2e/fixtures/metrics-enabled/state.json @@ -53,6 +53,9 @@ }, "6": { "isShown": true + }, + "8": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/navigate-transactions/state.json b/test/e2e/fixtures/navigate-transactions/state.json index 3f08971b0..ff0d8a05d 100644 --- a/test/e2e/fixtures/navigate-transactions/state.json +++ b/test/e2e/fixtures/navigate-transactions/state.json @@ -49,6 +49,9 @@ }, "6": { "isShown": true + }, + "8": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/send-edit/state.json b/test/e2e/fixtures/send-edit/state.json index 79efbaed2..8392faac9 100644 --- a/test/e2e/fixtures/send-edit/state.json +++ b/test/e2e/fixtures/send-edit/state.json @@ -50,6 +50,9 @@ }, "6": { "isShown": true + }, + "8": { + "isShown": true } } }, diff --git a/test/e2e/fixtures/threebox-enabled/state.json b/test/e2e/fixtures/threebox-enabled/state.json index abad9782b..565e8a122 100644 --- a/test/e2e/fixtures/threebox-enabled/state.json +++ b/test/e2e/fixtures/threebox-enabled/state.json @@ -60,6 +60,9 @@ }, "6": { "isShown": true + }, + "8": { + "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 06233371a..51b425b4c 100644 --- a/ui/components/app/whats-new-popup/whats-new-popup.js +++ b/ui/components/app/whats-new-popup/whats-new-popup.js @@ -12,7 +12,10 @@ 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 { + BUILD_QUOTE_ROUTE, + ADVANCED_ROUTE, +} from '../../../helpers/constants/routes'; import { TYPOGRAPHY } from '../../../helpers/constants/design-system'; function getActionFunctionById(id, history) { @@ -38,6 +41,10 @@ function getActionFunctionById(id, history) { url: 'https://metamask.zendesk.com/hc/en-us/articles/360060826432', }); }, + 8: () => { + updateViewedNotifications({ 8: true }); + history.push(ADVANCED_ROUTE); + }, }; return actionFunctions[id]; diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index dec951328..d046bf885 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -575,7 +575,13 @@ export function getShowWhatsNewPopup(state) { * @param {Object} state * @returns {Object} */ -function getAllowedNotificationIds() { +function getAllowedNotificationIds(state) { + const currentKeyring = getCurrentKeyring(state); + const currentKeyringIsLedger = currentKeyring?.type === KEYRING_TYPES.LEDGER; + const supportsWebHid = window.navigator.hid !== undefined; + const currentlyUsingLedgerLive = + getLedgerTransportType(state) === LEDGER_TRANSPORT_TYPES.LIVE; + return { 1: false, 2: false, @@ -584,6 +590,7 @@ function getAllowedNotificationIds() { 5: false, 6: false, 7: false, + 8: supportsWebHid && currentKeyringIsLedger && currentlyUsingLedgerLive, }; }