From d154cc78e4f77cd440ed3704b1dd35a303876e64 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Wed, 9 Nov 2022 14:20:57 +0100
Subject: [PATCH] [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                 |  4 ++
 .../flask/snap-insight.js                     | 39 ++++++++++++++++---
 ui/hooks/flask/useTransactionInsightSnap.js   | 36 +++++++++++------
 3 files changed, 61 insertions(+), 18 deletions(-)

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 (
     <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
diff --git a/ui/hooks/flask/useTransactionInsightSnap.js b/ui/hooks/flask/useTransactionInsightSnap.js
index ad2102837..e7a4b656a 100644
--- a/ui/hooks/flask/useTransactionInsightSnap.js
+++ b/ui/hooks/flask/useTransactionInsightSnap.js
@@ -12,26 +12,38 @@ 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() {
-      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 };
 }