From 0847917df43c2401faa091b89964ff2eb1a51165 Mon Sep 17 00:00:00 2001 From: David Drazic Date: Tue, 21 Mar 2023 16:52:13 +0100 Subject: [PATCH] [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 --- app/_locales/de/messages.json | 6 -- app/_locales/el/messages.json | 6 -- app/_locales/en/messages.json | 14 ++-- app/_locales/es/messages.json | 6 -- app/_locales/fr/messages.json | 6 -- app/_locales/hi/messages.json | 6 -- app/_locales/id/messages.json | 6 -- app/_locales/ja/messages.json | 6 -- app/_locales/ko/messages.json | 6 -- app/_locales/pt/messages.json | 6 -- app/_locales/ru/messages.json | 6 -- app/_locales/tl/messages.json | 6 -- app/_locales/tr/messages.json | 6 -- app/_locales/vi/messages.json | 6 -- app/_locales/zh_CN/messages.json | 6 -- test/e2e/snaps/test-snap-management.spec.js | 7 +- .../settings/flask/snaps-list-tab/index.scss | 8 ++ .../flask/snaps-list-tab/snap-list-tab.js | 80 ++++++++++++++----- 18 files changed, 78 insertions(+), 115 deletions(-) diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index 3923e2b5e..5840f9916 100644 --- a/app/_locales/de/messages.json +++ b/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." }, diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index 19f736c5f..6abefcb9f 100644 --- a/app/_locales/el/messages.json +++ b/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": "Μέγ." }, diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 9d3aaeb94..cf38aa3a2 100644 --- a/app/_locales/en/messages.json +++ b/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." diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index 94b2d78da..441bc9198 100644 --- a/app/_locales/es/messages.json +++ b/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." }, diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index 34849859e..18ac12f3c 100644 --- a/app/_locales/fr/messages.json +++ b/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." }, diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index b57d88ae8..ff8eaa61e 100644 --- a/app/_locales/hi/messages.json +++ b/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": "अधिकतम" }, diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index a5c4bd5e2..51ce82d38 100644 --- a/app/_locales/id/messages.json +++ b/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" }, diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index 04461f0f6..945fbf1a7 100644 --- a/app/_locales/ja/messages.json +++ b/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": "最大" }, diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index b321862ab..61c23b3ac 100644 --- a/app/_locales/ko/messages.json +++ b/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": "최대" }, diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json index 86f69b1c0..f58d4221a 100644 --- a/app/_locales/pt/messages.json +++ b/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" }, diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index dd8db16a5..06f9a8f40 100644 --- a/app/_locales/ru/messages.json +++ b/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": "Макс." }, diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index d7e0c937d..345c258cb 100644 --- a/app/_locales/tl/messages.json +++ b/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" }, diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index 5887a63d5..19cbbec96 100644 --- a/app/_locales/tr/messages.json +++ b/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" }, diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index 9a19d71b3..2f2035b36 100644 --- a/app/_locales/vi/messages.json +++ b/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" }, diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 49b04ecd2..3fed40c8c 100644 --- a/app/_locales/zh_CN/messages.json +++ b/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": "最大" }, diff --git a/test/e2e/snaps/test-snap-management.spec.js b/test/e2e/snaps/test-snap-management.spec.js index b8eab6b0b..cb44e7d57 100644 --- a/test/e2e/snaps/test-snap-management.spec.js +++ b/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'); }, ); }); diff --git a/ui/pages/settings/flask/snaps-list-tab/index.scss b/ui/pages/settings/flask/snaps-list-tab/index.scss index 927849aec..abf10efd2 100644 --- a/ui/pages/settings/flask/snaps-list-tab/index.scss +++ b/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; + } } diff --git a/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js b/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js index ae3aa2918..c920985e4 100644 --- a/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js +++ b/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 = () => {
{Object.entries(snaps).length ? (
- - - {t('expandExperience')} - - - {t('manageSnaps')} - -
{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} > - - {t('noSnaps')} - + + + {t('noSnaps')} + + + + + + {`${t('learnMoreUpperCase')}`} + + + )}