refactor per PR comments

Author: hmalik88

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { stripSnapPrefix } from '@metamask/snaps-utils';
 import {
   getRightIcon,
   getWeightedPermissions,
 } from '../../../helpers/utils/permission';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getSnapsMetadata } from '../../../selectors';
+import { getSnapName } from '../../../helpers/utils/util';
 
 /**
  * Get one or more permission descriptions for a permission name.
@@ -32,16 +32,12 @@ export default function PermissionsConnectPermissionList({ permissions }) {
   const t = useI18nContext();
   const snapsMetadata = useSelector(getSnapsMetadata);
 
-  const getSnapName = (id) => {
-    return snapsMetadata[id]?.name ?? stripSnapPrefix(id);
-  };
-
   return (
     <div className="permissions-connect-permission-list">
       {getWeightedPermissions({
         t,
         permissions,
-        getSubjectName: getSnapName,
+        getSubjectName: getSnapName(snapsMetadata),
       }).map(getDescriptionNode)}
     </div>
   );

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

@@ -52,7 +52,7 @@ const SnapAuthorshipExpanded = ({ snapId, className, snap }) => {
     getSnapRegistryData(state, snapId),
   );
 
-  const { name: friendlyName } = useSelector((state) =>
+  const { name: snapName } = useSelector((state) =>
     getSnapMetadata(state, snapId),
   );
 
@@ -102,7 +102,7 @@ const SnapAuthorshipExpanded = ({ snapId, className, snap }) => {
           style={{ overflow: 'hidden' }}
         >
           <Text ellipsis fontWeight={FontWeight.Medium}>
-            {friendlyName}
+            {snapName}
           </Text>
           <Text
             ellipsis

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

@@ -35,14 +35,14 @@ const SnapAvatar = ({
     getTargetSubjectMetadata(state, snapId),
   );
 
-  const { name: friendlyName } = useSelector((state) =>
+  const { name: snapName } = useSelector((state) =>
     getSnapMetadata(state, snapId),
   );
 
   const iconUrl = subjectMetadata?.iconUrl;
 
   // We choose the first non-symbol char as the fallback icon.
-  const fallbackIcon = friendlyName?.match(/[a-z0-9]/iu)?.[0] ?? '?';
+  const fallbackIcon = snapName?.match(/[a-z0-9]/iu)?.[0] ?? '?';
 
   return (
     <BadgeWrapper
@@ -66,7 +66,7 @@ const SnapAvatar = ({
           backgroundColor={BackgroundColor.backgroundAlternative}
           size={avatarSize}
           src={iconUrl}
-          name={friendlyName}
+          name={snapName}
         />
       ) : (
         <AvatarBase

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

@@ -27,7 +27,7 @@ const SnapLegacyAuthorshipHeader = ({
   marginRight,
 }) => {
   const packageName = snapId && stripSnapPrefix(snapId);
-  const { name: friendlyName } = useSelector((state) =>
+  const { name: snapName } = useSelector((state) =>
     getSnapMetadata(state, snapId),
   );
 
@@ -55,7 +55,7 @@ const SnapLegacyAuthorshipHeader = ({
         style={{ overflow: 'hidden' }}
       >
         <Text ellipsis fontWeight={FontWeight.Medium}>
-          {friendlyName}
+          {snapName}
         </Text>
         <Text
           ellipsis

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { stripSnapPrefix } from '@metamask/snaps-utils';
 import { getWeightedPermissions } from '../../../../helpers/utils/permission';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import PermissionCell from '../../permission-cell';
 import { Box } from '../../../component-library';
 import { getSnapsMetadata } from '../../../../selectors';
+import { getSnapName } from '../../../../helpers/utils/util';
 
 export default function SnapPermissionsList({
   snapId,
@@ -17,17 +17,13 @@ export default function SnapPermissionsList({
   const t = useI18nContext();
   const snapsMetadata = useSelector(getSnapsMetadata);
 
-  const getSnapName = (id) => {
-    return snapsMetadata[id]?.name ?? stripSnapPrefix(id);
-  };
-
   return (
     <Box paddingTop={2} paddingBottom={2} className="snap-permissions-list">
       {getWeightedPermissions({
         t,
         permissions,
         subjectName: snapName,
-        getSubjectName: getSnapName,
+        getSubjectName: getSnapName(snapsMetadata),
       }).map((permission, index) => {
         return (
           <PermissionCell

ui/components/app/snaps/update-snap-permission-list/update-snap-permission-list.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { stripSnapPrefix } from '@metamask/snaps-utils';
 import { getWeightedPermissions } from '../../../../helpers/utils/permission';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import PermissionCell from '../../permission-cell';
 import { Box } from '../../../component-library';
 import { getSnapMetadata, getSnapsMetadata } from '../../../../selectors';
+import { getSnapName } from '../../../../helpers/utils/util';
 
 export default function UpdateSnapPermissionList({
   approvedPermissions,
@@ -21,18 +21,15 @@ export default function UpdateSnapPermissionList({
   );
 
   const snapsMetadata = useSelector(getSnapsMetadata);
-
-  const getSnapName = (id) => {
-    return snapsMetadata[id]?.name ?? stripSnapPrefix(id);
-  };
+  const snapsNameGetter = getSnapName(snapsMetadata);
 
   return (
     <Box paddingTop={1}>
       {getWeightedPermissions({
         t,
         permissions: newPermissions,
         subjectName: snapName,
-        getSubjectName: getSnapName,
+        getSubjectName: snapsNameGetter,
       }).map((permission, index) => (
         <PermissionCell
           permissionName={permission.permissionName}
@@ -48,7 +45,7 @@ export default function UpdateSnapPermissionList({
         t,
         permissions: revokedPermissions,
         subjectName: snapName,
-        getSubjectName: getSnapName,
+        getSubjectName: snapsNameGetter,
       }).map((permission, index) => (
         <PermissionCell
           permissionName={permission.permissionName}
@@ -65,7 +62,7 @@ export default function UpdateSnapPermissionList({
         t,
         permissions: approvedPermissions,
         subjectName: snapName,
-        getSubjectName: getSnapName,
+        getSubjectName: snapsNameGetter,
       }).map((permission, index) => (
         <PermissionCell
           permissionName={permission.permissionName}

ui/helpers/utils/permission.js

@@ -278,8 +278,8 @@ export const PERMISSION_DESCRIPTIONS = deepFreeze({
     };
 
     return Object.keys(snaps).map((snapId) => {
-      const friendlyName = getSubjectName(snapId);
-      if (friendlyName) {
+      const snapName = getSubjectName(snapId);
+      if (snapName) {
         return {
           ...baseDescription,
           label: t('permission_accessNamedSnap', [
@@ -289,10 +289,10 @@ export const PERMISSION_DESCRIPTIONS = deepFreeze({
               fontWeight={FontWeight.Medium}
               key={snapId}
             >
-              {friendlyName}
+              {snapName}
             </Text>,
           ]),
-          description: t('permission_accessSnapDescription', [friendlyName]),
+          description: t('permission_accessSnapDescription', [snapName]),
         };
       }
 

ui/helpers/utils/util.js

@@ -34,6 +34,7 @@ import { OUTDATED_BROWSER_VERSIONS } from '../constants/common';
 import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils';
 import { hexToDecimal } from '../../../shared/modules/conversion.utils';
 import { SNAPS_VIEW_ROUTE } from '../constants/routes';
+import { stripSnapPrefix } from '@metamask/snaps-utils';
 
 export function formatDate(date, format = "M/d/y 'at' T") {
   if (!date) {
@@ -561,6 +562,12 @@ export function isNullish(value) {
 }
 
 ///: BEGIN:ONLY_INCLUDE_IF(snaps)
+export const getSnapName = (snapsMetadata) => {
+  return (snapId) => {
+    return snapsMetadata[snapId]?.name ?? stripSnapPrefix(snapId);
+  };
+};
+
 export const getSnapRoute = (snapId) => {
   return `${SNAPS_VIEW_ROUTE}/${encodeURIComponent(snapId)}`;
 };

ui/hooks/useTransactionInsights.js

@@ -20,6 +20,7 @@ import {
 ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
 import { deleteInterface } from '../store/actions';
 ///: END:ONLY_INCLUDE_IF
+import { getSnapName } from '../helpers/utils/util';
 import { useTransactionInsightSnaps } from './snaps/useTransactionInsightSnaps';
 
 const isAllowedTransactionTypes = (transactionType) =>
@@ -42,19 +43,7 @@ const useTransactionInsights = ({ txData }) => {
   const insightSnapIds = useSelector(getInsightSnapIds);
   const snapsMetadata = useSelector(getSnapsMetadata);
 
-  /**
-   * 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 = snapsMetadata[id];
-    return snap?.name;
-  };
+  const snapsNameGetter = getSnapName(snapsMetadata);
 
   const [selectedInsightSnapId, setSelectedInsightSnapId] = useState(
     insightSnaps[0]?.id,
@@ -110,7 +99,7 @@ const useTransactionInsights = ({ txData }) => {
     insightComponent = (
       <Tab
         className="confirm-page-container-content__tab"
-        name={getSnapName(selectedSnap?.id)}
+        name={snapsNameGetter(selectedSnap.id)}
       >
         <SnapInsight
           snapId={selectedInsightSnapId}
@@ -126,7 +115,7 @@ const useTransactionInsights = ({ txData }) => {
     );
   } else if (insightSnaps.length > 1) {
     const dropdownOptions = insightSnaps?.map(({ id }) => {
-      const name = getSnapName(id);
+      const name = snapsNameGetter(id);
       return {
         value: id,
         name,

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

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { stripSnapPrefix } from '@metamask/snaps-utils';
 import { PageContainerFooter } from '../../../../components/ui/page-container';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import SnapInstallWarning from '../../../../components/app/snaps/snap-install-warning';
@@ -33,6 +32,7 @@ import SiteOrigin from '../../../../components/ui/site-origin/site-origin';
 import InstallError from '../../../../components/app/snaps/install-error/install-error';
 import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
 import { getSnapMetadata, getSnapsMetadata } from '../../../../selectors';
+import { getSnapName } from '../../../../helpers/utils/util';
 
 export default function SnapInstall({
   request,
@@ -47,10 +47,6 @@ export default function SnapInstall({
   const [isShowingWarning, setIsShowingWarning] = useState(false);
   const snapsMetadata = useSelector(getSnapsMetadata);
 
-  const getSnapName = (id) => {
-    return snapsMetadata[id]?.name ?? stripSnapPrefix(id);
-  };
-
   const { isScrollable, isScrolledToBottom, scrollToBottom, ref, onScroll } =
     useScrollRequired([requestState]);
 
@@ -75,7 +71,7 @@ export default function SnapInstall({
     requestState?.permissions ?? {},
     t,
     snapName,
-    getSnapName,
+    getSnapName(snapsMetadata),
   );
 
   const shouldShowWarning = warnings.length > 0;

ui/pages/permissions-connect/snaps/snap-update/snap-update.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { stripSnapPrefix } from '@metamask/snaps-utils';
 import { PageContainerFooter } from '../../../../components/ui/page-container';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import SnapInstallWarning from '../../../../components/app/snaps/snap-install-warning';
@@ -32,6 +31,7 @@ import {
 } from '../../../../components/component-library';
 import { useScrollRequired } from '../../../../hooks/useScrollRequired';
 import { getSnapMetadata, getSnapsMetadata } from '../../../../selectors';
+import { getSnapName } from '../../../../helpers/utils/util';
 
 export default function SnapUpdate({
   request,
@@ -48,10 +48,6 @@ export default function SnapUpdate({
     useScrollRequired([requestState]);
   const snapsMetadata = useSelector(getSnapsMetadata);
 
-  const getSnapName = (id) => {
-    return snapsMetadata[id]?.name ?? stripSnapPrefix(id);
-  };
-
   const onCancel = useCallback(
     () => rejectSnapUpdate(request.metadata.id),
     [request, rejectSnapUpdate],
@@ -78,7 +74,7 @@ export default function SnapUpdate({
     newPermissions,
     t,
     snapName,
-    getSnapName,
+    getSnapName(snapsMetadata),
   );
 
   const shouldShowWarning = warnings.length > 0;