feat: Add SnapsSection to confirmations

ui/pages/confirmations/components/confirm/pluggable-section/pluggable-section.tsx

@@ -3,9 +3,10 @@ import { ReactComponentLike } from 'prop-types';
 import { useSelector } from 'react-redux';
 
 import { currentConfirmationSelector } from '../../../selectors';
+import { SnapsSection } from '../snaps/snaps-section';
 
 // Components to be plugged into confirmation page can be added to the array below
-const pluggedInSections: ReactComponentLike[] = [];
+const pluggedInSections: ReactComponentLike[] = [SnapsSection];
 
 const PluggableSection = () => {
   const currentConfirmation = useSelector(currentConfirmationSelector);

ui/pages/confirmations/components/confirm/snaps/snaps-insight/index.ts

@@ -0,0 +1 @@
+export * from './snaps-insight';

ui/pages/confirmations/components/confirm/snaps/snaps-insight/snaps-insight.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { SnapUIRenderer } from '../../../../../../components/app/snaps/snap-ui-renderer';
+import { Delineator } from '../../../../../../components/ui/delineator';
+import { IconName, Text } from '../../../../../../components/component-library';
+import {
+  TextColor,
+  TextVariant,
+} from '../../../../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../../../../hooks/useI18nContext';
+import { getSnapMetadata } from '../../../../../../selectors';
+
+export type SnapInsightProps = {
+  snapId: string;
+  interfaceId: string;
+  loading: boolean;
+};
+
+export const SnapInsight: React.FunctionComponent<SnapInsightProps> = ({
+  snapId,
+  interfaceId,
+  loading,
+}) => {
+  const t = useI18nContext();
+  const { name: snapName } = useSelector((state) =>
+    getSnapMetadata(state, snapId),
+  );
+
+  const headerComponent = (
+    <Text
+      color={TextColor.textAlternative}
+      marginLeft={1}
+      variant={TextVariant.bodySm}
+    >
+      {t('insightsFromSnap', [snapName])}
+    </Text>
+  );
+
+  return (
+    <Delineator iconName={IconName.Snaps} headerComponent={headerComponent}>
+      <SnapUIRenderer
+        snapId={snapId}
+        interfaceId={interfaceId}
+        isLoading={loading}
+        useDelineator={false}
+      />
+    </Delineator>
+  );
+};

ui/pages/confirmations/components/confirm/snaps/snaps-section/index.ts

@@ -0,0 +1 @@
+export * from './snaps-section';

ui/pages/confirmations/components/confirm/snaps/snaps-section/snaps-section.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { currentConfirmationSelector } from '../../../../selectors';
+import { useInsightSnaps } from '../../../../../../hooks/snaps/useInsightSnaps';
+import { Box } from '../../../../../../components/component-library';
+import { SnapInsight } from '../snaps-insight';
+import { Display, FlexDirection } from '../../../../../../helpers/constants/design-system';
+
+export const SnapsSection = () => {
+  const currentConfirmation = useSelector(currentConfirmationSelector);
+  const { data } = useInsightSnaps(currentConfirmation?.id);
+
+  return (
+    <Box display={Display.Flex} flexDirection={FlexDirection.Column} gap={2}>
+      {data.map(({ snapId, interfaceId, loading }) => (
+        <SnapInsight key={snapId} snapId={snapId} interfaceId={interfaceId} loading={loading} />
+      ))}
+    </Box>
+  );
+};