Merge branch 'develop' into 17191/onboarding-unit-tests-create-new-vault

MetaMask · Apr 6, 2023 · a7b765e · a7b765e
2 parents 9aca244 + baee6f1
commit a7b765e
Show file tree

Hide file tree

Showing 65 changed files with 1,090 additions and 336 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
@@ -73,7 +73,6 @@ export default class PreferencesController {
     this._onInfuraIsUnblocked = opts.onInfuraIsUnblocked;
     this.store = new ObservableStore(initState);
     this.store.setMaxListeners(13);
-    this.openPopup = opts.openPopup;
     this.tokenListController = opts.tokenListController;
 
     this._subscribeToInfuraAvailability();

diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
@@ -307,7 +307,6 @@ export default class MetamaskController extends EventEmitter {
     this.preferencesController = new PreferencesController({
       initState: initState.PreferencesController,
       initLangCode: opts.initLangCode,
-      openPopup: opts.openPopup,
       onInfuraIsBlocked: networkControllerMessenger.subscribe.bind(
         networkControllerMessenger,
         NetworkControllerEventTypes.InfuraIsBlocked,

diff --git a/coverage-targets.js b/coverage-targets.js
@@ -6,10 +6,10 @@
 // subset of files to check against these targets.
 module.exports = {
   global: {
-    lines: 65.5,
-    branches: 53.5,
-    statements: 64.75,
-    functions: 58,
+    lines: 66,
+    branches: 54.4,
+    statements: 65,
+    functions: 58.5,
   },
   transforms: {
     branches: 100,

diff --git a/ui/components/app/flask/update-snap-permission-list/update-snap-permission-list.js b/ui/components/app/flask/update-snap-permission-list/update-snap-permission-list.js
@@ -9,24 +9,13 @@ export default function UpdateSnapPermissionList({
   approvedPermissions,
   revokedPermissions,
   newPermissions,
+  targetSubjectMetadata,
 }) {
   const t = useI18nContext();
 
   return (
     <Box paddingTop={1}>
-      {getWeightedPermissions(t, newPermissions).map((permission, index) => {
-        return (
-          <PermissionCell
-            title={permission.label}
-            description={permission.description}
-            weight={permission.weight}
-            avatarIcon={permission.leftIcon}
-            dateApproved={permission?.permissionValue?.date}
-            key={`${permission.permissionName}-${index}`}
-          />
-        );
-      })}
-      {getWeightedPermissions(t, approvedPermissions).map(
+      {getWeightedPermissions(t, newPermissions, targetSubjectMetadata).map(
         (permission, index) => {
           return (
             <PermissionCell
@@ -40,7 +29,23 @@ export default function UpdateSnapPermissionList({
           );
         },
       )}
-      {getWeightedPermissions(t, revokedPermissions).map(
+      {getWeightedPermissions(
+        t,
+        approvedPermissions,
+        targetSubjectMetadata,
+      ).map((permission, index) => {
+        return (
+          <PermissionCell
+            title={permission.label}
+            description={permission.description}
+            weight={permission.weight}
+            avatarIcon={permission.leftIcon}
+            dateApproved={permission?.permissionValue?.date}
+            key={`${permission.permissionName}-${index}`}
+          />
+        );
+      })}
+      {getWeightedPermissions(t, revokedPermissions, targetSubjectMetadata).map(
         (permission, index) => {
           return (
             <PermissionCell
@@ -72,4 +77,5 @@ UpdateSnapPermissionList.propTypes = {
    * New permissions that are being requested
    */
   newPermissions: PropTypes.object.isRequired,
+  targetSubjectMetadata: PropTypes.object.isRequired,
 };
diff --git a/ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js b/ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js
@@ -5,27 +5,33 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 import PermissionCell from '../permission-cell';
 import Box from '../../ui/box';
 
-export default function PermissionsConnectPermissionList({ permissions }) {
+export default function PermissionsConnectPermissionList({
+  permissions,
+  targetSubjectMetadata,
+}) {
   const t = useI18nContext();
 
   return (
     <Box paddingTop={2} paddingBottom={2}>
-      {getWeightedPermissions(t, permissions).map((permission, index) => {
-        return (
-          <PermissionCell
-            title={permission.label}
-            description={permission.description}
-            weight={permission.weight}
-            avatarIcon={permission.leftIcon}
-            dateApproved={permission?.permissionValue?.date}
-            key={`${permission.permissionName}-${index}`}
-          />
-        );
-      })}
+      {getWeightedPermissions(t, permissions, targetSubjectMetadata).map(
+        (permission, index) => {
+          return (
+            <PermissionCell
+              title={permission.label}
+              description={permission.description}
+              weight={permission.weight}
+              avatarIcon={permission.leftIcon}
+              dateApproved={permission?.permissionValue?.date}
+              key={`${permission.permissionName}-${index}`}
+            />
+          );
+        },
+      )}
     </Box>
   );
 }
 
 PermissionsConnectPermissionList.propTypes = {
   permissions: PropTypes.object.isRequired,
+  targetSubjectMetadata: PropTypes.object.isRequired,
 };
diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.js b/ui/components/component-library/avatar-base/avatar-base.stories.js
@@ -10,7 +10,7 @@ import {
 
 import Box from '../../ui/box/box';
 
-import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { Icon, IconName } from '..';
 import README from './README.mdx';
 import { AvatarBase } from './avatar-base';
 import { AVATAR_BASE_SIZES } from './avatar-base.constants';
@@ -124,7 +124,7 @@ export const Children = (args) => (
       backgroundColor={BackgroundColor.infoMuted}
       borderColor={BorderColor.infoMuted}
     >
-      <Icon name={ICON_NAMES.USER} color={Color.infoDefault} />
+      <Icon name={IconName.User} color={Color.infoDefault} />
     </AvatarBase>
   </Box>
 );

diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.js b/ui/components/component-library/avatar-favicon/avatar-favicon.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { AvatarBase } from '../avatar-base';
 import Box from '../../ui/box/box';
-import { ICON_NAMES, Icon } from '../icon/deprecated';
+import { IconName, Icon } from '../icon';
 import {
   BorderColor,
   Size,
@@ -43,7 +43,7 @@ export const AvatarFavicon = ({
         />
       ) : (
         <Icon
-          name={ICON_NAMES.GLOBAL}
+          name={IconName.Global}
           color={IconColor.iconDefault}
           size={size}
           {...fallbackIconProps}
@@ -65,7 +65,7 @@ AvatarFavicon.propTypes = {
   /**
    * Props for the fallback icon. All Icon props can be used
    */
-  fallbackIconProps: PropTypes.shape(Icon.PropTypes),
+  fallbackIconProps: PropTypes.object,
   /**
    * The size of the AvatarFavicon
    * Possible values could be 'Size.XS' 16px, 'Size.SM' 24px, 'Size.MD' 32px, 'Size.LG' 40px, 'Size.XL' 48px

diff --git a/ui/components/component-library/avatar-icon/README.mdx b/ui/components/component-library/avatar-icon/README.mdx
@@ -44,7 +44,7 @@ Defaults to `Size.MD`
 
 ```jsx
 import { Size } from '../../../helpers/constants/design-system';
-import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
+import { AvatarIcon, IconName } from '../ui/component-library';
 
     <AvatarIcon {...args} size={Size.XS} />
     <AvatarIcon {...args} size={Size.SM} />
@@ -55,22 +55,22 @@ import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
 
 ### Icon Name<span style={{ color: 'red' }}>\*</span>
 
-Use the required `iconName` prop with `ICON_NAMES` object from `./ui/components/component-library` to select icon
+Use the required `iconName` prop with `IconName` enum from `./ui/components/component-library` to select icon
 
 Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
 
 <Canvas>
-  <Story id="components-componentlibrary-avataricon--icon-name" />
+  <Story id="components-componentlibrary-avataricon--icon-name-story" />
 </Canvas>
 
 ```jsx
-import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
+import { AvatarIcon, IconName } from '../ui/component-library';
 
-<AvatarIcon iconName={ICON_NAMES.SWAP_HORIZONTAL} />
-<AvatarIcon iconName={ICON_NAMES.CONFIRMATION} />
-<AvatarIcon iconName={ICON_NAMES.INFO} />
-<AvatarIcon iconName={ICON_NAMES.WARNING} />
-<AvatarIcon iconName={ICON_NAMES.DANGER} />
+<AvatarIcon iconName={IconName.SwapHorizontal} />
+<AvatarIcon iconName={IconName.Confirmation} />
+<AvatarIcon iconName={IconName.Info} />
+<AvatarIcon iconName={IconName.Warning} />
+<AvatarIcon iconName={IconName.Danger} />
 ```
 
 ### Color and Background Color

diff --git a/ui/components/component-library/avatar-icon/avatar-icon.js b/ui/components/component-library/avatar-icon/avatar-icon.js
@@ -14,7 +14,7 @@ import {
 
 import Box from '../../ui/box/box';
 
-import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { IconName, Icon } from '../icon';
 import { AvatarBase } from '../avatar-base';
 
 import { AVATAR_ICON_SIZES } from './avatar-icon.constants';
@@ -27,39 +27,37 @@ export const AvatarIcon = ({
   iconProps,
   iconName,
   ...props
-}) => {
-  return (
-    <AvatarBase
+}) => (
+  <AvatarBase
+    size={size}
+    display={DISPLAY.FLEX}
+    alignItems={AlignItems.center}
+    justifyContent={JustifyContent.center}
+    color={color}
+    backgroundColor={backgroundColor}
+    borderColor={BorderColor.transparent}
+    className={classnames('mm-avatar-icon', className)}
+    {...props}
+  >
+    <Icon
+      color={IconColor.inherit}
+      name={iconName}
       size={size}
-      display={DISPLAY.FLEX}
-      alignItems={AlignItems.center}
-      justifyContent={JustifyContent.center}
-      color={color}
-      backgroundColor={backgroundColor}
-      borderColor={BorderColor.transparent}
-      className={classnames('mm-avatar-icon', className)}
-      {...props}
-    >
-      <Icon
-        color={IconColor.inherit}
-        name={iconName}
-        size={size}
-        {...iconProps}
-      />
-    </AvatarBase>
-  );
-};
+      {...iconProps}
+    />
+  </AvatarBase>
+);
 
 AvatarIcon.propTypes = {
   /**
    *
-   * The name of the icon to display. Should be one of ICON_NAMES
+   * The name of the icon to display. Should be one of IconName
    */
-  iconName: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired,
+  iconName: PropTypes.oneOf(Object.values(IconName)).isRequired,
   /**
    * Props for the icon inside AvatarIcon. All Icon props can be used
    */
-  iconProps: PropTypes.shape(Icon.PropTypes),
+  iconProps: PropTypes.object,
   /**
    * The size of the AvatarIcon
    * Possible values could be 'SIZES.XS' 16px, 'SIZES.SM' 24px, 'SIZES.MD' 32px, 'SIZES.LG' 40px, 'SIZES.XL' 48px