[FLASK] Transaction Insights V2 Integration

app/scripts/metamask-controller.js

@@ -101,6 +101,9 @@ import {
 } from '@metamask/controller-utils';
 import { wordlist } from '@metamask/scure-bip39/dist/wordlists/english';
 
+///: BEGIN:ONLY_INCLUDE_IN(snaps)
+import { HandlerType } from '@metamask/snaps-utils';
+///: END:ONLY_INCLUDE_IN
 ///: BEGIN:ONLY_INCLUDE_IN(petnames)
 import {
   NameController,
@@ -1916,7 +1919,6 @@ export default class MetamaskController extends EventEmitter {
   ///: END:ONLY_INCLUDE_IN
 
   ///: BEGIN:ONLY_INCLUDE_IN(snaps)
-
   /**
    * Tracks snaps export usage. Note: This function is throttled to 1 call per 60 seconds.
    *
@@ -1947,7 +1949,13 @@ export default class MetamaskController extends EventEmitter {
    * @returns The result of the JSON-RPC request.
    */
   handleSnapRequest(args) {
-    this._trackSnapExportUsage(args.snapId, args.handler);
+    // we're not tracking at this point in flask because we eagerly fetch insights in v2
+    if (
+      args.handler !== HandlerType.OnTransaction &&
+      !process.env.ALLOW_LOCAL_SNAPS
+    ) {
+      this._trackSnapExportUsage(args.snapId, args.handler);
+    }
 
     return this.controllerMessenger.call('SnapController:handleRequest', args);
   }

ui/components/app/confirm-page-container/confirm-page-container.component.js

@@ -42,6 +42,9 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 ///: BEGIN:ONLY_INCLUDE_IN(snaps)
 import useTransactionInsights from '../../../hooks/useTransactionInsights';
 ///: END:ONLY_INCLUDE_IN
+///: BEGIN:ONLY_INCLUDE_IN(build-flask)
+import TxInsightWarnings from '../snaps/tx-insight-warnings/tx-insight-warnings';
+///: END:ONLY_INCLUDE_IN
 import {
   getAccountName,
   getAddressBookEntry,
@@ -59,6 +62,7 @@ import {
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
 ///: END:ONLY_INCLUDE_IN
+
 import {
   ConfirmPageContainerHeader,
   ConfirmPageContainerContent,
@@ -118,7 +122,10 @@ const ConfirmPageContainer = (props) => {
   const trackEvent = useContext(MetaMetricsContext);
   ///: END:ONLY_INCLUDE_IN
   const [collectionBalance, setCollectionBalance] = useState('0');
-
+  ///: BEGIN:ONLY_INCLUDE_IN(build-flask)
+  const [isShowingTxInsightWarnings, setIsShowingTxInsightWarnings] =
+    useState(false);
+  ///: END:ONLY_INCLUDE_IN
   const isBuyableChain = useSelector(getIsBuyableChain);
   const contact = useSelector((state) => getAddressBookEntry(state, toAddress));
   const networkIdentifier = useSelector(getNetworkIdentifier);
@@ -159,11 +166,30 @@ const ConfirmPageContainer = (props) => {
   ///: BEGIN:ONLY_INCLUDE_IN(snaps)
   // As confirm-transction-base is converted to functional component
   // this code can bemoved to it.
-  const insightComponent = useTransactionInsights({
+  const insightObject = useTransactionInsights({
     txData,
   });
+  const insightComponent = insightObject?.insightComponent;
   ///: END:ONLY_INCLUDE_IN
 
+  const handleSubmit = () => {
+    if (isSetApproveForAll && isApprovalOrRejection) {
+      onSetApprovalForAll();
+    } else {
+      onSubmit();
+    }
+  };
+
+  // TODO: Better name
+  const topLevelHandleSubmit = () => {
+    ///: BEGIN:ONLY_INCLUDE_IN(build-flask)
+    if (insightObject?.warnings?.length > 0) {
+      return setIsShowingTxInsightWarnings(true);
+    }
+    ///: END:ONLY_INCLUDE_IN
+    return handleSubmit();
+  };
+
   useEffect(() => {
     if (isSetApproveForAll && assetStandard === TokenStandard.ERC721) {
       fetchCollectionBalance();
@@ -231,7 +257,7 @@ const ConfirmPageContainer = (props) => {
             onCancelAll={onCancelAll}
             onCancel={onCancel}
             cancelText={t('reject')}
-            onSubmit={onSubmit}
+            onSubmit={topLevelHandleSubmit}
             submitText={t('confirm')}
             disabled={disabled}
             unapprovedTxCount={unapprovedTxCount}
@@ -326,11 +352,7 @@ const ConfirmPageContainer = (props) => {
           <PageContainerFooter
             onCancel={onCancel}
             cancelText={t('reject')}
-            onSubmit={
-              isSetApproveForAll && isApprovalOrRejection
-                ? onSetApprovalForAll
-                : onSubmit
-            }
+            onSubmit={topLevelHandleSubmit}
             submitText={t('confirm')}
             submitButtonType={
               isSetApproveForAll && isApprovalOrRejection
@@ -359,6 +381,23 @@ const ConfirmPageContainer = (props) => {
             <AdvancedGasFeePopover />
           </>
         )}
+        {
+          ///: BEGIN:ONLY_INCLUDE_IN(build-flask)
+        }
+        {insightObject?.warnings?.length > 0 && isShowingTxInsightWarnings && (
+          <TxInsightWarnings
+            warnings={insightObject.warnings}
+            origin={origin}
+            onCancel={() => setIsShowingTxInsightWarnings(false)}
+            onSubmit={() => {
+              handleSubmit();
+              setIsShowingTxInsightWarnings(false);
+            }}
+          />
+        )}
+        {
+          ///: END:ONLY_INCLUDE_IN
+        }
       </div>
     </GasFeeContextProvider>
   );

ui/components/app/confirm-page-container/snaps/snap-insight.js

@@ -1,7 +1,17 @@
-import React from 'react';
+import React, {
+  ///: BEGIN:ONLY_INCLUDE_IN(build-flask)
+  useEffect,
+  ///: END:ONLY_INCLUDE_IN
+} from 'react';
+
 import PropTypes from 'prop-types';
 
-import { useSelector } from 'react-redux';
+import {
+  useSelector,
+  ///: BEGIN:ONLY_INCLUDE_IN(build-flask)
+  useDispatch,
+  ///: END:ONLY_INCLUDE_IN
+} from 'react-redux';
 import Preloader from '../../../ui/icon/preloader/preloader-icon.component';
 import { Text } from '../../../component-library';
 import {
@@ -13,38 +23,44 @@ import {
   TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { useTransactionInsightSnap } from '../../../../hooks/snaps/useTransactionInsightSnap';
 import Box from '../../../ui/box/box';
 import { SnapUIRenderer } from '../../snaps/snap-ui-renderer';
 import { SnapDelineator } from '../../snaps/snap-delineator';
 import { DelineatorType } from '../../../../helpers/constants/snaps';
 import { getSnapName } from '../../../../helpers/utils/util';
 import { Copyable } from '../../snaps/copyable';
 import { getTargetSubjectMetadata } from '../../../../selectors';
+///: BEGIN:ONLY_INCLUDE_IN(build-flask)
+import { trackInsightSnapUsage } from '../../../../store/actions';
+///: END:ONLY_INCLUDE_IN
 
-export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
+export const SnapInsight = ({ data, loading }) => {
   const t = useI18nContext();
   const {
-    data: response,
     error,
-    loading,
-  } = useTransactionInsightSnap({
-    transaction,
-    chainId,
-    origin,
-    snapId: selectedSnap.id,
-  });
+    snapId,
+    response: { content },
+  } = data;
+  ///: BEGIN:ONLY_INCLUDE_IN(build-flask)
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const trackInsightUsage = async () => {
+      await dispatch(trackInsightSnapUsage(snapId));
+    };
+    trackInsightUsage();
+  }, [snapId, dispatch]);
+  ///: END:ONLY_INCLUDE_IN
 
   const targetSubjectMetadata = useSelector((state) =>
-    getTargetSubjectMetadata(state, selectedSnap.id),
+    getTargetSubjectMetadata(state, snapId),
   );
 
-  const snapName = getSnapName(selectedSnap.id, targetSubjectMetadata);
-
-  const data = response?.content;
+  const snapName = getSnapName(snapId, targetSubjectMetadata);
 
   const hasNoData =
-    !error && (loading || !data || (data && Object.keys(data).length === 0));
+    !error &&
+    (loading || !content || (content && Object.keys(content).length === 0));
   return (
     <Box
       flexDirection={FLEX_DIRECTION.COLUMN}
@@ -64,8 +80,8 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
         >
           {data && Object.keys(data).length > 0 ? (
             <SnapUIRenderer
-              snapId={selectedSnap.id}
-              data={data}
+              snapId={snapId}
+              data={content}
               delineatorType={DelineatorType.Insights}
             />
           ) : (
@@ -110,19 +126,11 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
 
 SnapInsight.propTypes = {
   /*
-   * The transaction data object
-   */
-  transaction: PropTypes.object,
-  /*
-   * CAIP2 Chain ID
-   */
-  chainId: PropTypes.string,
-  /*
-   *  The origin of the transaction
+   * The insight object
    */
-  origin: PropTypes.string,
+  data: PropTypes.object,
   /*
-   * The insight snap selected
+   * Boolean as to whether or not the insights are loading
    */
-  selectedSnap: PropTypes.object,
+  loading: PropTypes.bool,
 };

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

@@ -11,4 +11,8 @@
       overflow: hidden;
     }
   }
+
+  &__expansion-icon {
+    cursor: pointer;
+  }
 }