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/modals/DeployContract/DetailsStep/detailsStep.js

@@ -25,7 +25,7 @@ import styles from '../deployContract.css';
 export default class DetailsStep extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
-  }
+  };
 
   static propTypes = {
     accounts: PropTypes.object.isRequired,
@@ -46,16 +46,33 @@ export default class DetailsStep extends Component {
     onFromAddressChange: PropTypes.func.isRequired,
     onDescriptionChange: PropTypes.func.isRequired,
     onNameChange: PropTypes.func.isRequired,
-    onParamsChange: PropTypes.func.isRequired
-  }
+    onParamsChange: PropTypes.func.isRequired,
+    readOnly: PropTypes.bool
+  };
+
+  static defaultProps = {
+    readOnly: false
+  };
 
   state = {
     inputs: []
   }
 
+  componentDidMount () {
+    const { abi, code } = this.props;
+
+    if (abi) {
+      this.onAbiChange(abi);
+    }
+
+    if (code) {
+      this.onCodeChange(code);
+    }
+  }
+
   render () {
     const { accounts } = this.props;
-    const { abi, abiError, code, codeError, fromAddress, fromAddressError, name, nameError } = this.props;
+    const { abi, abiError, code, codeError, fromAddress, fromAddressError, name, nameError, readOnly } = this.props;
 
     return (
       <Form>
@@ -77,13 +94,15 @@ export default class DetailsStep extends Component {
           hint='the abi of the contract to deploy'
           error={ abiError }
           value={ abi }
-          onSubmit={ this.onAbiChange } />
+          onSubmit={ this.onAbiChange }
+          readOnly={ readOnly } />
         <Input
           label='code'
           hint='the compiled code of the contract to deploy'
           error={ codeError }
           value={ code }
-          onSubmit={ this.onCodeChange } />
+          onSubmit={ this.onCodeChange }
+          readOnly={ readOnly } />
         { this.renderConstructorInputs() }
       </Form>
     );

js/src/modals/DeployContract/deployContract.js

@@ -36,8 +36,17 @@ export default class DeployContract extends Component {
 
   static propTypes = {
     accounts: PropTypes.object.isRequired,
-    onClose: PropTypes.func.isRequired
-  }
+    onClose: PropTypes.func.isRequired,
+    abi: PropTypes.string,
+    code: PropTypes.string,
+    readOnly: PropTypes.bool,
+    source: PropTypes.string
+  };
+
+  static defaultProps = {
+    readOnly: false,
+    source: ''
+  };
 
   state = {
     abi: '',
@@ -57,6 +66,31 @@ export default class DeployContract extends Component {
     deployError: null
   }
 
+  componentWillMount () {
+    const { abi, code } = this.props;
+
+    if (abi && code) {
+      this.setState({ abi, code });
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const { abi, code } = nextProps;
+    const newState = {};
+
+    if (abi !== this.props.abi) {
+      newState.abi = abi;
+    }
+
+    if (code !== this.props.code) {
+      newState.code = code;
+    }
+
+    if (Object.keys(newState).length) {
+      this.setState(newState);
+    }
+  }
+
   render () {
     const { step, deployError } = this.state;
 
@@ -115,7 +149,7 @@ export default class DeployContract extends Component {
   }
 
   renderStep () {
-    const { accounts } = this.props;
+    const { accounts, readOnly } = this.props;
     const { address, deployError, step, deployState, txhash } = this.state;
 
     if (deployError) {
@@ -129,6 +163,7 @@ export default class DeployContract extends Component {
         return (
           <DetailsStep
             { ...this.state }
+            readOnly={ readOnly }
             accounts={ accounts }
             onAbiChange={ this.onAbiChange }
             onCodeChange={ this.onCodeChange }
@@ -200,6 +235,7 @@ export default class DeployContract extends Component {
 
   onDeployStart = () => {
     const { api, store } = this.context;
+    const { source } = this.props;
     const { abiParsed, code, description, name, params, fromAddress } = this.state;
     const options = {
       data: code,
@@ -219,6 +255,7 @@ export default class DeployContract extends Component {
             contract: true,
             timestamp: Date.now(),
             deleted: false,
+            source,
             description
           })
         ])

js/src/modals/LoadContract/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './loadContract';

js/src/modals/LoadContract/loadContract.css

@@ -0,0 +1,52 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.loadContainer {
+  display: flex;
+  flex-direction: row;
+
+  > * {
+    flex: 50%;
+    width: 0;
+  }
+}
+
+.editor {
+  display: flex;
+  flex-direction: column;
+  padding-left: 1em;
+
+  p {
+    line-height: 48px;
+    height: 48px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    margin: 0;
+    font-size: 1.2em;
+  }
+}
+
+.confirmRemoval {
+  text-align: center;
+
+  .editor {
+    text-align: left;
+    margin-top: 0.5em;
+  }
+}

js/src/modals/LoadContract/loadContract.js

@@ -0,0 +1,284 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import ContentClear from 'material-ui/svg-icons/content/clear';
+import CheckIcon from 'material-ui/svg-icons/navigation/check';
+import DeleteIcon from 'material-ui/svg-icons/action/delete';
+
+import { List, ListItem, makeSelectable } from 'material-ui/List';
+import { Subheader, IconButton, Tabs, Tab } from 'material-ui';
+import moment from 'moment';
+
+import { Button, Modal, Editor } from '../../ui';
+
+import styles from './loadContract.css';
+
+const SelectableList = makeSelectable(List);
+
+const SELECTED_STYLE = {
+  backgroundColor: 'rgba(255, 255, 255, 0.1)'
+};
+
+export default class LoadContract extends Component {
+
+  static propTypes = {
+    onClose: PropTypes.func.isRequired,
+    onLoad: PropTypes.func.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    contracts: PropTypes.object.isRequired,
+    snippets: PropTypes.object.isRequired
+  };
+
+  state = {
+    selected: -1,
+    deleteRequest: false,
+    deleteId: -1
+  };
+
+  render () {
+    const { deleteRequest } = this.state;
+
+    const title = deleteRequest
+      ? 'confirm removal'
+      : 'view contracts';
+
+    return (
+      <Modal
+        title={ title }
+        actions={ this.renderDialogActions() }
+        visible
+        scroll
+      >
+        { this.renderBody() }
+      </Modal>
+    );
+  }
+
+  renderBody () {
+    if (this.state.deleteRequest) {
+      return this.renderConfirmRemoval();
+    }
+
+    const { contracts, snippets } = this.props;
+
+    const contractsTab = Object.keys(contracts).length === 0
+      ? null
+      : (
+      <Tab label='Local' >
+        { this.renderEditor() }
+
+        <SelectableList
+          onChange={ this.onClickContract }
+        >
+          <Subheader>Saved Contracts</Subheader>
+          { this.renderContracts(contracts) }
+        </SelectableList>
+      </Tab>
+      );
+
+    return (
+      <div className={ styles.loadContainer }>
+        <Tabs onChange={ this.handleChangeTab }>
+          { contractsTab }
+
+          <Tab label='Snippets' >
+            { this.renderEditor() }
+
+            <SelectableList
+              onChange={ this.onClickContract }
+            >
+              <Subheader>Contract Snippets</Subheader>
+              { this.renderContracts(snippets, false) }
+            </SelectableList>
+          </Tab>
+        </Tabs>
+      </div>
+    );
+  }
+
+  renderConfirmRemoval () {
+    const { deleteId } = this.state;
+    const { name, timestamp, sourcecode } = this.props.contracts[deleteId];
+
+    return (
+      <div className={ styles.confirmRemoval }>
+        <p>
+          Are you sure you want to remove the following
+          contract from your saved contracts?
+        </p>
+        <ListItem
+          primaryText={ name }
+          secondaryText={ `Saved ${moment(timestamp).fromNow()}` }
+          style={ { backgroundColor: 'none', cursor: 'default' } }
+        />
+
+        <div className={ styles.editor }>
+          <Editor
+            value={ sourcecode }
+            maxLines={ 20 }
+            readOnly
+          />
+        </div>
+      </div>
+    );
+  }
+
+  renderEditor () {
+    const { contracts, snippets } = this.props;
+    const { selected } = this.state;
+
+    const mergedContracts = Object.assign({}, contracts, snippets);
+
+    if (selected === -1 || !mergedContracts[selected]) {
+      return null;
+    }
+
+    const { sourcecode, name } = mergedContracts[selected];
+
+    return (
+      <div className={ styles.editor }>
+        <p>{ name }</p>
+        <Editor
+          value={ sourcecode }
+          maxLines={ 20 }
+          readOnly
+        />
+      </div>
+    );
+  }
+
+  renderContracts (contracts, removable = true) {
+    const { selected } = this.state;
+
+    return Object
+      .values(contracts)
+      .map((contract) => {
+        const { id, name, timestamp, description } = contract;
+        const onDelete = () => this.onDeleteRequest(id);
+
+        const secondaryText = description || `Saved ${moment(timestamp).fromNow()}`;
+        const remove = removable
+          ? (
+          <IconButton onClick={ onDelete }>
+            <DeleteIcon />
+          </IconButton>
+          )
+          : null;
+
+        return (
+          <ListItem
+            value={ id }
+            key={ id }
+            primaryText={ name }
+            secondaryText={ secondaryText }
+            style={ selected === id ? SELECTED_STYLE : null }
+            rightIconButton={ remove }
+          />
+        );
+      });
+  }
+
+  renderDialogActions () {
+    const { deleteRequest } = this.state;
+
+    if (deleteRequest) {
+      return [
+        <Button
+          icon={ <ContentClear /> }
+          label='No'
+          key='No'
+          onClick={ this.onRejectRemoval }
+        />,
+        <Button
+          icon={ <DeleteIcon /> }
+          label='Yes'
+          key='Yes'
+          onClick={ this.onConfirmRemoval }
+        />
+      ];
+    }
+
+    const cancelBtn = (
+      <Button
+        icon={ <ContentClear /> }
+        label='Cancel'
+        onClick={ this.onClose }
+      />
+    );
+
+    const loadBtn = (
+      <Button
+        icon={ <CheckIcon /> }
+        label='Load'
+        onClick={ this.onLoad }
+        disabled={ this.state.selected === -1 }
+      />
+    );
+
+    return [ cancelBtn, loadBtn ];
+  }
+
+  handleChangeTab = () => {
+    this.setState({ selected: -1 });
+  }
+
+  onClickContract = (_, value) => {
+    this.setState({ selected: value });
+  }
+
+  onClose = () => {
+    this.props.onClose();
+  }
+
+  onLoad = () => {
+    const { contracts, snippets } = this.props;
+    const { selected } = this.state;
+
+    const mergedContracts = Object.assign({}, contracts, snippets);
+    const contract = mergedContracts[selected];
+
+    this.props.onLoad(contract);
+    this.props.onClose();
+  }
+
+  onDeleteRequest = (id) => {
+    this.setState({
+      deleteRequest: true,
+      deleteId: id
+    });
+  }
+
+  onConfirmRemoval = () => {
+    const { deleteId } = this.state;
+    this.props.onDelete(deleteId);
+
+    this.setState({
+      deleteRequest: false,
+      deleteId: -1,
+      selected: -1
+    });
+  }
+
+  onRejectRemoval = () => {
+    this.setState({
+      deleteRequest: false,
+      deleteId: -1
+    });
+  }
+
+}

js/src/modals/SaveContract/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './saveContract';

js/src/modals/SaveContract/saveContract.css

@@ -0,0 +1,20 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.source {
+  margin-top: 2em;
+}

js/src/modals/SaveContract/saveContract.js

@@ -0,0 +1,109 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+
+import SaveIcon from 'material-ui/svg-icons/content/save';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+
+import { Button, Modal, Editor, Form, Input } from '../../ui';
+import { ERRORS, validateName } from '../../util/validation';
+
+import styles from './saveContract.css';
+
+export default class SaveContract extends Component {
+
+  static propTypes = {
+    sourcecode: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired
+  };
+
+  state = {
+    name: '',
+    nameError: ERRORS.invalidName
+  };
+
+  render () {
+    const { sourcecode } = this.props;
+    const { name, nameError } = this.state;
+
+    return (
+      <Modal
+        title='save contract'
+        actions={ this.renderDialogActions() }
+        visible
+      >
+        <div>
+          <Form>
+            <Input
+              label='contract name'
+              hint='choose a name for this contract'
+              value={ name }
+              error={ nameError }
+              onChange={ this.onChangeName }
+            />
+          </Form>
+          <Editor
+            className={ styles.source }
+            value={ sourcecode }
+            maxLines={ 20 }
+            readOnly
+          />
+        </div>
+      </Modal>
+    );
+  }
+
+  renderDialogActions () {
+    const cancelBtn = (
+      <Button
+        icon={ <ContentClear /> }
+        label='Cancel'
+        onClick={ this.onClose }
+      />
+    );
+
+    const confirmBtn = (
+      <Button
+        icon={ <SaveIcon /> }
+        label='Save'
+        disabled={ !!this.state.nameError }
+        onClick={ this.onSave }
+      />
+    );
+
+    return [ cancelBtn, confirmBtn ];
+  }
+
+  onClose = () => {
+    this.props.onClose();
+  }
+
+  onSave = () => {
+    const { name } = this.state;
+    const { sourcecode } = this.props;
+
+    this.props.onSave({ name, sourcecode });
+    this.onClose();
+  }
+
+  onChangeName = (event, value) => {
+    const { name, nameError } = validateName(value);
+    this.setState({ name, nameError });
+  }
+
+}

js/src/modals/index.js

@@ -24,6 +24,8 @@ import FirstRun from './FirstRun';
 import Shapeshift from './Shapeshift';
 import Transfer from './Transfer';
 import PasswordManager from './PasswordManager';
+import SaveContract from './SaveContract';
+import LoadContract from './LoadContract';
 
 export {
   AddAddress,
@@ -35,5 +37,7 @@ export {
   FirstRun,
   Shapeshift,
   Transfer,
-  PasswordManager
+  PasswordManager,
+  LoadContract,
+  SaveContract
 };