Adding NFT autodetection to "What's New" Announcements (#17653)

* adding base what's new for NFT autodetection * lintfix * Adding nfts svg image * adding new notification to fixture builder for e2e * lint:fix * Adding new messaging, styling what's new * styling descriptions, increasing fullscreen height * applying firstNotification styling to NFT whats new announcement * adding scrollDown button to whats new popup * adding Opensea announcement, removing old announcement, moving scrollDown button up to popover component * verify-locales:fix * updating icon
2024-12-22 09:23:21 +01:00 · 2023-03-14 11:07:58 -04:00 · 2023-03-14 11:07:58 -04:00 · bfefa35811
commit bfefa35811
parent 2e291ff9c7
21 changed files with 252 additions and 74 deletions
--- a/app/_locales/de/messages.json
+++ b/app/_locales/de/messages.json
@ -2345,9 +2345,6 @@
  "notifications17ActionText": {
    "message": "Sicherheits- und Datenschutzeinstellungen anzeigen"
  },
-  "notifications17Description": {
-    "message": "Dieses Update gibt Ihnen mehr Möglichkeiten zur Kontrolle Ihrer Privatsphäre. Wir haben mehr Transparenz in Hinsicht auf die Sammlung von Daten sowie deutlichere Optionen bezüglich des Teilens hinzugefügt. Ändern Sie Ihre Einstellungen oder löschen Sie die Erweiterungsnutzung über Sicherheits- und Datenschutzeinstellungen."
-  },
  "notifications17Title": {
    "message": "Sicherheits- und Datenschutzeinstellungen"
  },
--- a/app/_locales/el/messages.json
+++ b/app/_locales/el/messages.json
@ -2345,9 +2345,6 @@
  "notifications17ActionText": {
    "message": "Εμφάνιση ρυθμίσεων Ασφάλειας & Απορρήτου"
  },
-  "notifications17Description": {
-    "message": "Αυτή η ενημέρωση παρέχει περισσότερες επιλογές ώστε να μπορείτε να ελέγχετε καλύτερα το απόρρητό σας. Προσθέσαμε μεγαλύτερη διαφάνεια σχετικά με τον τρόπο συλλογής δεδομένων και πιο σαφείς επιλογές για την κοινοποίησή τους. Αλλάξτε τις προτιμήσεις σας ή διαγράψτε τα δεδομένα χρήσης της επέκτασης μέσω των ρυθμίσεων Ασφάλειας & Απορρήτου."
-  },
  "notifications17Title": {
    "message": "Ρυθμίσεις Ασφάλειας & Απορρήτου"
  },
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -2369,14 +2369,41 @@
  "notifications15Title": {
    "message": "The Ethereum Merge is here!"
  },
-  "notifications17ActionText": {
-    "message": "Show Security & Privacy settings"
+  "notifications16ActionText": {
+    "message": "Enable security provider"
  },
-  "notifications17Description": {
-    "message": "This update provides more options so you can better control your own privacy. We've added more transparency about how data is collected and clearer options for sharing it. Change your preferences or delete extension usage data via Security & Privacy settings."
+  "notifications16DescriptionOne": {
+    "message": "Get warnings from OpenSea whenever you receive a known malicious request.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes Opensea Security Provider feature."
+  },
+  "notifications16DescriptionThree": {
+    "message": "Always be sure to do your own due diligence before approving any requests.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes Opensea Security Provider feature."
+  },
+  "notifications16DescriptionTwo": {
+    "message": "OpenSea is the first security provider for this feature. More providers coming soon!",
+    "description": "Description of a notification in the 'See What's New' popup. Describes Opensea Security Provider feature."
+  },
+  "notifications16Title": {
+    "message": "Stay safe with OpenSea"
+  },
+  "notifications17ActionText": {
+    "message": "Enable NFT autodetection"
+  },
+  "notifications17DescriptionOne": {
+    "message": "Two ways you can get started:",
+    "description": "Description of a notification in the 'See What's New' popup. Describes NFT autodetection feature."
+  },
+  "notifications17DescriptionThree": {
+    "message": "We only support ERC-721 at the moment.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes NFT autodetection feature."
+  },
+  "notifications17DescriptionTwo": {
+    "message": "Manually add your NFTs, or turn on NFT autodetection in Settings > Experimental.",
+    "description": "Description of a notification in the 'See What's New' popup. Describes NFT autodetection feature."
  },
  "notifications17Title": {
-    "message": "Security & Privacy Settings"
+    "message": "See your NFTs like never before"
  },
  "notifications1Description": {
    "message": "MetaMask Mobile users can now swap tokens inside their mobile wallet. Scan the QR code to get the mobile app and start swapping.",
--- a/app/_locales/es/messages.json
+++ b/app/_locales/es/messages.json
@ -2345,9 +2345,6 @@
  "notifications17ActionText": {
    "message": "Mostrar configuración de seguridad y privacidad"
  },
-  "notifications17Description": {
-    "message": "Esta actualización ofrece más opciones para que pueda controlar mejor su propia privacidad. Agregamos más transparencia sobre cómo se recopilan los datos y opciones más claras para compartirlos. Cambie sus preferencias o elimine los datos de uso de la extensión a través de la configuración de Seguridad y privacidad."
-  },
  "notifications17Title": {
    "message": "Configuración de Seguridad y privacidad"
  },
--- a/app/_locales/fr/messages.json
+++ b/app/_locales/fr/messages.json
@ -2345,9 +2345,6 @@
  "notifications17ActionText": {
    "message": "Afficher les paramètres de sécurité et de confidentialité"
  },
-  "notifications17Description": {
-    "message": "Nous vous proposons dans cette mise à jour davantage d’options pour protéger votre vie privée. Nous avons clarifié notre politique de collecte des données et les options de partage de ces données. Modifiez vos préférences ou supprimez les données d’utilisation des extensions depuis les paramètres de sécurité et de confidentialité."
-  },
  "notifications17Title": {
    "message": "Paramètres de sécurité et de confidentialité"
  },
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@ -2345,9 +2345,6 @@
  "notifications17ActionText": {
    "message": "सुरक्षा और गोपनीयता सेटिंग्स को दिखाएं"
  },
-  "notifications17Description": {
-    "message": "यह अपडेट अधिक विकल्प प्रदान करता है ताकि आप अपनी गोपनीयता को बेहतर ढंग से नियंत्रित कर सकें। हमने डेटा कैसे एकत्र किया जाता है और इसे साझा करने के लिए स्पष्ट विकल्पों के बारे में और अधिक पारदर्शिता जोड़ी है। सुरक्षा और गोपनीयता के सेटिंग्स के माध्यम से अपनी प्राथमिकताओं को बदलें या एक्सटेंशन उपयोग डेटा हटाएं।"
-  },
  "notifications17Title": {
    "message": "सुरक्षा और गोपनीयता सेटिंग्स"
  },
--- a/app/_locales/id/messages.json
+++ b/app/_locales/id/messages.json
@ -2345,9 +2345,6 @@
  "notifications17ActionText": {
    "message": "Tampilkan pengaturan Keamanan & Privasi"
  },
-  "notifications17Description": {
-    "message": "Pembaruan ini memberikan lebih banyak opsi sehingga Anda dapat mengontrol privasi Anda sendiri dengan lebih baik. Kami telah menambahkan penjelasan seputar cara pengumpulan data dan opsi yang lebih mudah untuk membagikannya. Ubah preferensi Anda atau hapus data penggunaan ekstensi melalui pengaturan Keamanan & Privasi."
-  },
  "notifications17Title": {
    "message": "Pengaturan Keamanan & Privasi"
  },
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@ -2345,9 +2345,6 @@
  "notifications17ActionText": {
    "message": "セキュリティおよびプライバシー設定を表示"
  },
-  "notifications17Description": {
-    "message": "このアップデートでは、自らのプライバシーをより適切に管理できるよう、より多くのオプションが提供されています。データの収集方法に関する透明性が高まり、共有オプションがより明確になりました。セキュリティおよびプライバシー設定で設定を変更するか、拡張機能の使用データを削除してください。"
-  },
  "notifications17Title": {
    "message": "セキュリティおよびプライバシー設定"
  },
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@ -2345,9 +2345,6 @@
  "notifications17ActionText": {
    "message": "보안 및 개인정보 설정 표시"
  },
-  "notifications17Description": {
-    "message": "이 업데이트에는 자신의 개인정보 보호를 위해 행사할 수 있는 옵션이 더욱 많습니다. 데이터 수집 방법을 더욱 투명하게 하였고, 데이터 공유에 관련하여 명확한 옵션을 추가했습니다. 보안 및 개인 정보 설정을 통해 기본 설정을 변경하거나 확장 프로그램 사용 데이터를 삭제하세요."
-  },
  "notifications17Title": {
    "message": "보안 및 개인정보 설정 표시"
  },
--- a/app/_locales/pt/messages.json
+++ b/app/_locales/pt/messages.json
@ -2345,9 +2345,6 @@
  "notifications17ActionText": {
    "message": "Mostrar configurações de segurança e privacidade"
  },
-  "notifications17Description": {
-    "message": "Essa atualização oferece mais opções para que você possa controlar sua própria privacidade. Adicionamos mais transparência sobre como os dados são coletados e opções mais claras para compartilhá-los. Mude suas preferências ou exclua os dados de uso da extensão através das configurações de segurança e privacidade."
-  },
  "notifications17Title": {
    "message": "Configurações de segurança e privacidade"
  },
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@ -2345,9 +2345,6 @@
  "notifications17ActionText": {
    "message": "Показать настройки безопасности и конфиденциальности"
  },
-  "notifications17Description": {
-    "message": "Это обновление предоставляет больше возможностей, чтобы вы могли лучше контролировать свою собственную конфиденциальность. Мы добавили больше прозрачности в отношении того, как собираются данные, и более четкие варианты обмена ими. Измените свои предпочтения или удалите данные об использовании расширения в настройках безопасности и конфиденциальности."
-  },
  "notifications17Title": {
    "message": "Настройки безопасности и конфиденциальности"
  },
--- a/app/_locales/tl/messages.json
+++ b/app/_locales/tl/messages.json
@ -2345,9 +2345,6 @@
  "notifications17ActionText": {
    "message": "Ipakita ang mga setting ng Seguridad at Pagkapribado"
  },
-  "notifications17Description": {
-    "message": "Ang update na ito ay nagbibigay ng mas maraming opsyon para higit mong makontrol ang iyong pagkapribado. Nagdagdag kami ng higit pang paglilinaw tungkol sa kung paano kinokolekta ang datos at mas malinaw na mga opsyon sa pagbabahagi nito. Palitan ang iyong mga kagustuhan o tanggalin ang datos sa paggamit ng extension sa pamamagitan ng mga setting ng Seguridad at Pagkapribado."
-  },
  "notifications17Title": {
    "message": "Mga Setting ng Seguridad at Pagkapribado"
  },
--- a/app/_locales/tr/messages.json
+++ b/app/_locales/tr/messages.json
@ -2345,9 +2345,6 @@
  "notifications17ActionText": {
    "message": "Güvenlik ve Gizlilik ayarlarını göster"
  },
-  "notifications17Description": {
-    "message": "Bu güncelleme, kendi gizliliğinizi daha iyi kontrol edebilmeniz için daha fazla seçenek sunar. Verilerin nasıl toplandığı hakkında daha fazla şeffaflık ve paylaşımına yönelik daha açık seçenekler ekledik. Güvenlik ve Gizlilik ayarlarından tercihlerinizi değiştirin veya uzantı kullanım verilerinizi silin."
-  },
  "notifications17Title": {
    "message": "Güvenlik ve Gizlilik Ayarları"
  },
--- a/app/_locales/vi/messages.json
+++ b/app/_locales/vi/messages.json
@ -2345,9 +2345,6 @@
  "notifications17ActionText": {
    "message": "Hiển thị cài đặt Bảo mật và Quyền riêng tư"
  },
-  "notifications17Description": {
-    "message": "Bản cập nhật này cung cấp nhiều tùy chọn hơn để bạn có thể kiểm soát quyền riêng tư của mình tốt hơn. Chúng tôi đã minh bạch hơn về cách thu thập dữ liệu và cung cấp các tùy chọn chia sẻ dữ liệu rõ ràng hơn. Hãy thay đổi tùy chọn của bạn hoặc xóa dữ liệu sử dụng tiện ích mở rộng thông qua cài đặt Bảo mật và Quyền riêng tư."
-  },
  "notifications17Title": {
    "message": "Cài đặt Bảo mật và Quyền riêng tư"
  },
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@ -2345,9 +2345,6 @@
  "notifications17ActionText": {
    "message": "显示安全和隐私设置"
  },
-  "notifications17Description": {
-    "message": "本次更新提供更多选项，让您可以更好地管理自己的隐私。我们增加了数据收集方式的透明度，以及更清晰的分享选项。您可以通过安全和隐私设置更改您的首选项，或删除扩展使用数据。"
-  },
  "notifications17Title": {
    "message": "安全和隐私设置"
  },
--- a/app/images/nfts.svg
+++ b/app/images/nfts.svg
--- a/shared/notifications/index.js
+++ b/shared/notifications/index.js
@ -78,9 +78,21 @@ export const UI_NOTIFICATIONS = {
    id: 15,
    date: '2022-09-15',
  },
+  16: {
+    id: 16,
+    date: null,
+    image: {
+      src: 'images/open-sea-security-provider.svg',
+      width: '100%',
+    },
+  },
  17: {
    id: 17,
    date: null,
+    image: {
+      src: 'images/nfts.svg',
+      width: '100%',
+    },
  },
 };

@ -228,10 +240,30 @@ export const getTranslatedUINotifications = (t, locale) => {
          )
        : '',
    },
+    16: {
+      ...UI_NOTIFICATIONS[16],
+      title: t('notifications16Title'),
+      description: [
+        t('notifications16DescriptionOne'),
+        t('notifications16DescriptionTwo'),
+        t('notifications16DescriptionThree'),
+      ],
+      actionText: t('notifications16ActionText'),
+      date: UI_NOTIFICATIONS[16].date
+        ? new Intl.DateTimeFormat(formattedLocale).format(
+            new Date(UI_NOTIFICATIONS[16].date),
+          )
+        : '',
+    },
+
    17: {
      ...UI_NOTIFICATIONS[17],
      title: t('notifications17Title'),
-      description: t('notifications17Description'),
+      description: [
+        t('notifications17DescriptionOne'),
+        t('notifications17DescriptionTwo'),
+        t('notifications17DescriptionThree'),
+      ],
      actionText: t('notifications17ActionText'),
      date: UI_NOTIFICATIONS[17].date
        ? new Intl.DateTimeFormat(formattedLocale).format(
--- a/test/e2e/fixture-builder.js
+++ b/test/e2e/fixture-builder.js
@ -111,6 +111,11 @@ function defaultFixture() {
            id: 15,
            isShown: false,
          },
+          16: {
+            date: null,
+            id: 16,
+            isShown: true,
+          },
          17: {
            date: null,
            id: 17,
--- a/ui/components/app/whats-new-popup/index.scss
+++ b/ui/components/app/whats-new-popup/index.scss
@ -8,7 +8,7 @@
  &__first-notification {
    display: flex;
    flex-direction: column;
-    margin: 0 24px 24px 24px;
+    margin: 0 16px 16px 16px;
    border-bottom: 1px solid var(--color-border-muted);
    position: relative;
  }
@ -60,24 +60,39 @@
    cursor: pointer;
  }

-  &__notification-title {
-    @include H4;
-
-    font-weight: bold;
-    margin-bottom: 8px;
-  }
-
  &__intersection-observable {
    bottom: 22px;
    position: absolute;
    height: 1px;
    width: 100%;
  }
+
+  &__scroll-button {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    height: 32px;
+    width: 32px;
+    border-radius: 14px;
+    border: 1px solid var(--color-border-default);
+    background: var(--color-background-alternative);
+    color: var(--color-icon-default);
+    z-index: 201;
+    cursor: pointer;
+    opacity: 0.8;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
 }

 .popover-wrap.whats-new-popup__popover {
  @include screen-sm-min {
-    max-height: 600px;
+    max-height: 750px;
    width: 500px;
  }

--- a/ui/components/app/whats-new-popup/whats-new-popup.js
+++ b/ui/components/app/whats-new-popup/whats-new-popup.js
@ -8,7 +8,7 @@ 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 { Text } from '../../component-library';
 import { updateViewedNotifications } from '../../../store/actions';
 import { getTranslatedUINotifications } from '../../../../shared/notifications';
 import { getSortedAnnouncementsToShow } from '../../../selectors';
@ -18,7 +18,7 @@ import {
  EXPERIMENTAL_ROUTE,
  SECURITY_ROUTE,
 } from '../../../helpers/constants/routes';
-import { TypographyVariant } from '../../../helpers/constants/design-system';
+import { TextVariant } from '../../../helpers/constants/design-system';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';

 function getActionFunctionById(id, history) {
@ -59,9 +59,13 @@ function getActionFunctionById(id, history) {
      updateViewedNotifications({ 14: true });
      history.push(`${ADVANCED_ROUTE}#backup-userdata`);
    },
+    16: () => {
+      updateViewedNotifications({ 16: true });
+      history.push(`${EXPERIMENTAL_ROUTE}#transaction-security-check`);
+    },
    17: () => {
      updateViewedNotifications({ 17: true });
-      history.push(SECURITY_ROUTE);
+      history.push(`${EXPERIMENTAL_ROUTE}#autodetect-nfts`);
    },
  };

@ -70,11 +74,7 @@ function getActionFunctionById(id, history) {

 const renderDescription = (description) => {
  if (!Array.isArray(description)) {
-    return (
-      <Typography variant={TypographyVariant.paragraph}>
-        {description}
-      </Typography>
-    );
+    return <Text variant={TextVariant.bodyMd}>{description}</Text>;
  }

  return (
@ -82,13 +82,13 @@ const renderDescription = (description) => {
      {description.map((piece, index) => {
        const isLast = index === description.length - 1;
        return (
-          <Typography
+          <Text
            key={`item-${index}`}
-            variant={TypographyVariant.paragraph}
-            boxProps={{ marginBottom: isLast ? 0 : 2 }}
+            variant={TextVariant.bodyMd}
+            marginBottom={isLast ? 0 : 4}
          >
            {piece}
-          </Typography>
+          </Text>
        );
      })}
    </>
@ -117,8 +117,10 @@ const renderFirstNotification = (notification, idRefMap, history, isLast) => {
      )}
      key={`whats-new-popop-notification-${id}`}
    >
+      <Text variant={TextVariant.bodyLgMedium} marginBottom={2}>
+        {title}
+      </Text>
      {!placeImageBelowDescription && imageComponent}
-      <div className="whats-new-popup__notification-title">{title}</div>
      <div className="whats-new-popup__description-and-date">
        <div className="whats-new-popup__notification-description">
          {renderDescription(description)}
@ -128,7 +130,7 @@ const renderFirstNotification = (notification, idRefMap, history, isLast) => {
      {placeImageBelowDescription && imageComponent}
      {actionText && (
        <Button
-          type="secondary"
+          type="primary"
          className="whats-new-popup__button"
          onClick={actionFunction}
        >
@ -187,6 +189,7 @@ export default function WhatsNewPopup({ onClose }) {
  const locale = useSelector(getCurrentLocale);

  const [seenNotifications, setSeenNotifications] = useState({});
+  const [shouldShowScrollButton, setShouldShowScrollButton] = useState(true);

  const popoverRef = useRef();

@ -203,6 +206,15 @@ export default function WhatsNewPopup({ onClose }) {
    [memoizedNotifications],
  );

+  const handleScrollDownClick = (e) => {
+    e.stopPropagation();
+    idRefMap[notifications[notifications.length - 1].id].current.scrollIntoView(
+      {
+        behavior: 'smooth',
+      },
+    );
+    setShouldShowScrollButton(false);
+  };
  useEffect(() => {
    const observer = new window.IntersectionObserver(
      (entries, _observer) => {
@ -238,20 +250,24 @@ export default function WhatsNewPopup({ onClose }) {

  return (
    <Popover
-      className="whats-new-popup__popover"
      title={t('whatsNew')}
+      headerProps={{ padding: [4, 4, 4] }}
+      className="whats-new-popup__popover"
      onClose={() => {
        updateViewedNotifications(seenNotifications);
        onClose();
      }}
      popoverRef={popoverRef}
+      showScrollDown={shouldShowScrollButton && notifications.length > 1}
+      onScrollDownButtonClick={handleScrollDownClick}
    >
      <div className="whats-new-popup__notifications">
        {notifications.map(({ id }, index) => {
          const notification = getTranslatedUINotifications(t, locale)[id];
          const isLast = index === notifications.length - 1;
          // Display the swaps notification with full image
-          return index === 0 || id === 1
+          // Displays the NFTs & OpenSea notifications 16,17 with full image
+          return index === 0 || id === 1 || id === 16 || id === 17
            ? renderFirstNotification(notification, idRefMap, history, isLast)
            : renderSubsequentNotification(
                notification,
--- a/ui/components/ui/popover/popover.component.js
+++ b/ui/components/ui/popover/popover.component.js
@ -13,8 +13,16 @@ import {
  DISPLAY,
  TextVariant,
  Size,
+  BorderColor,
+  IconColor,
 } from '../../../helpers/constants/design-system';
-import { ButtonIcon, Text, ICON_NAMES } from '../../component-library';
+import {
+  ButtonIcon,
+  Text,
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../component-library';

 const defaultHeaderProps = {
  padding: [6, 4, 4],
@ -51,6 +59,8 @@ const Popover = ({
  showArrow,
  CustomBackground,
  popoverRef,
+  showScrollDown,
+  onScrollDownButtonClick,
  centerTitle,
  headerProps = defaultHeaderProps,
  contentProps = defaultContentProps,
@ -108,6 +118,26 @@ const Popover = ({
        className={classnames('popover-wrap', className)}
        ref={popoverRef}
      >
+        {showScrollDown ? (
+          <Box
+            display={DISPLAY.FLEX}
+            alignItems={AlignItems.center}
+            justifyContent={JustifyContent.center}
+            borderColor={BorderColor.borderDefault}
+            backgroundColor={BackgroundColor.backgroundDefault}
+            color={Color.iconDefault}
+            onClick={onScrollDownButtonClick}
+            className="whats-new-popup__scroll-button"
+            data-testid="whats-new-popup-scroll-button"
+          >
+            <Icon
+              name={ICON_NAMES.ARROW_DOWN}
+              color={IconColor.primaryDefault}
+              size={ICON_SIZES.MD}
+              aria-label={t('scrollDown')}
+            />
+          </Box>
+        ) : null}
        {showArrow ? <div className="popover-arrow" /> : null}
        {showHeader && <Header />}
        {children ? (
@ -179,6 +209,14 @@ Popover.propTypes = {
  popoverRef: PropTypes.shape({
    current: PropTypes.instanceOf(window.Element),
  }),
+  /**
+   * Show title of the popover
+   */
+  showScrollDown: PropTypes.bool,
+  /**
+   * ScrollDown handler
+   */
+  onScrollDownButtonClick: PropTypes.func,
  /**
   * Check if use centered title
   */