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) => ( - - {key} -

{data[key]}

-
- )) +
+ {Object.keys(data).map((key, i) => ( +
+ {key} + {data[key]} +
+ ))} +
) : ( {t('snapsNoInsight')}