From 2e856894cc2fbbd91054a1ff069556cc3e1e191c Mon Sep 17 00:00:00 2001 From: David Drazic Date: Thu, 8 Jun 2023 12:32:47 +0200 Subject: [PATCH] [FLASK] Update snap installation permission warning UI (#19494) * Update snap installation permission warning UI * Fix font size (TextVariant) * Fix vertical margins between labels * Update font weight in warning top description * Update snapName for warning modal on update flow --- app/_locales/de/messages.json | 6 ++- app/_locales/el/messages.json | 6 ++- app/_locales/en/messages.json | 10 +++-- 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 ++- .../app/snaps/snap-install-warning/index.scss | 2 +- .../snap-install-warning.js | 38 ++++++++++++++++--- ui/helpers/utils/permission.js | 28 +++++--------- .../snaps/snap-install/snap-install.js | 1 + .../snaps/snap-update/snap-update.js | 2 +- 20 files changed, 107 insertions(+), 58 deletions(-) diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index 31c1dd157..296c782a0 100644 --- a/app/_locales/de/messages.json +++ b/app/_locales/de/messages.json @@ -3260,10 +3260,12 @@ "message": "Snap installieren" }, "snapInstallWarningCheck": { - "message": "Um zu bestätigen, dass Sie das verstanden haben, markieren Sie das Kästchen." + "message": "Um zu bestätigen, dass Sie das verstanden haben, markieren Sie das Kästchen.", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "Um zu bestätigen, dass Sie alles verstanden haben, markieren Sie alle Kästchen." + "message": "Um zu bestätigen, dass Sie alles verstanden haben, markieren Sie alle Kästchen.", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningKeyAccess": { "message": "Sie gewähren dem Snap „$1“ wichtige $2-Zugriffsrechte. Dies kann nicht rückgängig gemacht werden und gibt „$1“ Kontrolle über Ihre $2-Konten und Vermögenswerte. Stellen Sie sicher, dass Sie „$1“ vertrauen, bevor Sie fortfahren.", diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index 3dc176724..c23dd401b 100644 --- a/app/_locales/el/messages.json +++ b/app/_locales/el/messages.json @@ -3257,10 +3257,12 @@ "message": "Εγκατάσταση Snap" }, "snapInstallWarningCheck": { - "message": "Για να επιβεβαιώσετε ότι καταλαβαίνετε, επιλέξτε όλα τα πλαίσια ελέγχου." + "message": "Για να επιβεβαιώσετε ότι καταλαβαίνετε, επιλέξτε όλα τα πλαίσια ελέγχου.", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "Για να επιβεβαιώσετε ότι καταλαβαίνετε, επιλέξτε όλα τα κουτάκια." + "message": "Για να επιβεβαιώσετε ότι καταλαβαίνετε, επιλέξτε όλα τα κουτάκια.", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningKeyAccess": { "message": "Εκχωρείτε στο $2 βασική πρόσβαση στο snap \"$1\". Αυτό είναι αμετάκλητο και παρέχει στο \"$1\" τον έλεγχο των λογαριασμών και των περιουσιακών σας στοιχείων $2. Βεβαιωθείτε ότι εμπιστεύεστε το \"$1\" προτού συνεχίσετε.", diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index be79b0fc8..0998e7d5c 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -3793,20 +3793,22 @@ "message": "Installation complete" }, "snapInstallWarningCheck": { - "message": "Ensure that the permission below aligns with your intended actions. Only proceed with authors you trust." + "message": "Take a moment to review the permission being requested. Only continue if you trust $1.", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "Ensure that the permissions below align with your intended actions. Only proceed with authors you trust." + "message": "Take a moment to review the permissions being requested. Only continue if you trust $1.", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningHeading": { "message": "Proceed with caution" }, "snapInstallWarningKeyAccess": { - "message": "Grant $2 account control to $1", + "message": "Give $2 account control to $1", "description": "The first parameter is the name of the snap and the second one is the protocol" }, "snapInstallWarningPublicKeyAccess": { - "message": "Grant $2 public key access to $1", + "message": "Give $2 public key access to $1", "description": "The first parameter is the name of the snap and the second one is the protocol" }, "snapInstallationErrorDescription": { diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index dc987c1b1..29efbad01 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -3260,10 +3260,12 @@ "message": "Instalar complemento" }, "snapInstallWarningCheck": { - "message": "Para confirmar que comprende, verifique la casilla." + "message": "Para confirmar que comprende, verifique la casilla.", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "Para confirmar que comprende, marque todas las casillas." + "message": "Para confirmar que comprende, marque todas las casillas.", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningKeyAccess": { "message": "Está otorgando acceso clave de $2 al complemento \"$1\". Esto es irrevocable y le otorga a \"$1\" el control de sus cuentas y activos de $2. Asegúrese de que confía en \"$1\" antes de continuar.", diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index c0a0bb25d..4a97cc41b 100644 --- a/app/_locales/fr/messages.json +++ b/app/_locales/fr/messages.json @@ -3260,10 +3260,12 @@ "message": "Installer Snap" }, "snapInstallWarningCheck": { - "message": "Cochez la case pour confirmer que vous avez compris." + "message": "Cochez la case pour confirmer que vous avez compris.", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "Veuillez confirmer que vous avez bien compris en cochant toutes les cases." + "message": "Veuillez confirmer que vous avez bien compris en cochant toutes les cases.", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningKeyAccess": { "message": "Vous autorisez $2 à accéder à la clé du snap « $1 ». Cette action est irréversible et accorde à « $1 » le contrôle de vos comptes et actifs $2. Assurez-vous que vous faites confiance à « $1 » avant de continuer.", diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index b755fbe8a..b5c3b4980 100644 --- a/app/_locales/hi/messages.json +++ b/app/_locales/hi/messages.json @@ -3260,10 +3260,12 @@ "message": "स्नैप इंस्टाल करें" }, "snapInstallWarningCheck": { - "message": "ये पुष्टि करने के लिए कि आप समझते हैं, सभी बॉक्स पर सही का निशान लगाएं।" + "message": "ये पुष्टि करने के लिए कि आप समझते हैं, सभी बॉक्स पर सही का निशान लगाएं।", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "ये पुष्टि करने के लिए कि आप समझते हैं, सभी बॉक्स पर सही का निशान लगाएं:" + "message": "ये पुष्टि करने के लिए कि आप समझते हैं, सभी बॉक्स पर सही का निशान लगाएं:", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningKeyAccess": { "message": "आप स्नैप \"$1\" के लिए $2 कुंजी का एक्सेस प्रदान कर रहे हैं। यह अपरिवर्तनीय है और आपके $2 खातों और संपत्तियों पर \"$1\" नियंत्रण प्रदान करता है। आगे बढ़ने से पहले सुनिश्चित करें कि आप \"$1\" पर भरोसा करते हैं।", diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index b4d8b9460..1e3c7dc61 100644 --- a/app/_locales/id/messages.json +++ b/app/_locales/id/messages.json @@ -3260,10 +3260,12 @@ "message": "Instal Snap" }, "snapInstallWarningCheck": { - "message": "Untuk mengonfirmasikan bahwa Anda sudah paham, centang kotaknya." + "message": "Untuk mengonfirmasikan bahwa Anda sudah paham, centang kotaknya.", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "Untuk mengonfirmasikan bahwa Anda memahaminya, centang semua kotak." + "message": "Untuk mengonfirmasikan bahwa Anda memahaminya, centang semua kotak.", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningKeyAccess": { "message": "Anda memberikan $2 akses kunci ke snap \"$1\". Tindakan ini tidak dapat dibatalkan dan memberikan kendali \"$1\" atas akun dan aset $2 Anda. Sebelum melanjutkan, pastikan \"$1\" aman.", diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index 07491c218..f803f34d6 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -3260,10 +3260,12 @@ "message": "スナップをインストール" }, "snapInstallWarningCheck": { - "message": "理解したことを確認するために、次の項目にチェックを入れてください." + "message": "理解したことを確認するために、次の項目にチェックを入れてください.", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "理解したことを確認するために、すべての項目にチェックを入れてください。" + "message": "理解したことを確認するために、すべての項目にチェックを入れてください。", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningKeyAccess": { "message": "スナップ「$1」に $2 へのキーアクセスを許可しようとしています。この操作は取り消し不能であり、$2 アカウントとアセットのコントロールを「$1」に許可することになります。続行する前に、必ず「$1」が信頼できることを確認してください。", diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index 13476df6b..059a40857 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -3260,10 +3260,12 @@ "message": "스냅 설치" }, "snapInstallWarningCheck": { - "message": "이해하셨으면 모두 체크해 주세요." + "message": "이해하셨으면 모두 체크해 주세요.", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "이해하셨으면 모든 란에 체크하세요." + "message": "이해하셨으면 모든 란에 체크하세요.", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningKeyAccess": { "message": "'$1' 스냅 이용에 필요한 $2 키 액세스 권한을 부여하고 있습니다. 이 작업은 사용자의 $2 계정과 자산에 '$1' 제어 권한을 부여하며 취소가 불가능합니다. '$1의 신뢰성을 확인한 후에 진행하세요.", diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json index 53e9e339a..fe2f5e21c 100644 --- a/app/_locales/pt/messages.json +++ b/app/_locales/pt/messages.json @@ -3260,10 +3260,12 @@ "message": "Instalar snap" }, "snapInstallWarningCheck": { - "message": "Para confirmar que você entende, marque a caixa." + "message": "Para confirmar que você entende, marque a caixa.", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "Para confirmar que você entende, marque todas as caixas." + "message": "Para confirmar que você entende, marque todas as caixas.", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningKeyAccess": { "message": "Você está concedendo ao snap \"$1\" acesso à sua chave $2. Isso é irrevogável e concede a \"$1\" controle de suas contas e ativos $2. Certifique-se de que confia em \"$1\" antes de prosseguir.", diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index f72e4137c..2b23b4927 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -3260,10 +3260,12 @@ "message": "Установить снап" }, "snapInstallWarningCheck": { - "message": "Чтобы подтвердить, что вы понимаете, отметьте все." + "message": "Чтобы подтвердить, что вы понимаете, отметьте все.", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "Чтобы подтвердить, что вы понимаете, отметьте все ячейки." + "message": "Чтобы подтвердить, что вы понимаете, отметьте все ячейки.", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningKeyAccess": { "message": "Вы предоставляете ключ доступа $2 к привязке \"$1\". Это действие нельзя отменить, и оно предоставляет \"$1\" управление всеми счетами и активами $2. Перед тем как продолжить, убедитесь, что доверяете \"$1\".", diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index 491a96846..8c8304d43 100644 --- a/app/_locales/tl/messages.json +++ b/app/_locales/tl/messages.json @@ -3260,10 +3260,12 @@ "message": "I-install ang snap" }, "snapInstallWarningCheck": { - "message": "Para kumpirmahing naunawaan mo, tsekan lahat." + "message": "Para kumpirmahing naunawaan mo, tsekan lahat.", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "Para kumpirmahin na naiintindihan mo, lagyan ng tsek ang lahat ng kahon." + "message": "Para kumpirmahin na naiintindihan mo, lagyan ng tsek ang lahat ng kahon.", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningKeyAccess": { "message": "Binibigyan mo ang $2 ng key access sa snap na \"$1\". Hindi na ito mababawi at nagbibigay ito sa \"$1\" ng kontrol sa iyong mga $2 account at asset. Tiyaking pinagkakatiwalaan mo ang \"$1\" bago magpatuloy.", diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index 93c9e2112..a0c7eb71a 100644 --- a/app/_locales/tr/messages.json +++ b/app/_locales/tr/messages.json @@ -3260,10 +3260,12 @@ "message": "Snap'i yükle" }, "snapInstallWarningCheck": { - "message": "Anladığını doğrulamak için kutucuğu işaretle." + "message": "Anladığını doğrulamak için kutucuğu işaretle.", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "Anladığınızı kontrol etmek için tüm kutuları işaretleyin." + "message": "Anladığınızı kontrol etmek için tüm kutuları işaretleyin.", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningKeyAccess": { "message": "\"$1\" için $2 anahtar erişimi veriyorsunuz. Bu iptal edilemez ve $2 hesaplarınıza ve varlıklarınıza \"$1\" kontrolü verir. İlerlemeden önce \"$1\" alanına güvendiğinizden emin olun.", diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index f50298ce6..079a7e438 100644 --- a/app/_locales/vi/messages.json +++ b/app/_locales/vi/messages.json @@ -3260,10 +3260,12 @@ "message": "Cài đặt Snap" }, "snapInstallWarningCheck": { - "message": "Để xác nhận rằng bạn hiểu, hãy đánh dấu vào ô." + "message": "Để xác nhận rằng bạn hiểu, hãy đánh dấu vào ô.", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "Để xác nhận rằng bạn hiểu, hãy đánh dấu vào tất cả các ô." + "message": "Để xác nhận rằng bạn hiểu, hãy đánh dấu vào tất cả các ô.", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningKeyAccess": { "message": "Bạn đang cấp quyền truy cập khóa $2 cho Snap \"$1\". Hành động này không thể hủy bỏ và sẽ cấp quyền kiểm soát tài khoản và tài sản $2 của bạn cho \"$1\". Đảm bảo bạn tin tưởng \"$1\" trước khi tiếp tục.", diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 9cd2622f3..6d34eb39d 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -3260,10 +3260,12 @@ "message": "安装Snap" }, "snapInstallWarningCheck": { - "message": "请勾选选项框以确认您理解。" + "message": "请勾选选项框以确认您理解。", + "description": "Warning message used in popup displayed on snap install. $1 is the snap name." }, "snapInstallWarningCheckPlural": { - "message": "请勾选所有方框以确认您理解。" + "message": "请勾选所有方框以确认您理解。", + "description": "Warning message used in popup displayed on snap install when having multiple permissions. $1 is the snap name." }, "snapInstallWarningKeyAccess": { "message": "您正在向snap \"$1\"授予$2的密钥访问权限。此操作不可撤销，并会向\"$1\"授予对您的$2账户和资产的控制权。在继续之前，请确保您信任\"$1\"。", diff --git a/ui/components/app/snaps/snap-install-warning/index.scss b/ui/components/app/snaps/snap-install-warning/index.scss index ddbf9c8d4..e994e8b95 100644 --- a/ui/components/app/snaps/snap-install-warning/index.scss +++ b/ui/components/app/snaps/snap-install-warning/index.scss @@ -9,7 +9,7 @@ display: flex; align-items: flex-start; gap: 0 16px; - margin-top: 16px; + margin-top: 24px; &--first { margin-top: 0; diff --git a/ui/components/app/snaps/snap-install-warning/snap-install-warning.js b/ui/components/app/snaps/snap-install-warning/snap-install-warning.js index c289be56f..e4337c3d6 100644 --- a/ui/components/app/snaps/snap-install-warning/snap-install-warning.js +++ b/ui/components/app/snaps/snap-install-warning/snap-install-warning.js @@ -12,6 +12,7 @@ import { TextAlign, Size, JustifyContent, + FontWeight, } from '../../../../helpers/constants/design-system'; import Popover from '../../../ui/popover'; import Button from '../../../ui/button'; @@ -37,7 +38,12 @@ const checkboxStateReducer = produce((state, action) => { } }); -export default function SnapInstallWarning({ onCancel, onSubmit, warnings }) { +export default function SnapInstallWarning({ + onCancel, + onSubmit, + warnings, + snapName, +}) { const t = useI18nContext(); const [checkboxState, dispatch] = useReducer(checkboxStateReducer, {}); @@ -81,21 +87,37 @@ export default function SnapInstallWarning({ onCancel, onSubmit, warnings }) { iconName={IconName.Danger} backgroundColor={BackgroundColor.warningMuted} color={IconColor.warningDefault} - size={Size.LG} + size={Size.XL} /> {t('snapInstallWarningHeading')} {warnings.length > 1 - ? t('snapInstallWarningCheckPlural') - : t('snapInstallWarningCheck')} + ? t('snapInstallWarningCheckPlural', [ + + {snapName} + , + ]) + : t('snapInstallWarningCheck', [ + + {snapName} + , + ])} {warnings.map((warning, i) => (
onCheckboxClicked(warning.id)} />
))} @@ -134,4 +156,8 @@ SnapInstallWarning.propTypes = { message: PropTypes.node, id: PropTypes.string, }), + /** + * Snap name + */ + snapName: PropTypes.string.isRequired, }; diff --git a/ui/helpers/utils/permission.js b/ui/helpers/utils/permission.js index 550ffd3af..dff9a8e27 100644 --- a/ui/helpers/utils/permission.js +++ b/ui/helpers/utils/permission.js @@ -24,12 +24,7 @@ import { IconSize, } from '../../components/component-library'; ///: BEGIN:ONLY_INCLUDE_IN(snaps) -import { - Color, - FONT_WEIGHT, - IconColor, - TextVariant, -} from '../constants/design-system'; +import { Color, FontWeight, IconColor } from '../constants/design-system'; import { coinTypeToProtocolName, getSnapDerivationPathName, @@ -93,16 +88,15 @@ export const PERMISSION_DESCRIPTIONS = deepFreeze({ {getSnapName(targetSubjectMetadata?.origin)} , - + {getSnapDerivationPathName(path, curve) ?? `${path.join('/')} (${curve})`} - , + , ]), }; @@ -163,16 +157,15 @@ export const PERMISSION_DESCRIPTIONS = deepFreeze({ {getSnapName(targetSubjectMetadata?.origin)} , - + {getSnapDerivationPathName(path, curve) ?? `${path.join('/')} (${curve})`} - , + , ]), }; @@ -245,16 +238,15 @@ export const PERMISSION_DESCRIPTIONS = deepFreeze({ {getSnapName(targetSubjectMetadata?.origin)} , - + {coinTypeToProtocolName(coinType) || t('unrecognizedProtocol', [coinType])} - , + , ]), })), [RestrictedMethods.snap_getEntropy]: ({ t }) => ({ diff --git a/ui/pages/permissions-connect/snaps/snap-install/snap-install.js b/ui/pages/permissions-connect/snaps/snap-install/snap-install.js index 5a1e1de55..37fdd4faf 100644 --- a/ui/pages/permissions-connect/snaps/snap-install/snap-install.js +++ b/ui/pages/permissions-connect/snaps/snap-install/snap-install.js @@ -179,6 +179,7 @@ export default function SnapInstall({ onCancel={() => setIsShowingWarning(false)} onSubmit={onSubmit} warnings={warnings} + snapName={snapName} /> )} diff --git a/ui/pages/permissions-connect/snaps/snap-update/snap-update.js b/ui/pages/permissions-connect/snaps/snap-update/snap-update.js index a6bbf356e..cf066d2c4 100644 --- a/ui/pages/permissions-connect/snaps/snap-update/snap-update.js +++ b/ui/pages/permissions-connect/snaps/snap-update/snap-update.js @@ -205,7 +205,7 @@ export default function SnapUpdate({ setIsShowingWarning(false)} onSubmit={onSubmit} - snapName={targetSubjectMetadata.name} + snapName={snapName} warnings={warnings} /> )}