Use a single step and input for ABI/solc output #3196
This commit is contained in:
Nicolas Gotchac
parent
830c762b75
commit
a1cbe449fa
|
|
@ -15,8 +15,11 @@
|
|||
// 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, RadioButtons } from '../../../ui';
|
||||
import { AddressSelect, Form, Input, Select } from '../../../ui';
|
||||
import { validateAbi } from '../../../util/validation';
|
||||
import { parseAbiType } from '../../../util/abi';
|
||||
|
||||
export default class DetailsStep extends Component {
|
||||
static contextTypes = {
|
||||
|
|
@ -25,12 +28,14 @@ export default class DetailsStep extends Component {
|
|||
|
||||
static propTypes = {
|
||||
accounts: PropTypes.object.isRequired,
|
||||
inputTypeValues: PropTypes.array.isRequired,
|
||||
|
||||
onFromAddressChange: PropTypes.func.isRequired,
|
||||
onNameChange: PropTypes.func.isRequired,
|
||||
onDescriptionChange: PropTypes.func.isRequired,
|
||||
onInputTypeChange: 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,
|
||||
|
|
@ -38,7 +43,11 @@ export default class DetailsStep extends Component {
|
|||
nameError: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
descriptionError: PropTypes.string,
|
||||
inputType: PropTypes.object,
|
||||
abi: PropTypes.string,
|
||||
abiError: PropTypes.string,
|
||||
code: PropTypes.string,
|
||||
codeError: PropTypes.string,
|
||||
|
||||
readOnly: PropTypes.bool
|
||||
};
|
||||
|
||||
|
|
@ -46,9 +55,39 @@ export default class DetailsStep extends Component {
|
|||
readOnly: false
|
||||
};
|
||||
|
||||
state = {
|
||||
solcOutput: '',
|
||||
contracts: {},
|
||||
selectedContractIndex: 0
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
const { abi, code } = this.props;
|
||||
|
||||
if (abi) {
|
||||
this.onAbiChange(abi);
|
||||
this.setState({ solcOutput: abi });
|
||||
}
|
||||
|
||||
if (code) {
|
||||
this.onCodeChange(code);
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { accounts } = this.props;
|
||||
const { fromAddress, fromAddressError, name, nameError, description, descriptionError } = 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>
|
||||
|
|
@ -74,34 +113,99 @@ export default class DetailsStep extends Component {
|
|||
value={ description }
|
||||
onChange={ this.onDescriptionChange } />
|
||||
|
||||
{ this.renderChooseInputType() }
|
||||
{ this.renderContractSelect() }
|
||||
|
||||
<Input
|
||||
label='abi / solc combined-output'
|
||||
hint='the abi of the contract to deploy or solc combined-output'
|
||||
error={ abiError }
|
||||
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 || solc } />
|
||||
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
renderChooseInputType () {
|
||||
const { readOnly } = this.props;
|
||||
renderContractSelect () {
|
||||
const { contracts } = this.state;
|
||||
|
||||
if (readOnly) {
|
||||
if (!contracts || Object.keys(contracts).length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { inputTypeValues, inputType } = this.props;
|
||||
const { selectedContractIndex } = this.state;
|
||||
const contractsItems = Object.keys(contracts).map((name, index) => (
|
||||
<MenuItem
|
||||
key={ index }
|
||||
label={ name }
|
||||
value={ index }
|
||||
>
|
||||
{ name }
|
||||
</MenuItem>
|
||||
));
|
||||
|
||||
return (
|
||||
<div>
|
||||
<br />
|
||||
<p>Choose how ABI and Bytecode will be entered</p>
|
||||
<RadioButtons
|
||||
name='contractInputType'
|
||||
value={ inputType }
|
||||
values={ inputTypeValues }
|
||||
onChange={ this.onInputTypeChange }
|
||||
/>
|
||||
</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;
|
||||
|
||||
|
|
@ -120,8 +224,35 @@ export default class DetailsStep extends Component {
|
|||
onDescriptionChange(description);
|
||||
}
|
||||
|
||||
onInputTypeChange = (inputType, index) => {
|
||||
const { onInputTypeChange } = this.props;
|
||||
onInputTypeChange(inputType, index);
|
||||
onAbiChange = (abi) => {
|
||||
const { api } = this.context;
|
||||
const { onAbiChange, onParamsChange, onInputsChange } = 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);
|
||||
onInputsChange(inputs);
|
||||
} else {
|
||||
onParamsChange([]);
|
||||
onInputsChange([]);
|
||||
}
|
||||
|
||||
onAbiChange(abi);
|
||||
}
|
||||
|
||||
onCodeChange = (code) => {
|
||||
const { onCodeChange } = this.props;
|
||||
|
||||
onCodeChange(code);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,23 +32,10 @@ import { ERROR_CODES } from '../../api/transport/error';
|
|||
const STEPS = {
|
||||
CONTRACT_DETAILS: { title: 'contract details' },
|
||||
CONTRACT_PARAMETERS: { title: 'contract parameters' },
|
||||
DEPLOYMENT: { title: 'deployment' },
|
||||
DEPLOYMENT: { title: 'deployment', waiting: true },
|
||||
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 = {
|
||||
api: PropTypes.object.isRequired,
|
||||
|
|
@ -82,7 +69,7 @@ export default class DeployContract extends Component {
|
|||
nameError: ERRORS.invalidName,
|
||||
params: [],
|
||||
paramsError: [],
|
||||
inputType: CONTRACT_INPUT_TYPES[0],
|
||||
inputs: [],
|
||||
|
||||
deployState: '',
|
||||
deployError: null,
|
||||
|
|
@ -116,24 +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.values(STEPS).map((s) => s.title);
|
||||
: Object.keys(STEPS)
|
||||
.filter((k) => k !== 'CONTRACT_PARAMETERS' || inputs.length > 0)
|
||||
.map((k) => STEPS[k]);
|
||||
|
||||
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={ realStep }
|
||||
steps={ realSteps }
|
||||
steps={ realSteps ? realSteps.map((s) => s.title) : null }
|
||||
title={ title }
|
||||
waiting={ realSteps ? [2] : null }
|
||||
waiting={ waiting }
|
||||
visible
|
||||
scroll>
|
||||
{ this.renderStep() }
|
||||
|
|
@ -143,8 +136,7 @@ export default class DeployContract extends Component {
|
|||
|
||||
renderDialogActions () {
|
||||
const { deployError, abiError, codeError, nameError, descriptionError, fromAddressError, fromAddress, step } = this.state;
|
||||
const isDetailsValid = !nameError && !fromAddressError && !descriptionError;
|
||||
const isParametersValid = !abiError && !codeError;
|
||||
const isValid = !nameError && !fromAddressError && !descriptionError && !abiError && !codeError;
|
||||
|
||||
const cancelBtn = (
|
||||
<Button
|
||||
|
|
@ -176,7 +168,7 @@ export default class DeployContract extends Component {
|
|||
return [
|
||||
cancelBtn,
|
||||
<Button
|
||||
disabled={ !isDetailsValid }
|
||||
disabled={ !isValid }
|
||||
icon={ <IdentityIcon button address={ fromAddress } /> }
|
||||
label='Next'
|
||||
onClick={ this.onParametersStep } />
|
||||
|
|
@ -186,7 +178,6 @@ export default class DeployContract extends Component {
|
|||
return [
|
||||
cancelBtn,
|
||||
<Button
|
||||
disabled={ !isParametersValid }
|
||||
icon={ <IdentityIcon button address={ fromAddress } /> }
|
||||
label='Create'
|
||||
onClick={ this.onDeployStart } />
|
||||
|
|
@ -226,11 +217,13 @@ export default class DeployContract extends Component {
|
|||
{ ...this.state }
|
||||
accounts={ accounts }
|
||||
readOnly={ readOnly }
|
||||
inputTypeValues={ CONTRACT_INPUT_TYPES }
|
||||
onFromAddressChange={ this.onFromAddressChange }
|
||||
onDescriptionChange={ this.onDescriptionChange }
|
||||
onNameChange={ this.onNameChange }
|
||||
onInputTypeChange={ this.onInputTypeChange }
|
||||
onAbiChange={ this.onAbiChange }
|
||||
onCodeChange={ this.onCodeChange }
|
||||
onParamsChange={ this.onParamsChange }
|
||||
onInputsChange={ this.onInputsChange }
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
@ -240,8 +233,6 @@ export default class DeployContract extends Component {
|
|||
{ ...this.state }
|
||||
readOnly={ readOnly }
|
||||
accounts={ accounts }
|
||||
onAbiChange={ this.onAbiChange }
|
||||
onCodeChange={ this.onCodeChange }
|
||||
onParamsChange={ this.onParamsChange }
|
||||
/>
|
||||
);
|
||||
|
|
@ -274,17 +265,19 @@ export default class DeployContract extends Component {
|
|||
}
|
||||
|
||||
onParametersStep = () => {
|
||||
this.setState({ step: 'CONTRACT_PARAMETERS' });
|
||||
const { inputs } = this.state;
|
||||
|
||||
if (inputs.length) {
|
||||
return this.setState({ step: 'CONTRACT_PARAMETERS' });
|
||||
}
|
||||
|
||||
return this.onDeployStart();
|
||||
}
|
||||
|
||||
onDescriptionChange = (description) => {
|
||||
this.setState({ description, descriptionError: null });
|
||||
}
|
||||
|
||||
onInputTypeChange = (inputType) => {
|
||||
this.setState({ inputType });
|
||||
}
|
||||
|
||||
onFromAddressChange = (fromAddress) => {
|
||||
const { api } = this.context;
|
||||
|
||||
|
|
@ -303,6 +296,10 @@ export default class DeployContract extends Component {
|
|||
this.setState({ params });
|
||||
}
|
||||
|
||||
onInputsChange = (inputs) => {
|
||||
this.setState({ inputs });
|
||||
}
|
||||
|
||||
onAbiChange = (abi) => {
|
||||
const { api } = this.context;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue