[FLASK] Unblock personal_sign for snaps (#19998)

* Add snap legacy authorship header

* Add legacy snap header to personal_sign

* Disable SIWE for snaps

* Add comment

ui/components/app/signature-request-original/signature-request-original.component.js

@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { ObjectInspector } from 'react-inspector';
 import { ethErrors, serializeError } from 'eth-rpc-errors';
+///: BEGIN:ONLY_INCLUDE_IN(snaps)
+import { SubjectType } from '@metamask/permission-controller';
+///: END:ONLY_INCLUDE_IN
 import LedgerInstructionField from '../ledger-instruction-field';
 import { MESSAGE_TYPE } from '../../../../shared/constants/app';
 import {
@@ -39,6 +42,9 @@ import { Text } from '../../component-library/text/deprecated';
 import Box from '../../ui/box/box';
 ///: END:ONLY_INCLUDE_IN
 import SignatureRequestHeader from '../signature-request-header';
+///: BEGIN:ONLY_INCLUDE_IN(snaps)
+import SnapLegacyAuthorshipHeader from '../snaps/snap-legacy-authorship-header';
+///: END:ONLY_INCLUDE_IN
 import SignatureRequestOriginalWarning from './signature-request-original-warning';
 
 export default class SignatureRequestOriginal extends Component {
@@ -172,16 +178,31 @@ export default class SignatureRequestOriginal extends Component {
         }
 
         <div className="request-signature__origin">
-          <SiteOrigin
-            title={txData.msgParams.origin}
-            siteOrigin={txData.msgParams.origin}
-            iconSrc={targetSubjectMetadata?.iconUrl}
-            iconName={
-              getURLHostName(targetSubjectMetadata?.origin) ||
-              targetSubjectMetadata?.origin
-            }
-            chip
-          />
+          {
+            // Use legacy authorship header for snaps
+            ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+            targetSubjectMetadata?.subjectType === SubjectType.Snap ? (
+              <SnapLegacyAuthorshipHeader
+                snapId={targetSubjectMetadata.origin}
+                marginLeft={4}
+                marginRight={4}
+              />
+            ) : (
+              ///: END:ONLY_INCLUDE_IN
+              <SiteOrigin
+                title={txData.msgParams.origin}
+                siteOrigin={txData.msgParams.origin}
+                iconSrc={targetSubjectMetadata?.iconUrl}
+                iconName={
+                  getURLHostName(targetSubjectMetadata?.origin) ||
+                  targetSubjectMetadata?.origin
+                }
+                chip
+              />
+              ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+            )
+            ///: END:ONLY_INCLUDE_IN
+          }
         </div>
 
         <Typography

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

@@ -0,0 +1 @@
+export { default } from './snap-legacy-authorship-header';

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { useSelector } from 'react-redux';
+import {
+  BackgroundColor,
+  TextColor,
+  TextVariant,
+  AlignItems,
+  FontWeight,
+  Display,
+  FlexDirection,
+  BlockSize,
+  BorderColor,
+  BorderRadius,
+} from '../../../../helpers/constants/design-system';
+import {
+  getSnapName,
+  removeSnapIdPrefix,
+} from '../../../../helpers/utils/util';
+
+import { Box, Text } from '../../../component-library';
+import { getTargetSubjectMetadata } from '../../../../selectors';
+import SnapAvatar from '../snap-avatar';
+
+const SnapLegacyAuthorshipHeader = ({
+  snapId,
+  className,
+  marginLeft,
+  marginRight,
+}) => {
+  const packageName = snapId && removeSnapIdPrefix(snapId);
+
+  const subjectMetadata = useSelector((state) =>
+    getTargetSubjectMetadata(state, snapId),
+  );
+
+  const friendlyName = snapId && getSnapName(snapId, subjectMetadata);
+
+  return (
+    <Box
+      className={classnames('snap-legacy-authorship-header', className)}
+      backgroundColor={BackgroundColor.backgroundDefault}
+      width={BlockSize.Full}
+      alignItems={AlignItems.center}
+      display={Display.Flex}
+      padding={2}
+      borderColor={BorderColor.borderDefault}
+      borderRadius={BorderRadius.pill}
+      marginLeft={marginLeft}
+      marginRight={marginRight}
+    >
+      <Box>
+        <SnapAvatar snapId={snapId} />
+      </Box>
+      <Box
+        marginLeft={4}
+        marginRight={4}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+        style={{ overflow: 'hidden' }}
+      >
+        <Text ellipsis fontWeight={FontWeight.Medium}>
+          {friendlyName}
+        </Text>
+        <Text
+          ellipsis
+          variant={TextVariant.bodySm}
+          color={TextColor.textAlternative}
+        >
+          {packageName}
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+SnapLegacyAuthorshipHeader.propTypes = {
+  /**
+   * The id of the snap
+   */
+  snapId: PropTypes.string,
+  /**
+   * The className of the SnapLegacyAuthorshipHeader
+   */
+  className: PropTypes.string,
+  marginLeft: PropTypes.number,
+  marginRight: PropTypes.number,
+};
+
+export default SnapLegacyAuthorshipHeader;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import SnapLegacyAuthorshipHeader from './snap-legacy-authorship-header';
+
+export default {
+  title: 'Components/App/Snaps/SnapLegacyAuthorshipHeader',
+
+  component: SnapLegacyAuthorshipHeader,
+  argTypes: {
+    snapId: {
+      control: 'text',
+    },
+  },
+};
+
+export const DefaultStory = (args) => <SnapLegacyAuthorshipHeader {...args} />;
+
+DefaultStory.storyName = 'Default';
+
+DefaultStory.args = {
+  snapId: 'npm:@metamask/test-snap-bip44',
+};

ui/pages/confirm-signature-request/index.js

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, withRouter } from 'react-router-dom';
 import log from 'loglevel';
 import { cloneDeep } from 'lodash';
+import { SubjectType } from '@metamask/permission-controller';
 import * as actions from '../../store/actions';
 import txHelper from '../../helpers/utils/tx-helper';
 import SignatureRequest from '../../components/app/signature-request';
@@ -16,13 +17,14 @@ import {
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
   getSelectedAccount,
   ///: END:ONLY_INCLUDE_IN
+  getTargetSubjectMetadata,
 } from '../../selectors';
 import { MESSAGE_TYPE } from '../../../shared/constants/app';
 import { TransactionStatus } from '../../../shared/constants/transaction';
 import { getSendTo } from '../../ducks/send';
 import { getProviderConfig } from '../../ducks/metamask/metamask';
 
-const signatureSelect = (txData) => {
+const signatureSelect = (txData, targetSubjectMetadata) => {
   const {
     type,
     msgParams: { version, siwe },
@@ -36,7 +38,7 @@ const signatureSelect = (txData) => {
     return SignatureRequest;
   }
 
-  if (siwe?.isSIWEMessage) {
+  if (siwe?.isSIWEMessage && targetSubjectMetadata !== SubjectType.Snap) {
     return SignatureRequestSIWE;
   }
 
@@ -167,11 +169,16 @@ const ConfirmTxScreen = ({ match }) => {
   const txData = getTxData() || {};
 
   const { msgParams } = txData;
+
+  const targetSubjectMetadata = useSelector((state) =>
+    getTargetSubjectMetadata(state, msgParams?.origin),
+  );
+
   if (!msgParams) {
     return <Loading />;
   }
 
-  const SigComponent = signatureSelect(txData);
+  const SigComponent = signatureSelect(txData, targetSubjectMetadata);
 
   return (
     <SigComponent