Permissions: convert hook to util (#13906)

* Permissions: convert hook into helper util
- instantiate once
- freeze
- alphabetize
- add additional comments to @param
https://github.com/MetaMask/metamask-extension/pull/13906#pullrequestreview-906554847

ui/components/app/connected-accounts-permissions/connected-accounts-permissions.js

@@ -3,14 +3,12 @@ import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import CheckBox from '../../ui/check-box';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { usePermissionDescriptions } from '../../../hooks/usePermissionDescriptions';
+import { getPermissionDescription } from '../../../helpers/utils/permission';
 
 const ConnectedAccountsPermissions = ({ permissions }) => {
   const t = useI18nContext();
   const [expanded, setExpanded] = useState(false);
 
-  const getPermissionDescription = usePermissionDescriptions();
-
   const toggleExpanded = () => {
     setExpanded((_expanded) => !_expanded);
   };
@@ -56,7 +54,7 @@ const ConnectedAccountsPermissions = ({ permissions }) => {
                 className="connected-accounts-permissions__checkbox"
               />
               <label htmlFor={permissionName}>
-                {getPermissionDescription(permissionName).label}
+                {getPermissionDescription(t, permissionName).label}
               </label>
             </li>
           ))}

ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { usePermissionDescriptions } from '../../../hooks/usePermissionDescriptions';
+import { getPermissionDescription } from '../../../helpers/utils/permission';
+import { useI18nContext } from '../../../hooks/useI18nContext';
 
 export default function PermissionsConnectPermissionList({ permissions }) {
-  const getPermissionDescription = usePermissionDescriptions();
+  const t = useI18nContext();
 
   return (
     <div className="permissions-connect-permission-list">
       {Object.keys(permissions).map((permission) => {
         const { label, leftIcon, rightIcon } = getPermissionDescription(
+          t,
           permission,
         );
 

ui/helpers/utils/permission.js

@@ -0,0 +1,92 @@
+import deepFreeze from 'deep-freeze-strict';
+import {
+  RestrictedMethods,
+  ///: BEGIN:ONLY_INCLUDE_IN(flask)
+  EndowmentPermissions,
+  PermissionNamespaces,
+  ///: END:ONLY_INCLUDE_IN
+} from '../../../shared/constants/permissions';
+///: BEGIN:ONLY_INCLUDE_IN(flask)
+import { coinTypeToProtocolName } from './util';
+///: END:ONLY_INCLUDE_IN
+
+const UNKNOWN_PERMISSION = Symbol('unknown');
+
+const PERMISSION_DESCRIPTIONS = deepFreeze({
+  [RestrictedMethods.eth_accounts]: {
+    label: (t) => t('permission_ethereumAccounts'),
+    leftIcon: 'fas fa-eye',
+    rightIcon: null,
+  },
+  ///: BEGIN:ONLY_INCLUDE_IN(flask)
+  [RestrictedMethods.snap_confirm]: {
+    label: (t) => t('permission_customConfirmation'),
+    leftIcon: 'fas fa-user-check',
+    rightIcon: null,
+  },
+  [RestrictedMethods['snap_getBip44Entropy_*']]: {
+    label: (t, permissionName) => {
+      const coinType = permissionName.split('_').slice(-1);
+      return t('permission_manageBip44Keys', [
+        coinTypeToProtocolName(coinType) ||
+          `${coinType} (Unrecognized protocol)`,
+      ]);
+    },
+    leftIcon: 'fas fa-door-open',
+    rightIcon: null,
+  },
+  [RestrictedMethods.snap_manageState]: {
+    label: (t) => t('permission_manageState'),
+    leftIcon: 'fas fa-download',
+    rightIcon: null,
+  },
+  [RestrictedMethods['wallet_snap_*']]: {
+    label: (t, permissionName) => {
+      const snapId = permissionName.split('_').slice(-1);
+      return t('permission_accessSnap', [snapId]);
+    },
+    leftIcon: 'fas fa-bolt',
+    rightIcon: null,
+  },
+  [EndowmentPermissions['endowment:network-access']]: {
+    label: (t) => t('permission_accessNetwork'),
+    leftIcon: 'fas fa-wifi',
+    rightIcon: null,
+  },
+  ///: END:ONLY_INCLUDE_IN
+  [UNKNOWN_PERMISSION]: {
+    label: (t, permissionName) =>
+      t('permission_unknown', [permissionName ?? 'undefined']),
+    leftIcon: 'fas fa-times-circle',
+    rightIcon: null,
+  },
+});
+
+/**
+ * @typedef {Object} PermissionLabelObject
+ * @property {string} label - The text label.
+ * @property {string} leftIcon - The left icon.
+ * @property {string} rightIcon - The right icon.
+ */
+
+/**
+ * @param {Function} t - The translation function
+ * @param {string} permissionName - The name of the permission to request
+ * @returns {(permissionName:string) => PermissionLabelObject}
+ */
+export const getPermissionDescription = (t, permissionName) => {
+  let value = PERMISSION_DESCRIPTIONS[UNKNOWN_PERMISSION];
+
+  if (Object.hasOwnProperty.call(PERMISSION_DESCRIPTIONS, permissionName)) {
+    value = PERMISSION_DESCRIPTIONS[permissionName];
+  }
+  ///: BEGIN:ONLY_INCLUDE_IN(flask)
+  for (const namespace of Object.keys(PermissionNamespaces)) {
+    if (permissionName.startsWith(namespace)) {
+      value = PERMISSION_DESCRIPTIONS[PermissionNamespaces[namespace]];
+    }
+  }
+  ///: END:ONLY_INCLUDE_IN
+
+  return { ...value, label: value.label(t, permissionName) };
+};

ui/hooks/usePermissionDescriptions.js

@@ -1,98 +0,0 @@
-import { useMemo } from 'react';
-import {
-  RestrictedMethods,
-  ///: BEGIN:ONLY_INCLUDE_IN(flask)
-  EndowmentPermissions,
-  PermissionNamespaces,
-  ///: END:ONLY_INCLUDE_IN
-} from '../../shared/constants/permissions';
-///: BEGIN:ONLY_INCLUDE_IN(flask)
-import { coinTypeToProtocolName } from '../helpers/utils/util';
-///: END:ONLY_INCLUDE_IN
-import { useI18nContext } from './useI18nContext';
-
-const UNKNOWN_PERMISSION = Symbol('unknown');
-
-/**
- * @typedef {Object} PermissionLabelObject
- * @property {string} label - The text label.
- * @property {string} leftIcon - The left icon.
- * @property {string} rightIcon - The right icon.
- */
-
-/**
- * @returns {(permissionName:string) => PermissionLabelObject}
- */
-export const usePermissionDescriptions = () => {
-  const t = useI18nContext();
-
-  return useMemo(() => {
-    const permissionDescriptions = {
-      [RestrictedMethods.eth_accounts]: {
-        leftIcon: 'fas fa-eye',
-        label: t('permission_ethereumAccounts'),
-        rightIcon: null,
-      },
-      ///: BEGIN:ONLY_INCLUDE_IN(flask)
-      [RestrictedMethods.snap_confirm]: {
-        leftIcon: 'fas fa-user-check',
-        label: t('permission_customConfirmation'),
-        rightIcon: null,
-      },
-      [RestrictedMethods['snap_getBip44Entropy_*']]: (permissionName) => {
-        const coinType = permissionName.split('_').slice(-1);
-        return {
-          leftIcon: 'fas fa-door-open',
-          label: t('permission_manageBip44Keys', [
-            coinTypeToProtocolName(coinType) ||
-              `${coinType} (Unrecognized protocol)`,
-          ]),
-          rightIcon: null,
-        };
-      },
-      [RestrictedMethods.snap_manageState]: {
-        leftIcon: 'fas fa-download',
-        label: t('permission_manageState'),
-        rightIcon: null,
-      },
-      [RestrictedMethods['wallet_snap_*']]: (permissionName) => {
-        const snapId = permissionName.split('_').slice(-1);
-        return {
-          leftIcon: 'fas fa-bolt',
-          label: t('permission_accessSnap', [snapId]),
-          rightIcon: null,
-        };
-      },
-      [EndowmentPermissions['endowment:network-access']]: {
-        leftIcon: 'fas fa-wifi',
-        label: t('permission_accessNetwork'),
-        rightIcon: null,
-      },
-      ///: END:ONLY_INCLUDE_IN
-      [UNKNOWN_PERMISSION]: (permissionName) => {
-        return {
-          leftIcon: 'fas fa-times-circle',
-          label: t('permission_unknown', [permissionName ?? 'undefined']),
-          rightIcon: null,
-        };
-      },
-    };
-
-    return (permissionName) => {
-      let value = permissionDescriptions[UNKNOWN_PERMISSION];
-
-      if (Object.hasOwnProperty.call(permissionDescriptions, permissionName)) {
-        value = permissionDescriptions[permissionName];
-      }
-      ///: BEGIN:ONLY_INCLUDE_IN(flask)
-      for (const namespace of Object.keys(PermissionNamespaces)) {
-        if (permissionName.startsWith(namespace)) {
-          value = permissionDescriptions[PermissionNamespaces[namespace]];
-        }
-      }
-      ///: END:ONLY_INCLUDE_IN
-
-      return typeof value === 'function' ? value(permissionName) : value;
-    };
-  }, [t]);
-};