Solidity Compiler in UI (#3279)

* Added new Deploy Contract page // Use Brace in React #2276

* Adding Web Wrokers WIP

* Compiling Solidity code // Getting mandatory params #2276

* Working editor and deployment #2276

* WIP : displaying source code

* Added Solidity hightling, editor component in UI

* Re-adding the standard Deploy Modal #2276

* Using MobX in Contract Edition // Save to Localstorage #2276

* User select Solidity version #2276

* Loading Solidity versions and closing worker properly #2276

* Adds export to solidity editor #2276

* Adding Import to Contract Editor #2276

* Persistent Worker => Don't load twice Solidity Code #2276

* UI Fixes

* Editor tweaks

* Added Details with ABI in Contract view

* Adds Save capabilities to contract editor // WIP on Load #3279

* Working Load and Save contracts... #3231

* Adding loader of Snippets // Export with name #3279

* Added snippets / Importing from files and from URL

* Fix wrong ID in saved Contract

* Fix lint

* Fixed Formal errors as warning #3279

* Fixing lint issues

* Use NPM Module for valid URL (fixes linting issue too)

* Don't clobber tests.

js/src/views/Contract/contract.js

@@ -20,10 +20,12 @@ import { bindActionCreators } from 'redux';
 import ActionDelete from 'material-ui/svg-icons/action/delete';
 import AvPlayArrow from 'material-ui/svg-icons/av/play-arrow';
 import ContentCreate from 'material-ui/svg-icons/content/create';
+import EyeIcon from 'material-ui/svg-icons/image/remove-red-eye';
+import ContentClear from 'material-ui/svg-icons/content/clear';
 
 import { newError } from '../../redux/actions';
 import { EditMeta, ExecuteContract } from '../../modals';
-import { Actionbar, Button, Page } from '../../ui';
+import { Actionbar, Button, Page, Modal, Editor } from '../../ui';
 
 import Header from '../Account/Header';
 import Delete from '../Address/Delete';
@@ -52,6 +54,7 @@ class Contract extends Component {
     showDeleteDialog: false,
     showEditDialog: false,
     showExecuteDialog: false,
+    showDetailsDialog: false,
     subscriptionId: -1,
     blockSubscriptionId: -1,
     allEvents: [],
@@ -118,11 +121,69 @@ class Contract extends Component {
           <Events
             isTest={ isTest }
             events={ allEvents } />
+
+          { this.renderDetails(account) }
         </Page>
       </div>
     );
   }
 
+  renderDetails (contract) {
+    const { showDetailsDialog } = this.state;
+
+    if (!showDetailsDialog) {
+      return null;
+    }
+
+    const cancelBtn = (
+      <Button
+        icon={ <ContentClear /> }
+        label='Close'
+        onClick={ this.closeDetailsDialog } />
+    );
+
+    return (
+      <Modal
+        actions={ [ cancelBtn ] }
+        title={ 'contract details' }
+        visible
+        scroll
+      >
+        <div className={ styles.details }>
+          { this.renderSource(contract) }
+
+          <div>
+            <h4>Contract ABI</h4>
+            <Editor
+              value={ JSON.stringify(contract.meta.abi, null, 2) }
+              mode='json'
+              maxLines={ 20 }
+              readOnly
+            />
+          </div>
+        </div>
+      </Modal>
+    );
+  }
+
+  renderSource (contract) {
+    const { source } = contract.meta;
+
+    if (!source) {
+      return null;
+    }
+
+    return (
+      <div>
+        <h4>Contract source code</h4>
+        <Editor
+          value={ source }
+          readOnly
+        />
+      </div>
+    );
+  }
+
   renderActionbar (account) {
     const buttons = [
       <Button
@@ -139,7 +200,12 @@ class Contract extends Component {
         key='delete'
         icon={ <ActionDelete /> }
         label='delete contract'
-        onClick={ this.showDeleteDialog } />
+        onClick={ this.showDeleteDialog } />,
+      <Button
+        key='viewDetails'
+        icon={ <EyeIcon /> }
+        label='view details'
+        onClick={ this.showDetailsDialog } />
     ];
 
     return (
@@ -235,6 +301,14 @@ class Contract extends Component {
     this.setState({ showDeleteDialog: true });
   }
 
+  showDetailsDialog = () => {
+    this.setState({ showDetailsDialog: true });
+  }
+
+  closeDetailsDialog = () => {
+    this.setState({ showDetailsDialog: false });
+  }
+
   closeExecuteDialog = () => {
     this.setState({ showExecuteDialog: false });
   }