diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index ad9d680ae..e5c86c47b 100644 --- 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." diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index 6817c89bf..4c56dcf01 100644 --- 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": "Ορισμένα δίκτυα ενδέχεται να ενέχουν κινδύνους για την ασφάλεια ή/και το απόρρητο. Ενημερωθείτε για τους κινδύνους πριν προσθέσετε και χρησιμοποιήσετε ένα δίκτυο." diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index ef7e9ef0d..abda8fecd 100644 --- 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." diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index 5b580280b..d7d56a93b 100644 --- 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." diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index cd3384918..bbdd98c4a 100644 --- 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." diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index c6a645cb0..f976670c9 100644 --- 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": "कुछ नेटवर्क सुरक्षा और/या गोपनीयता संबंधी जोखिम पैदा कर सकते हैं। नेटवर्क जोड़ने और उपयोग करने से पहले जोखिमों को समझें।" diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index b1b6f1b04..c4f6316a2 100644 --- 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." diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index 2c01188de..e770df626 100644 --- 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": "ネットワークによっては、セキュリティやプライバシーの面でリスクが伴う可能性があります。ネットワークを追加・使用する前にリスクを理解するようにしてください。" diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index 7fb0bc692..ef63aba70 100644 --- 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": "네트워크에 따라 보안이나 개인 정보 유출의 위험이 있을 수 있습니다. 네트워크 추가 및 사용 이전에 위험 요소를 파악하세요." diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json index 456fde9d4..c32d55258 100644 --- 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." diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index 16f65a155..bad7ed48f 100644 --- 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": "Некоторые сети могут представлять угрозу безопасности и/или конфиденциальности. Прежде чем добавлять и использовать сеть, ознакомьтесь с рисками." diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index 80f823d84..8eea14401 100644 --- 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." diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index 61da04252..9fb967075 100644 --- 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." diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index 97eccee87..dcfabd1d9 100644 --- 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." diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index d000e0c6b..0bce662da 100644 --- 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": "某些网络可能会带来安全和/或隐私风险。在添加和使用网络之前，请先了解风险。" diff --git a/ui/components/app/confirm-page-container/flask/snap-insight.js b/ui/components/app/confirm-page-container/flask/snap-insight.js index 3cfafd94d..13d182736 100644 --- 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 ? ( - + ) : ( { )} {!loading && error && ( - - + + + + {t('snapsUIError', [{snapName}])} + + + )} diff --git a/ui/components/app/flask/snap-authorship/snap-authorship.js b/ui/components/app/flask/snap-authorship/snap-authorship.js index 4179c5cbf..996c01b77 100644 --- 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} > @@ -87,6 +88,7 @@ const SnapAuthorship = ({ snapId, className }) => { iconName={ICON_NAMES.EXPORT} color={IconColor.infoDefault} size={ICON_SIZES.MD} + style={{ marginLeft: 'auto' }} /> ); diff --git a/ui/components/app/flask/snap-delineator/index.scss b/ui/components/app/flask/snap-delineator/index.scss index 17e5be8b0..697dfb68f 100644 --- 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; diff --git a/ui/components/app/flask/snap-delineator/snap-delineator.js b/ui/components/app/flask/snap-delineator/snap-delineator.js index dd1017045..a397f5bc9 100644 --- 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 ( - + - {t('contentFromSnap', [snapName])} + {t(getDelineatorTitle(type), [snapName])} @@ -55,5 +77,6 @@ export const SnapDelineator = ({ snapName, children }) => { SnapDelineator.propTypes = { snapName: PropTypes.string, + type: PropTypes.string, children: PropTypes.ReactNode, }; diff --git a/ui/components/app/flask/snap-delineator/snap-delineator.stories.js b/ui/components/app/flask/snap-delineator/snap-delineator.stories.js index e2e60e685..563232426 100644 --- 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 = () => ( - Children + Children ); diff --git a/ui/components/app/flask/snap-delineator/snap-delineator.test.js b/ui/components/app/flask/snap-delineator/snap-delineator.test.js new file mode 100644 index 000000000..e9553c730 --- /dev/null +++ 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(); + + 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(); + + expect(getByText(/Insights from Test Snap/u)).toBeDefined(); + }); + + it('should render an error title', () => { + args.type = DelineatorType.Error; + + const { getByText } = renderWithLocalization(); + + expect(getByText(/Error with Test Snap/u)).toBeDefined(); + }); +}); diff --git a/ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js b/ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js index 731bd599f..20197923f 100644 --- 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 ( - - + + + {t('snapsUIError', [{snapName}])} + + ); } @@ -93,7 +100,7 @@ export const SnapUIRenderer = ({ snapId, data }) => { const sections = mapToTemplate(data); return ( - + @@ -103,5 +110,6 @@ export const SnapUIRenderer = ({ snapId, data }) => { SnapUIRenderer.propTypes = { snapId: PropTypes.string, + delineatorType: PropTypes.string, data: PropTypes.object, }; diff --git a/ui/helpers/constants/flask/delineator.test.ts b/ui/helpers/constants/flask/delineator.test.ts new file mode 100644 index 000000000..285d89dfd --- /dev/null +++ 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'); + }); + }); +}); diff --git a/ui/helpers/constants/flask/delineator.ts b/ui/helpers/constants/flask/delineator.ts new file mode 100644 index 000000000..ce5d5002b --- /dev/null +++ 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'; + } +}; diff --git a/ui/helpers/constants/flask/index.js b/ui/helpers/constants/flask/index.js new file mode 100644 index 000000000..cafa4fe13 --- /dev/null +++ b/ui/helpers/constants/flask/index.js @@ -0,0 +1 @@ +export * from './delineator'; diff --git a/ui/pages/confirmation/confirmation.js b/ui/pages/confirmation/confirmation.js index d9c75e597..056ce1e99 100644 --- 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({ /> ) : null} - {pendingConfirmation.origin === 'metamask' ? null : ( - - - - )} + { + ///: BEGIN:ONLY_INCLUDE_IN(flask) + !isSnapDialog && + ///: END:ONLY_INCLUDE_IN + pendingConfirmation.origin === 'metamask' && ( + + + + ) + } + { + ///: BEGIN:ONLY_INCLUDE_IN(flask) + isSnapDialog && ( + + + + ) + ///: END:ONLY_INCLUDE_IN + } {showWarningModal && ( {!hasError && ( @@ -111,8 +113,6 @@ export default function SnapInstall({ <> @@ -133,11 +133,7 @@ export default function SnapInstall({ alignItems={AlignItems.center} justifyContent={JustifyContent.center} > - + {t('snapInstallRequest', [ {originMetadata?.hostname}, {snapName}, diff --git a/ui/pages/permissions-connect/flask/snap-result/snap-result.js b/ui/pages/permissions-connect/flask/snap-result/snap-result.js index 08e702097..d821e63c3 100644 --- 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({ > @@ -69,7 +71,8 @@ export default function SnapResult({ alignItems={AlignItems.center} justifyContent={JustifyContent.center} height={BLOCK_SIZES.FULL} - padding={2} + paddingTop={2} + paddingBottom={2} > {!hasError && ( - + {t('snapUpdate')} )} @@ -117,8 +123,6 @@ export default function SnapUpdate({ <> @@ -141,11 +145,7 @@ export default function SnapUpdate({ alignItems={AlignItems.center} justifyContent={JustifyContent.center} > - + {t('snapUpdateRequest', [ {originMetadata?.hostname}, {snapName},