[FLASK] Fix transaction insight data display (#16023)

* stringify content to display

* check if data is a string to avoid stringifying it

* prettify JSON data

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;
+  }
 }

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>