Add hardcoded list of human-readable snap names (#17595)

* Add hardcoded list of human-readable snap names

* Make the text properly bold

* Small style fixes to approval screen

* Run yarn lint:fix

* Update snapshots

app/_locales/en/messages.json

@@ -2668,6 +2668,10 @@
   "permissionRevoked": {
     "message": "Revoked in this update"
   },
+  "permission_accessNamedSnap": {
+    "message": "Connect to $1.",
+    "description": "The description for the `wallet_snap_*` permission. $1 is the human-readable name of the Snap."
+  },
   "permission_accessNetwork": {
     "message": "Access the internet.",
     "description": "The description of the `endowment:network-access` permission."

shared/constants/snaps.ts

@@ -0,0 +1,43 @@
+///: BEGIN:ONLY_INCLUDE_IN(flask)
+type SnapsMetadata = {
+  [snapId: string]: {
+    name: string;
+  };
+};
+
+// If a Snap ID is present in this object, its metadata is used before the info
+// of the snap is fetched. Ideally this information would be fetched from the
+// snap registry, but this is a temporary solution.
+export const SNAPS_METADATA: SnapsMetadata = {
+  'npm:@metamask/test-snap-error': {
+    name: 'Error Test Snap',
+  },
+  'npm:@metamask/test-snap-confirm': {
+    name: 'Confirm Test Snap',
+  },
+  'npm:@metamask/test-snap-dialog': {
+    name: 'Dialog Test Snap',
+  },
+  'npm:@metamask/test-snap-bip44': {
+    name: 'BIP-44 Test Snap',
+  },
+  'npm:@metamask/test-snap-managestate': {
+    name: 'Manage State Test Snap',
+  },
+  'npm:@metamask/test-snap-notification': {
+    name: 'Notification Test Snap',
+  },
+  'npm:@metamask/test-snap-bip32': {
+    name: 'BIP-32 Test Snap',
+  },
+  'npm:@metamask/test-snap-insights': {
+    name: 'Insights Test Snap',
+  },
+  'npm:@metamask/test-snap-rpc': {
+    name: 'RPC Test Snap',
+  },
+  'npm:@metamask/test-snap-cronjob': {
+    name: 'Cronjob Test Snap',
+  },
+};
+///: END:ONLY_INCLUDE_IN

ui/components/app/flask/snaps-authorship-pill/snaps-authorship-pill.js

@@ -11,11 +11,12 @@ import {
   TextColor,
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { SNAPS_METADATA } from '../../../../../shared/constants/snaps';
 
 const snapIdPrefixes = ['npm:', 'local:'];
 
 const SnapsAuthorshipPill = ({ snapId, version, className }) => {
-  // @todo Use getSnapPrefix from snaps-skunkworks when possible
+  // @todo Use getSnapPrefix from snaps-monorepo when possible
   // We're using optional chaining with snapId, because with the current implementation
   // of snap update in the snap controller, we do not have reference to snapId when an
   // update request is rejected because the reference comes from the request itself and not subject metadata
@@ -30,6 +31,9 @@ const SnapsAuthorshipPill = ({ snapId, version, className }) => {
     : packageName;
   const icon = isNPM ? 'fab fa-npm fa-lg' : 'fas fa-code';
   const t = useI18nContext();
+
+  const friendlyName = SNAPS_METADATA[snapId]?.name ?? packageName;
+
   return (
     <a
       href={url}
@@ -70,9 +74,9 @@ const SnapsAuthorshipPill = ({ snapId, version, className }) => {
           variant={TypographyVariant.H7}
           as="span"
           color={TextColor.textAlternative}
-          title={packageName}
+          title={friendlyName}
         >
-          {packageName}
+          {friendlyName}
         </Typography>
       </Chip>
     </a>

ui/components/app/modals/metametrics-opt-in-modal/__snapshots__/metametrics-opt-in-modal.test.js.snap

@@ -310,7 +310,7 @@ exports[`MetaMetrics Opt In should match snapshot 1`] = `
         >
           <footer>
             <button
-              class="button btn--rounded btn-secondary page-container__footer-button"
+              class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
               data-testid="page-container-footer-cancel"
               role="button"
               tabindex="0"

ui/components/app/permission-page-container/index.scss

@@ -100,11 +100,6 @@
 
     footer {
       width: 100%;
-      justify-content: space-between;
-
-      button {
-        width: 124px;
-      }
     }
   }
 

ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap

@@ -244,7 +244,7 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
     >
       <footer>
         <button
-          class="button btn--rounded btn-secondary page-container__footer-button"
+          class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
           data-testid="page-container-footer-cancel"
           role="button"
           tabindex="0"

ui/components/app/signature-request/__snapshots__/signature-request.component.test.js.snap

@@ -750,7 +750,7 @@ exports[`Signature Request Component render should match snapshot 1`] = `
     >
       <footer>
         <button
-          class="button btn--rounded btn-secondary page-container__footer-button"
+          class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
           data-testid="page-container-footer-cancel"
           role="button"
           tabindex="0"

ui/components/ui/page-container/index.scss

@@ -91,6 +91,11 @@
     &:last-of-type {
       margin-right: 0;
     }
+
+    &__cancel {
+      border-color: var(--color-primary-alternative) !important;
+      color: var(--color-primary-alternative);
+    }
   }
 
   &__back-button {

ui/components/ui/page-container/page-container-footer/__snapshots__/page-container-footer.component.test.js.snap

@@ -7,7 +7,7 @@ exports[`Page Footer should match snapshot 1`] = `
   >
     <footer>
       <button
-        class="button btn--rounded btn-secondary page-container__footer-button"
+        class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
         data-testid="page-container-footer-cancel"
         role="button"
         tabindex="0"
@@ -34,7 +34,7 @@ exports[`Page Footer should render a secondary footer inside page-container__foo
   >
     <footer>
       <button
-        class="button btn--rounded btn-secondary page-container__footer-button"
+        class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
         data-testid="page-container-footer-cancel"
         role="button"
         tabindex="0"

ui/components/ui/page-container/page-container-footer/page-container-footer.component.js

@@ -48,6 +48,7 @@ export default class PageContainerFooter extends Component {
               large={buttonSizeLarge}
               className={classnames(
                 'page-container__footer-button',
+                'page-container__footer-button__cancel',
                 footerButtonClassName,
               )}
               onClick={(e) => onCancel(e)}

ui/helpers/utils/permission.js

@@ -13,6 +13,7 @@ import {
   ///: END:ONLY_INCLUDE_IN
 } from '../../../shared/constants/permissions';
 ///: BEGIN:ONLY_INCLUDE_IN(flask)
+import { SNAPS_METADATA } from '../../../shared/constants/snaps';
 import { coinTypeToProtocolName } from './util';
 ///: END:ONLY_INCLUDE_IN
 
@@ -83,11 +84,28 @@ const PERMISSION_DESCRIPTIONS = deepFreeze({
     leftIcon: 'fas fa-download',
     rightIcon: null,
   }),
-  [RestrictedMethods['wallet_snap_*']]: (t, permissionName) => ({
+  [RestrictedMethods['wallet_snap_*']]: (t, permissionName) => {
-    label: t('permission_accessSnap', [permissionName.split('_').slice(-1)]),
+    const snapId = permissionName.split('_').slice(-1);
-    leftIcon: 'fas fa-bolt',
+    const friendlyName = SNAPS_METADATA[snapId]?.name;
-    rightIcon: null,
+
-  }),
+    if (friendlyName) {
+      return {
+        label: t('permission_accessNamedSnap', [
+          <span className="permission-label-item" key={snapId}>
+            {friendlyName}
+          </span>,
+        ]),
+        leftIcon: 'fas fa-bolt',
+        rightIcon: null,
+      };
+    }
+
+    return {
+      label: t('permission_accessSnap', [snapId]),
+      leftIcon: 'fas fa-bolt',
+      rightIcon: null,
+    };
+  },
   [EndowmentPermissions['endowment:network-access']]: (t) => ({
     label: t('permission_accessNetwork'),
     leftIcon: 'fas fa-wifi',

ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap

@@ -752,7 +752,7 @@ exports[`Signature Request Component render should match snapshot 1`] = `
     >
       <footer>
         <button
-          class="button btn--rounded btn-secondary page-container__footer-button"
+          class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
           data-testid="page-container-footer-cancel"
           role="button"
           tabindex="0"

ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap

@@ -518,7 +518,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
       >
         <footer>
           <button
-            class="button btn--rounded btn-secondary page-container__footer-button"
+            class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
             data-testid="page-container-footer-cancel"
             role="button"
             tabindex="0"

ui/pages/send/send-footer/__snapshots__/send-footer.test.js.snap

@@ -7,7 +7,7 @@ exports[`SendFooter Component Component Update should match snapshot when compon
   >
     <footer>
       <button
-        class="button btn--rounded btn-secondary page-container__footer-button"
+        class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
         data-testid="page-container-footer-cancel"
         role="button"
         tabindex="0"
@@ -34,7 +34,7 @@ exports[`SendFooter Component should match snapshot 1`] = `
   >
     <footer>
       <button
-        class="button btn--rounded btn-secondary page-container__footer-button"
+        class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
         data-testid="page-container-footer-cancel"
         role="button"
         tabindex="0"

ui/pages/swaps/swaps-footer/__snapshots__/swaps-footer.test.js.snap

@@ -13,7 +13,7 @@ exports[`SwapsFooter renders the component with initial props 1`] = `
       >
         <footer>
           <button
-            class="button btn--rounded btn-secondary page-container__footer-button swaps-footer__custom-page-container-footer-button-class"
+            class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel swaps-footer__custom-page-container-footer-button-class"
             data-testid="page-container-footer-cancel"
             role="button"
             tabindex="0"