Improve UI and revoke logic

app/scripts/metamask-controller.js

@@ -1800,10 +1800,6 @@ export default class MetamaskController extends EventEmitter {
     this.notificationController.markRead(ids);
   }
 
-  revokeDynamicSnapPermissions(permissions) {
-    // TODO
-  }
-
   ///: END:ONLY_INCLUDE_IN
 
   /**
@@ -2472,6 +2468,10 @@ export default class MetamaskController extends EventEmitter {
         this.controllerMessenger,
         'SnapController:handleRequest',
       ),
+      revokeDynamicSnapPermissions: this.controllerMessenger.call.bind(
+        this.controllerMessenger,
+        'SnapController:revokeDynamicPermissions',
+      ),
       dismissNotifications: this.dismissNotifications.bind(this),
       markNotificationsAsRead: this.markNotificationsAsRead.bind(this),
       ///: END:ONLY_INCLUDE_IN

ui/components/app/permission-cell/permission-cell-options.js

@@ -13,7 +13,11 @@ import Popover from '../../ui/popover/popover.component';
 import { DynamicSnapPermissions } from '../../../../shared/constants/snaps/permissions';
 import { revokeDynamicSnapPermissions } from '../../../store/actions';
 
-export const PermissionCellOptions = ({ permissionName, description }) => {
+export const PermissionCellOptions = ({
+  snapId,
+  permissionName,
+  description,
+}) => {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const ref = useRef(false);
@@ -42,7 +46,7 @@ export const PermissionCellOptions = ({ permissionName, description }) => {
 
   const handleRevokePermission = () => {
     setShowOptions(false);
-    dispatch(revokeDynamicSnapPermissions([permissionName]));
+    dispatch(revokeDynamicSnapPermissions(snapId, permissionName));
   };
 
   return (
@@ -91,6 +95,7 @@ export const PermissionCellOptions = ({ permissionName, description }) => {
 };
 
 PermissionCellOptions.propTypes = {
+  snapId: PropTypes.string.isRequired,
   permissionName: PropTypes.string.isRequired,
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 };

ui/components/app/permission-cell/permission-cell.js

@@ -24,6 +24,7 @@ import Tooltip from '../../ui/tooltip';
 import { PermissionCellOptions } from './permission-cell-options';
 
 const PermissionCell = ({
+  snapId,
   permissionName,
   title,
   description,
@@ -110,8 +111,9 @@ const PermissionCell = ({
         </Text>
       </Box>
       <Box>
-        {showOptions ? (
+        {showOptions && snapId ? (
           <PermissionCellOptions
+            snapId={snapId}
             permissionName={permissionName}
             description={description}
           />
@@ -126,6 +128,7 @@ const PermissionCell = ({
 };
 
 PermissionCell.propTypes = {
+  snapId: PropTypes.string,
   permissionName: PropTypes.string.isRequired,
   title: PropTypes.oneOfType([
     PropTypes.string.isRequired,

ui/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js

@@ -3,6 +3,7 @@ import React, { PureComponent } from 'react';
 import PermissionsConnectHeader from '../../permissions-connect-header';
 import Tooltip from '../../../ui/tooltip';
 import PermissionsConnectPermissionList from '../../permissions-connect-permission-list';
+import { SubjectType } from '@metamask/permission-controller';
 
 export default class PermissionPageContainerContent extends PureComponent {
   static propTypes = {
@@ -96,25 +97,38 @@ export default class PermissionPageContainerContent extends PureComponent {
     return t('connectTo', [selectedIdentities[0]?.addressLabel]);
   }
 
-  render() {
+  getHeaderText() {
     const { subjectMetadata } = this.props;
     const { t } = this.context;
 
+    ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+    if (subjectMetadata.subjectType === SubjectType.Snap) {
+      return t('allowThisSnapTo');
+    }
+    ///: END:ONLY_INCLUDE_IN
+
+    return subjectMetadata.extensionId
+      ? t('allowExternalExtensionTo', [subjectMetadata.extensionId])
+      : t('allowThisSiteTo');
+  }
+
+  render() {
+    const { subjectMetadata } = this.props;
+
     const title = this.getTitle();
 
+    const headerText = this.getHeaderText();
+
     return (
       <div className="permission-approval-container__content">
         <div className="permission-approval-container__content-container">
           <PermissionsConnectHeader
             iconUrl={subjectMetadata.iconUrl}
             iconName={subjectMetadata.name}
             headerTitle={title}
-            headerText={
-              subjectMetadata.extensionId
-                ? t('allowExternalExtensionTo', [subjectMetadata.extensionId])
-                : t('allowThisSiteTo')
-            }
+            headerText={headerText}
             siteOrigin={subjectMetadata.origin}
+            subjectType={subjectMetadata.subjectType}
           />
           <section className="permission-approval-container__permissions-container">
             {this.renderRequestedPermissions()}

ui/components/app/permissions-connect-header/permissions-connect-header.component.js

@@ -23,9 +23,7 @@ export default class PermissionsConnectHeader extends Component {
     headerText: PropTypes.string,
     leftIcon: PropTypes.node,
     rightIcon: PropTypes.node,
-    ///: BEGIN:ONLY_INCLUDE_IN(snaps)
     subjectType: PropTypes.string,
-    ///: END:ONLY_INCLUDE_IN
   };
 
   static defaultProps = {

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

@@ -6,6 +6,7 @@ import PermissionCell from '../../permission-cell';
 import Box from '../../../ui/box';
 
 export default function SnapPermissionsList({
+  snapId,
   permissions,
   targetSubjectMetadata,
   showOptions,
@@ -18,6 +19,7 @@ export default function SnapPermissionsList({
         (permission, index) => {
           return (
             <PermissionCell
+              snapId={snapId}
               permissionName={permission.permissionName}
               title={permission.label}
               description={permission.description}
@@ -35,6 +37,7 @@ export default function SnapPermissionsList({
 }
 
 SnapPermissionsList.propTypes = {
+  snapId: PropTypes.string.isRequired,
   permissions: PropTypes.object.isRequired,
   targetSubjectMetadata: PropTypes.object.isRequired,
   showOptions: PropTypes.bool,

ui/pages/permissions-connect/choose-account/choose-account.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
+import { SubjectType } from '@metamask/permission-controller';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import PermissionsConnectHeader from '../../../components/app/permissions-connect-header';
 import PermissionsConnectFooter from '../../../components/app/permissions-connect-footer';
@@ -47,18 +48,29 @@ const ChooseAccount = ({
     return accounts.length === selectedAccounts.size;
   };
 
+  const getHeaderText = () => {
+    if (accounts.length === 0) {
+      return t('connectAccountOrCreate');
+    }
+    ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+    if (targetSubjectMetadata?.subjectType === SubjectType.Snap) {
+      return t('selectAccountsForSnap');
+    }
+    ///: END:ONLY_INCLUDE_IN
+
+    return t('selectAccounts');
+  };
+
+  const headerText = getHeaderText();
+
   return (
     <>
       <div className="permissions-connect-choose-account__content">
         <PermissionsConnectHeader
           iconUrl={targetSubjectMetadata?.iconUrl}
           iconName={targetSubjectMetadata?.name}
           headerTitle={t('connectWithMetaMask')}
-          headerText={
-            accounts.length > 0
-              ? t('selectAccounts')
-              : t('connectAccountOrCreate')
-          }
+          headerText={headerText}
           siteOrigin={targetSubjectMetadata?.origin}
           subjectType={targetSubjectMetadata?.subjectType}
         />

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

@@ -179,6 +179,7 @@ export default function SnapInstall({
               ])}
             </Text>
             <SnapPermissionsList
+              snapId={targetSubjectMetadata.origin}
               permissions={requestState.permissions || {}}
               targetSubjectMetadata={targetSubjectMetadata}
             />

ui/pages/settings/snaps/view-snap/view-snap.js

@@ -149,6 +149,7 @@ function ViewSnap() {
       <Box className="view-snap__permissions" marginTop={12}>
         <Text variant={TextVariant.bodyLgMedium}>{t('permissions')}</Text>
         <SnapPermissionsList
+          snapId={decodedSnapId}
           permissions={permissions ?? {}}
           targetSubjectMetadata={targetSubjectMetadata}
           showOptions

ui/store/actions.ts

@@ -1241,11 +1241,13 @@ export function markNotificationsAsRead(
 }
 
 export function revokeDynamicSnapPermissions(
-  permissions: string[],
+  snapId: string,
+  permissionNames: string[],
 ): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
   return async (dispatch: MetaMaskReduxDispatch) => {
     await submitRequestToBackground('revokeDynamicSnapPermissions', [
-      permissions,
+      snapId,
+      permissionNames,
     ]);
     await forceUpdateMetamaskState(dispatch);
   };