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

* stringify content to display * check if data is a string to avoid stringifying it * prettify JSON data
MetaMask · Oct 5, 2022 · ca6701c · ca6701c
1 parent 3271b81
commit ca6701c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git 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
@@ -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>