[FLASK] Use custom UI for transaction insights (#16912)

* Allow custom UI for transaction insights

* Fix margin

* Small fixes to CSS and selectors

* Rename property

* Fix E2E locally

* Bump test-snaps

* Bump test-snaps

test/e2e/snaps/enums.js

@@ -1,3 +1,3 @@
 module.exports = {
-  TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/test-snaps/4.3.0/',
+  TEST_SNAPS_WEBSITE_URL: 'https://metamask.github.io/test-snaps/4.4.1/',
 };

test/e2e/snaps/test-snap-txinsights.spec.js

@@ -115,9 +115,9 @@ describe('Test Snap TxInsights', function () {
         // check that txinsightstest tab contains the right info
         await driver.delay(1000);
         const txInsightsResult = await driver.findElement(
-          '[data-testid="Test-0"]',
+          '.snap-ui-renderer__content',
         );
-        assert.equal(await txInsightsResult.getText(), 'Test\nSuccessful');
+        assert.equal(await txInsightsResult.getText(), 'Test: Successful');
       },
     );
   });

ui/components/app/confirm-page-container/flask/index.scss

@@ -1,8 +1,7 @@
 .snap-insight {
   word-wrap: break-word;
 
-  &__container__data__json {
-    word-wrap: break-word;
-    overflow-x: auto;
+  &__container {
+    padding: 16px;
   }
 }

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

@@ -13,9 +13,9 @@ import {
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useTransactionInsightSnap } from '../../../../hooks/flask/useTransactionInsightSnap';
-import SnapContentFooter from '../../flask/snap-content-footer/snap-content-footer';
 import Box from '../../../ui/box/box';
 import ActionableMessage from '../../../ui/actionable-message/actionable-message';
+import { SnapUIRenderer } from '../../flask/snap-ui-renderer';
 
 export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
   const t = useI18nContext();
@@ -30,7 +30,7 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
     snapId: selectedSnap.id,
   });
 
-  const data = response?.insights;
+  const data = response?.content;
 
   const hasNoData =
     !error && (loading || !data || (data && Object.keys(data).length === 0));
@@ -52,48 +52,7 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
           className="snap-insight__container"
         >
           {data && Object.keys(data).length > 0 ? (
-            <>
-              <Box
-                flexDirection={FLEX_DIRECTION.COLUMN}
-                paddingTop={0}
-                paddingRight={6}
-                paddingBottom={3}
-                paddingLeft={6}
-                className="snap-insight__container__data"
-              >
-                {Object.keys(data).map((key, i) => (
-                  <div key={i} data-testid={`${key}-${i}`}>
-                    <Typography
-                      fontWeight="bold"
-                      marginTop={3}
-                      variant={TYPOGRAPHY.H6}
-                    >
-                      {key}
-                    </Typography>
-
-                    {typeof data[key] === 'string' ? (
-                      <Typography variant={TYPOGRAPHY.H6}>
-                        {data[key]}
-                      </Typography>
-                    ) : (
-                      <Box
-                        className="snap-insight__container__data__json"
-                        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
-                        padding={3}
-                      >
-                        <Typography variant={TYPOGRAPHY.H7}>
-                          <pre>{JSON.stringify(data[key], null, 2)}</pre>
-                        </Typography>
-                      </Box>
-                    )}
-                  </div>
-                ))}
-              </Box>
-              <SnapContentFooter
-                snapName={selectedSnap.manifest.proposedName}
-                snapId={selectedSnap.id}
-              />
-            </>
+            <SnapUIRenderer snapId={selectedSnap.id} data={data} />
           ) : (
             <Typography color={COLORS.TEXT_ALTERNATIVE} variant={TYPOGRAPHY.H6}>
               {t('snapsNoInsight')}

ui/components/app/flask/snap-ui-markdown/snap-ui-markdown.js

@@ -4,12 +4,17 @@ import ReactMarkdown from 'react-markdown';
 import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
 import Typography from '../../../ui/typography/typography';
 
-const Paragraph = (props) => <Typography {...props} variant={TYPOGRAPHY.H6} />;
+const Paragraph = (props) => (
+  <Typography
+    {...props}
+    variant={TYPOGRAPHY.H6}
+    className="snap-ui-markdown__text"
+  />
+);
 
 export const SnapUIMarkdown = ({ children }) => {
   return (
     <ReactMarkdown
-      className="snap-ui-markdown__text"
       allowedElements={['p', 'strong', 'em']}
       components={{ p: Paragraph }}
     >

ui/components/app/flask/snap-ui-renderer/index.scss

@@ -14,4 +14,20 @@
   &__panel {
     height: 100%;
   }
+
+  &__content > *:first-child {
+    margin-top: 0;
+  }
+
+  &__content > &__panel > *:first-child {
+    margin-top: 0;
+  }
+
+  &__content > *:last-child {
+    margin-bottom: 0;
+  }
+
+  &__content > &__panel > *:last-child {
+    margin-bottom: 0;
+  }
 }

ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js

@@ -13,6 +13,7 @@ import {
 import { SnapDelineator } from '../snap-delineator';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import ActionableMessage from '../../../ui/actionable-message/actionable-message';
+import Box from '../../../ui/box';
 import { getSnap } from '../../../../selectors';
 
 export const UI_MAPPING = {
@@ -91,7 +92,9 @@ export const SnapUIRenderer = ({ snapId, data }) => {
 
   return (
     <SnapDelineator snapName={snapName}>
-      <MetaMaskTemplateRenderer sections={sections} />
+      <Box className="snap-ui-renderer__content">
+        <MetaMaskTemplateRenderer sections={sections} />
+      </Box>
     </SnapDelineator>
   );
 };

ui/components/ui/tabs/index.scss

@@ -14,5 +14,6 @@
     position: sticky;
     top: 0;
     z-index: 2;
+    overflow: hidden;
   }
 }

ui/selectors/selectors.js

@@ -874,7 +874,7 @@ export function getSnaps(state) {
   return state.metamask.snaps;
 }
 
-export const getSnap = createSelector(
+export const getSnap = createDeepEqualSelector(
   getSnaps,
   (_, snapId) => snapId,
   (snaps, snapId) => {
@@ -882,16 +882,15 @@ export const getSnap = createSelector(
   },
 );
 
-export function getInsightSnaps(state) {
-  const snaps = Object.values(state.metamask.snaps);
-  const subjects = getPermissionSubjects(state);
-
-  const insightSnaps = snaps.filter(
-    ({ id }) => subjects[id]?.permissions['endowment:transaction-insight'],
-  );
-
-  return insightSnaps;
-}
+export const getInsightSnaps = createDeepEqualSelector(
+  getSnaps,
+  getPermissionSubjects,
+  (snaps, subjects) => {
+    return Object.values(snaps).filter(
+      ({ id }) => subjects[id]?.permissions['endowment:transaction-insight'],
+    );
+  },
+);
 
 export const getSnapsRouteObjects = createSelector(getSnaps, (snaps) => {
   return Object.values(snaps).map((snap) => {