[FLASK] Update snap delineator (#18385)

2024-11-25 03:20:23 +01:00 · 2023-04-03 18:04:30 +02:00 · 2023-04-03 18:04:30 +02:00 · f51055802f
commit f51055802f
parent 1304ec7af5
32 changed files with 275 additions and 165 deletions
--- a/app/_locales/de/messages.json
+++ b/app/_locales/de/messages.json
@ -3355,10 +3355,6 @@
  "snaps": {
    "message": "Snaps"
  },
-  "snapsInsightError": {
-    "message": "Ein Fehler ist mit $1: $2 aufgetreten",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "Transaktions-Einsicht wird geladen ..."
  },
@ -3375,7 +3371,8 @@
    "message": "Ein Snap wird nur ausgeführt, wenn er aktiviert ist"
  },
  "snapsUIError": {
-    "message": "Die vom Snap spezifizierte UI ist ungültig."
+    "message": "Die vom Snap spezifizierte UI ist ungültig.",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "Einige Netzwerke können Sicherheits- und/oder Datenschutzrisiken bergen. Informieren Sie sich über die Risiken, bevor Sie ein Netzwerk hinzufügen und nutzen."
--- a/app/_locales/el/messages.json
+++ b/app/_locales/el/messages.json
@ -3355,10 +3355,6 @@
  "snaps": {
    "message": "Snaps"
  },
-  "snapsInsightError": {
-    "message": "Παρουσιάστηκε ένα σφάλμα με $1: $2",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "Φόρτωση πληροφοριών συναλλαγών..."
  },
@ -3375,7 +3371,8 @@
    "message": "Ένα snap θα εκτελεστεί μόνο εάν είναι ενεργοποιημένο"
  },
  "snapsUIError": {
-    "message": "Η Διεπαφή Χρήστη (UI) που καθορίζεται από το στιγμιότυπο δεν είναι έγκυρη."
+    "message": "Η Διεπαφή Χρήστη (UI) που καθορίζεται από το στιγμιότυπο δεν είναι έγκυρη.",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "Ορισμένα δίκτυα ενδέχεται να ενέχουν κινδύνους για την ασφάλεια ή/και το απόρρητο. Ενημερωθείτε για τους κινδύνους πριν προσθέσετε και χρησιμοποιήσετε ένα δίκτυο."
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -1374,6 +1374,10 @@
  "errorWhileConnectingToRPC": {
    "message": "Error while connecting to the custom network."
  },
+  "errorWithSnap": {
+    "message": "Error with $1",
+    "description": "$1 represents the name of the snap"
+  },
  "ethGasPriceFetchWarning": {
    "message": "Backup gas price is provided as the main gas estimation service is unavailable right now."
  },
@ -1801,6 +1805,10 @@
  "inputLogicHigherNumber": {
    "message": "This allows the contract to spend all your token balance until it reaches the cap or you revoke the spending cap. If this is not intended, consider setting a lower spending cap."
  },
+  "insightsFromSnap": {
+    "message": "Insights from $1",
+    "description": "$1 represents the name of the snap"
+  },
  "install": {
    "message": "Install"
  },
@ -3627,13 +3635,12 @@
  "snaps": {
    "message": "Snaps"
  },
-  "snapsInsightError": {
-    "message": "An error occured with $1: $2",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "Loading transaction insight..."
  },
+  "snapsInvalidUIError": {
+    "message": "The UI specified by the snap is invalid."
+  },
  "snapsNoInsight": {
    "message": "The snap didn't return any insight"
  },
@ -3647,7 +3654,8 @@
    "message": "A snap will only run if it is enabled"
  },
  "snapsUIError": {
-    "message": "The UI specified by the snap is invalid."
+    "message": "Contact the creators of $1 for further support.",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "Some networks may pose security and/or privacy risks. Understand the risks before adding & using a network."
--- a/app/_locales/es/messages.json
+++ b/app/_locales/es/messages.json
@ -3355,10 +3355,6 @@
  "snaps": {
    "message": "Complementos"
  },
-  "snapsInsightError": {
-    "message": "Ocurrió un error con $1: $2",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "Cargando información de transacción..."
  },
@ -3375,7 +3371,8 @@
    "message": "Un complemento solo se ejecutará si está habilitado"
  },
  "snapsUIError": {
-    "message": "La IU especificada por el complemento no es válida."
+    "message": "La IU especificada por el complemento no es válida.",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "Algunas redes pueden presentar riesgos de seguridad y/o privacidad. Comprenda los riesgos antes de agregar y utilizar una red."
--- a/app/_locales/fr/messages.json
+++ b/app/_locales/fr/messages.json
@ -3355,10 +3355,6 @@
  "snaps": {
    "message": "Snaps"
  },
-  "snapsInsightError": {
-    "message": "Une erreur s’est produite avec $1: $2",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "Chargement de l’aperçu de transaction…"
  },
@ -3375,7 +3371,8 @@
    "message": "Un snap ne s’exécute que s’il est activé"
  },
  "snapsUIError": {
-    "message": "L’interface utilisateur (IU) spécifiée par le snap n’est pas valide."
+    "message": "L’interface utilisateur (IU) spécifiée par le snap n’est pas valide.",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "Certains réseaux peuvent présenter des risques pour la sécurité et/ou la vie privée. Informez-vous sur les risques avant d’ajouter et d’utiliser un réseau."
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@ -3355,10 +3355,6 @@
  "snaps": {
    "message": "स्नैप्स"
  },
-  "snapsInsightError": {
-    "message": "$1: $2 के साथ त्रुटि हुई",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "ट्रांजैक्शन इनसाइट लोड हो रही है..."
  },
@ -3375,7 +3371,8 @@
    "message": "कोई स्नैप तभी चलेगा जब उसे सक्षम किया गया हो"
  },
  "snapsUIError": {
-    "message": "स्नैप द्वारा विनिर्दिष्टत UI अमान्य है।"
+    "message": "स्नैप द्वारा विनिर्दिष्टत UI अमान्य है।",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "कुछ नेटवर्क सुरक्षा और/या गोपनीयता संबंधी जोखिम पैदा कर सकते हैं। नेटवर्क जोड़ने और उपयोग करने से पहले जोखिमों को समझें।"
--- a/app/_locales/id/messages.json
+++ b/app/_locales/id/messages.json
@ -3355,10 +3355,6 @@
  "snaps": {
    "message": "Snap"
  },
-  "snapsInsightError": {
-    "message": "Terjadi kesalahan dengan $1: $2",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "Memuat wawasan transaksi..."
  },
@ -3375,7 +3371,8 @@
    "message": "Snap hanya akan beroperasi jika diaktifkan"
  },
  "snapsUIError": {
-    "message": "UI yang ditentukan oleh snap tidak valid."
+    "message": "UI yang ditentukan oleh snap tidak valid.",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "Beberapa jaringan dapat menimbulkan risiko keamanan dan/atau privasi. Pahami risikonya sebelum menambahkan & menggunakan jaringan."
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@ -3355,10 +3355,6 @@
  "snaps": {
    "message": "スナップ"
  },
-  "snapsInsightError": {
-    "message": "$1 でエラーが発生しました: $2",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "トランザクションインサイトを読み込み中..."
  },
@ -3375,7 +3371,8 @@
    "message": "スナップは有効になっている場合にのみ実行されます"
  },
  "snapsUIError": {
-    "message": "スナップにより指定された UI が無効です。"
+    "message": "スナップにより指定された UI が無効です。",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "ネットワークによっては、セキュリティやプライバシーの面でリスクが伴う可能性があります。ネットワークを追加・使用する前にリスクを理解するようにしてください。"
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@ -3355,10 +3355,6 @@
  "snaps": {
    "message": "스냅"
  },
-  "snapsInsightError": {
-    "message": "$1 관련 오류 발생: $2",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "거래 인사이트를 가져오는 중..."
  },
@ -3375,7 +3371,8 @@
    "message": "스냅은 활성화된 상태에서만 작동합니다."
  },
  "snapsUIError": {
-    "message": "스냅에서 지정한 UI가 올바르지 않습니다."
+    "message": "스냅에서 지정한 UI가 올바르지 않습니다.",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "네트워크에 따라 보안이나 개인 정보 유출의 위험이 있을 수 있습니다. 네트워크 추가 및 사용 이전에 위험 요소를 파악하세요."
--- a/app/_locales/pt/messages.json
+++ b/app/_locales/pt/messages.json
@ -3355,10 +3355,6 @@
  "snaps": {
    "message": "Snaps"
  },
-  "snapsInsightError": {
-    "message": "Ocorreu um erro com $1: $2",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "Carregando insight da transação..."
  },
@ -3375,7 +3371,8 @@
    "message": "O snap só será executado se estiver ativado"
  },
  "snapsUIError": {
-    "message": "A IU especificada pelo snap é inválida."
+    "message": "A IU especificada pelo snap é inválida.",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "Algumas redes podem representar riscos de segurança e/ou privacidade. Tenha os riscos em mente antes de adicionar e usar uma rede."
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@ -3355,10 +3355,6 @@
  "snaps": {
    "message": "Снапы"
  },
-  "snapsInsightError": {
-    "message": "Произошла ошибка с $1: $2",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "Загрузка аналитики по транзакции..."
  },
@ -3375,7 +3371,8 @@
    "message": "Снап будет работать только в том случае, если он включен"
  },
  "snapsUIError": {
-    "message": "Пользовательский интерфейс, указанный привязкой, недействителен."
+    "message": "Пользовательский интерфейс, указанный привязкой, недействителен.",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "Некоторые сети могут представлять угрозу безопасности и/или конфиденциальности. Прежде чем добавлять и использовать сеть, ознакомьтесь с рисками."
--- a/app/_locales/tl/messages.json
+++ b/app/_locales/tl/messages.json
@ -3355,10 +3355,6 @@
  "snaps": {
    "message": "Mga Snap"
  },
-  "snapsInsightError": {
-    "message": "Nagkaroon ng error sa $1: $2",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "Naglo-load ng insight sa transaksyon..."
  },
@ -3375,7 +3371,8 @@
    "message": "Tatakbo lamang ang snap kapag pinagana ito"
  },
  "snapsUIError": {
-    "message": "Ang UI na tinukoy sa pamamagitan ng snap ay hindi wasto."
+    "message": "Ang UI na tinukoy sa pamamagitan ng snap ay hindi wasto.",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "Maaaring magdulot ang ilang network ng mga panganib sa seguridad at/o pagkapribado. Unawain ang mga panganib bago idagdag o gamitin ang isang network."
--- a/app/_locales/tr/messages.json
+++ b/app/_locales/tr/messages.json
@ -3355,10 +3355,6 @@
  "snaps": {
    "message": "Snap'ler"
  },
-  "snapsInsightError": {
-    "message": "$1: $2 ile ilgili bir hata oldu",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "İşlem ayrıntıları yükleniyor..."
  },
@ -3375,7 +3371,8 @@
    "message": "Bir snap yalnızca etkinleştirilmişse çalışır"
  },
  "snapsUIError": {
-    "message": "Snap tarafından belirtilen Kullanıcı Arayüzü geçersiz."
+    "message": "Snap tarafından belirtilen Kullanıcı Arayüzü geçersiz.",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "Bazı ağlar güvenlik ve/veya gizlilik riskleri teşkil edebilir. Bir ağ eklemeden ve kullanmadan önce riskleri anlayın."
--- a/app/_locales/vi/messages.json
+++ b/app/_locales/vi/messages.json
@ -3355,10 +3355,6 @@
  "snaps": {
    "message": "Snap"
  },
-  "snapsInsightError": {
-    "message": "Đã xảy ra lỗi với $1: $2",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "Đang tải thông tin chi tiết về giao dịch..."
  },
@ -3375,7 +3371,8 @@
    "message": "Snap chỉ hoạt động khi đã bật"
  },
  "snapsUIError": {
-    "message": "Giao diện người dùng được chỉ định bởi snap không hợp lệ."
+    "message": "Giao diện người dùng được chỉ định bởi snap không hợp lệ.",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "Một số mạng có thể gây ra rủi ro về bảo mật và/hoặc quyền riêng tư. Bạn cần hiểu rõ các rủi ro này trước khi thêm và sử dụng mạng."
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@ -3355,10 +3355,6 @@
  "snaps": {
    "message": "Snap"
  },
-  "snapsInsightError": {
-    "message": "$1 发生错误：$2",
-    "description": "This is shown when the insight snap throws an error. $1 is the snap name, $2 is the error message."
-  },
  "snapsInsightLoading": {
    "message": "正在加载交易洞察……"
  },
@ -3375,7 +3371,8 @@
    "message": "Snap仅在启用后才会运行"
  },
  "snapsUIError": {
-    "message": "Snap指定的用户界面无效。"
+    "message": "Snap指定的用户界面无效。",
+    "description": "This is shown when the insight snap throws an error. $1 is the snap name"
  },
  "someNetworksMayPoseSecurity": {
    "message": "某些网络可能会带来安全和/或隐私风险。在添加和使用网络之前，请先了解风险。"
--- a/ui/components/app/confirm-page-container/flask/snap-insight.js
+++ b/ui/components/app/confirm-page-container/flask/snap-insight.js
@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

+import { useSelector } from 'react-redux';
 import Preloader from '../../../ui/icon/preloader/preloader-icon.component';
 import { Text } from '../../../component-library';
 import {
@ -14,8 +15,12 @@ import {
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { useTransactionInsightSnap } from '../../../../hooks/flask/useTransactionInsightSnap';
 import Box from '../../../ui/box/box';
-import ActionableMessage from '../../../ui/actionable-message/actionable-message';
 import { SnapUIRenderer } from '../../flask/snap-ui-renderer';
+import { SnapDelineator } from '../../flask/snap-delineator';
+import { DelineatorType } from '../../../../helpers/constants/flask';
+import { getSnapName } from '../../../../helpers/utils/util';
+import { Copyable } from '../../flask/copyable';
+import { getTargetSubjectMetadata } from '../../../../selectors';

 export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
  const t = useI18nContext();
@ -30,6 +35,12 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
    snapId: selectedSnap.id,
  });

+  const targetSubjectMetadata = useSelector((state) =>
+    getTargetSubjectMetadata(state, selectedSnap.id),
+  );
+
+  const snapName = getSnapName(selectedSnap.id, targetSubjectMetadata);
+
  const data = response?.content;

  const hasNoData =
@ -52,7 +63,11 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
          className="snap-insight__container"
        >
          {data && Object.keys(data).length > 0 ? (
-            <SnapUIRenderer snapId={selectedSnap.id} data={data} />
+            <SnapUIRenderer
+              snapId={selectedSnap.id}
+              data={data}
+              delineatorType={DelineatorType.Insights}
+            />
          ) : (
            <Text
              color={TextColor.textAlternative}
@ -66,22 +81,13 @@ export const SnapInsight = ({ transaction, origin, chainId, selectedSnap }) => {
      )}

      {!loading && error && (
-        <Box
-          paddingTop={0}
-          paddingRight={6}
-          paddingBottom={3}
-          paddingLeft={6}
-          className="snap-insight__container__error"
-        >
-          <ActionableMessage
-            message={t('snapsInsightError', [
-              selectedSnap.manifest.proposedName,
-              error.message,
-            ])}
-            type="danger"
-            useIcon
-            iconFillColor="var(--color-error-default)"
-          />
+        <Box padding={4} className="snap-insight__container__error">
+          <SnapDelineator snapName={snapName} type={DelineatorType.Error}>
+            <Text variant={TextVariant.bodySm} marginBottom={4}>
+              {t('snapsUIError', [<b key="0">{snapName}</b>])}
+            </Text>
+            <Copyable text={error.message} />
+          </SnapDelineator>
        </Box>
      )}

--- a/ui/components/app/flask/snap-authorship/snap-authorship.js
+++ b/ui/components/app/flask/snap-authorship/snap-authorship.js
@ -14,6 +14,7 @@ import {
  AlignItems,
  DISPLAY,
  BorderRadius,
+  BLOCK_SIZES,
 } from '../../../../helpers/constants/design-system';
 import {
  getSnapName,
@ -59,7 +60,7 @@ const SnapAuthorship = ({ snapId, className }) => {
      paddingRight={4}
      borderRadius={BorderRadius.pill}
      display={DISPLAY.FLEX}
-      style={{ maxWidth: 'fit-content', width: '100%' }}
+      width={BLOCK_SIZES.FULL}
    >
      <Box>
        <SnapAvatar snapId={snapId} />
@ -87,6 +88,7 @@ const SnapAuthorship = ({ snapId, className }) => {
        iconName={ICON_NAMES.EXPORT}
        color={IconColor.infoDefault}
        size={ICON_SIZES.MD}
+        style={{ marginLeft: 'auto' }}
      />
    </Box>
  );
--- a/ui/components/app/flask/snap-delineator/index.scss
+++ b/ui/components/app/flask/snap-delineator/index.scss
@ -1,7 +1,7 @@
 .snap-delineator {
  &__header {
    border-bottom-width: 1px;
-    border-color: var(--color-border-muted);
+    border-color: var(--color-border-default);
    border-style: solid;
    border-radius: 8px 8px 0 0;

--- a/ui/components/app/flask/snap-delineator/snap-delineator.js
+++ b/ui/components/app/flask/snap-delineator/snap-delineator.js
@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import {
  BorderStyle,
-  Size,
  BorderColor,
  BorderRadius,
  AlignItems,
@ -13,37 +12,60 @@ import {
  TextColor,
 } from '../../../../helpers/constants/design-system';
 import Box from '../../../ui/box';
-import { Icon, Text } from '../../../component-library';
+import {
+  AvatarIcon,
+  ICON_NAMES,
+  ICON_SIZES,
+  Text,
+} from '../../../component-library';
+import {
+  DelineatorType,
+  getDelineatorTitle,
+} from '../../../../helpers/constants/flask';

-export const SnapDelineator = ({ snapName, children }) => {
+export const SnapDelineator = ({
+  snapName,
+  type = DelineatorType.default,
+  children,
+}) => {
  const t = useI18nContext();
-
+  const isError = type === DelineatorType.Error;
  return (
    <Box
      className="snap-delineator__wrapper"
      borderStyle={BorderStyle.solid}
-      borderColor={BorderColor.borderMuted}
+      borderColor={BorderColor.borderDefault}
      borderRadius={BorderRadius.LG}
+      backgroundColor={
+        isError ? BackgroundColor.errorMuted : BackgroundColor.backgroundDefault
+      }
    >
      <Box
        className="snap-delineator__header"
        alignItems={AlignItems.center}
-        backgroundColor={BackgroundColor.infoMuted}
-        paddingLeft={2}
-        paddingRight={2}
-        paddingTop={1}
-        paddingBottom={1}
+        padding={1}
      >
-        <Icon name="snaps" color={IconColor.infoDefault} size={Size.SM} />
+        <AvatarIcon
+          iconName={ICON_NAMES.SNAPS}
+          size={ICON_SIZES.XS}
+          backgroundColor={
+            isError ? IconColor.errorDefault : IconColor.infoDefault
+          }
+          margin={1}
+          iconProps={{
+            size: ICON_SIZES.XS,
+            color: IconColor.infoInverse,
+          }}
+        />
        <Text
          variant={TextVariant.bodySm}
-          color={TextColor.infoDefault}
+          color={isError ? TextColor.errorDefault : TextColor.default}
          className="snap-delineator__header__text"
          marginLeft={1}
          marginTop={0}
          marginBottom={0}
        >
-          {t('contentFromSnap', [snapName])}
+          {t(getDelineatorTitle(type), [snapName])}
        </Text>
      </Box>
      <Box className="snap-delineator__content" padding={4}>
@ -55,5 +77,6 @@ export const SnapDelineator = ({ snapName, children }) => {

 SnapDelineator.propTypes = {
  snapName: PropTypes.string,
+  type: PropTypes.string,
  children: PropTypes.ReactNode,
 };
--- a/ui/components/app/flask/snap-delineator/snap-delineator.stories.js
+++ b/ui/components/app/flask/snap-delineator/snap-delineator.stories.js
@ -6,5 +6,5 @@ export default {
 };

 export const DefaultStory = () => (
-  <SnapDelineator snapId="foo">Children</SnapDelineator>
+  <SnapDelineator snapName="foo">Children</SnapDelineator>
 );
--- a/ui/components/app/flask/snap-delineator/snap-delineator.test.js
+++ b/ui/components/app/flask/snap-delineator/snap-delineator.test.js
@ -0,0 +1,35 @@
+import React from 'react';
+import { DelineatorType } from '../../../../helpers/constants/flask';
+import { renderWithLocalization } from '../../../../../test/lib/render-helpers';
+import { SnapDelineator } from './snap-delineator';
+
+describe('SnapDelineator', () => {
+  const args = {
+    snapName: 'Test Snap',
+    type: DelineatorType.Content,
+    children: 'This is some test content',
+  };
+
+  it('should render the SnapDelineator with content inside', () => {
+    const { getByText } = renderWithLocalization(<SnapDelineator {...args} />);
+
+    expect(getByText(/Content from Test Snap/u)).toBeDefined();
+    expect(getByText(args.children)).toBeDefined();
+  });
+
+  it('should render an insight title', () => {
+    args.type = DelineatorType.Insights;
+
+    const { getByText } = renderWithLocalization(<SnapDelineator {...args} />);
+
+    expect(getByText(/Insights from Test Snap/u)).toBeDefined();
+  });
+
+  it('should render an error title', () => {
+    args.type = DelineatorType.Error;
+
+    const { getByText } = renderWithLocalization(<SnapDelineator {...args} />);
+
+    expect(getByText(/Error with Test Snap/u)).toBeDefined();
+  });
+});
--- a/ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js
+++ b/ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js
@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 import nanoid from 'nanoid';
 import { isComponent } from '@metamask/snaps-ui';
+import { useSelector } from 'react-redux';
 import MetaMaskTemplateRenderer from '../../metamask-template-renderer/metamask-template-renderer';
 import {
  TypographyVariant,
@ -10,12 +10,16 @@ import {
  DISPLAY,
  FLEX_DIRECTION,
  OVERFLOW_WRAP,
+  TextVariant,
 } from '../../../../helpers/constants/design-system';
 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';
+import { getSnapName } from '../../../../helpers/utils/util';
+import { getTargetSubjectMetadata } from '../../../../selectors';
+import { Text } from '../../../component-library';
+import { Copyable } from '../copyable';
+import { DelineatorType } from '../../../../helpers/constants/flask';

 export const UI_MAPPING = {
  panel: (props) => ({
@ -70,22 +74,25 @@ export const mapToTemplate = (data) => {
 };

 // Component that maps Snaps UI JSON format to MetaMask Template Renderer format
-export const SnapUIRenderer = ({ snapId, data }) => {
+export const SnapUIRenderer = ({
+  snapId,
+  delineatorType = DelineatorType.Content,
+  data,
+}) => {
  const t = useI18nContext();
-  const snap = useSelector((state) => getSnap(state, snapId));
+  const targetSubjectMetadata = useSelector((state) =>
+    getTargetSubjectMetadata(state, snapId),
+  );

-  const snapName = snap.manifest.proposedName;
+  const snapName = getSnapName(snapId, targetSubjectMetadata);

  if (!isComponent(data)) {
    return (
-      <SnapDelineator snapName={snapName}>
-        <ActionableMessage
-          className="snap-ui-renderer__error"
-          message={t('snapsUIError')}
-          type="danger"
-          useIcon
-          iconFillColor="var(--color-error-default)"
-        />
+      <SnapDelineator snapName={snapName} type={DelineatorType.Error}>
+        <Text variant={TextVariant.bodySm} marginBottom={4}>
+          {t('snapsUIError', [<b key="0">{snapName}</b>])}
+        </Text>
+        <Copyable text={t('snapsInvalidUIError')} />
      </SnapDelineator>
    );
  }
@ -93,7 +100,7 @@ export const SnapUIRenderer = ({ snapId, data }) => {
  const sections = mapToTemplate(data);

  return (
-    <SnapDelineator snapName={snapName}>
+    <SnapDelineator snapName={snapName} type={delineatorType}>
      <Box className="snap-ui-renderer__content">
        <MetaMaskTemplateRenderer sections={sections} />
      </Box>
@ -103,5 +110,6 @@ export const SnapUIRenderer = ({ snapId, data }) => {

 SnapUIRenderer.propTypes = {
  snapId: PropTypes.string,
+  delineatorType: PropTypes.string,
  data: PropTypes.object,
 };
--- a/ui/helpers/constants/flask/delineator.test.ts
+++ b/ui/helpers/constants/flask/delineator.test.ts
@ -0,0 +1,23 @@
+import { DelineatorType, getDelineatorTitle } from './delineator';
+
+describe('delineator utils', () => {
+  describe('getDelineatorTitle', () => {
+    it('should return the good key for an error delineator type', () => {
+      const result = getDelineatorTitle(DelineatorType.Error);
+
+      expect(result).toStrictEqual('errorWithSnap');
+    });
+
+    it('should return the good key for an insights delineator type', () => {
+      const result = getDelineatorTitle(DelineatorType.Insights);
+
+      expect(result).toStrictEqual('insightsFromSnap');
+    });
+
+    it('should return the content key for any other types', () => {
+      const result = getDelineatorTitle(DelineatorType.Content);
+
+      expect(result).toStrictEqual('contentFromSnap');
+    });
+  });
+});
--- a/ui/helpers/constants/flask/delineator.ts
+++ b/ui/helpers/constants/flask/delineator.ts
@ -0,0 +1,17 @@
+export enum DelineatorType {
+  Content = 'content',
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  Error = 'error',
+  Insights = 'insights',
+}
+
+export const getDelineatorTitle = (type: DelineatorType) => {
+  switch (type) {
+    case DelineatorType.Error:
+      return 'errorWithSnap';
+    case DelineatorType.Insights:
+      return 'insightsFromSnap';
+    default:
+      return 'contentFromSnap';
+  }
+};
--- a/ui/helpers/constants/flask/index.js
+++ b/ui/helpers/constants/flask/index.js
@ -0,0 +1 @@
+export * from './delineator';
--- a/ui/pages/confirmation/confirmation.js
+++ b/ui/pages/confirmation/confirmation.js
@ -17,6 +17,7 @@ import MetaMaskTemplateRenderer from '../../components/app/metamask-template-ren
 import ConfirmationWarningModal from '../../components/app/confirmation-warning-modal';
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
 import {
+  AlignItems,
  FLEX_DIRECTION,
  Size,
  TextColor,
@ -25,7 +26,7 @@ import { useI18nContext } from '../../hooks/useI18nContext';
 import { useOriginMetadata } from '../../hooks/useOriginMetadata';
 import {
  ///: BEGIN:ONLY_INCLUDE_IN(flask)
-  getSnap,
+  getTargetSubjectMetadata,
  ///: END:ONLY_INCLUDE_IN
  getUnapprovedTemplatedConfirmations,
  getUnapprovedTxCount,
@ -34,6 +35,10 @@ import NetworkDisplay from '../../components/app/network-display/network-display
 import Callout from '../../components/ui/callout';
 import SiteOrigin from '../../components/ui/site-origin';
 import { Icon, ICON_NAMES } from '../../components/component-library';
+///: BEGIN:ONLY_INCLUDE_IN(flask)
+import SnapAuthorship from '../../components/app/flask/snap-authorship/snap-authorship';
+import { getSnapName } from '../../helpers/utils/util';
+///: END:ONLY_INCLUDE_IN
 import ConfirmationFooter from './components/confirmation-footer';
 import {
  getTemplateValues,
@ -183,12 +188,14 @@ export default function ConfirmationPage({
  const [submitAlerts, setSubmitAlerts] = useState([]);

  ///: BEGIN:ONLY_INCLUDE_IN(flask)
-  const snap = useSelector((state) =>
-    getSnap(state, pendingConfirmation?.origin),
+  const targetSubjectMetadata = useSelector((state) =>
+    getTargetSubjectMetadata(state, pendingConfirmation?.origin),
  );

  // When pendingConfirmation is undefined, this will also be undefined
-  const proposedName = snap?.manifest.proposedName;
+  const snapName =
+    targetSubjectMetadata &&
+    getSnapName(pendingConfirmation?.origin, targetSubjectMetadata);

  const SNAP_DIALOG_TYPE = [
    MESSAGE_TYPE.SNAP_DIALOG_ALERT,
@ -213,7 +220,7 @@ export default function ConfirmationPage({
      ? getTemplateValues(
          {
            ///: BEGIN:ONLY_INCLUDE_IN(flask)
-            snapName: isSnapDialog && proposedName,
+            snapName: isSnapDialog && snapName,
            ///: END:ONLY_INCLUDE_IN
            ...pendingConfirmation,
          },
@ -230,7 +237,7 @@ export default function ConfirmationPage({
    history,
    ///: BEGIN:ONLY_INCLUDE_IN(flask)
    isSnapDialog,
-    proposedName,
+    snapName,
    ///: END:ONLY_INCLUDE_IN
  ]);

@ -327,25 +334,42 @@ export default function ConfirmationPage({
            />
          </Box>
        ) : null}
-        {pendingConfirmation.origin === 'metamask' ? null : (
-          <Box
-            alignItems="center"
-            marginTop={1}
-            paddingTop={1}
-            paddingRight={4}
-            paddingLeft={4}
-            paddingBottom={4}
-            flexDirection={FLEX_DIRECTION.COLUMN}
-          >
-            <SiteOrigin
-              chip
-              siteOrigin={originMetadata.origin}
-              title={originMetadata.origin}
-              iconSrc={originMetadata.iconUrl}
-              iconName={originMetadata.hostname}
-            />
-          </Box>
-        )}
+        {
+          ///: BEGIN:ONLY_INCLUDE_IN(flask)
+          !isSnapDialog &&
+            ///: END:ONLY_INCLUDE_IN
+            pendingConfirmation.origin === 'metamask' && (
+              <Box
+                alignItems={AlignItems.center}
+                paddingTop={2}
+                paddingRight={4}
+                paddingLeft={4}
+                paddingBottom={4}
+                flexDirection={FLEX_DIRECTION.COLUMN}
+              >
+                <SiteOrigin
+                  chip
+                  siteOrigin={originMetadata.origin}
+                  title={originMetadata.origin}
+                  iconSrc={originMetadata.iconUrl}
+                  iconName={originMetadata.hostname}
+                />
+              </Box>
+            )
+        }
+        {
+          ///: BEGIN:ONLY_INCLUDE_IN(flask)
+          isSnapDialog && (
+            <Box
+              alignItems="center"
+              margin={4}
+              flexDirection={FLEX_DIRECTION.COLUMN}
+            >
+              <SnapAuthorship snapId={pendingConfirmation?.origin} />
+            </Box>
+          )
+          ///: END:ONLY_INCLUDE_IN
+        }
        <MetaMaskTemplateRenderer sections={templatedValues.content} />
        {showWarningModal && (
          <ConfirmationWarningModal
--- a/ui/pages/confirmation/templates/flask/snap-alert/snap-alert.js
+++ b/ui/pages/confirmation/templates/flask/snap-alert/snap-alert.js
@ -1,4 +1,5 @@
 import { mapToTemplate } from '../../../../../components/app/flask/snap-ui-renderer';
+import { DelineatorType } from '../../../../../helpers/constants/flask';

 function getValues(pendingApproval, t, actions) {
  const {
@ -19,6 +20,7 @@ function getValues(pendingApproval, t, actions) {
          element: 'SnapDelineator',
          key: 'snap-delineator',
          props: {
+            type: DelineatorType.Content,
            snapName,
          },
          // TODO: Replace with SnapUIRenderer when we don't need to inject the input manually.
--- a/ui/pages/confirmation/templates/flask/snap-confirmation/snap-confirmation.js
+++ b/ui/pages/confirmation/templates/flask/snap-confirmation/snap-confirmation.js
@ -1,5 +1,6 @@
 import { TypographyVariant } from '../../../../../helpers/constants/design-system';
 import { mapToTemplate } from '../../../../../components/app/flask/snap-ui-renderer';
+import { DelineatorType } from '../../../../../helpers/constants/flask';

 function getValues(pendingApproval, t, actions) {
  const {
@ -20,6 +21,7 @@ function getValues(pendingApproval, t, actions) {
          element: 'SnapDelineator',
          key: 'snap-delineator',
          props: {
+            type: DelineatorType.Content,
            snapName,
          },
          // TODO: Replace with SnapUIRenderer when we don't need to inject the input manually.
--- a/ui/pages/confirmation/templates/flask/snap-prompt/snap-prompt.js
+++ b/ui/pages/confirmation/templates/flask/snap-prompt/snap-prompt.js
@ -1,5 +1,6 @@
 import { mapToTemplate } from '../../../../../components/app/flask/snap-ui-renderer';
 import { MESSAGE_TYPE } from '../../../../../../shared/constants/app';
+import { DelineatorType } from '../../../../../helpers/constants/flask';

 function getValues(pendingApproval, t, actions, _history, setInputState) {
  const {
@ -20,6 +21,7 @@ function getValues(pendingApproval, t, actions, _history, setInputState) {
          element: 'SnapDelineator',
          key: 'snap-delineator',
          props: {
+            type: DelineatorType.Content,
            snapName,
          },
          children: [
--- a/ui/pages/permissions-connect/flask/snap-install/snap-install.js
+++ b/ui/pages/permissions-connect/flask/snap-install/snap-install.js
@ -87,6 +87,8 @@ export default function SnapInstall({
        className="headers"
        alignItems={AlignItems.center}
        flexDirection={FLEX_DIRECTION.COLUMN}
+        paddingLeft={4}
+        paddingRight={4}
      >
        <SnapAuthorship snapId={targetSubjectMetadata.origin} />
        {!hasError && (
@ -111,8 +113,6 @@ export default function SnapInstall({
          <>
            <Text
              className="headers__permission-description"
-              paddingLeft={4}
-              paddingRight={4}
              paddingBottom={4}
              textAlign={TEXT_ALIGN.CENTER}
            >
@ -133,11 +133,7 @@ export default function SnapInstall({
            alignItems={AlignItems.center}
            justifyContent={JustifyContent.center}
          >
-            <Text
-              paddingLeft={4}
-              paddingRight={4}
-              textAlign={TEXT_ALIGN.CENTER}
-            >
+            <Text textAlign={TEXT_ALIGN.CENTER}>
              {t('snapInstallRequest', [
                <b key="1">{originMetadata?.hostname}</b>,
                <b key="2">{snapName}</b>,
--- a/ui/pages/permissions-connect/flask/snap-result/snap-result.js
+++ b/ui/pages/permissions-connect/flask/snap-result/snap-result.js
@ -49,6 +49,8 @@ export default function SnapResult({
    >
      <Box
        className="headers"
+        paddingLeft={4}
+        paddingRight={4}
        alignItems={AlignItems.center}
        flexDirection={FLEX_DIRECTION.COLUMN}
      >
@ -69,7 +71,8 @@ export default function SnapResult({
            alignItems={AlignItems.center}
            justifyContent={JustifyContent.center}
            height={BLOCK_SIZES.FULL}
-            padding={2}
+            paddingTop={2}
+            paddingBottom={2}
          >
            <Text
              fontWeight={FONT_WEIGHT.BOLD}
--- a/ui/pages/permissions-connect/flask/snap-update/snap-update.js
+++ b/ui/pages/permissions-connect/flask/snap-update/snap-update.js
@ -91,12 +91,18 @@ export default function SnapUpdate({
    >
      <Box
        className="headers"
+        paddingLeft={4}
+        paddingRight={4}
        alignItems={AlignItems.center}
        flexDirection={FLEX_DIRECTION.COLUMN}
      >
        <SnapAuthorship snapId={targetSubjectMetadata.origin} />
        {!hasError && (
-          <Text padding={[4, 4, 0, 4]} variant={TextVariant.headingLg}>
+          <Text
+            paddingBottom={4}
+            paddingTop={4}
+            variant={TextVariant.headingLg}
+          >
            {t('snapUpdate')}
          </Text>
        )}
@ -117,8 +123,6 @@ export default function SnapUpdate({
          <>
            <Text
              className="headers__permission-description"
-              paddingLeft={4}
-              paddingRight={4}
              paddingBottom={4}
              textAlign={TEXT_ALIGN.CENTER}
            >
@ -141,11 +145,7 @@ export default function SnapUpdate({
            alignItems={AlignItems.center}
            justifyContent={JustifyContent.center}
          >
-            <Text
-              paddingLeft={4}
-              paddingRight={4}
-              textAlign={TEXT_ALIGN.CENTER}
-            >
+            <Text textAlign={TEXT_ALIGN.CENTER}>
              {t('snapUpdateRequest', [
                <b key="1">{originMetadata?.hostname}</b>,
                <b key="2">{snapName}</b>,