Merge branch 'develop' into e2e/settings-about-metamask-links-test

package.json

@@ -255,7 +255,7 @@
     "@metamask/controller-utils": "^8.0.1",
     "@metamask/design-tokens": "^1.13.0",
     "@metamask/desktop": "^0.3.0",
-    "@metamask/eth-json-rpc-middleware": "^12.0.1",
+    "@metamask/eth-json-rpc-middleware": "^12.1.0",
     "@metamask/eth-keyring-controller": "^15.1.0",
     "@metamask/eth-ledger-bridge-keyring": "^2.0.1",
     "@metamask/eth-query": "^4.0.0",

shared/constants/permissions.test.js

@@ -14,6 +14,7 @@ describe('EndowmentPermissions', () => {
       [
         'endowment:name-lookup',
         'endowment:page-home',
+        'endowment:signature-insight',
         ...Object.keys(endowmentPermissionBuilders).filter(
           (targetName) =>
             !Object.keys(ExcludedSnapEndowments).includes(targetName),

shared/constants/snaps/permissions.ts

@@ -8,6 +8,7 @@ export const EndowmentPermissions = Object.freeze({
   'endowment:lifecycle-hooks': 'endowment:lifecycle-hooks',
   ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
   'endowment:page-home': 'endowment:page-home',
+  'endowment:signature-insight': 'endowment:signature-insight',
   'endowment:name-lookup': 'endowment:name-lookup',
   ///: END:ONLY_INCLUDE_IF
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
@@ -22,13 +23,13 @@ export const ExcludedSnapPermissions = Object.freeze({
 });
 
 export const ExcludedSnapEndowments = Object.freeze({
-  'endowment:signature-insight':
-    'This endowment is in development and therefore not available.',
   ///: BEGIN:ONLY_INCLUDE_IF(build-main)
   'endowment:page-home':
     'This endowment is experimental and therefore not available.',
   'endowment:name-lookup':
     'This endowment is experimental and therefore not available.',
+  'endowment:signature-insight':
+    'This endowment is experimental and therefore not available.',
   ///: END:ONLY_INCLUDE_IF
 });
 

ui/components/app/app-components.scss

@@ -25,7 +25,7 @@
 @import 'snaps/copyable/index';
 @import 'snaps/snap-version/index';
 @import 'snaps/show-more/index';
-@import 'snaps/tx-insight-warnings/index';
+@import 'snaps/insight-warnings/index';
 @import 'hold-to-reveal-button/index';
 @import 'home-notification/index';
 @import 'info-box/index';

ui/components/app/snaps/insight-warnings/index.js

@@ -0,0 +1 @@
+export { default } from './insight-warnings';

ui/components/app/snaps/insight-warnings/index.scss

@@ -0,0 +1,6 @@
+.insights-warnings-modal {
+  &__content {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}

ui/components/app/snaps/tx-insight-warnings/tx-insight-warnings.js → ui/components/app/snaps/insight-warnings/insight-warnings.js

@@ -29,12 +29,15 @@ import {
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { SnapUIRenderer } from '../snap-ui-renderer';
-import { DelineatorType } from '../../../../helpers/constants/snaps';
+import {
+  DelineatorType,
+  InsightWarningLanguage,
+} from '../../../../helpers/constants/snaps';
 import { stripHttpSchemes } from '../../../../helpers/utils/util';
 
-export default function TxInsightWarnings({
+export default function InsightWarnings({
   warnings,
-  type = 'confirming',
+  action = 'confirming',
   origin,
   onCancel,
   onSubmit,
@@ -67,7 +70,7 @@ export default function TxInsightWarnings({
   const Warnings = () => {
     const lastWarningIdx = warnings.length - 1;
     return (
-      <Box className="tx-insights-warnings-modal__content">
+      <Box className="insights-warnings-modal__content">
         {warnings.map((warning, idx) => {
           const { snapId, content } = warning;
           return (
@@ -87,19 +90,12 @@ export default function TxInsightWarnings({
     );
   };
 
-  // move this to an enum that defines the language to be used in this modal on the various
-  // screens that will offer transaction insights, should be indexed on "type".
-  const results = {
-    confirming: { noun: 'confirmation', imperative: 'confirm' },
-    signing: { noun: 'signature', imperative: 'sign' },
-  };
-
   return (
     <Modal
       isOpen
       isClosedOnEscapeKey={false}
       isClosedOnOutsideClick={false}
-      className="tx-insights-warnings-modal"
+      className="insights-warnings-modal"
     >
       <ModalOverlay />
       <ModalContent>
@@ -122,19 +118,19 @@ export default function TxInsightWarnings({
             paddingTop={4}
             paddingBottom={4}
           >
-            {t('transactionInsightWarningHeader')}
+            {t('insightWarningHeader')}
           </Text>
         </ModalHeader>
         <Text variant={TextVariant.bodyMd} paddingBottom={4}>
           {warnings.length === 1
-            ? t('transactionInsightWarningContentSingular', [
-                type,
-                results[type].noun,
+            ? t('insightWarningContentSingular', [
+                action,
+                InsightWarningLanguage[action].noun,
               ])
-            : t('transactionInsightWarningContentPlural', [
+            : t('insightWarningContentPlural', [
                 warnings.length,
-                type,
-                results[type].noun,
+                action,
+                InsightWarningLanguage[action].noun,
               ])}
         </Text>
         <Warnings />
@@ -156,8 +152,8 @@ export default function TxInsightWarnings({
             variant={TextVariant.bodySm}
             isChecked={isChecked}
             onChange={handleOnChange}
-            label={t('transactionInsightWarningCheckboxMessage', [
-              t(results[type].imperative),
+            label={t('insightWarningCheckboxMessage', [
+              t(InsightWarningLanguage[action].imperative),
               stripHttpSchemes(origin),
             ])}
           />
@@ -182,23 +178,23 @@ export default function TxInsightWarnings({
             onClick={onSubmit}
             disabled={!isChecked}
           >
-            {t(results[type].imperative)}
+            {t(InsightWarningLanguage[action].imperative)}
           </Button>
         </Box>
       </ModalContent>
     </Modal>
   );
 }
 
-TxInsightWarnings.propTypes = {
+InsightWarnings.propTypes = {
   /**
    * An array of warnings returned from tx-insight snaps that deem their content 'critical'
    */
   warnings: PropTypes.arrayOf(PropTypes.object),
   /**
    * A limited set of actions defining the type of transaction
    */
-  type: PropTypes.oneOf(['confirming', 'signing']),
+  action: PropTypes.oneOf(Object.keys(InsightWarningLanguage)),
   /**
    * Origin initiating the transaction
    */

ui/components/app/snaps/snap-delineator/index.scss

@@ -8,8 +8,13 @@
     &__text {
       white-space: nowrap;
       text-overflow: ellipsis;
+      width: calc(100% - 16px);
       overflow: hidden;
     }
+
+    &__container {
+      width: calc(100% - 16px);
+    }
   }
 
   &__expansion-icon {

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

@@ -65,9 +65,14 @@ export const SnapDelineator = ({
         padding={1}
         style={{ borderBottomWidth: isCollapsed ? 0 : 1 }}
       >
-        <Box display={Display.Flex} alignItems={AlignItems.center}>
+        <Box
+          display={Display.Flex}
+          alignItems={AlignItems.center}
+          className="snap-delineator__header__container"
+        >
           <AvatarIcon
             iconName={IconName.Snaps}
+            className="snap-delineator__header__icon"
             size={AvatarIconSize.Xs}
             backgroundColor={
               isError ? IconColor.errorDefault : IconColor.infoDefault
@@ -83,6 +88,8 @@ export const SnapDelineator = ({
             marginLeft={1}
             marginTop={0}
             marginBottom={0}
+            marginRight={1}
+            display="block"
           >
             {t(getDelineatorTitle(type), [snapName])}
           </Text>
@@ -97,6 +104,7 @@ export const SnapDelineator = ({
           />
         )}
       </Box>
+
       <Box
         className="snap-delineator__content"
         padding={4}

ui/helpers/constants/snaps/index.js

@@ -1 +1,2 @@
 export * from './delineator';
+export * from './insights';

ui/helpers/constants/snaps/insights.ts

@@ -0,0 +1,21 @@
+type InsightLanguageMapper = {
+  [action: string]: {
+    noun: string;
+    imperative: string;
+  };
+};
+
+/**
+ * Mapping of actions to the language needed to be used in
+ * the translations for the insight warnings modal.
+ */
+export const InsightWarningLanguage: InsightLanguageMapper = {
+  confirming: {
+    noun: 'confirmation',
+    imperative: 'confirm',
+  },
+  signing: {
+    noun: 'signature',
+    imperative: 'sign',
+  },
+};

ui/helpers/utils/permission.js

@@ -546,6 +546,44 @@ export const PERMISSION_DESCRIPTIONS = deepFreeze({
     leftIcon: getLeftIcon(IconName.Search),
     weight: 4,
   }),
+  [EndowmentPermissions['endowment:signature-insight']]: ({
+    t,
+    permissionValue,
+    targetSubjectMetadata,
+  }) => {
+    const baseDescription = {
+      leftIcon: IconName.Warning,
+      weight: 3,
+    };
+
+    const result = [
+      {
+        ...baseDescription,
+        label: t('permission_signatureInsight'),
+        description: t('permission_signatureInsightDescription', [
+          getSnapNameComponent(targetSubjectMetadata),
+        ]),
+      },
+    ];
+
+    if (
+      isNonEmptyArray(permissionValue.caveats) &&
+      permissionValue.caveats.find((caveat) => {
+        return caveat.type === SnapCaveatType.SignatureOrigin && caveat.value;
+      })
+    ) {
+      result.push({
+        ...baseDescription,
+        label: t('permission_signatureInsightOrigin'),
+        description: t('permission_signatureInsightOriginDescription', [
+          getSnapNameComponent(targetSubjectMetadata),
+        ]),
+        leftIcon: IconName.Explore,
+      });
+    }
+
+    return result;
+  },
   ///: END:ONLY_INCLUDE_IF
   [UNKNOWN_PERMISSION]: ({ t, permissionName }) => ({
     label: t('permission_unknown', [permissionName ?? 'undefined']),