[FLASK] Catch and display errors in snaps insight (#16416)

* snaps insight error catching and error state

* revert confirm-transaction-base changes

* display empty state if data is null

* add loading state

* reset errors and loading state on call

* update hasNoData

* update length check in component

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

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 (
     <Box
       flexDirection={FLEX_DIRECTION.COLUMN}
@@ -39,13 +44,13 @@ export const SnapInsight = ({ transaction, chainId, selectedSnap }) => {
       textAlign={hasNoData && TEXT_ALIGN.CENTER}
       className="snap-insight"
     >
-      {data ? (
+      {!loading && !error && (
         <Box
           height="full"
           flexDirection={FLEX_DIRECTION.COLUMN}
           className="snap-insight__container"
         >
-          {Object.keys(data).length ? (
+          {data && Object.keys(data).length > 0 ? (
             <>
               <Box
                 flexDirection={FLEX_DIRECTION.COLUMN}
@@ -94,7 +99,29 @@ export const SnapInsight = ({ transaction, chainId, selectedSnap }) => {
             </Typography>
           )}
         </Box>
-      ) : (
+      )}
+
+      {!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>
+      )}
+
+      {loading && (
         <>
           <Preloader size={40} />
           <Typography

ui/hooks/flask/useTransactionInsightSnap.js

@@ -12,10 +12,17 @@ export function useTransactionInsightSnap({ transaction, chainId, snapId }) {
       'This snap does not have the transaction insight endowment.',
     );
   }
+
+  const [loading, setLoading] = useState(true);
   const [data, setData] = useState(undefined);
+  const [error, setError] = useState(undefined);
 
   useEffect(() => {
     async function fetchInsight() {
+      try {
+        setError(undefined);
+        setLoading(true);
+
         const d = await handleSnapRequest({
           snapId,
           origin: '',
@@ -27,11 +34,16 @@ export function useTransactionInsightSnap({ transaction, chainId, snapId }) {
           },
         });
         setData(d);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
     }
     if (transaction) {
       fetchInsight();
     }
   }, [snapId, transaction, chainId]);
 
-  return data;
+  return { data, error, loading };
 }