Add input from Solc compiler #3196
This commit is contained in:
Nicolas Gotchac
parent
c8fadbec69
commit
d41efcc84e
@ -16,11 +16,7 @@
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
|
||||
import { AddressSelect, Form, Input, TypedInput } from '../../../ui';
|
||||
import { validateAbi } from '../../../util/validation';
|
||||
import { parseAbiType } from '../../../util/abi';
|
||||
|
||||
import styles from '../deployContract.css';
|
||||
import { AddressSelect, Form, Input, RadioButtons } from '../../../ui';
|
||||
|
||||
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,
|
||||
abiError: PropTypes.string,
|
||||
code: PropTypes.string,
|
||||
codeError: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
descriptionError: PropTypes.string,
|
||||
inputTypeValues: PropTypes.array.isRequired,
|
||||
|
||||
onFromAddressChange: PropTypes.func.isRequired,
|
||||
onNameChange: PropTypes.func.isRequired,
|
||||
onInputTypeChange: 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,
|
||||
inputType: PropTypes.object,
|
||||
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 () {
|
||||
const { accounts, params, paramsError } = this.props;
|
||||
const { inputs } = this.state;
|
||||
renderChooseInputType () {
|
||||
const { readOnly } = this.props;
|
||||
|
||||
if (!inputs || !inputs.length) {
|
||||
if (readOnly) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return inputs.map((input, index) => {
|
||||
const onChange = (value) => this.onParamChange(index, value);
|
||||
const { inputTypeValues, inputType } = this.props;
|
||||
|
||||
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>
|
||||
<br />
|
||||
<p>Choose how ABI and Bytecode will be entered</p>
|
||||
<RadioButtons
|
||||
name='contractInputType'
|
||||
value={ inputType }
|
||||
values={ inputTypeValues }
|
||||
onChange={ this.onInputTypeChange }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
onFromAddressChange = (event, fromAddress) => {
|
||||
@ -152,42 +104,8 @@ export default class DetailsStep extends Component {
|
||||
onNameChange(name);
|
||||
}
|
||||
|
||||
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);
|
||||
onInputTypeChange = (inputType, index) => {
|
||||
const { onInputTypeChange } = this.props;
|
||||
onInputTypeChange(inputType, index);
|
||||
}
|
||||
}
|
||||
|
||||
17
js/src/modals/DeployContract/ParametersStep/index.js
Normal file
17
js/src/modals/DeployContract/ParametersStep/index.js
Normal 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';
|
||||
278
js/src/modals/DeployContract/ParametersStep/parametersStep.js
Normal file
278
js/src/modals/DeployContract/ParametersStep/parametersStep.js
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
@ -31,3 +31,7 @@
|
||||
.funcparams {
|
||||
padding-left: 3em;
|
||||
}
|
||||
|
||||
p {
|
||||
color: rgba(255, 255, 255, 0.498039);
|
||||
}
|
||||
|
||||
@ -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 }
|
||||
onDescriptionChange={ this.onDescriptionChange }
|
||||
onNameChange={ this.onNameChange }
|
||||
onParamsChange={ this.onParamsChange } />
|
||||
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) => {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user