[FLASK] Update UI related to MetaMask Snaps Platform trademark (#18172)

* Update UI related to MetaMask Snaps Platform trademark

* Remove redundant UI text according to new designs

* Fix lint errors

* Fix e2e test expectation

* Fix lint in test

* Fix e2e test expectation

* Fix some UI parts

* Update CSS for noSnaps message

* Add next design iteration

* Add minor fix

* Update locale message

* Fix learn more text size

* Refactor usage of design system components

---------

Co-authored-by: Erik Marks <rekmarks@protonmail.com>

app/_locales/de/messages.json

@@ -1320,9 +1320,6 @@
   "etherscanViewOn": {
     "message": "Auf Etherscan anzeigen"
   },
-  "expandExperience": {
-    "message": "Erweitern Sie Ihre Web3-Erfahrung"
-  },
   "expandView": {
     "message": "Ansicht erweitern"
   },
@@ -1955,9 +1952,6 @@
   "malformedData": {
     "message": "Fehlerhafte Daten"
   },
-  "manageSnaps": {
-    "message": "Verwalten Sie Ihre installierten Snaps"
-  },
   "max": {
     "message": "Max."
   },

app/_locales/el/messages.json

@@ -1320,9 +1320,6 @@
   "etherscanViewOn": {
     "message": "Προβολή στην Etherscan"
   },
-  "expandExperience": {
-    "message": "Επεκτείνετε την εμπειρία σας στο web3 με τα Snap του MetaMask"
-  },
   "expandView": {
     "message": "Ανάπτυξη Προβολής"
   },
@@ -1955,9 +1952,6 @@
   "malformedData": {
     "message": "Παραμορφωμένα δεδομένα"
   },
-  "manageSnaps": {
-    "message": "Διαχειριστείτε τα εγκατεστημένα Snap σας"
-  },
   "max": {
     "message": "Μέγ."
   },

app/_locales/en/messages.json

@@ -1344,18 +1344,21 @@
   "etherscanViewOn": {
     "message": "View on Etherscan"
   },
-  "expandExperience": {
-    "message": "Expand your web3 experience with MetaMask Snaps"
-  },
   "expandView": {
     "message": "Expand view"
   },
   "experimental": {
     "message": "Experimental"
   },
+  "exploreMetaMaskSnaps": {
+    "message": "Explore MetaMask Snaps"
+  },
   "exportPrivateKey": {
     "message": "Export private key"
   },
+  "extendWalletWithSnaps": {
+    "message": "Extend the wallet experience."
+  },
   "externalExtension": {
     "message": "External extension"
   },
@@ -1997,9 +2000,6 @@
   "malformedData": {
     "message": "Malformed data"
   },
-  "manageSnaps": {
-    "message": "Manage your installed snaps"
-  },
   "max": {
     "message": "Max"
   },
@@ -2285,7 +2285,7 @@
     "message": "No NFTs yet"
   },
   "noSnaps": {
-    "message": "No Snaps installed"
+    "message": "You don't have any snaps installed."
   },
   "noThanksVariant2": {
     "message": "No, thanks."

app/_locales/es/messages.json

@@ -1320,9 +1320,6 @@
   "etherscanViewOn": {
     "message": "Ver en Etherscan"
   },
-  "expandExperience": {
-    "message": "Amplíe su experiencia web3 con complementos de MetaMask"
-  },
   "expandView": {
     "message": "Expandir vista"
   },
@@ -1955,9 +1952,6 @@
   "malformedData": {
     "message": "Datos con formato incorrecto"
   },
-  "manageSnaps": {
-    "message": "Administre sus complementos instalados"
-  },
   "max": {
     "message": "Máx."
   },

app/_locales/fr/messages.json

@@ -1320,9 +1320,6 @@
   "etherscanViewOn": {
     "message": "Afficher sur Etherscan"
   },
-  "expandExperience": {
-    "message": "Développez votre expérience web3 avec les Snaps MetaMask"
-  },
   "expandView": {
     "message": "Agrandir la vue"
   },
@@ -1955,9 +1952,6 @@
   "malformedData": {
     "message": "Données malformées"
   },
-  "manageSnaps": {
-    "message": "Gérez vos Snaps installés"
-  },
   "max": {
     "message": "Max."
   },

app/_locales/hi/messages.json

@@ -1320,9 +1320,6 @@
   "etherscanViewOn": {
     "message": "Etherscan पर देखें"
   },
-  "expandExperience": {
-    "message": "MetaMask स्नैप्स के साथ अपने web3 अनुभव का विस्तार करें"
-  },
   "expandView": {
     "message": "दृश्य का विस्तार करें"
   },
@@ -1955,9 +1952,6 @@
   "malformedData": {
     "message": "विकृत डेटा"
   },
-  "manageSnaps": {
-    "message": "अपने इंस्टाल किए गए स्नैप्स मैनेज करें"
-  },
   "max": {
     "message": "अधिकतम"
   },

app/_locales/id/messages.json

@@ -1320,9 +1320,6 @@
   "etherscanViewOn": {
     "message": "Lihat di Etherscan"
   },
-  "expandExperience": {
-    "message": "Perluas pengalaman web3 Anda dengan MetaMask Snaps"
-  },
   "expandView": {
     "message": "Perluas tampilan"
   },
@@ -1955,9 +1952,6 @@
   "malformedData": {
     "message": "Format data salah"
   },
-  "manageSnaps": {
-    "message": "Kelola Snap yang Anda instal"
-  },
   "max": {
     "message": "Maks"
   },

app/_locales/ja/messages.json

@@ -1320,9 +1320,6 @@
   "etherscanViewOn": {
     "message": "Etherscanで表示"
   },
-  "expandExperience": {
-    "message": "MetaMask Snaps で web3 エクスペリエンスを拡張"
-  },
   "expandView": {
     "message": "ビューを展開"
   },
@@ -1955,9 +1952,6 @@
   "malformedData": {
     "message": "不正な形式のデータ"
   },
-  "manageSnaps": {
-    "message": "インストールされたスナップの管理"
-  },
   "max": {
     "message": "最大"
   },

app/_locales/ko/messages.json

@@ -1320,9 +1320,6 @@
   "etherscanViewOn": {
     "message": "Etherscan에서 보기"
   },
-  "expandExperience": {
-    "message": "MetaMask 스냅으로 web3 경험을 확대하세요"
-  },
   "expandView": {
     "message": "보기 확장"
   },
@@ -1955,9 +1952,6 @@
   "malformedData": {
     "message": "잘못된 데이터"
   },
-  "manageSnaps": {
-    "message": "설치된 스냅을 관리하세요"
-  },
   "max": {
     "message": "최대"
   },

app/_locales/pt/messages.json

@@ -1320,9 +1320,6 @@
   "etherscanViewOn": {
     "message": "Ver no Etherscan"
   },
-  "expandExperience": {
-    "message": "Expanda sua experiência web3 com os snaps da MetaMask"
-  },
   "expandView": {
     "message": "Expandir exibição"
   },
@@ -1955,9 +1952,6 @@
   "malformedData": {
     "message": "Dados inválidos"
   },
-  "manageSnaps": {
-    "message": "Gerencie seus snaps instalados"
-  },
   "max": {
     "message": "Máximo"
   },

app/_locales/ru/messages.json

@@ -1320,9 +1320,6 @@
   "etherscanViewOn": {
     "message": "Посмотреть на Etherscan"
   },
-  "expandExperience": {
-    "message": "Расширьте свои возможности web3 с помощью MetaMask Snaps"
-  },
   "expandView": {
     "message": "Развернуть представление"
   },
@@ -1955,9 +1952,6 @@
   "malformedData": {
     "message": "Искаженные данные"
   },
-  "manageSnaps": {
-    "message": "Управляйте установленными снапами"
-  },
   "max": {
     "message": "Макс."
   },

app/_locales/tl/messages.json

@@ -1320,9 +1320,6 @@
   "etherscanViewOn": {
     "message": "Tingnan sa Etherscan"
   },
-  "expandExperience": {
-    "message": "Palawakin ang iyong karanasan sa web3 gamit ang MetaMask Snaps"
-  },
   "expandView": {
     "message": "I-expand ang view"
   },
@@ -1955,9 +1952,6 @@
   "malformedData": {
     "message": "Pangit na datos"
   },
-  "manageSnaps": {
-    "message": "Pamahalaan ang iyong mga naka-install na snap"
-  },
   "max": {
     "message": "Max"
   },

app/_locales/tr/messages.json

@@ -1320,9 +1320,6 @@
   "etherscanViewOn": {
     "message": "Etherscan'de görüntüle"
   },
-  "expandExperience": {
-    "message": "MetaMask Snap'leri ile web3 deneyimini genişlet"
-  },
   "expandView": {
     "message": "Görünümü genişlet"
   },
@@ -1955,9 +1952,6 @@
   "malformedData": {
     "message": "Hatalı biçimlendirilmiş veri"
   },
-  "manageSnaps": {
-    "message": "Yüklü snap'lerini yönet"
-  },
   "max": {
     "message": "Maksimum"
   },

app/_locales/vi/messages.json

@@ -1320,9 +1320,6 @@
   "etherscanViewOn": {
     "message": "Xem trên Etherscan"
   },
-  "expandExperience": {
-    "message": "Mở rộng trải nghiệm web3 của bạn với MetaMask Snap"
-  },
   "expandView": {
     "message": "Mở rộng cửa sổ xem"
   },
@@ -1955,9 +1952,6 @@
   "malformedData": {
     "message": "Dữ liệu không đúng định dạng"
   },
-  "manageSnaps": {
-    "message": "Quản lý các Snap đã cài đặt"
-  },
   "max": {
     "message": "Tối đa"
   },

app/_locales/zh_CN/messages.json

@@ -1320,9 +1320,6 @@
   "etherscanViewOn": {
     "message": "在 Etherscan 上查看"
   },
-  "expandExperience": {
-    "message": "扩展MetaMask Snap的web3体验"
-  },
   "expandView": {
     "message": "展开视图"
   },
@@ -1955,9 +1952,6 @@
   "malformedData": {
     "message": "格式错误的数据"
   },
-  "manageSnaps": {
-    "message": "管理已安装的Snap"
-  },
   "max": {
     "message": "最大"
   },

test/e2e/snaps/test-snap-management.spec.js

@@ -145,9 +145,12 @@ describe('Test Snap Management', function () {
         // check the results of the removal
         await driver.delay(2000);
         const removeResult = await driver.findElement(
-          '.snap-list-tab__container--no-snaps',
+          '.snap-list-tab__container--no-snaps_inner',
+        );
+        assert.equal(
+          await removeResult.getText(),
+          "You don't have any snaps installed.",
         );
-        assert.equal(await removeResult.getText(), 'No Snaps installed');
       },
     );
   });

ui/pages/settings/flask/snaps-list-tab/index.scss

@@ -18,4 +18,12 @@
     margin: 8px 0;
     max-width: 344px;
   }
+
+  .snap-list-tab__container--no-snaps_inner {
+    max-width: 164px;
+  }
+
+  .snap-list-tab__no-snaps_icon {
+    font-size: 48px;
+  }
 }

ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js

@@ -3,19 +3,28 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import SnapSettingsCard from '../../../../components/app/flask/snap-settings-card';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import Typography from '../../../../components/ui/typography/typography';
 import {
-  TypographyVariant,
-  FLEX_DIRECTION,
   JustifyContent,
   AlignItems,
-  TextColor,
+  Color,
+  TEXT_ALIGN,
+  FLEX_DIRECTION,
+  Size,
 } from '../../../../helpers/constants/design-system';
 import Box from '../../../../components/ui/box';
 import { SNAPS_VIEW_ROUTE } from '../../../../helpers/constants/routes';
 import { disableSnap, enableSnap } from '../../../../store/actions';
 import { getSnaps } from '../../../../selectors';
 import { handleSettingsRefs } from '../../../../helpers/utils/settings-search';
+import {
+  BannerTip,
+  BannerTipLogoType,
+  ButtonLink,
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+  Text,
+} from '../../../../components/component-library';
 
 const SnapListTab = () => {
   const t = useI18nContext();
@@ -42,18 +51,6 @@ const SnapListTab = () => {
     <div className="snap-list-tab" ref={settingsRef}>
       {Object.entries(snaps).length ? (
         <div className="snap-list-tab__body">
-          <Box display="flex" flexDirection={FLEX_DIRECTION.COLUMN}>
-            <Typography variant={TypographyVariant.H5} marginBottom={2}>
-              {t('expandExperience')}
-            </Typography>
-            <Typography
-              variant={TypographyVariant.H6}
-              color={TextColor.textAlternative}
-              marginBottom={2}
-            >
-              {t('manageSnaps')}
-            </Typography>
-          </Box>
           <div className="snap-list-tab__wrapper">
             {Object.entries(snaps).map(([key, snap]) => {
               return (
@@ -82,15 +79,54 @@ const SnapListTab = () => {
           className="snap-list-tab__container--no-snaps"
           width="full"
           height="full"
-          justifyContent={JustifyContent.center}
           alignItems={AlignItems.center}
+          flexDirection={FLEX_DIRECTION.COLUMN}
         >
-          <Typography
+          <Box
-            variant={TypographyVariant.H4}
+            className="snap-list-tab__container--no-snaps_inner"
-            color={TextColor.textAlternative}
+            width="full"
+            height="full"
+            flexDirection={FLEX_DIRECTION.COLUMN}
+            justifyContent={JustifyContent.center}
+            alignItems={AlignItems.center}
           >
-            <span>{t('noSnaps')}</span>
+            <Icon
-          </Typography>
+              name={ICON_NAMES.SNAPS}
+              color={Color.iconMuted}
+              className="snap-list-tab__no-snaps_icon"
+              size={ICON_SIZES.AUTO}
+            />
+            <Text
+              color={Color.textMuted}
+              align={TEXT_ALIGN.CENTER}
+              marginTop={4}
+            >
+              {t('noSnaps')}
+            </Text>
+          </Box>
+          <Box
+            className="snap-list-tab__container--no-snaps_banner-tip"
+            width="full"
+            justifyContent={JustifyContent.center}
+            alignItems={AlignItems.flexEnd}
+            paddingLeft={4}
+            paddingRight={4}
+            paddingBottom={4}
+          >
+            <BannerTip
+              logoType={BannerTipLogoType.Greeting}
+              title={t('exploreMetaMaskSnaps')}
+              description={t('extendWalletWithSnaps')}
+            >
+              <ButtonLink
+                size={Size.auto}
+                href="https://metamask.io/snaps/"
+                target="_blank"
+              >
+                {`${t('learnMoreUpperCase')}`}
+              </ButtonLink>
+            </BannerTip>
+          </Box>
         </Box>
       )}
     </div>