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

Handle solc combined output
This commit is contained in:
Gav Wood 2016-11-18 19:17:49 +08:00 committed by GitHub
commit dd50c63912
13 changed files with 492 additions and 122 deletions

View File

@ -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;
}
}

View File

@ -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);
}

View File

@ -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 label = `${input.name ? `${input.name}: ` : ''}${input.type}`;
const value = params[index];
const error = paramsError[index];
const param = parseAbiType(input.type);
const { selectedContractIndex } = this.state;
const contractsItems = Object.keys(contracts).map((name, index) => (
<MenuItem
key={ index }
label={ name }
value={ index }
>
{ name }
</MenuItem>
));
return (
<div key={ index } className={ styles.funcparams }>
<TypedInput
label={ label }
value={ value }
error={ error }
accounts={ accounts }
onChange={ onChange }
param={ param }
/>
</div>
<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);

View File

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

View File

@ -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);
}
}

View File

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

View File

@ -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) => {

View File

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

View File

@ -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;
}
}

View File

@ -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);
}
}

View File

@ -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
};

View File

@ -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,

View File

@ -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,