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/ui/Actionbar/Import/import.css

@@ -0,0 +1,45 @@
+/* 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/>.
+*/
+
+.importZone {
+  width: 100%;
+  height: 200px;
+  border-width: 2px;
+  border-color: #666;
+  border-style: dashed;
+  border-radius: 10px;
+
+  background-color: rgba(50, 50, 50, 0.2);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2em;
+
+  transition: all 0.5s ease;
+
+  &:hover {
+    cursor: pointer;
+    border-radius: 0;
+    background-color: rgba(50, 50, 50, 0.5);
+  }
+}
+
+.desc {
+  margin-top: 0;
+  color: #ccc;
+}

js/src/ui/Actionbar/Import/import.js

@@ -0,0 +1,198 @@
+  // 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 Dropzone from 'react-dropzone';
+import FileUploadIcon from 'material-ui/svg-icons/file/file-upload';
+import ContentClear from 'material-ui/svg-icons/content/clear';
+import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
+
+import { Modal, Button } from '../../';
+
+import styles from './import.css';
+
+const initialState = {
+  step: 0,
+  show: false,
+  validate: false,
+  validationBody: null,
+  content: ''
+};
+
+export default class ActionbarImport extends Component {
+
+  static propTypes = {
+    onConfirm: PropTypes.func.isRequired,
+    renderValidation: PropTypes.func,
+    className: PropTypes.string,
+    title: PropTypes.string
+  };
+
+  static defaultProps = {
+    title: 'Import from a file'
+  };
+
+  state = Object.assign({}, initialState);
+
+  render () {
+    const { className } = this.props;
+
+    return (
+      <div>
+        <Button
+          className={ className }
+          icon={ <FileUploadIcon /> }
+          label='import'
+          onClick={ this.onOpenModal }
+        />
+        { this.renderModal() }
+      </div>
+    );
+  }
+
+  renderModal () {
+    const { title, renderValidation } = this.props;
+    const { show, step } = this.state;
+
+    if (!show) {
+      return null;
+    }
+
+    const hasSteps = typeof renderValidation === 'function';
+
+    const steps = hasSteps ? [ 'select a file', 'validate' ] : null;
+
+    return (
+      <Modal
+        actions={ this.renderActions() }
+        title={ title }
+        steps={ steps }
+        current={ step }
+        visible
+      >
+        { this.renderBody() }
+      </Modal>
+    );
+  }
+
+  renderActions () {
+    const { validate } = this.state;
+
+    const cancelBtn = (
+      <Button
+        key='cancel'
+        label='Cancel'
+        icon={ <ContentClear /> }
+        onClick={ this.onCloseModal }
+      />
+    );
+
+    if (validate) {
+      const confirmBtn = (
+        <Button
+          key='confirm'
+          label='Confirm'
+          icon={ <ActionDoneAll /> }
+          onClick={ this.onConfirm }
+        />
+      );
+
+      return [ cancelBtn, confirmBtn ];
+    }
+
+    return [ cancelBtn ];
+  }
+
+  renderBody () {
+    const { validate } = this.state;
+
+    if (validate) {
+      return this.renderValidation();
+    }
+
+    return this.renderFileSelect();
+  }
+
+  renderFileSelect () {
+    return (
+      <div>
+        <Dropzone
+          onDrop={ this.onDrop }
+          multiple={ false }
+          className={ styles.importZone }
+        >
+          <div>Drop a file here, or click to select a file to upload.</div>
+        </Dropzone>
+      </div>
+    );
+  }
+
+  renderValidation () {
+    const { validationBody } = this.state;
+
+    return (
+      <div>
+        <p className={ styles.desc }>
+          Confirm that this is what was intended to import.
+        </p>
+        <div>
+          { validationBody }
+        </div>
+      </div>
+    );
+  }
+
+  onDrop = (files) => {
+    const { renderValidation } = this.props;
+
+    const file = files[0];
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      const content = e.target.result;
+
+      if (typeof renderValidation !== 'function') {
+        this.props.onConfirm(content);
+        return this.onCloseModal();
+      }
+
+      this.setState({
+        step: 1,
+        validate: true,
+        validationBody: renderValidation(content),
+        content
+      });
+    };
+
+    reader.readAsText(file);
+  }
+
+  onConfirm = () => {
+    const { content } = this.state;
+
+    this.props.onConfirm(content);
+    return this.onCloseModal();
+  }
+
+  onOpenModal = () => {
+    this.setState({ show: true });
+  }
+
+  onCloseModal = () => {
+    this.setState(initialState);
+  }
+
+}

js/src/ui/Actionbar/Import/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 './import';