[FLASK] Update snap delineator (#18385)

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."

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": "Ορισμένα δίκτυα ενδέχεται να ενέχουν κινδύνους για την ασφάλεια ή/και το απόρρητο. Ενημερωθείτε για τους κινδύνους πριν προσθέσετε και χρησιμοποιήσετε ένα δίκτυο."

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."

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."

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."

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": "कुछ नेटवर्क सुरक्षा और/या गोपनीयता संबंधी जोखिम पैदा कर सकते हैं। नेटवर्क जोड़ने और उपयोग करने से पहले जोखिमों को समझें।"

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."

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": "ネットワークによっては、セキュリティやプライバシーの面でリスクが伴う可能性があります。ネットワークを追加・使用する前にリスクを理解するようにしてください。"

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": "네트워크에 따라 보안이나 개인 정보 유출의 위험이 있을 수 있습니다. 네트워크 추가 및 사용 이전에 위험 요소를 파악하세요."

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."

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": "Некоторые сети могут представлять угрозу безопасности и/или конфиденциальности. Прежде чем добавлять и использовать сеть, ознакомьтесь с рисками."

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."

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."

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."

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": "某些网络可能会带来安全和/或隐私风险。在添加和使用网络之前，请先了解风险。"

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

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>
   );

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;
 

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}
+        padding={1}
-        paddingLeft={2}
-        paddingRight={2}
-        paddingTop={1}
-        paddingBottom={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,
 };

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>
 );

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();
+  });
+});

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}>
+      <SnapDelineator snapName={snapName} type={DelineatorType.Error}>
-        <ActionableMessage
+        <Text variant={TextVariant.bodySm} marginBottom={4}>
-          className="snap-ui-renderer__error"
+          {t('snapsUIError', [<b key="0">{snapName}</b>])}
-          message={t('snapsUIError')}
+        </Text>
-          type="danger"
+        <Copyable text={t('snapsInvalidUIError')} />
-          useIcon
-          iconFillColor="var(--color-error-default)"
-        />
       </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,
 };

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');
+    });
+  });
+});

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';
+  }
+};

ui/helpers/constants/flask/index.js

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

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) =>
+  const targetSubjectMetadata = useSelector((state) =>
-    getSnap(state, pendingConfirmation?.origin),
+    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
+          ///: BEGIN:ONLY_INCLUDE_IN(flask)
-            alignItems="center"
+          !isSnapDialog &&
-            marginTop={1}
+            ///: END:ONLY_INCLUDE_IN
-            paddingTop={1}
+            pendingConfirmation.origin === 'metamask' && (
-            paddingRight={4}
+              <Box
-            paddingLeft={4}
+                alignItems={AlignItems.center}
-            paddingBottom={4}
+                paddingTop={2}
-            flexDirection={FLEX_DIRECTION.COLUMN}
+                paddingRight={4}
-          >
+                paddingLeft={4}
-            <SiteOrigin
+                paddingBottom={4}
-              chip
+                flexDirection={FLEX_DIRECTION.COLUMN}
-              siteOrigin={originMetadata.origin}
+              >
-              title={originMetadata.origin}
+                <SiteOrigin
-              iconSrc={originMetadata.iconUrl}
+                  chip
-              iconName={originMetadata.hostname}
+                  siteOrigin={originMetadata.origin}
-            />
+                  title={originMetadata.origin}
-          </Box>
+                  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

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.

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.

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: [

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
+            <Text textAlign={TEXT_ALIGN.CENTER}>
-              paddingLeft={4}
-              paddingRight={4}
-              textAlign={TEXT_ALIGN.CENTER}
-            >
               {t('snapInstallRequest', [
                 <b key="1">{originMetadata?.hostname}</b>,
                 <b key="2">{snapName}</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}

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
+            <Text textAlign={TEXT_ALIGN.CENTER}>
-              paddingLeft={4}
-              paddingRight={4}
-              textAlign={TEXT_ALIGN.CENTER}
-            >
               {t('snapUpdateRequest', [
                 <b key="1">{originMetadata?.hostname}</b>,
                 <b key="2">{snapName}</b>,