grassrootseconomics/openethereum
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Gas exception warnings on deployment (#3938)

Browse Source 
* add deployEstimateGas function

* Render gas warning with Warning component

* estimateGas, display warning on contract deploy

* Update messages

* Removed unused import

* Fix calculated gas usage

* Basic component smoktest

* Only display warning on edit steps
This commit is contained in:
Jaco Greeff
2016-12-23 16:42:48 +01:00
committed by Gav Wood
parent 9529b6fa8c
commit 466f84f485
8 changed files with 420 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
js/src/modals/DeployContract/deployContract.js
View File

@@ -14,13 +14,14 @@
// 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 { connect } from 'react-redux';
import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
import ContentClear from 'material-ui/svg-icons/content/clear';
import { pick } from 'lodash';
import { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { BusyStep, CompletedStep, CopyToClipboard, Button, IdentityIcon, Modal, TxHash } from '~/ui';
import { BusyStep, Button, CompletedStep, CopyToClipboard, GasPriceEditor, IdentityIcon, Modal, TxHash, Warning } from '~/ui';
import { CancelIcon, DoneIcon } from '~/ui/Icons';
import { ERRORS, validateAbi, validateCode, validateName } from '~/util/validation';
import DetailsStep from './DetailsStep';
@@ -32,12 +33,34 @@ import styles from './deployContract.css';
import { ERROR_CODES } from '~/api/transport/error';
const STEPS = {
CONTRACT_DETAILS: { title: 'contract details' },
CONTRACT_PARAMETERS: { title: 'contract parameters' },
DEPLOYMENT: { title: 'deployment', waiting: true },
COMPLETED: { title: 'completed' }
CONTRACT_DETAILS: {
title:
<FormattedMessage
id='deployContract.title.details'
defaultMessage='contract details' />
},
CONTRACT_PARAMETERS: {
title:
<FormattedMessage
id='deployContract.title.parameters'
defaultMessage='contract parameters' />
},
DEPLOYMENT: {
waiting: true,
title:
<FormattedMessage
id='deployContract.title.deployment'
defaultMessage='deployment' />
},
COMPLETED: {
title:
<FormattedMessage
id='deployContract.title.completed'
defaultMessage='completed' />
}
};
@observer
class DeployContract extends Component {
static contextTypes = {
api: PropTypes.object.isRequired,
@@ -46,10 +69,11 @@ class DeployContract extends Component {
static propTypes = {
accounts: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
balances: PropTypes.object,
abi: PropTypes.string,
balances: PropTypes.object,
code: PropTypes.string,
gasLimit: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
readOnly: PropTypes.bool,
source: PropTypes.string
};
@@ -59,11 +83,15 @@ class DeployContract extends Component {
source: ''
};
gasStore = new GasPriceEditor.Store(this.context.api, { gasLimit: this.props.gasLimit });
state = {
abi: '',
abiError: ERRORS.invalidAbi,
code: '',
codeError: ERRORS.invalidCode,
deployState: '',
deployError: null,
description: '',
descriptionError: null,
fromAddress: Object.keys(this.props.accounts)[0],
@@ -73,9 +101,6 @@ class DeployContract extends Component {
params: [],
paramsError: [],
inputs: [],
deployState: '',
deployError: null,
rejected: false,
step: 'CONTRACT_DETAILS'
}
@@ -117,7 +142,14 @@ class DeployContract extends Component {
const title = realSteps
? null
: (deployError ? 'deployment failed' : 'rejected');
: (deployError
? <FormattedMessage
id='deployContract.title.failed'
defaultMessage='deployment failed' />
: <FormattedMessage
id='deployContract.title.rejected'
defaultMessage='rejected' />
);
const waiting = realSteps
? realSteps.map((s, i) => s.waiting ? i : false).filter((v) => v !== false)
@@ -127,38 +159,69 @@ class DeployContract extends Component {
<Modal
actions={ this.renderDialogActions() }
current={ realStep }
steps={ realSteps ? realSteps.map((s) => s.title) : null }
steps={
realSteps
? realSteps.map((s) => s.title)
: null
}
title={ title }
waiting={ waiting }
visible
>
waiting={ waiting }>
{ this.renderExceptionWarning() }
{ this.renderStep() }
</Modal>
);
}
renderExceptionWarning () {
const { step } = this.state;
const { errorEstimated } = this.gasStore;
const realStep = Object.keys(STEPS).findIndex((k) => k === step);
if (!errorEstimated || realStep >= 2) {
return null;
}
return (
<Warning
warning={ errorEstimated } />
);
}
renderDialogActions () {
const { deployError, abiError, codeError, nameError, descriptionError, fromAddressError, fromAddress, step } = this.state;
const isValid = !nameError && !fromAddressError && !descriptionError && !abiError && !codeError;
const cancelBtn = (
<Button
icon={ <ContentClear /> }
label='Cancel'
icon={ <CancelIcon /> }
label={
<FormattedMessage
id='deployContract.button.cancel'
defaultMessage='Cancel' />
}
onClick={ this.onClose } />
);
const closeBtn = (
<Button
icon={ <ContentClear /> }
label='Close'
icon={ <CancelIcon /> }
label={
<FormattedMessage
id='deployContract.button.close'
defaultMessage='Close' />
}
onClick={ this.onClose } />
);
const closeBtnOk = (
<Button
icon={ <ActionDoneAll /> }
label='Close'
icon={ <DoneIcon /> }
label={
<FormattedMessage
id='deployContract.button.done'
defaultMessage='Done' />
}
onClick={ this.onClose } />
);
@@ -172,8 +235,16 @@ class DeployContract extends Component {
cancelBtn,
<Button
disabled={ !isValid }
icon={ <IdentityIcon button address={ fromAddress } /> }
label='Next'
icon={
<IdentityIcon
address={ fromAddress }
button />
}
label={
<FormattedMessage
id='deployContract.button.next'
defaultMessage='Next' />
}
onClick={ this.onParametersStep } />
];
@@ -181,8 +252,16 @@ class DeployContract extends Component {
return [
cancelBtn,
<Button
icon={ <IdentityIcon button address={ fromAddress } /> }
label='Create'
icon={
<IdentityIcon
address={ fromAddress }
button />
}
label={
<FormattedMessage
id='deployContract.button.create'
defaultMessage='Create' />
}
onClick={ this.onDeployStart } />
];
@@ -207,9 +286,16 @@ class DeployContract extends Component {
if (rejected) {
return (
<BusyStep
title='The deployment has been rejected'
state='You can safely close this window, the contract deployment will not occur.'
/>
title={
<FormattedMessage
id='deployContract.rejected.title'
defaultMessage='The deployment has been rejected' />
}
state={
<FormattedMessage
id='deployContract.rejected.description'
defaultMessage='You can safely close this window, the contract deployment will not occur.' />
} />
);
}
@@ -220,7 +306,6 @@ class DeployContract extends Component {
{ ...this.state }
accounts={ accounts }
balances={ balances }
readOnly={ readOnly }
onFromAddressChange={ this.onFromAddressChange }
onDescriptionChange={ this.onDescriptionChange }
onNameChange={ this.onNameChange }
@@ -228,6 +313,7 @@ class DeployContract extends Component {
onCodeChange={ this.onCodeChange }
onParamsChange={ this.onParamsChange }
onInputsChange={ this.onInputsChange }
readOnly={ readOnly }
/>
);
@@ -235,9 +321,9 @@ class DeployContract extends Component {
return (
<ParametersStep
{ ...this.state }
readOnly={ readOnly }
accounts={ accounts }
onParamsChange={ this.onParamsChange }
readOnly={ readOnly }
/>
);
@@ -247,7 +333,11 @@ class DeployContract extends Component {
: null;
return (
<BusyStep
title='The deployment is currently in progress'
title={
<FormattedMessage
id='deployContract.busy.title'
defaultMessage='The deployment is currently in progress' />
}
state={ deployState }>
{ body }
</BusyStep>
@@ -256,11 +346,21 @@ class DeployContract extends Component {
case 'COMPLETED':
return (
<CompletedStep>
<div>Your contract has been deployed at</div>
<div>
<CopyToClipboard data={ address } label='copy address to clipboard' />
<IdentityIcon address={ address } inline center className={ styles.identityicon } />
<div className={ styles.address }>{ address }</div>
<FormattedMessage
id='deployContract.completed.description'
defaultMessage='Your contract has been deployed at' />
</div>
<div>
<CopyToClipboard data={ address } />
<IdentityIcon
address={ address }
center
className={ styles.identityicon }
inline />
<div className={ styles.address }>
{ address }
</div>
</div>
<TxHash hash={ txhash } />
</CompletedStep>
@@ -268,6 +368,28 @@ class DeployContract extends Component {
}
}
estimateGas = () => {
const { api } = this.context;
const { abiError, abiParsed, code, codeError, fromAddress, fromAddressError, params } = this.state;
if (abiError || codeError || fromAddressError) {
return;
}
const options = {
data: code,
from: fromAddress
};
api
.newContract(abiParsed)
.deployEstimateGas(options, params)
.then(([gasEst, gas]) => {
this.gasStore.setEstimated(gasEst.toFixed(0));
this.gasStore.setGas(gas.toFixed(0));
});
}
onParametersStep = () => {
const { inputs } = this.state;
@@ -287,9 +409,13 @@ class DeployContract extends Component {
const fromAddressError = api.util.isAddressValid(fromAddress)
? null
: 'a valid account as the contract owner needs to be selected';
: (
<FormattedMessage
id='deployContract.owner.noneSelected'
defaultMessage='a valid account as the contract owner needs to be selected' />
);
this.setState({ fromAddress, fromAddressError });
this.setState({ fromAddress, fromAddressError }, this.estimateGas);
}
onNameChange = (name) => {
@@ -297,23 +423,23 @@ class DeployContract extends Component {
}
onParamsChange = (params) => {
this.setState({ params });
this.setState({ params }, this.estimateGas);
}
onInputsChange = (inputs) => {
this.setState({ inputs });
this.setState({ inputs }, this.estimateGas);
}
onAbiChange = (abi) => {
const { api } = this.context;
this.setState(validateAbi(abi, api));
this.setState(validateAbi(abi, api), this.estimateGas);
}
onCodeChange = (code) => {
const { api } = this.context;
this.setState(validateCode(code, api));
this.setState(validateCode(code, api), this.estimateGas);
}
onDeployStart = () => {
@@ -368,28 +494,54 @@ class DeployContract extends Component {
switch (data.state) {
case 'estimateGas':
case 'postTransaction':
this.setState({ deployState: 'Preparing transaction for network transmission' });
this.setState({
deployState:
<FormattedMessage
id='deployContract.state.preparing'
defaultMessage='Preparing transaction for network transmission' />
});
return;
case 'checkRequest':
this.setState({ deployState: 'Waiting for confirmation of the transaction in the Parity Secure Signer' });
this.setState({
deployState:
<FormattedMessage
id='deployContract.state.waitSigner'
defaultMessage='Waiting for confirmation of the transaction in the Parity Secure Signer' />
});
return;
case 'getTransactionReceipt':
this.setState({ deployState: 'Waiting for the contract deployment transaction receipt', txhash: data.txhash });
this.setState({
txhash: data.txhash,
deployState:
<FormattedMessage
id='deployContract.state.waitReceipt'
defaultMessage='Waiting for the contract deployment transaction receipt' />
});
return;
case 'hasReceipt':
case 'getCode':
this.setState({ deployState: 'Validating the deployed contract code' });
this.setState({
deployState:
<FormattedMessage
id='deployContract.state.validatingCode'
defaultMessage='Validating the deployed contract code' />
});
return;
case 'completed':
this.setState({ deployState: 'The contract deployment has been completed' });
this.setState({
deployState:
<FormattedMessage
id='deployContract.state.completed'
defaultMessage='The contract deployment has been completed' />
});
return;
default:
console.error('Unknow contract deployment state', data);
console.error('Unknown contract deployment state', data);
return;
}
}
@@ -404,11 +556,15 @@ function mapStateToProps (initState, initProps) {
return (state) => {
const balances = pick(state.balances.balances, fromAddresses);
return { balances };
const { gasLimit } = state.nodeStatus;
return {
balances,
gasLimit
};
};
}
export default connect(
mapStateToProps
)(DeployContract);