prettify JSON data

MetaMask · Sep 30, 2022 · a1bbde8 · a1bbde8
1 parent 99e086c
commit a1bbde8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
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,11 +64,22 @@ export const SnapInsight = ({ transaction, chainId, selectedSnap }) => {
                     >
                       {key}
                     </Typography>
-                    <Typography variant={TYPOGRAPHY.H6}>
-                      {typeof data[key] === 'string'
-                        ? data[key]
-                        : JSON.stringify(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>