Add support for localised Snap manifests (#21909)

## **Description**

This adds support for localised Snap manifests. Instead of getting the
Snap name from the subject metadata controller, I've added a new
selector which returns the localised manifest.

Related to MetaMask/snaps#1508.

## **Manual testing steps**

1. Install `npm:@metamask/localization-example-snap` from test-snaps.
2. Make sure the proper name and description is shown everywhere.

## **Screenshots/Recordings**

<img width="472" alt="image"
src="https://github.com/MetaMask/metamask-extension/assets/7503723/03ce5e0a-a43a-4f5d-be91-ef75b15323ba">

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [ ] I've linked related issues
- [x] I've included manual testing steps
- [x] I've included screenshots/recordings if applicable
- [ ] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [x] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: MetaMask Bot <[email protected]>
Co-authored-by: Hassan Malik <[email protected]>

app/scripts/lib/snap-keyring/snap-keyring.ts

@@ -11,7 +11,6 @@ import { SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES } from '../../../../shared/cons
 import { t } from '../../translate';
 import MetamaskController from '../../metamask-controller';
 import { IconName } from '../../../../ui/components/component-library/icon';
-import { getSnapName } from './utils/getSnapName';
 import { isBlockedUrl } from './utils/isBlockedUrl';
 import { showSuccess, showError } from './utils/showResult';
 import { SnapKeyringBuilderMessenger } from './types';
@@ -40,6 +39,8 @@ export const getAccountsBySnapId = async (
  * @param setSelectedAccountHelper - A function to update current selected account.
  * @param removeAccountHelper - A function to help remove an account based on its address.
  * @param trackEvent - A function to track MetaMetrics events.
+ * @param getSnapName - A function to get a snap's localized
+ * (or non-localized if there are no localization files) name from its manifest.
  * @returns The constructed SnapKeyring builder instance with the following methods:
  * - `saveState`: Persists all keyrings in the keyring controller.
  * - `addAccount`: Initiates the process of adding an account with user confirmation and handling the user input.
@@ -55,6 +56,7 @@ export const snapKeyringBuilder = (
     payload: Record<string, any>,
     options?: Record<string, any>,
   ) => void,
+  getSnapName: (snapId: string) => string,
 ) => {
   const builder = (() => {
     return new SnapKeyring(getSnapController() as any, {
@@ -111,7 +113,7 @@ export const snapKeyringBuilder = (
         snapId: string,
         handleUserInput: (accepted: boolean) => Promise<void>,
       ) => {
-        const snapName = getSnapName(controllerMessenger, snapId);
+        const snapName = getSnapName(snapId);
         const { id: addAccountApprovalId } = controllerMessenger.call(
           'ApprovalController:startFlow',
         );
@@ -237,7 +239,7 @@ export const snapKeyringBuilder = (
         snapId: string,
         handleUserInput: (accepted: boolean) => Promise<void>,
       ) => {
-        const snapName = getSnapName(controllerMessenger, snapId);
+        const snapName = getSnapName(snapId);
         const { id: removeAccountApprovalId } = controllerMessenger.call(
           'ApprovalController:startFlow',
         );

app/scripts/metamask-controller.js

@@ -144,6 +144,13 @@ import {
   TransactionType,
 } from '@metamask/transaction-controller';
 
+///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+import {
+  getLocalizedSnapManifest,
+  stripSnapPrefix,
+} from '@metamask/snaps-utils';
+///: END:ONLY_INCLUDE_IF
+
 ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
 import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils';
 ///: END:ONLY_INCLUDE_IF
@@ -989,7 +996,6 @@ export default class MetamaskController extends EventEmitter {
         'PhishingController:test',
         'PhishingController:maybeUpdateState',
         'KeyringController:getAccounts',
-        'SubjectMetadataController:getSubjectMetadata',
         'AccountsController:setSelectedAccount',
         'AccountsController:getAccountByAddress',
       ],
@@ -1003,6 +1009,31 @@ export default class MetamaskController extends EventEmitter {
       await this.accountsController.updateAccounts();
     };
 
+    const getSnapName = (id) => {
+      if (!id) {
+        return null;
+      }
+
+      const currentLocale = this.getLocale();
+      const { snaps } = this.snapController.state;
+      const snap = snaps[id];
+
+      if (!snap) {
+        return stripSnapPrefix(id);
+      }
+
+      if (snap.localizationFiles) {
+        const localizedManifest = getLocalizedSnapManifest(
+          snap.manifest,
+          currentLocale,
+          snap.localizationFiles,
+        );
+        return localizedManifest.proposedName;
+      }
+
+      return snap.manifest.proposedName;
+    };
+
     additionalKeyrings.push(
       snapKeyringBuilder(
         snapKeyringBuildMessenger,
@@ -1011,6 +1042,7 @@ export default class MetamaskController extends EventEmitter {
         (address) => this.preferencesController.setSelectedAddress(address),
         (address) => this.removeAccount(address),
         this.metaMetricsController.trackEvent.bind(this.metaMetricsController),
+        getSnapName,
       ),
     );