[FLASK] Fix key management permission copy (#14849)

app/_locales/de/messages.json

@@ -2989,10 +2989,6 @@
   "snapInstallWarningCheck": {
     "message": "Um zu bestätigen, dass Sie alles verstanden haben, kreuzen Sie alles an."
   },
-  "snapInstallWarningKeyAccess": {
-    "message": "Sie gewähren dem Snap „$1“ wichtige Zugriffsrechte. Dies kann nicht rückgängig gemacht werden und gibt „$1“ Kontrolle über Ihre Konten und Vermögenswerte. Stellen Sie sicher, dass Sie „$1“ vertrauen, bevor Sie fortfahren.",
-    "description": "The parameter is the name of the snap"
-  },
   "snapRequestsPermission": {
     "message": "Für diesen Snap werden die folgenden Berechtigungen beantragt:"
   },

app/_locales/el/messages.json

@@ -2998,7 +2998,7 @@
     "message": "Υπογραφή"
   },
   "signNotice": {
-    "message": "Η υπογραφή αυτού του μηνύματος μπορεί να έχει\nεπικίνδυνες παρενέργειες. Υπογράφετε μηνύματα μόνο από\nτοποθεσίες που εμπιστεύεστε πλήρως με ολόκληρο τον λογαριασμό σας.\n  Αυτή η επικίνδυνη μέθοδος θα καταργηθεί σε μια μελλοντική έκδοση."
+    "message": "Η υπογραφή αυτού του μηνύματος μπορεί να έχει\nεπικίνδυνες παρενέργειες. Υπογράφετε μηνύματα μόνο από\nτοποθεσίες που εμπιστεύεστε πλήρως με ολόκληρο τον λογαριασμό σας.\n  Αυτή η επικίνδυνη μέθοδος θα καταργηθεί σε μια μελλοντική έκδοση."
   },
   "signatureRequest": {
     "message": "Αίτημα Υπογραφής"
@@ -3045,10 +3045,6 @@
   "snapInstallWarningCheck": {
     "message": "Για να επιβεβαιώσετε ότι καταλαβαίνετε, επιλέξτε όλα τα πλαίσια ελέγχου."
   },
-  "snapInstallWarningKeyAccess": {
-    "message": "Παρέχετε βασική πρόσβαση στο snap \"$1\". Αυτή η ενέργεια είναι μη αναστρέψιμη και παραχωρεί στο \"$1\" τον έλεγχο των λογαριασμών και των περιουσιακών σας στοιχείων. Βεβαιωθείτε ότι εμπιστεύεστε το \"$1\" πριν συνεχίσετε.",
-    "description": "The parameter is the name of the snap"
-  },
   "snapRequestsPermission": {
     "message": "Αυτό το snap αιτείται τις παρακάτω άδειες:"
   },

app/_locales/en/messages.json

@@ -3043,11 +3043,14 @@
     "message": "Install Snap"
   },
   "snapInstallWarningCheck": {
-    "message": "To confirm you understand, check all."
+    "message": "To confirm that you understand, check the box."
+  },
+  "snapInstallWarningCheckPlural": {
+    "message": "To confirm that you understand, check all the boxes."
   },
   "snapInstallWarningKeyAccess": {
-    "message": "You are granting key access to the snap \"$1\". This is irrevocable and grants \"$1\" control of your accounts and assets. Make sure you trust \"$1\" before proceeding.",
+    "message": "You are granting $2 key access to the snap \"$1\". This is irrevocable and grants \"$1\" control of your $2 accounts and assets. Make sure you trust \"$1\" before proceeding.",
-    "description": "The parameter is the name of the snap"
+    "description": "The first parameter is the name of the snap and the second one is the protocol"
   },
   "snapRequestsPermission": {
     "message": "This snap is requesting the following permissions:"
@@ -3958,6 +3961,10 @@
     "message": "This custom network is not recognized",
     "description": "$1 is a clickable link with text defined by the 'unrecognizedChanLinkText' key. The link will open to instructions for users to validate custom network details."
   },
+  "unrecognizedProtocol": {
+    "message": "$1 (Unrecognized protocol)",
+    "description": "Shown when the protocol is unknown by the extension. $1 is the protocol code."
+  },
   "unsendableAsset": {
     "message": "Sending collectible (ERC-721) tokens is not currently supported",
     "description": "This is an error message we show the user if they attempt to send a collectible asset type, for which currently don't support sending"

app/_locales/es/messages.json

@@ -3045,10 +3045,6 @@
   "snapInstallWarningCheck": {
     "message": "Para confirmar que comprende, marque todo."
   },
-  "snapInstallWarningKeyAccess": {
-    "message": "Está otorgando acceso clave al complemento \"$1\". Esto es irrevocable y le otorga a \"$1\" el control de sus cuentas y activos. Asegúrese de confiar en \"$1\" antes de continuar.",
-    "description": "The parameter is the name of the snap"
-  },
   "snapRequestsPermission": {
     "message": "Este complemento solicita los siguientes permisos:"
   },

app/_locales/hi/messages.json

@@ -3045,10 +3045,6 @@
   "snapInstallWarningCheck": {
     "message": "ये पुष्टि करने के लिए कि आप समझते हैं, सभी पर सही का निशान लगाएं।"
   },
-  "snapInstallWarningKeyAccess": {
-    "message": "आप स्नैप \"$1\" को महत्वपूर्ण एक्सेस प्रदान कर रहे हैं। यह अपरिवर्तनीय है और आपके अकाउंट्स और एसेट्स पर \"$1\" को नियंत्रण प्रदान करता है। आगे बढ़ने से पहले सुनिश्चित करें कि आप \"$1\" पर भरोसा करते हैं।",
-    "description": "The parameter is the name of the snap"
-  },
   "snapRequestsPermission": {
     "message": "ये स्नैप निम्नलिखित अनुमतियों हेतु अनुरोध कर रहा है:"
   },

app/_locales/id/messages.json

@@ -3045,10 +3045,6 @@
   "snapInstallWarningCheck": {
     "message": "Untuk mengonfirmasikan Anda sudah paham, centang semua."
   },
-  "snapInstallWarningKeyAccess": {
-    "message": "Anda memberikan akses kunci ke snap \"$1\". Tindakan ini tidak dapat dibatalkan dan memberikan kendali \"$1\" atas akun dan aset Anda. Sebelum melanjutkan, pastikan \"$1\" aman.",
-    "description": "The parameter is the name of the snap"
-  },
   "snapRequestsPermission": {
     "message": "Snap ini meminta izin berikut:"
   },

app/_locales/ja/messages.json

@@ -3045,10 +3045,6 @@
   "snapInstallWarningCheck": {
     "message": "理解したことを確認するために、すべての項目にチェックを入れてください。"
   },
-  "snapInstallWarningKeyAccess": {
-    "message": "スナップ「$1」に重要なアクセス権を付与しようとしています。これは取り消し不可能で、「$1」によるアカウントとアセットのコントロールが可能になります。続行する前に、「$1」が信頼できることを確認してください。",
-    "description": "The parameter is the name of the snap"
-  },
   "snapRequestsPermission": {
     "message": "このスナップが次のパーミッションをリクエストしています:"
   },

app/_locales/ko/messages.json

@@ -3045,10 +3045,6 @@
   "snapInstallWarningCheck": {
     "message": "이해하셨으면 모두 체크해 주세요."
   },
-  "snapInstallWarningKeyAccess": {
-    "message": "'$1' 스냅 이용에 필요한 키 액세스 권한을 부여하고 있습니다. 이 작업은 사용자의 계정과 자산에 '$1' 제어 권한을 부여하며 취소가 불가능합니다. '$1의 신뢰성을 확인한 후에 진행하세요.",
-    "description": "The parameter is the name of the snap"
-  },
   "snapRequestsPermission": {
     "message": "이 스냅이 다음 권한을 요청하고 있습니다."
   },

app/_locales/pt/messages.json

@@ -3045,10 +3045,6 @@
   "snapInstallWarningCheck": {
     "message": "Para confirmar que você entende, marque todas."
   },
-  "snapInstallWarningKeyAccess": {
-    "message": "Você está concedendo ao snap \"$1\" acesso à sua chave. Isso é irrevogável e concede a \"$1\" controle sobre suas contas e ativos. Certifique-se de que confia em \"$1\" antes de prosseguir.",
-    "description": "The parameter is the name of the snap"
-  },
   "snapRequestsPermission": {
     "message": "Esse snap está solicitando as seguintes permissões:"
   },

app/_locales/ru/messages.json

@@ -3045,10 +3045,6 @@
   "snapInstallWarningCheck": {
     "message": "Чтобы подтвердить, что вы понимаете, отметьте все."
   },
-  "snapInstallWarningKeyAccess": {
-    "message": "Вы предоставляете ключевой доступ к снапу «$1». Это действие является безотзывным и предоставляет «$1» контроль над вашими счетами и активами. Прежде чем продолжить, убедитесь, что вы доверяете «$1».",
-    "description": "The parameter is the name of the snap"
-  },
   "snapRequestsPermission": {
     "message": "Этот снап запрашивает следующие разрешения:"
   },

app/_locales/tl/messages.json

@@ -3045,10 +3045,6 @@
   "snapInstallWarningCheck": {
     "message": "Para kumpirmahing naunawaan mo, tsekan lahat."
   },
-  "snapInstallWarningKeyAccess": {
-    "message": "Ipinagkakaloob mo ang key access sa snap \"$1\". Hindi ito maaaring bawiin at ipinagkakaloob sa \"$1\" ang kontrol sa iyong mga account at mga asset. Tiyaking pinagkakatiwalaan mo ang \"$1\" bago magpatuloy.",
-    "description": "The parameter is the name of the snap"
-  },
   "snapRequestsPermission": {
     "message": "Hinihiling ng snap na ito ang mga sumusunod na pahintulot:"
   },

app/_locales/tr/messages.json

@@ -3045,10 +3045,6 @@
   "snapInstallWarningCheck": {
     "message": "Anladığını doğrulamak için hepsini kontrol et."
   },
-  "snapInstallWarningKeyAccess": {
-    "message": "\"$1\" snap'ine anahtar erişimi veriyorsun. Bu geri alınamaz ve hesapların ve varlıkların üzerinde \"1$\" kontrol sağlar. Devam etmeden önce \"$1\" öğesine güvendiğinden emin ol.",
-    "description": "The parameter is the name of the snap"
-  },
   "snapRequestsPermission": {
     "message": "Bu ek, aşağıdaki izinleri istiyor:"
   },

app/_locales/vi/messages.json

@@ -3045,10 +3045,6 @@
   "snapInstallWarningCheck": {
     "message": "Để xác nhận rằng bạn hiểu, hãy đánh dấu vào tất cả."
   },
-  "snapInstallWarningKeyAccess": {
-    "message": "Bạn đang cấp quyền truy cập khóa 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 của bạn cho \"$1\". Đảm bảo bạn tin tưởng \"$1\" trước khi tiếp tục.",
-    "description": "The parameter is the name of the snap"
-  },
   "snapRequestsPermission": {
     "message": "Snap này đang yêu cầu các quyền sau:"
   },

app/_locales/zh/messages.json

@@ -3045,10 +3045,6 @@
   "snapInstallWarningCheck": {
     "message": "请勾选全部以确认您理解。"
   },
-  "snapInstallWarningKeyAccess": {
-    "message": "您正在向snap \"$1\"授予密钥访问权限。此操作不可撤销，并会向\"$1\"授予对您的账户和资产的控制权。在继续之前，请确保您信任\"$1\"。",
-    "description": "The parameter is the name of the snap"
-  },
   "snapRequestsPermission": {
     "message": "此Snap正在请求以下权限："
   },

test/e2e/snaps/test-snap-bip-44.spec.js

@@ -69,7 +69,7 @@ describe('Test Snap bip-44', function () {
         });
         // deal with permissions popover
         await driver.delay(1000);
-        await driver.press('#warning-accept', driver.Key.SPACE);
+        await driver.press('#key-access-0', driver.Key.SPACE);
         await driver.clickElement({
           text: 'Confirm',
           tag: 'button',

ui/components/app/flask/snap-install-warning/index.scss

@@ -5,6 +5,11 @@
     display: flex;
     align-items: flex-start;
     gap: 0 16px;
+    margin-top: 16px;
+
+    &--first {
+      margin-top: 0;
+    }
   }
 
   &__footer {

ui/components/app/flask/snap-install-warning/snap-install-warning.js

@@ -1,5 +1,7 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useReducer } from 'react';
 import PropTypes from 'prop-types';
+import { produce } from 'immer';
+import classnames from 'classnames';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import CheckBox from '../../../ui/check-box/check-box.component';
 import Typography from '../../../ui/typography/typography';
@@ -7,14 +9,34 @@ import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
 import Popover from '../../../ui/popover';
 import Button from '../../../ui/button';
 
-export default function SnapInstallWarning({ onCancel, onSubmit, snapName }) {
+/**
-  const t = useI18nContext();
+ * a very simple reducer using produce from Immer to keep checkboxes state manipulation
-  const [isConfirmed, setIsConfirmed] = useState(false);
+ * immutable and painless.
+ */
+const checkboxStateReducer = produce((state, action) => {
+  switch (action.type) {
+    case 'check':
+      state[action.checkboxId] = state[action.checkboxId]
+        ? !state[action.checkboxId]
+        : true;
 
-  const onCheckboxClicked = useCallback(
+      break;
-    () => setIsConfirmed((confirmedState) => !confirmedState),
+    default:
-    [],
+      throw new Error(
+        'You must provide a type when dispatching an action for checkboxState',
       );
+  }
+});
+
+export default function SnapInstallWarning({ onCancel, onSubmit, warnings }) {
+  const t = useI18nContext();
+  const [checkboxState, dispatch] = useReducer(checkboxStateReducer, {});
+
+  const isAllChecked = warnings.every((warning) => checkboxState[warning.id]);
+
+  const onCheckboxClicked = useCallback((checkboxId) => {
+    dispatch({ type: 'check', checkboxId });
+  }, []);
 
   const SnapInstallWarningFooter = () => {
     return (
@@ -29,7 +51,7 @@ export default function SnapInstallWarning({ onCancel, onSubmit, snapName }) {
         <Button
           className="snap-install-warning__footer-button"
           type="primary"
-          disabled={!isConfirmed}
+          disabled={!isAllChecked}
           onClick={onSubmit}
         >
           {t('confirm')}
@@ -48,18 +70,25 @@ export default function SnapInstallWarning({ onCancel, onSubmit, snapName }) {
       footerProps={{ padding: [4, 6] }}
     >
       <Typography variant={TYPOGRAPHY.H6} boxProps={{ paddingBottom: 4 }}>
-        {t('snapInstallWarningCheck')}
+        {warnings.length > 1
+          ? t('snapInstallWarningCheckPlural')
+          : t('snapInstallWarningCheck')}
       </Typography>
-      <div className="checkbox-label">
+      {warnings.map((warning, i) => (
+        <div
+          className={classnames('checkbox-label', {
+            'checkbox-label--first': i === 0,
+          })}
+          key={warning.id}
+        >
           <CheckBox
-          checked={isConfirmed}
+            checked={checkboxState[warning.id] ?? false}
-          id="warning-accept"
+            id={warning.id}
-          onClick={onCheckboxClicked}
+            onClick={() => onCheckboxClicked(warning.id)}
           />
-        <label htmlFor="warning-accept">
+          <label htmlFor={warning.id}>{warning.message}</label>
-          {t('snapInstallWarningKeyAccess', [snapName])}
-        </label>
         </div>
+      ))}
     </Popover>
   );
 }
@@ -74,7 +103,10 @@ SnapInstallWarning.propTypes = {
    */
   onSubmit: PropTypes.func,
   /**
-   * Name of snap
+   * warnings list
    */
-  snapName: PropTypes.string,
+  warnings: PropTypes.arrayOf({
+    message: PropTypes.node,
+    id: PropTypes.string,
+  }),
 };

ui/pages/permissions-connect/flask/snap-install/snap-install.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { PageContainerFooter } from '../../../../components/ui/page-container';
 import PermissionsConnectPermissionList from '../../../../components/app/permissions-connect-permission-list';
 import PermissionsConnectFooter from '../../../../components/app/permissions-connect-footer';
@@ -16,6 +16,7 @@ import {
   TYPOGRAPHY,
 } from '../../../../helpers/constants/design-system';
 import Typography from '../../../../components/ui/typography';
+import { coinTypeToProtocolName } from '../../../../helpers/utils/util';
 
 export default function SnapInstall({
   request,
@@ -37,17 +38,17 @@ export default function SnapInstall({
     [request, approveSnapInstall],
   );
 
-  const shouldShowWarning = useMemo(
+  const bip44EntropyPermissions =
-    () =>
-      Boolean(
     request.permissions &&
-          Object.keys(request.permissions).find((v) =>
+    Object.keys(request.permissions).filter((v) =>
       v.startsWith('snap_getBip44Entropy_'),
-          ),
-      ),
-    [request.permissions],
     );
 
+  const shouldShowWarning = bip44EntropyPermissions?.length > 0;
+
+  const getCoinType = (bip44EntropyPermission) =>
+    bip44EntropyPermission?.split('_').slice(-1);
+
   return (
     <Box
       className="page-container snap-install"
@@ -128,7 +129,17 @@ export default function SnapInstall({
         <SnapInstallWarning
           onCancel={() => setIsShowingWarning(false)}
           onSubmit={onSubmit}
-          snapName={targetSubjectMetadata.name}
+          warnings={bip44EntropyPermissions.map((permission, i) => {
+            const coinType = getCoinType(permission);
+            return {
+              id: `key-access-${i}`,
+              message: t('snapInstallWarningKeyAccess', [
+                targetSubjectMetadata.name,
+                coinTypeToProtocolName(coinType) ||
+                  t('unrecognizedProtocol', [coinType]),
+              ]),
+            };
+          })}
         />
       )}
     </Box>