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,13 +15,12 @@
 // 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
@@ -29,24 +28,26 @@ export default class DetailsStep extends Component {
 
   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,7 +56,9 @@ export default class DetailsStep extends Component {
   };
 
   state = {
-    inputs: []
+    solcOutput: '',
+    contracts: {},
+    selectedContractIndex: 0
   }
 
   componentDidMount () {
@@ -63,6 +66,7 @@ export default class DetailsStep extends Component {
 
     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,18 +98,30 @@ 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'
@@ -102,66 +129,104 @@ export default class DetailsStep extends Component {
           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 { selectedContractIndex } = this.state;
+    const contractsItems = Object.keys(contracts).map((name, index) => (
+      <MenuItem
+        key={ index }
+        label={ name }
+        value={ index }
+      >
+        { name }
+      </MenuItem>
+    ));
 
-      const label = `${input.name ? `${input.name}: ` : ''}${input.type}`;
-      const value = params[index];
-      const error = paramsError[index];
-      const param = parseAbiType(input.type);
+    return (
+      <Select
+        label='select a contract'
+        onChange={ this.onContractChange }
+        value={ selectedContractIndex }
+      >
+        { contractsItems }
+      </Select>
+    );
+  }
 
-      return (
-        <div key={ index } className={ styles.funcparams }>
-          <TypedInput
-            label={ label }
-            value={ value }
-            error={ error }
-            accounts={ accounts }
-            onChange={ onChange }
-            param={ param }
-          />
-        </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) => {
+    // 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';

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

@@ -0,0 +1,105 @@
+// 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 { Form, TypedInput } from '../../../ui';
+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,
+    onParamsChange: PropTypes.func.isRequired,
+
+    inputs: PropTypes.array,
+    params: PropTypes.array,
+    paramsError: PropTypes.array
+  };
+
+  render () {
+    return (
+      <Form>
+        { this.renderConstructorInputs() }
+      </Form>
+    );
+  }
+
+  renderConstructorInputs () {
+    const { accounts, params, paramsError } = this.props;
+    const { inputs } = this.props;
+
+    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>
+    );
+  }
+
+  onParamChange = (index, value) => {
+    const { params, onParamsChange } = this.props;
+
+    params[index] = value;
+    onParamsChange(params);
+  }
+}

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,19 @@ 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', waiting: true },
+  COMPLETED: { title: 'completed' }
+};
 
 export default class DeployContract extends Component {
   static contextTypes = {
@@ -55,7 +61,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 +69,12 @@ export default class DeployContract extends Component {
     nameError: ERRORS.invalidName,
     params: [],
     paramsError: [],
-    step: 0,
+    inputs: [],
+
+    deployState: '',
     deployError: null,
-    rejected: false
+    rejected: false,
+    step: 'CONTRACT_DETAILS'
   }
 
   componentWillMount () {
@@ -95,20 +103,30 @@ export default class DeployContract extends Component {
   }
 
   render () {
-    const { step, deployError, rejected } = this.state;
+    const { step, deployError, rejected, inputs } = this.state;
+
+    const realStep = Object.keys(STEPS).findIndex((k) => k === step);
+    const realSteps = deployError || rejected
+      ? null
+      : Object.keys(STEPS)
+        .filter((k) => k !== 'CONTRACT_PARAMETERS' || inputs.length > 0)
+        .map((k) => STEPS[k]);
 
-    const realSteps = deployError || rejected ? null : steps;
     const title = realSteps
       ? null
       : (deployError ? 'deployment failed' : 'rejected');
 
+    const waiting = realSteps
+      ? realSteps.map((s, i) => s.waiting ? i : false).filter((v) => v !== false)
+      : null;
+
     return (
       <Modal
         actions={ this.renderDialogActions() }
-        current={ step }
-        steps={ realSteps }
+        current={ realStep }
+        steps={ realSteps ? realSteps.map((s) => s.title) : null }
         title={ title }
-        waiting={ realSteps ? [1] : null }
+        waiting={ waiting }
         visible
         scroll>
         { this.renderStep() }
@@ -146,20 +164,29 @@ export default class DeployContract extends Component {
     }
 
     switch (step) {
-      case 0:
+      case 'CONTRACT_DETAILS':
         return [
           cancelBtn,
           <Button
             disabled={ !isValid }
+            icon={ <IdentityIcon button address={ fromAddress } /> }
+            label='Next'
+            onClick={ this.onParametersStep } />
+        ];
+
+      case 'CONTRACT_PARAMETERS':
+        return [
+          cancelBtn,
+          <Button
             icon={ <IdentityIcon button address={ fromAddress } /> }
             label='Create'
             onClick={ this.onDeployStart } />
         ];
 
-      case 1:
+      case 'DEPLOYMENT':
         return [ closeBtn ];
 
-      case 2:
+      case 'COMPLETED':
         return [ closeBtnOk ];
     }
   }
@@ -184,21 +211,33 @@ export default class DeployContract extends Component {
     }
 
     switch (step) {
-      case 0:
+      case 'CONTRACT_DETAILS':
         return (
           <DetailsStep
             { ...this.state }
-            readOnly={ readOnly }
             accounts={ accounts }
-            onAbiChange={ this.onAbiChange }
-            onCodeChange={ this.onCodeChange }
+            readOnly={ readOnly }
             onFromAddressChange={ this.onFromAddressChange }
             onDescriptionChange={ this.onDescriptionChange }
             onNameChange={ this.onNameChange }
-            onParamsChange={ this.onParamsChange } />
+            onAbiChange={ this.onAbiChange }
+            onCodeChange={ this.onCodeChange }
+            onParamsChange={ this.onParamsChange }
+            onInputsChange={ this.onInputsChange }
+          />
         );
 
-      case 1:
+      case 'CONTRACT_PARAMETERS':
+        return (
+          <ParametersStep
+            { ...this.state }
+            readOnly={ readOnly }
+            accounts={ accounts }
+            onParamsChange={ this.onParamsChange }
+          />
+        );
+
+      case 'DEPLOYMENT':
         const body = txhash
           ? <TxHash hash={ txhash } />
           : null;
@@ -210,7 +249,7 @@ export default class DeployContract extends Component {
           </BusyStep>
         );
 
-      case 2:
+      case 'COMPLETED':
         return (
           <CompletedStep>
             <div>Your contract has been deployed at</div>
@@ -225,12 +264,23 @@ export default class DeployContract extends Component {
     }
   }
 
+  onParametersStep = () => {
+    const { inputs } = this.state;
+
+    if (inputs.length) {
+      return this.setState({ step: 'CONTRACT_PARAMETERS' });
+    }
+
+    return this.onDeployStart();
+  }
+
   onDescriptionChange = (description) => {
     this.setState({ description, descriptionError: null });
   }
 
   onFromAddressChange = (fromAddress) => {
     const { api } = this.context;
+
     const fromAddressError = api.util.isAddressValid(fromAddress)
       ? null
       : 'a valid account as the contract owner needs to be selected';
@@ -246,6 +296,10 @@ export default class DeployContract extends Component {
     this.setState({ params });
   }
 
+  onInputsChange = (inputs) => {
+    this.setState({ inputs });
+  }
+
   onAbiChange = (abi) => {
     const { api } = this.context;
 
@@ -267,7 +321,7 @@ export default class DeployContract extends Component {
       from: fromAddress
     };
 
-    this.setState({ step: 1 });
+    this.setState({ step: 'DEPLOYMENT' });
 
     api
       .newContract(abiParsed)
@@ -286,7 +340,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/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 './radioButtons';

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

@@ -0,0 +1,32 @@
+/* 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/>.
+*/
+
+.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/ui/Form/RadioButtons/radioButtons.js

@@ -0,0 +1,100 @@
+// 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 { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
+
+import styles from './radioButtons.css';
+
+export default class RadioButtons extends Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    values: PropTypes.array.isRequired,
+
+    value: PropTypes.any,
+    name: PropTypes.string
+  };
+
+  static defaultProps = {
+    value: 0,
+    name: ''
+  };
+
+  render () {
+    const { value, values } = this.props;
+
+    const index = parseInt(value);
+    const selectedValue = typeof value !== 'object' ? values[index] : value;
+    const key = this.getKey(selectedValue, index);
+
+    return (
+      <RadioButtonGroup
+        valueSelected={ key }
+        name={ name }
+        onChange={ this.onChange }
+      >
+        { this.renderContent() }
+      </RadioButtonGroup>
+    );
+  }
+
+  renderContent () {
+    const { values } = this.props;
+
+    return values.map((value, index) => {
+      const label = typeof value === 'string' ? value : value.label || '';
+      const description = (typeof value !== 'string' && value.description) || null;
+      const key = this.getKey(value, index);
+
+      return (
+        <RadioButton
+          className={ styles.spaced }
+          key={ index }
+
+          value={ key }
+          label={ (
+            <div className={ styles.typeContainer }>
+              <span>{ label }</span>
+              {
+                description
+                ? (
+                  <span className={ styles.desc }>{ description }</span>
+                )
+                : null
+              }
+            </div>
+          ) }
+        />
+      );
+    });
+  }
+
+  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] || values.find((v) => v.key === index);
+    onChange(value, index);
+  }
+}

js/src/ui/Form/index.js

@@ -23,6 +23,7 @@ import InputAddressSelect from './InputAddressSelect';
 import InputChip from './InputChip';
 import InputInline from './InputInline';
 import Select from './Select';
+import RadioButtons from './RadioButtons';
 
 export default from './form';
 export {
@@ -34,5 +35,6 @@ export {
   InputAddressSelect,
   InputChip,
   InputInline,
-  Select
+  Select,
+  RadioButtons
 };

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,

js/src/ui/index.js

@@ -29,7 +29,7 @@ import ContextProvider from './ContextProvider';
 import CopyToClipboard from './CopyToClipboard';
 import Editor from './Editor';
 import Errors from './Errors';
-import Form, { AddressSelect, FormWrap, TypedInput, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select } from './Form';
+import Form, { AddressSelect, FormWrap, TypedInput, Input, InputAddress, InputAddressSelect, InputChip, InputInline, Select, RadioButtons } from './Form';
 import IdentityIcon from './IdentityIcon';
 import IdentityName from './IdentityName';
 import MethodDecoding from './MethodDecoding';
@@ -78,6 +78,7 @@ export {
   muiTheme,
   Page,
   ParityBackground,
+  RadioButtons,
   SignerIcon,
   Tags,
   Tooltip,