From ca6701c27e6d2dcc8db89b6aed917a0d21389c63 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Wed, 5 Oct 2022 19:43:44 +0200
Subject: [PATCH] [FLASK] Fix transaction insight data display (#16023)

* stringify content to display

* check if data is a string to avoid stringifying it

* prettify JSON data
---
 .../app/confirm-page-container/flask/index.scss |  5 +++++
 .../flask/snap-insight.js                       | 17 ++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/ui/components/app/confirm-page-container/flask/index.scss b/ui/components/app/confirm-page-container/flask/index.scss
index cd027f79c..aff8fd2a4 100644
--- a/ui/components/app/confirm-page-container/flask/index.scss
+++ b/ui/components/app/confirm-page-container/flask/index.scss
@@ -1,3 +1,8 @@
 .snap-insight {
   word-wrap: break-word;
+
+  &__container__data__json {
+    word-wrap: break-word;
+    overflow-x: auto;
+  }
 }
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 1567763dd..6446d4943 100644
--- a/ui/components/app/confirm-page-container/flask/snap-insight.js
+++ b/ui/components/app/confirm-page-container/flask/snap-insight.js
@@ -64,7 +64,22 @@ export const SnapInsight = ({ transaction, chainId, selectedSnap }) => {
                     >
                       {key}
                     </Typography>
-                    <Typography variant={TYPOGRAPHY.H6}>{data[key]}</Typography>
+
+                    {typeof data[key] === 'string' ? (
+                      <Typography variant={TYPOGRAPHY.H6}>
+                        {data[key]}
+                      </Typography>
+                    ) : (
+                      <Box
+                        className="snap-insight__container__data__json"
+                        backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}
+                        padding={3}
+                      >
+                        <Typography variant={TYPOGRAPHY.H7}>
+                          <pre>{JSON.stringify(data[key], null, 2)}</pre>
+                        </Typography>
+                      </Box>
+                    )}
                   </div>
                 ))}
               </Box>