conflict in index.css

embark-ui/package-lock.json

@@ -10132,17 +10132,6 @@
         "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-blockies": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/react-blockies/-/react-blockies-1.4.0.tgz",
@@ -10231,16 +10220,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.5.2.tgz",
       "integrity": "sha512-hSl7E6l25GTjNEZATqZIuWOgSnpXb3kD0DVCujmg46K5zLxsbiKaaT6VO9slkSBDPZfYs30lwfJwbOFOnoEnKQ=="
     },
-    "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-json-view": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/react-json-view/-/react-json-view-1.19.1.tgz",

embark-ui/package.json

@@ -57,7 +57,6 @@
     "react-dev-utils": "^5.0.1",
     "react-dom": "^16.4.1",
     "react-fontawesome": "^1.6.1",
-    "react-json-tree": "^0.11.0",
     "react-json-view": "^1.19.1",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",

embark-ui/src/components/Console.js

@@ -60,7 +60,7 @@ class Console extends Component {
   isJsonObject(item) {
     if (!item.result) return false;
     try {
-      return typeof(JSON.parse(item.result)) === 'object'
+      return typeof (JSON.parse(item.result)) === 'object';
     } catch(_err) {
       return false;
     }
@@ -93,12 +93,12 @@ class Console extends Component {
                         <p key={i} className={this.logClassName(item)} dangerouslySetInnerHTML={{__html: (convert.toHtml(item.command || ""))}}></p>
                         <ReactJson src={JSON.parse(item.result)} theme="monokai" sortKeys={true} collapsed={1} />
                       </div>
-                    )
+                    );
                   }
 
                   return (
                     <p key={i} className={this.logClassName(item)} dangerouslySetInnerHTML={{__html: (convert.toHtml(item.command || "") + convert.toHtml(item.msg))}}></p>
-                  )
+                  );
                 })
               }
             </Logs>

embark-ui/src/components/ContractOverview.js

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import React from 'react';
+import ReactJson from "react-json-view";
 import {Row, Col, Table} from "reactstrap";
-import JSONTree from 'react-json-tree';
 import GasStationContainer from "../containers/GasStationContainer";
 import {formatContractForDisplay} from '../utils/presentation';
 import CopyButton from './CopyButton';
@@ -32,9 +32,9 @@ const Contract = ({contract}) => {
         </Table>
         <h2>ABI</h2>
         <div className="relative">
-          <CopyButton text={contract.runtimeBytecode}
+          <CopyButton text={JSON.stringify(contract.abiDefinition)}
                       title="Copy bytecode to clipboard"/>
-          {contract.abiDefinition && <JSONTree data={contract.abiDefinition}/>}
+          {contract.abiDefinition && <ReactJson src={contract.abiDefinition} theme="monokai" sortKeys={true} collapsed={1} />}
         </div>
         <h2>Bytecode</h2>
         <div className="text-wrap logs relative">
@@ -42,7 +42,6 @@ const Contract = ({contract}) => {
                       title="Copy bytecode to clipboard"/>
           {contract.runtimeBytecode}
         </div>
-        <GasStationContainer/>
       </Col>
     </Row>
   );

embark-ui/src/components/CopyButton.css

@@ -5,4 +5,5 @@
   border-top-left-radius: 0;
   border-bottom-right-radius: 0;
   cursor: pointer;
+  z-index: 100;
 }

embark-ui/src/components/CopyButton.js

@@ -16,7 +16,10 @@ const CopyButton = ({text, onCopy, title, size}) => (
 );
 
 CopyButton.propTypes = {
-  text: PropTypes.string.isRequired,
+  text: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]).isRequired,
   onCopy: PropTypes.func,
   title: PropTypes.string,
   size: PropTypes.number

embark-ui/src/components/Logs.css

@@ -5,7 +5,7 @@
   font-size: 14px;
   color: white;
   padding: 10px;
-  border-radius: 8px;
+  border-radius: .25rem;
   max-height: 350px;
   overflow: auto;
-}
+}

embark-ui/src/components/Logs.js

@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import React from 'react';
 import autoscroll from 'autoscroll-react';
 
@@ -13,4 +14,8 @@ class Logs extends React.Component {
   }
 }
 
+Logs.propTypes = {
+  children: PropTypes.object
+};
+
 export default autoscroll(Logs);

embark-ui/src/index.css

@@ -24,3 +24,8 @@
 .hidden {
   display: none;
 }
+
+
+.react-json-view {
+  border-radius: .25rem;
+}