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

@@ -1648,6 +1648,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"
   },

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'),
+    },
   };
 };

test/e2e/fixtures/address-entry/state.json

@@ -63,6 +63,9 @@
         },
         "6": {
           "isShown": true
+        },
+        "8": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/connected-state/state.json

@@ -53,6 +53,9 @@
         },
         "6": {
           "isShown": true
+        },
+        "8": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/custom-rpc/state.json

@@ -49,6 +49,9 @@
         },
         "6": {
           "isShown": true
+        },
+        "8": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/custom-token/state.json

@@ -67,7 +67,11 @@
       }
     },
     "NotificationController": {
-      "notifications": {}
+      "notifications": {
+        "8": {
+          "isShown": true
+        }
+      }
     },
     "OnboardingController": {
       "onboardingTabs": {},

test/e2e/fixtures/import-ui/state.json

@@ -104,6 +104,9 @@
         },
         "6": {
           "isShown": true
+        },
+        "8": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/imported-account/state.json

@@ -49,6 +49,9 @@
         },
         "6": {
           "isShown": true
+        },
+        "8": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/localization/state.json

@@ -49,6 +49,9 @@
         },
         "6": {
           "isShown": true
+        },
+        "8": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/metrics-enabled/state.json

@@ -53,6 +53,9 @@
         },
         "6": {
           "isShown": true
+        },
+        "8": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/navigate-transactions/state.json

@@ -49,6 +49,9 @@
         },
         "6": {
           "isShown": true
+        },
+        "8": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/send-edit/state.json

@@ -50,6 +50,9 @@
         },
         "6": {
           "isShown": true
+        },
+        "8": {
+          "isShown": true
         }
       }
     },

test/e2e/fixtures/threebox-enabled/state.json

@@ -60,6 +60,9 @@
         },
         "6": {
           "isShown": true
+        },
+        "8": {
+          "isShown": true
         }
       }
     },

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];

ui/selectors/selectors.js

@@ -570,7 +570,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,
@@ -579,6 +585,7 @@ function getAllowedNotificationIds() {
     5: false,
     6: false,
     7: false,
+    8: supportsWebHid && currentKeyringIsLedger && currentlyUsingLedgerLive,
   };
 }