Use tree view for abi display

embark-ui/package-lock.json

@@ -1358,6 +1358,11 @@
         }
       }
     },
+    "base16": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
+      "integrity": "sha1-4pf2DX7BAUp6lxo568ipjAtoHnA="
+    },
     "base64-js": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.0.tgz",
@@ -6629,6 +6634,11 @@
       "resolved": "https://registry.npmjs.org/lodash.cond/-/lodash.cond-4.5.2.tgz",
       "integrity": "sha1-9HGh2khr5g9quVXRcRVSPdHSVdU="
     },
+    "lodash.curry": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
+      "integrity": "sha1-JI42By7ekGUB11lmIAqG2riyMXA="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -6639,6 +6649,11 @@
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
       "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw="
     },
+    "lodash.flow": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
+      "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o="
+    },
     "lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
@@ -8861,6 +8876,11 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
+    "pure-color": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
+      "integrity": "sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4="
+    },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -9012,6 +9032,17 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-base16-styling": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.5.3.tgz",
+      "integrity": "sha1-OFjyTpxN2MvT9wLz901YHKKRcmk=",
+      "requires": {
+        "base16": "^1.0.0",
+        "lodash.curry": "^4.0.1",
+        "lodash.flow": "^3.3.0",
+        "pure-color": "^1.2.0"
+      }
+    },
     "react-copy-to-clipboard": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.1.tgz",
@@ -9062,6 +9093,16 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz",
       "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw=="
     },
+    "react-json-tree": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.11.0.tgz",
+      "integrity": "sha1-9bF+gzKanHauOL5cBP2jp/1oSjU=",
+      "requires": {
+        "babel-runtime": "^6.6.1",
+        "prop-types": "^15.5.8",
+        "react-base16-styling": "^0.5.1"
+      }
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",

embark-ui/package.json

@@ -15,6 +15,7 @@
     "react": "^16.4.2",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.4.1",
+    "react-json-tree": "^0.11.0",
     "react-monaco-editor": "^0.18.0",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",

embark-ui/src/components/Contract.js

@@ -6,6 +6,7 @@ import {
   Card,
   Table
 } from "tabler-react";
+import JSONTree from 'react-json-tree';
 import {formatContractForDisplay} from '../utils/presentation';
 import {withRouter} from 'react-router-dom';
 
@@ -41,7 +42,7 @@ const Contract = ({contract, match}) => {
               <Card.Title>ABI</Card.Title>
             </Card.Header>
             <Card.Body>
-              <pre>{JSON.stringify(contract.abiDefinition)}</pre>
+              <JSONTree data={contract.abiDefinition} />
             </Card.Body>
           </Card>
           <Card>

embark-ui/src/general.css

@@ -86,11 +86,3 @@
   padding-left: 0.6rem;
   width: auto;
 }
-
-pre {
-  white-space: pre-wrap;
-  white-space: -moz-pre-wrap;
-  white-space: -pre-wrap;
-  white-space: -o-pre-wrap;
-  word-wrap: break-word;
-}