Use a single step and input for ABI/solc output #3196

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

@@ -30,10 +30,8 @@
 // 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 { Form, TypedInput } from '../../../ui';
 import { parseAbiType } from '../../../util/abi';
 
 import styles from '../deployContract.css';
@@ -45,133 +43,24 @@ export default class ParametersStep extends Component {
 
   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,
+    inputs: PropTypes.array,
     params: PropTypes.array,
-    paramsError: PropTypes.array,
-
-    readOnly: PropTypes.bool
+    paramsError: PropTypes.array
   };
 
-  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>
-        <p>To get <code>solc</code> output, you can use this command:</p>
-        <code>solc --combined-json abi,bin Contract.sol | xclip -selection c</code>
-        <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;
+    const { inputs } = this.props;
 
     if (!inputs || !inputs.length) {
       return null;
@@ -207,76 +96,10 @@ export default class ParametersStep extends Component {
     );
   }
 
-  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.onAbiChange('');
-      this.onCodeChange('');
-    }
-
-    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);
-  }
 }