diff --git a/ui/components/app/confirm-page-container/flask/index.scss b/ui/components/app/confirm-page-container/flask/index.scss
index a0bce7c75abc..990c627022a4 100644
--- a/ui/components/app/confirm-page-container/flask/index.scss
+++ b/ui/components/app/confirm-page-container/flask/index.scss
@@ -1,15 +1,34 @@
.snap-insight {
- font-size: 14px;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
overflow-y: auto;
height: 170px;
word-wrap: break-word;
- padding: 12px 24px;
+
&--no-data {
flex-direction: column;
- align-content: center;
+ align-items: center;
justify-content: center;
text-align: center;
- margin-top: 40px;
+ }
+
+ &__container {
+ padding: 0px 24px 12px 24px;
+ height: 100%;
+ overflow-y: auto;
+
+ &__data {
+ padding-top: 12px;
+
+ .typography {
+ font-size: 14px;
+ }
+ }
+
+ &__title {
+ font-weight: bold;
+ }
}
}
\ No newline at end of file
diff --git a/ui/components/app/confirm-page-container/flask/snap-insight.component.js b/ui/components/app/confirm-page-container/flask/snap-insight.component.js
index 880a7cd57172..c2c725ec541a 100644
--- a/ui/components/app/confirm-page-container/flask/snap-insight.component.js
+++ b/ui/components/app/confirm-page-container/flask/snap-insight.component.js
@@ -11,12 +11,11 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
import { useTransactionInsightSnap } from '../../../../hooks/flask/useTransactionInsightSnap';
export const SnapInsight = ({ transaction, chainId, snapId }) => {
- const response = undefined;
- // useTransactionInsightSnap({
- // transaction,
- // chainId,
- // snapId,
- // });
+ const response = useTransactionInsightSnap({
+ transaction,
+ chainId,
+ snapId,
+ });
const data = response?.insights;
@@ -31,12 +30,14 @@ export const SnapInsight = ({ transaction, chainId, snapId }) => {
{data ? (
<>
{Object.keys(data).length ? (
- Object.keys(data).map((key, i) => (
- {data[key]}