Merge pull request #3496 from ethcore/ng-solc-output

Handle solc combined output

js/src/modals/AddContract/addContract.css

@@ -14,19 +14,3 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
-
-.spaced {
-  margin: 0.25em 0;
-}
-
-.typeContainer {
-  display: flex;
-  flex-direction: column;
-
-  .desc {
-    font-size: 0.8em;
-    margin-bottom: 0.5em;
-    color: #ccc;
-    z-index: 2;
-  }
-}

js/src/modals/AddContract/addContract.js

@@ -20,13 +20,10 @@ import ContentClear from 'material-ui/svg-icons/content/clear';
 import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
 import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
 
-import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
-
-import { Button, Modal, Form, Input, InputAddress } from '../../ui';
+import { Button, Modal, Form, Input, InputAddress, RadioButtons } from '../../ui';
 import { ERRORS, validateAbi, validateAddress, validateName } from '../../util/validation';
 
 import { eip20, wallet } from '../../contracts/abi';
-import styles from './addContract.css';
 
 const ABI_TYPES = [
   {
@@ -105,13 +102,12 @@ export default class AddContract extends Component {
     const { abiTypeIndex } = this.state;
 
     return (
-      <RadioButtonGroup
-        valueSelected={ abiTypeIndex }
+      <RadioButtons
         name='contractType'
+        value={ abiTypeIndex }
+        values={ this.getAbiTypes() }
         onChange={ this.onChangeABIType }
-      >
-        { this.renderAbiTypes() }
-      </RadioButtonGroup>
+      />
     );
   }
 
@@ -194,20 +190,13 @@ export default class AddContract extends Component {
     );
   }
 
-  renderAbiTypes () {
-    return ABI_TYPES.map((type, index) => (
-      <RadioButton
-        className={ styles.spaced }
-        value={ index }
-        label={ (
-          <div className={ styles.typeContainer }>
-            <span>{ type.label }</span>
-            <span className={ styles.desc }>{ type.description }</span>
-          </div>
-        ) }
-        key={ index }
-      />
-    ));
+  getAbiTypes () {
+    return ABI_TYPES.map((type, index) => ({
+      label: type.label,
+      description: type.description,
+      key: index,
+      ...type
+    }));
   }
 
   onNext = () => {
@@ -218,8 +207,8 @@ export default class AddContract extends Component {
     this.setState({ step: this.state.step - 1 });
   }
 
-  onChangeABIType = (event, index) => {
-    const abiType = ABI_TYPES[index];
+  onChangeABIType = (value, index) => {
+    const abiType = value || ABI_TYPES[index];
     this.setState({ abiTypeIndex: index, abiType });
     this.onEditAbi(abiType.value);
   }

js/src/modals/DeployContract/DetailsStep/detailsStep.js

@@ -15,38 +15,39 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { MenuItem } from 'material-ui';
 
-import { AddressSelect, Form, Input, TypedInput } from '../../../ui';
+import { AddressSelect, Form, Input, Select } from '../../../ui';
 import { validateAbi } from '../../../util/validation';
 import { parseAbiType } from '../../../util/abi';
 
-import styles from '../deployContract.css';
-
 export default class DetailsStep extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
   };
 
   static propTypes = {
     accounts: PropTypes.object.isRequired,
-    abi: PropTypes.string,
-    abiError: PropTypes.string,
-    code: PropTypes.string,
-    codeError: PropTypes.string,
-    description: PropTypes.string,
-    descriptionError: PropTypes.string,
+
+    onFromAddressChange: PropTypes.func.isRequired,
+    onNameChange: PropTypes.func.isRequired,
+    onDescriptionChange: PropTypes.func.isRequired,
+    onAbiChange: PropTypes.func.isRequired,
+    onCodeChange: PropTypes.func.isRequired,
+    onParamsChange: PropTypes.func.isRequired,
+    onInputsChange: PropTypes.func.isRequired,
+
     fromAddress: PropTypes.string,
     fromAddressError: PropTypes.string,
     name: PropTypes.string,
     nameError: PropTypes.string,
-    params: PropTypes.array,
-    paramsError: PropTypes.array,
-    onAbiChange: PropTypes.func.isRequired,
-    onCodeChange: PropTypes.func.isRequired,
-    onFromAddressChange: PropTypes.func.isRequired,
-    onDescriptionChange: PropTypes.func.isRequired,
-    onNameChange: PropTypes.func.isRequired,
-    onParamsChange: PropTypes.func.isRequired,
+    description: PropTypes.string,
+    descriptionError: PropTypes.string,
+    abi: PropTypes.string,
+    abiError: PropTypes.string,
+    code: PropTypes.string,
+    codeError: PropTypes.string,
+
     readOnly: PropTypes.bool
   };
 
@@ -55,14 +56,17 @@ export default class DetailsStep extends Component {
   };
 
   state = {
-    inputs: []
+    solcOutput: '',
+    contracts: {},
+    selectedContractIndex: 0
   }
 
   componentDidMount () {
     const { abi, code } = this.props;
 
     if (abi) {
       this.onAbiChange(abi);
+      this.setState({ solcOutput: abi });
     }
 
     if (code) {
@@ -71,8 +75,19 @@ export default class DetailsStep extends Component {
   }
 
   render () {
-    const { accounts } = this.props;
-    const { abi, abiError, code, codeError, fromAddress, fromAddressError, name, nameError, readOnly } = this.props;
+    const {
+      accounts,
+      readOnly,
+
+      fromAddress, fromAddressError,
+      name, nameError,
+      description, descriptionError,
+      abiError,
+      code, codeError
+    } = this.props;
+
+    const { solcOutput, contracts } = this.state;
+    const solc = contracts && Object.keys(contracts).length > 0;
 
     return (
       <Form>
@@ -83,85 +98,135 @@ export default class DetailsStep extends Component {
           error={ fromAddressError }
           accounts={ accounts }
           onChange={ this.onFromAddressChange } />
+
         <Input
           label='contract name'
           hint='a name for the deployed contract'
           error={ nameError }
           value={ name }
-          onSubmit={ this.onNameChange } />
+          onChange={ this.onNameChange } />
+
         <Input
-          label='abi'
-          hint='the abi of the contract to deploy'
+          label='contract description (optional)'
+          hint='a description for the contract'
+          error={ descriptionError }
+          value={ description }
+          onChange={ this.onDescriptionChange } />
+
+        { this.renderContractSelect() }
+
+        <Input
+          label='abi / solc combined-output'
+          hint='the abi of the contract to deploy or solc combined-output'
           error={ abiError }
-          value={ abi }
-          onSubmit={ this.onAbiChange }
+          value={ solcOutput }
+          onChange={ this.onSolcChange }
+          onSubmit={ this.onSolcSubmit }
           readOnly={ readOnly } />
         <Input
           label='code'
           hint='the compiled code of the contract to deploy'
           error={ codeError }
           value={ code }
           onSubmit={ this.onCodeChange }
-          readOnly={ readOnly } />
+          readOnly={ readOnly || solc } />
 
-        { this.renderConstructorInputs() }
       </Form>
     );
   }
 
-  renderConstructorInputs () {
-    const { accounts, params, paramsError } = this.props;
-    const { inputs } = this.state;
+  renderContractSelect () {
+    const { contracts } = this.state;
 
-    if (!inputs || !inputs.length) {
+    if (!contracts || Object.keys(contracts).length === 0) {
       return null;
     }
 
-    return inputs.map((input, index) => {
-      const onChange = (value) => this.onParamChange(index, value);
-
-      const label = `${input.name ? `${input.name}: ` : ''}${input.type}`;
-      const value = params[index];
-      const error = paramsError[index];
-      const param = parseAbiType(input.type);
-
-      return (
-        <div key={ index } className={ styles.funcparams }>
-          <TypedInput
-            label={ label }
-            value={ value }
-            error={ error }
-            accounts={ accounts }
-            onChange={ onChange }
-            param={ param }
-          />
-        </div>
-      );
+    const { selectedContractIndex } = this.state;
+    const contractsItems = Object.keys(contracts).map((name, index) => (
+      <MenuItem
+        key={ index }
+        label={ name }
+        value={ index }
+      >
+        { name }
+      </MenuItem>
+    ));
+
+    return (
+      <Select
+        label='select a contract'
+        onChange={ this.onContractChange }
+        value={ selectedContractIndex }
+      >
+        { contractsItems }
+      </Select>
+    );
+  }
+
+  onContractChange = (event, index) => {
+    const { contracts } = this.state;
+    const contractName = Object.keys(contracts)[index];
+    const contract = contracts[contractName];
+
+    const { abi, bin } = contract;
+    const code = /^0x/.test(bin) ? bin : `0x${bin}`;
+
+    this.setState({ selectedContractIndex: index }, () => {
+      this.onAbiChange(abi);
+      this.onCodeChange(code);
     });
   }
 
+  onSolcChange = (event, value) => {
+    // Change triggered only if valid
+    if (this.props.abiError) {
+      return null;
+    }
+
+    this.onSolcSubmit(value);
+  }
+
+  onSolcSubmit = (value) => {
+    try {
+      const solcParsed = JSON.parse(value);
+
+      if (!solcParsed || !solcParsed.contracts) {
+        throw new Error('Wrong solc output');
+      }
+
+      this.setState({ contracts: solcParsed.contracts }, () => {
+        this.onContractChange(null, 0);
+      });
+    } catch (e) {
+      this.setState({ contracts: null });
+      this.onAbiChange(value);
+    }
+
+    this.setState({ solcOutput: value });
+  }
+
   onFromAddressChange = (event, fromAddress) => {
     const { onFromAddressChange } = this.props;
 
     onFromAddressChange(fromAddress);
   }
 
-  onNameChange = (name) => {
+  onNameChange = (event, name) => {
     const { onNameChange } = this.props;
 
     onNameChange(name);
   }
 
-  onParamChange = (index, value) => {
-    const { params, onParamsChange } = this.props;
+  onDescriptionChange = (event, description) => {
+    const { onDescriptionChange } = this.props;
 
-    params[index] = value;
-    onParamsChange(params);
+    onDescriptionChange(description);
   }
 
   onAbiChange = (abi) => {
     const { api } = this.context;
-    const { onAbiChange, onParamsChange } = this.props;
+    const { onAbiChange, onParamsChange, onInputsChange } = this.props;
     const { abiError, abiParsed } = validateAbi(abi, api);
 
     if (!abiError) {
@@ -176,10 +241,10 @@ export default class DetailsStep extends Component {
       });
 
       onParamsChange(params);
-      this.setState({ inputs });
+      onInputsChange(inputs);
     } else {
       onParamsChange([]);
-      this.setState({ inputs: [] });
+      onInputsChange([]);
     }
 
     onAbiChange(abi);

js/src/modals/DeployContract/ParametersStep/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 './parametersStep';