From 59f735756cdd9356eadea7b9b3f0c609b520306d Mon Sep 17 00:00:00 2001
From: Frederik Bolding <frederik.bolding@gmail.com>
Date: Thu, 15 Aug 2024 10:45:04 +0200
Subject: [PATCH] feat: Add SnapsSection to confirmations

---
 .../pluggable-section/pluggable-section.tsx   |  3 +-
 .../confirm/snaps/snaps-insight/index.ts      |  1 +
 .../snaps/snaps-insight/snaps-insight.tsx     | 49 +++++++++++++++++++
 .../confirm/snaps/snaps-section/index.ts      |  1 +
 .../snaps/snaps-section/snaps-section.tsx     | 20 ++++++++
 5 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 ui/pages/confirmations/components/confirm/snaps/snaps-insight/index.ts
 create mode 100644 ui/pages/confirmations/components/confirm/snaps/snaps-insight/snaps-insight.tsx
 create mode 100644 ui/pages/confirmations/components/confirm/snaps/snaps-section/index.ts
 create mode 100644 ui/pages/confirmations/components/confirm/snaps/snaps-section/snaps-section.tsx

diff --git a/ui/pages/confirmations/components/confirm/pluggable-section/pluggable-section.tsx b/ui/pages/confirmations/components/confirm/pluggable-section/pluggable-section.tsx
index c167cdb83c0f..a8f1ecc34f6b 100644
--- a/ui/pages/confirmations/components/confirm/pluggable-section/pluggable-section.tsx
+++ b/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);
diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-insight/index.ts b/ui/pages/confirmations/components/confirm/snaps/snaps-insight/index.ts
new file mode 100644
index 000000000000..45392fc419de
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/snaps/snaps-insight/index.ts
@@ -0,0 +1 @@
+export * from './snaps-insight';
diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-insight/snaps-insight.tsx b/ui/pages/confirmations/components/confirm/snaps/snaps-insight/snaps-insight.tsx
new file mode 100644
index 000000000000..236e1f5e75ba
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/index.ts b/ui/pages/confirmations/components/confirm/snaps/snaps-section/index.ts
new file mode 100644
index 000000000000..1e898dac9479
--- /dev/null
+++ b/ui/pages/confirmations/components/confirm/snaps/snaps-section/index.ts
@@ -0,0 +1 @@
+export * from './snaps-section';
diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/snaps-section.tsx b/ui/pages/confirmations/components/confirm/snaps/snaps-section/snaps-section.tsx
new file mode 100644
index 000000000000..eca8d020e5a2
--- /dev/null
+++ b/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>
+  );
+};