Add input from Solc compiler #3196

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

@@ -16,11 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { AddressSelect, Form, Input, TypedInput } from '../../../ui';
+import { AddressSelect, Form, Input, RadioButtons } 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 = {
@@ -29,24 +25,17 @@ export default class DetailsStep extends Component {
 
   static propTypes = {
     accounts: PropTypes.object.isRequired,
-    abi: PropTypes.string,
+    inputTypeValues: PropTypes.array.isRequired,
-    abiError: PropTypes.string,
+
-    code: PropTypes.string,
+    onFromAddressChange: PropTypes.func.isRequired,
-    codeError: PropTypes.string,
+    onNameChange: PropTypes.func.isRequired,
-    description: PropTypes.string,
+    onInputTypeChange: PropTypes.func.isRequired,
-    descriptionError: PropTypes.string,
+
     fromAddress: PropTypes.string,
     fromAddressError: PropTypes.string,
     name: PropTypes.string,
     nameError: PropTypes.string,
-    params: PropTypes.array,
+    inputType: PropTypes.object,
-    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,
     readOnly: PropTypes.bool
   };
 
@@ -54,25 +43,9 @@ export default class DetailsStep extends Component {
     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, readOnly } = this.props;
+    const { fromAddress, fromAddressError, name, nameError } = this.props;
 
     return (
       <Form>
@@ -83,61 +56,40 @@ 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 } />
-        <Input
-          label='abi'
-          hint='the abi of the contract to deploy'
-          error={ abiError }
-          value={ abi }
-          onSubmit={ this.onAbiChange }
-          readOnly={ readOnly } />
-        <Input
-          label='code'
-          hint='the compiled code of the contract to deploy'
-          error={ codeError }
-          value={ code }
-          onSubmit={ this.onCodeChange }
-          readOnly={ readOnly } />
 
-        { this.renderConstructorInputs() }
+        { this.renderChooseInputType() }
       </Form>
     );
   }
 
-  renderConstructorInputs () {
+  renderChooseInputType () {
-    const { accounts, params, paramsError } = this.props;
+    const { readOnly } = this.props;
-    const { inputs } = this.state;
 
-    if (!inputs || !inputs.length) {
+    if (readOnly) {
       return null;
     }
 
-    return inputs.map((input, index) => {
+    const { inputTypeValues, inputType } = this.props;
-      const onChange = (value) => this.onParamChange(index, value);
 
-      const label = `${input.name ? `${input.name}: ` : ''}${input.type}`;
+    return (
-      const value = params[index];
+      <div>
-      const error = paramsError[index];
+        <br />
-      const param = parseAbiType(input.type);
+        <p>Choose how ABI and Bytecode will be entered</p>
-
+        <RadioButtons
-      return (
+          name='contractInputType'
-        <div key={ index } className={ styles.funcparams }>
+          value={ inputType }
-          <TypedInput
+          values={ inputTypeValues }
-            label={ label }
+          onChange={ this.onInputTypeChange }
-            value={ value }
+        />
-            error={ error }
+      </div>
-            accounts={ accounts }
+    );
-            onChange={ onChange }
-            param={ param }
-          />
-        </div>
-      );
-    });
   }
 
   onFromAddressChange = (event, fromAddress) => {
@@ -152,42 +104,8 @@ export default class DetailsStep extends Component {
     onNameChange(name);
   }
 
-  onParamChange = (index, value) => {
+  onInputTypeChange = (inputType, index) => {
-    const { params, onParamsChange } = this.props;
+    const { onInputTypeChange } = this.props;
-
+    onInputTypeChange(inputType, index);
-    params[index] = value;
-    onParamsChange(params);
-  }
-
-  onAbiChange = (abi) => {
-    const { api } = this.context;
-    const { onAbiChange, onParamsChange } = this.props;
-    const { abiError, abiParsed } = validateAbi(abi, api);
-
-    if (!abiError) {
-      const { inputs } = abiParsed
-        .find((method) => method.type === 'constructor') || { inputs: [] };
-
-      const params = [];
-
-      inputs.forEach((input) => {
-        const param = parseAbiType(input.type);
-        params.push(param.default);
-      });
-
-      onParamsChange(params);
-      this.setState({ inputs });
-    } else {
-      onParamsChange([]);
-      this.setState({ inputs: [] });
-    }
-
-    onAbiChange(abi);
-  }
-
-  onCodeChange = (code) => {
-    const { onCodeChange } = this.props;
-
-    onCodeChange(code);
   }
 }

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';

js/src/modals/DeployContract/ParametersStep/parametersStep.js

@@ -0,0 +1,278 @@
+// 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/>.
+// 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 { MenuItem } from 'material-ui';
+
+import { Form, Input, TypedInput, Select } from '../../../ui';
+import { validateAbi } from '../../../util/validation';
+import { parseAbiType } from '../../../util/abi';
+
+import styles from '../deployContract.css';
+
+export default class ParametersStep extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  };
+
+  static propTypes = {
+    accounts: PropTypes.object.isRequired,
+    inputType: PropTypes.object.isRequired,
+
+    onAbiChange: PropTypes.func.isRequired,
+    onCodeChange: PropTypes.func.isRequired,
+    onParamsChange: PropTypes.func.isRequired,
+
+    abi: PropTypes.string,
+    abiError: PropTypes.string,
+    code: PropTypes.string,
+    codeError: PropTypes.string,
+    params: PropTypes.array,
+    paramsError: PropTypes.array,
+
+    readOnly: PropTypes.bool
+  };
+
+  static defaultProps = {
+    readOnly: false
+  };
+
+  state = {
+    inputs: [],
+    solcOutput: '',
+    contracts: {},
+    selectedContractIndex: 0
+  }
+
+  componentDidMount () {
+    const { abi, code } = this.props;
+
+    if (abi) {
+      this.onAbiChange(abi);
+    }
+
+    if (code) {
+      this.onCodeChange(code);
+    }
+  }
+
+  render () {
+    const { abi, abiError, code, codeError, readOnly, inputType } = this.props;
+
+    const manualInput = inputType.key === 'MANUAL';
+
+    return (
+      <Form>
+        { this.renderFromSOLC() }
+        <Input
+          label='abi'
+          hint='the abi of the contract to deploy'
+          error={ abiError }
+          value={ abi }
+          onSubmit={ this.onAbiChange }
+          readOnly={ readOnly || !manualInput } />
+        <Input
+          label='code'
+          hint='the compiled code of the contract to deploy'
+          error={ codeError }
+          value={ code }
+          onSubmit={ this.onCodeChange }
+          readOnly={ readOnly || !manualInput } />
+
+        { this.renderConstructorInputs() }
+      </Form>
+    );
+  }
+
+  renderFromSOLC () {
+    const { inputType } = this.props;
+
+    if (inputType.key !== 'SOLC') {
+      return null;
+    }
+
+    const { solcOutput, contracts } = this.state;
+    const error = contracts && Object.keys(contracts).length
+      ? null
+      : 'enter a valid solc output';
+
+    return (
+      <div>
+        <Input
+          label='solc output'
+          hint='the output of solc'
+          value={ solcOutput }
+          error={ error }
+          onChange={ this.onSolcChange }
+        />
+        { this.renderContractSelect() }
+      </div>
+    );
+  }
+
+  renderContractSelect () {
+    const { contracts } = this.state;
+
+    if (!contracts || Object.keys(contracts).length === 0) {
+      return null;
+    }
+
+    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>
+    );
+  }
+
+  renderConstructorInputs () {
+    const { accounts, params, paramsError } = this.props;
+    const { inputs } = this.state;
+
+    if (!inputs || !inputs.length) {
+      return null;
+    }
+
+    const inputsComponents = 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>
+      );
+    });
+
+    return (
+      <div>
+        <p>Choose the contract parameters</p>
+        { inputsComponents }
+      </div>
+    );
+  }
+
+  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) => {
+    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.setState({ solcOutput: value });
+  }
+
+  onParamChange = (index, value) => {
+    const { params, onParamsChange } = this.props;
+
+    params[index] = value;
+    onParamsChange(params);
+  }
+
+  onAbiChange = (abi) => {
+    const { api } = this.context;
+    const { onAbiChange, onParamsChange } = this.props;
+    const { abiError, abiParsed } = validateAbi(abi, api);
+
+    if (!abiError) {
+      const { inputs } = abiParsed
+        .find((method) => method.type === 'constructor') || { inputs: [] };
+
+      const params = [];
+
+      inputs.forEach((input) => {
+        const param = parseAbiType(input.type);
+        params.push(param.default);
+      });
+
+      onParamsChange(params);
+      this.setState({ inputs });
+    } else {
+      onParamsChange([]);
+      this.setState({ inputs: [] });
+    }
+
+    onAbiChange(abi);
+  }
+
+  onCodeChange = (code) => {
+    const { onCodeChange } = this.props;
+
+    onCodeChange(code);
+  }
+}

js/src/modals/DeployContract/deployContract.css

@@ -31,3 +31,7 @@
 .funcparams {
   padding-left: 3em;
 }
+
+p {
+  color: rgba(255, 255, 255, 0.498039);
+}

js/src/modals/DeployContract/deployContract.js

@@ -22,13 +22,32 @@ import { BusyStep, CompletedStep, CopyToClipboard, Button, IdentityIcon, Modal,
 import { ERRORS, validateAbi, validateCode, validateName } from '../../util/validation';
 
 import DetailsStep from './DetailsStep';
+import ParametersStep from './ParametersStep';
 import ErrorStep from './ErrorStep';
 
 import styles from './deployContract.css';
 
 import { ERROR_CODES } from '../../api/transport/error';
 
-const steps = ['contract details', 'deployment', 'completed'];
+const STEPS = {
+  CONTRACT_DETAILS: { title: 'contract details' },
+  CONTRACT_PARAMETERS: { title: 'contract parameters' },
+  DEPLOYMENT: { title: 'deployment' },
+  COMPLETED: { title: 'completed' }
+};
+
+const CONTRACT_INPUT_TYPES = [
+  {
+    key: 'MANUAL',
+    label: 'Manually',
+    description: 'Manual input of the ABI and the bytecode'
+  },
+  {
+    key: 'SOLC',
+    label: 'From solc',
+    description: 'Parse the ABI and the bytecode from solc output'
+  }
+];
 
 export default class DeployContract extends Component {
   static contextTypes = {
@@ -55,7 +74,6 @@ export default class DeployContract extends Component {
     abiError: ERRORS.invalidAbi,
     code: '',
     codeError: ERRORS.invalidCode,
-    deployState: '',
     description: '',
     descriptionError: null,
     fromAddress: Object.keys(this.props.accounts)[0],
@@ -64,9 +82,12 @@ export default class DeployContract extends Component {
     nameError: ERRORS.invalidName,
     params: [],
     paramsError: [],
-    step: 0,
+    inputType: CONTRACT_INPUT_TYPES[0],
+
+    deployState: '',
     deployError: null,
-    rejected: false
+    rejected: false,
+    step: 'CONTRACT_DETAILS'
   }
 
   componentWillMount () {
@@ -97,7 +118,11 @@ export default class DeployContract extends Component {
   render () {
     const { step, deployError, rejected } = this.state;
 
-    const realSteps = deployError || rejected ? null : steps;
+    const realStep = Object.keys(STEPS).findIndex((k) => k === step);
+    const realSteps = deployError || rejected
+      ? null
+      : Object.values(STEPS).map((s) => s.title);
+
     const title = realSteps
       ? null
       : (deployError ? 'deployment failed' : 'rejected');
@@ -105,10 +130,10 @@ export default class DeployContract extends Component {
     return (
       <Modal
         actions={ this.renderDialogActions() }
-        current={ step }
+        current={ realStep }
         steps={ realSteps }
         title={ title }
-        waiting={ realSteps ? [1] : null }
+        waiting={ realSteps ? [2] : null }
         visible
         scroll>
         { this.renderStep() }
@@ -118,7 +143,8 @@ export default class DeployContract extends Component {
 
   renderDialogActions () {
     const { deployError, abiError, codeError, nameError, descriptionError, fromAddressError, fromAddress, step } = this.state;
-    const isValid = !nameError && !fromAddressError && !descriptionError && !abiError && !codeError;
+    const isDetailsValid = !nameError && !fromAddressError && !descriptionError;
+    const isParametersValid = !abiError && !codeError;
 
     const cancelBtn = (
       <Button
@@ -146,20 +172,30 @@ export default class DeployContract extends Component {
     }
 
     switch (step) {
-      case 0:
+      case 'CONTRACT_DETAILS':
         return [
           cancelBtn,
           <Button
-            disabled={ !isValid }
+            disabled={ !isDetailsValid }
+            icon={ <IdentityIcon button address={ fromAddress } /> }
+            label='Next'
+            onClick={ this.onParametersStep } />
+        ];
+
+      case 'CONTRACT_PARAMETERS':
+        return [
+          cancelBtn,
+          <Button
+            disabled={ !isParametersValid }
             icon={ <IdentityIcon button address={ fromAddress } /> }
             label='Create'
             onClick={ this.onDeployStart } />
         ];
 
-      case 1:
+      case 'DEPLOYMENT':
         return [ closeBtn ];
 
-      case 2:
+      case 'COMPLETED':
         return [ closeBtnOk ];
     }
   }
@@ -184,21 +220,33 @@ export default class DeployContract extends Component {
     }
 
     switch (step) {
-      case 0:
+      case 'CONTRACT_DETAILS':
         return (
           <DetailsStep
+            { ...this.state }
+            accounts={ accounts }
+            readOnly={ readOnly }
+            inputTypeValues={ CONTRACT_INPUT_TYPES }
+            onFromAddressChange={ this.onFromAddressChange }
+            onDescriptionChange={ this.onDescriptionChange }
+            onNameChange={ this.onNameChange }
+            onInputTypeChange={ this.onInputTypeChange }
+          />
+        );
+
+      case 'CONTRACT_PARAMETERS':
+        return (
+          <ParametersStep
             { ...this.state }
             readOnly={ readOnly }
             accounts={ accounts }
             onAbiChange={ this.onAbiChange }
             onCodeChange={ this.onCodeChange }
-            onFromAddressChange={ this.onFromAddressChange }
+            onParamsChange={ this.onParamsChange }
-            onDescriptionChange={ this.onDescriptionChange }
+          />
-            onNameChange={ this.onNameChange }
-            onParamsChange={ this.onParamsChange } />
         );
 
-      case 1:
+      case 'DEPLOYMENT':
         const body = txhash
           ? <TxHash hash={ txhash } />
           : null;
@@ -210,7 +258,7 @@ export default class DeployContract extends Component {
           </BusyStep>
         );
 
-      case 2:
+      case 'COMPLETED':
         return (
           <CompletedStep>
             <div>Your contract has been deployed at</div>
@@ -225,12 +273,21 @@ export default class DeployContract extends Component {
     }
   }
 
+  onParametersStep = () => {
+    this.setState({ step: 'CONTRACT_PARAMETERS' });
+  }
+
   onDescriptionChange = (description) => {
     this.setState({ description, descriptionError: null });
   }
 
+  onInputTypeChange = (inputType) => {
+    this.setState({ inputType });
+  }
+
   onFromAddressChange = (fromAddress) => {
     const { api } = this.context;
+
     const fromAddressError = api.util.isAddressValid(fromAddress)
       ? null
       : 'a valid account as the contract owner needs to be selected';
@@ -267,7 +324,7 @@ export default class DeployContract extends Component {
       from: fromAddress
     };
 
-    this.setState({ step: 1 });
+    this.setState({ step: 'DEPLOYMENT' });
 
     api
       .newContract(abiParsed)
@@ -286,7 +343,7 @@ export default class DeployContract extends Component {
         ])
         .then(() => {
           console.log(`contract deployed at ${address}`);
-          this.setState({ step: 2, address });
+          this.setState({ step: 'DEPLOYMENT', address });
         });
       })
       .catch((error) => {

js/src/ui/Form/RadioButtons/radioButtons.js

@@ -39,7 +39,7 @@ export default class RadioButtons extends Component {
 
     const index = parseInt(value);
     const selectedValue = typeof value !== 'object' ? values[index] : value;
-    const key = (typeof selectedValue !== 'string' && selectedValue.key) || index;
+    const key = this.getKey(selectedValue, index);
 
     return (
       <RadioButtonGroup
@@ -58,7 +58,7 @@ export default class RadioButtons extends Component {
     return values.map((value, index) => {
       const label = typeof value === 'string' ? value : value.label || '';
       const description = (typeof value !== 'string' && value.description) || null;
-      const key = (typeof value !== 'string' && value.key) || index;
+      const key = this.getKey(value, index);
 
       return (
         <RadioButton
@@ -83,10 +83,18 @@ export default class RadioButtons extends Component {
     });
   }
 
+  getKey (value, index) {
+    if (typeof value !== 'string') {
+      return typeof value.key === 'undefined' ? index : value.key;
+    }
+
+    return index;
+  }
+
   onChange = (event, index) => {
     const { onChange, values } = this.props;
 
-    const value = values[index];
+    const value = values[index] || values.find((v) => v.key === index);
     onChange(value, index);
   }
 }

js/src/ui/Modal/modal.js

@@ -43,7 +43,7 @@ class Modal extends Component {
     waiting: PropTypes.array,
     scroll: PropTypes.bool,
     steps: PropTypes.array,
-    title: React.PropTypes.oneOfType([
+    title: PropTypes.oneOfType([
       PropTypes.node, PropTypes.string
     ]),
     visible: PropTypes.bool.isRequired,