Add support for localised Snap manifests

app/scripts/metamask-controller.js

@@ -77,6 +77,7 @@ import {
   SnapController,
   IframeExecutionService,
 } from '@metamask/snaps-controllers';
+import { getLocalizedSnapManifest } from '@metamask/snaps-utils';
 ///: END:ONLY_INCLUDE_IN
 
 ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
@@ -2230,10 +2231,16 @@ export default class MetamaskController extends EventEmitter {
     this.controllerMessenger.subscribe(
       `${this.snapController.name}:snapAdded`,
       (snap, svgIcon = null) => {
-        const {
-          manifest: { proposedName },
-          version,
-        } = snap;
+        const { manifest, localizationFiles, version } = snap;
+
+        // In case the Snap uses a localized manifest, we need to get the
+        // proposed name from the localized manifest.
+        const { proposedName } = getLocalizedSnapManifest(
+          manifest,
+          'en',
+          localizationFiles,
+        );
+
         this.subjectMetadataController.addSubjectMetadata({
           subjectType: SubjectType.Snap,
           name: proposedName,

ui/components/app/confirm-page-container/snaps/snap-insight.js

@@ -26,9 +26,8 @@ import Box from '../../../ui/box/box';
 import { SnapUIRenderer } from '../../snaps/snap-ui-renderer';
 import { SnapDelineator } from '../../snaps/snap-delineator';
 import { DelineatorType } from '../../../../helpers/constants/snaps';
-import { getSnapName } from '../../../../helpers/utils/util';
 import { Copyable } from '../../snaps/copyable';
-import { getTargetSubjectMetadata } from '../../../../selectors';
+import { getSnapMetadata } from '../../../../selectors';
 ///: BEGIN:ONLY_INCLUDE_IN(build-flask)
 import { trackInsightSnapUsage } from '../../../../store/actions';
 ///: END:ONLY_INCLUDE_IN
@@ -72,12 +71,10 @@ export const SnapInsight = ({
   isLoading = insights.loading;
   ///: END:ONLY_INCLUDE_IN
 
-  const targetSubjectMetadata = useSelector((state) =>
-    getTargetSubjectMetadata(state, snapId),
+  const { name: snapName } = useSelector((state) =>
+    getSnapMetadata(state, snapId),
   );
 
-  const snapName = getSnapName(snapId, targetSubjectMetadata);
-
   const hasNoData = !error && !isLoading && !content;
   return (
     <Box

ui/components/app/snaps/snap-authorship-expanded/snap-authorship-expanded.js

@@ -19,17 +19,10 @@ import {
   TextColor,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
-import {
-  formatDate,
-  getSnapName,
-  removeSnapIdPrefix,
-} from '../../../../helpers/utils/util';
+import { formatDate, removeSnapIdPrefix } from '../../../../helpers/utils/util';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
-import {
-  getSnapRegistryData,
-  getTargetSubjectMetadata,
-} from '../../../../selectors';
+import { getSnapMetadata, getSnapRegistryData } from '../../../../selectors';
 import {
   disableSnap,
   enableSnap,
@@ -58,12 +51,14 @@ const SnapAuthorshipExpanded = ({ snapId, className, snap }) => {
     ? `https://www.npmjs.com/package/${packageName}${versionPath}`
     : packageName;
 
-  const subjectMetadata = useSelector((state) =>
-    getTargetSubjectMetadata(state, snapId),
-  );
   const snapRegistryData = useSelector((state) =>
     getSnapRegistryData(state, snapId),
   );
+
+  const { name: friendlyName } = useSelector((state) =>
+    getSnapMetadata(state, snapId),
+  );
+
   const { website = undefined } = snapRegistryData?.metadata ?? {};
   const [safeWebsite, setSafeWebsite] = useState(null);
 
@@ -75,13 +70,12 @@ const SnapAuthorshipExpanded = ({ snapId, className, snap }) => {
         setSafeWebsite(website);
       }
     };
+
     if (website) {
       performPhishingCheck();
     }
   }, [website]);
 
-  const friendlyName = snapId && getSnapName(snapId, subjectMetadata);
-
   const versionHistory = snap?.versionHistory ?? [];
   const installInfo = versionHistory.length
     ? versionHistory[versionHistory.length - 1]

ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js

@@ -13,13 +13,13 @@ import {
   BlockSize,
   FontWeight,
 } from '../../../../helpers/constants/design-system';
+import { removeSnapIdPrefix } from '../../../../helpers/utils/util';
 import {
-  getSnapName,
-  removeSnapIdPrefix,
-} from '../../../../helpers/utils/util';
+  getSnapMetadata,
+  getTargetSubjectMetadata,
+} from '../../../../selectors';
 
 import { Text, Box } from '../../../component-library';
-import { getTargetSubjectMetadata } from '../../../../selectors';
 import SnapAvatar from '../snap-avatar';
 import SnapVersion from '../snap-version/snap-version';
 
@@ -40,15 +40,18 @@ const SnapAuthorshipHeader = ({
     getTargetSubjectMetadata(state, snapId),
   );
 
+  const { name: snapName } = useSelector((state) =>
+    getSnapMetadata(state, snapId),
+  );
+
   const versionPath = subjectMetadata?.version
     ? `/v/${subjectMetadata?.version}`
     : '';
+
   const url = isNPM
     ? `https://www.npmjs.com/package/${packageName}${versionPath}`
     : packageName;
 
-  const friendlyName = snapId && getSnapName(snapId, subjectMetadata);
-
   return (
     <Box
       className={classnames('snaps-authorship-header', className)}
@@ -72,7 +75,7 @@ const SnapAuthorshipHeader = ({
         style={{ overflow: 'hidden' }}
       >
         <Text ellipsis fontWeight={FontWeight.Medium}>
-          {friendlyName}
+          {snapName}
         </Text>
         <Text
           ellipsis

ui/components/app/snaps/snap-avatar/snap-avatar.js

@@ -10,7 +10,6 @@ import {
   JustifyContent,
   BackgroundColor,
 } from '../../../../helpers/constants/design-system';
-import { getSnapName } from '../../../../helpers/utils/util';
 import {
   AvatarFavicon,
   BadgeWrapper,
@@ -20,7 +19,10 @@ import {
   IconName,
   IconSize,
 } from '../../../component-library';
-import { getTargetSubjectMetadata } from '../../../../selectors';
+import {
+  getSnapMetadata,
+  getTargetSubjectMetadata,
+} from '../../../../selectors';
 
 const SnapAvatar = ({
   snapId,
@@ -33,7 +35,9 @@ const SnapAvatar = ({
     getTargetSubjectMetadata(state, snapId),
   );
 
-  const friendlyName = snapId && getSnapName(snapId, subjectMetadata);
+  const { name: friendlyName } = useSelector((state) =>
+    getSnapMetadata(state, snapId),
+  );
 
   const iconUrl = subjectMetadata?.iconUrl;
 

ui/components/app/snaps/snap-connect-cell/snap-connect-cell.js

@@ -8,7 +8,6 @@ import {
   Display,
   FontWeight,
 } from '../../../../helpers/constants/design-system';
-import { getSnapName } from '../../../../helpers/utils/util';
 import {
   Icon,
   IconName,
@@ -19,14 +18,13 @@ import {
 import Tooltip from '../../../ui/tooltip/tooltip';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import SnapAvatar from '../snap-avatar/snap-avatar';
-import { getTargetSubjectMetadata } from '../../../../selectors';
+import { getSnapManifest } from '../../../../selectors';
 
 export default function SnapConnectCell({ origin, snapId }) {
   const t = useI18nContext();
-  const snapMetadata = useSelector((state) =>
-    getTargetSubjectMetadata(state, snapId),
+  const { name: snapName } = useSelector((state) =>
+    getSnapManifest(state, snapId),
   );
-  const friendlyName = getSnapName(snapId, snapMetadata);
 
   return (
     <Box
@@ -40,7 +38,7 @@ export default function SnapConnectCell({ origin, snapId }) {
         <Text>
           {t('connectSnap', [
             <Text as={ValidTag.Span} key="1" fontWeight={FontWeight.Bold}>
-              {friendlyName}
+              {snapName}
             </Text>,
           ])}
         </Text>
@@ -51,7 +49,7 @@ export default function SnapConnectCell({ origin, snapId }) {
             <div>
               {t('snapConnectionWarning', [
                 <b key="0">{origin}</b>,
-                <b key="1">{friendlyName}</b>,
+                <b key="1">{snapName}</b>,
               ])}
             </div>
           }

ui/components/app/snaps/snap-home-page/snap-home-renderer.js

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { Box, Text } from '../../../component-library';
 import { SnapUIRenderer } from '../snap-ui-renderer';
-import { getTargetSubjectMetadata } from '../../../../selectors';
-import { getSnapName } from '../../../../helpers/utils/util';
+import { getSnapMetadata } from '../../../../selectors';
 import { SnapDelineator } from '../snap-delineator';
 import { DelineatorType } from '../../../../helpers/constants/snaps';
 import { TextVariant } from '../../../../helpers/constants/design-system';
@@ -14,11 +13,10 @@ import { useSnapHome } from './useSnapHome';
 
 export const SnapHomeRenderer = ({ snapId }) => {
   const t = useI18nContext();
-  const targetSubjectMetadata = useSelector((state) =>
-    getTargetSubjectMetadata(state, snapId),
+  const { name: snapName } = useSelector((state) =>
+    getSnapMetadata(state, snapId),
   );
 
-  const snapName = getSnapName(snapId, targetSubjectMetadata);
   const { data, error, loading } = useSnapHome({ snapId });
 
   const content = !loading && !error && data?.content;

ui/components/app/snaps/snap-legacy-authorship-header/snap-legacy-authorship-header.js

@@ -14,13 +14,10 @@ import {
   BorderColor,
   BorderRadius,
 } from '../../../../helpers/constants/design-system';
-import {
-  getSnapName,
-  removeSnapIdPrefix,
-} from '../../../../helpers/utils/util';
+import { removeSnapIdPrefix } from '../../../../helpers/utils/util';
 
 import { Box, Text } from '../../../component-library';
-import { getTargetSubjectMetadata } from '../../../../selectors';
+import { getSnapMetadata } from '../../../../selectors';
 import SnapAvatar from '../snap-avatar';
 
 const SnapLegacyAuthorshipHeader = ({
@@ -30,13 +27,10 @@ const SnapLegacyAuthorshipHeader = ({
   marginRight,
 }) => {
   const packageName = snapId && removeSnapIdPrefix(snapId);
-
-  const subjectMetadata = useSelector((state) =>
-    getTargetSubjectMetadata(state, snapId),
+  const { name: friendlyName } = useSelector((state) =>
+    getSnapMetadata(state, snapId),
   );
 
-  const friendlyName = snapId && getSnapName(snapId, subjectMetadata);
-
   return (
     <Box
       className={classnames('snap-legacy-authorship-header', className)}

ui/components/app/snaps/snap-permissions-list/snap-permissions-list.js

@@ -1,43 +1,67 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import { getWeightedPermissions } from '../../../../helpers/utils/permission';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import PermissionCell from '../../permission-cell';
 import Box from '../../../ui/box';
+import { getSnapMetadata } from '../../../../selectors';
 
 export default function SnapPermissionsList({
   snapId,
+  snapName,
   permissions,
   targetSubjectMetadata,
   showOptions,
 }) {
   const t = useI18nContext();
+  const state = useSelector((value) => value);
+
+  /**
+   * Get the snap name from the snap ID.
+   *
+   * This is used to get the names for permissions which include snap IDs as
+   * caveat.
+   *
+   * @param id - The snap ID.
+   * @returns {string | undefined} The snap name if it exists, or `undefined`.
+   */
+  const getSnapName = (id) => {
+    const snap = getSnapMetadata(state, id);
+    return snap?.name;
+  };
 
   return (
     <Box paddingTop={2} paddingBottom={2} className="snap-permissions-list">
-      {getWeightedPermissions(t, permissions, targetSubjectMetadata).map(
-        (permission, index) => {
-          return (
-            <PermissionCell
-              snapId={snapId}
-              permissionName={permission.permissionName}
-              title={permission.label}
-              description={permission.description}
-              weight={permission.weight}
-              avatarIcon={permission.leftIcon}
-              dateApproved={permission?.permissionValue?.date}
-              key={`${permission.permissionName}-${index}`}
-              showOptions={showOptions}
-            />
-          );
-        },
-      )}
+      {getWeightedPermissions(
+        t,
+        permissions,
+        targetSubjectMetadata,
+        snapName,
+        getSnapName,
+      ).map((permission, index) => {
+        return (
+          <PermissionCell
+            snapId={snapId}
+            snapName={snapName}
+            permissionName={permission.permissionName}
+            title={permission.label}
+            description={permission.description}
+            weight={permission.weight}
+            avatarIcon={permission.leftIcon}
+            dateApproved={permission?.permissionValue?.date}
+            key={`${permission.permissionName}-${index}`}
+            showOptions={showOptions}
+          />
+        );
+      })}
     </Box>
   );
 }
 
 SnapPermissionsList.propTypes = {
   snapId: PropTypes.string.isRequired,
+  snapName: PropTypes.string.isRequired,
   permissions: PropTypes.object.isRequired,
   targetSubjectMetadata: PropTypes.object.isRequired,
   showOptions: PropTypes.bool,

ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js

@@ -15,8 +15,7 @@ import {
 import { SnapDelineator } from '../snap-delineator';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import Box from '../../../ui/box';
-import { getSnapName } from '../../../../helpers/utils/util';
-import { getTargetSubjectMetadata } from '../../../../selectors';
+import { getSnapMetadata } from '../../../../selectors';
 import { Text } from '../../../component-library';
 import { Copyable } from '../copyable';
 import { DelineatorType } from '../../../../helpers/constants/snaps';
@@ -100,12 +99,10 @@ export const SnapUIRenderer = ({
   boxProps,
 }) => {
   const t = useI18nContext();
-  const targetSubjectMetadata = useSelector((state) =>
-    getTargetSubjectMetadata(state, snapId),
+  const { name: snapName } = useSelector((state) =>
+    getSnapMetadata(state, snapId),
   );
 
-  const snapName = getSnapName(snapId, targetSubjectMetadata);
-
   if (isLoading) {
     return (
       <SnapDelineator