diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 5964ad9ef..64a9dbe77 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -3273,6 +3273,10 @@ "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..." }, 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 6446d4943..30c21776d 100644 --- a/ui/components/app/confirm-page-container/flask/snap-insight.js +++ b/ui/components/app/confirm-page-container/flask/snap-insight.js @@ -15,10 +15,15 @@ import { useI18nContext } from '../../../../hooks/useI18nContext'; import { useTransactionInsightSnap } from '../../../../hooks/flask/useTransactionInsightSnap'; import SnapContentFooter from '../../flask/snap-content-footer/snap-content-footer'; import Box from '../../../ui/box/box'; +import ActionableMessage from '../../../ui/actionable-message/actionable-message'; export const SnapInsight = ({ transaction, chainId, selectedSnap }) => { const t = useI18nContext(); - const response = useTransactionInsightSnap({ + const { + data: response, + error, + loading, + } = useTransactionInsightSnap({ transaction, chainId, snapId: selectedSnap.id, @@ -26,8 +31,8 @@ export const SnapInsight = ({ transaction, chainId, selectedSnap }) => { const data = response?.insights; - const hasNoData = !data || !Object.keys(data).length; - + const hasNoData = + !error && (loading || !data || (data && Object.keys(data).length === 0)); return ( { textAlign={hasNoData && TEXT_ALIGN.CENTER} className="snap-insight" > - {data ? ( + {!loading && !error && ( - {Object.keys(data).length ? ( + {data && Object.keys(data).length > 0 ? ( <> { )} - ) : ( + )} + + {!loading && error && ( + + + + )} + + {loading && ( <> { async function fetchInsight() { - const d = await handleSnapRequest({ - snapId, - origin: '', - handler: 'onTransaction', - request: { - jsonrpc: '2.0', - method: ' ', - params: { transaction, chainId }, - }, - }); - setData(d); + try { + setError(undefined); + setLoading(true); + + const d = await handleSnapRequest({ + snapId, + origin: '', + handler: 'onTransaction', + request: { + jsonrpc: '2.0', + method: ' ', + params: { transaction, chainId }, + }, + }); + setData(d); + } catch (err) { + setError(err); + } finally { + setLoading(false); + } } if (transaction) { fetchInsight(); } }, [snapId, transaction, chainId]); - return data; + return { data, error, loading }; }