Gas exception warnings on deployment (#3938)

* 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

View File

@ -89,9 +89,15 @@ export default class Contract {
return this; return this;
} }
deploy (options, values, statecb) { deployEstimateGas (options, values) {
let gas; return this._api.eth
.estimateGas(this._encodeOptions(this.constructors[0], options, values))
.then((gasEst) => {
return [gasEst, gasEst.mul(1.2)];
});
}
deploy (options, values, statecb) {
const setState = (state) => { const setState = (state) => {
if (!statecb) { if (!statecb) {
return; return;
@ -102,31 +108,32 @@ export default class Contract {
setState({ state: 'estimateGas' }); setState({ state: 'estimateGas' });
return this._api.eth return this
.estimateGas(this._encodeOptions(this.constructors[0], options, values)) .deployEstimateGas(options, values)
.then((_gas) => { .then(([gasEst, gas]) => {
gas = _gas.mul(1.2);
options.gas = gas.toFixed(0); options.gas = gas.toFixed(0);
setState({ state: 'postTransaction', gas }); setState({ state: 'postTransaction', gas });
return this._api.parity.postTransaction(this._encodeOptions(this.constructors[0], options, values));
})
.then((requestId) => {
setState({ state: 'checkRequest', requestId });
return this._pollCheckRequest(requestId);
})
.then((txhash) => {
setState({ state: 'getTransactionReceipt', txhash });
return this._pollTransactionReceipt(txhash, gas);
})
.then((receipt) => {
if (receipt.gasUsed.eq(gas)) {
throw new Error(`Contract not deployed, gasUsed == ${gas.toFixed(0)}`);
}
setState({ state: 'hasReceipt', receipt }); return this._api.parity
this._address = receipt.contractAddress; .postTransaction(this._encodeOptions(this.constructors[0], options, values))
return this._address; .then((requestId) => {
setState({ state: 'checkRequest', requestId });
return this._pollCheckRequest(requestId);
})
.then((txhash) => {
setState({ state: 'getTransactionReceipt', txhash });
return this._pollTransactionReceipt(txhash, gas);
})
.then((receipt) => {
if (receipt.gasUsed.eq(gas)) {
throw new Error(`Contract not deployed, gasUsed == ${gas.toFixed(0)}`);
}
setState({ state: 'hasReceipt', receipt });
this._address = receipt.contractAddress;
return this._address;
});
}) })
.then((address) => { .then((address) => {
setState({ state: 'getCode' }); setState({ state: 'getCode' });

View File

@ -15,6 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { MenuItem } from 'material-ui'; import { MenuItem } from 'material-ui';
import { AddressSelect, Form, Input, Select } from '~/ui'; import { AddressSelect, Form, Input, Select } from '~/ui';
@ -92,27 +93,51 @@ export default class DetailsStep extends Component {
return ( return (
<Form> <Form>
<AddressSelect <AddressSelect
label='from account (contract owner)'
hint='the owner account for this contract'
accounts={ accounts } accounts={ accounts }
balances={ balances } balances={ balances }
error={ fromAddressError } error={ fromAddressError }
hint={
<FormattedMessage
id='deployContract.details.address.hint'
defaultMessage='the owner account for this contract' />
}
label={
<FormattedMessage
id='deployContract.details.address.label'
defaultMessage='from account (contract owner)' />
}
onChange={ this.onFromAddressChange } onChange={ this.onFromAddressChange }
value={ fromAddress } value={ fromAddress }
/> />
<Input <Input
label='contract name'
hint='a name for the deployed contract'
error={ nameError } error={ nameError }
hint={
<FormattedMessage
id='deployContract.details.name.hint'
defaultMessage='a name for the deployed contract' />
}
label={
<FormattedMessage
id='deployContract.details.name.label'
defaultMessage='contract name' />
}
onChange={ this.onNameChange } onChange={ this.onNameChange }
value={ name || '' } value={ name || '' }
/> />
<Input <Input
label='contract description (optional)'
hint='a description for the contract'
error={ descriptionError } error={ descriptionError }
hint={
<FormattedMessage
id='deployContract.details.description.hint'
defaultMessage='a description for the contract' />
}
label={
<FormattedMessage
id='deployContract.details.description.label'
defaultMessage='contract description (optional)' />
}
onChange={ this.onDescriptionChange } onChange={ this.onDescriptionChange }
value={ description } value={ description }
/> />
@ -120,18 +145,34 @@ export default class DetailsStep extends Component {
{ this.renderContractSelect() } { this.renderContractSelect() }
<Input <Input
label='abi / solc combined-output'
hint='the abi of the contract to deploy or solc combined-output'
error={ abiError } error={ abiError }
hint={
<FormattedMessage
id='deployContract.details.abi.hint'
defaultMessage='the abi of the contract to deploy or solc combined-output' />
}
label={
<FormattedMessage
id='deployContract.details.abi.label'
defaultMessage='abi / solc combined-output' />
}
onChange={ this.onSolcChange } onChange={ this.onSolcChange }
onSubmit={ this.onSolcSubmit } onSubmit={ this.onSolcSubmit }
readOnly={ readOnly } readOnly={ readOnly }
value={ solcOutput } value={ solcOutput }
/> />
<Input <Input
label='code'
hint='the compiled code of the contract to deploy'
error={ codeError } error={ codeError }
hint={
<FormattedMessage
id='deployContract.details.code.hint'
defaultMessage='the compiled code of the contract to deploy' />
}
label={
<FormattedMessage
id='deployContract.details.code.label'
defaultMessage='code' />
}
onSubmit={ this.onCodeChange } onSubmit={ this.onCodeChange }
readOnly={ readOnly || solc } readOnly={ readOnly || solc }
value={ code } value={ code }
@ -149,22 +190,26 @@ export default class DetailsStep extends Component {
} }
const { selectedContractIndex } = this.state; const { selectedContractIndex } = this.state;
const contractsItems = Object.keys(contracts).map((name, index) => ( const contractsItems = Object
<MenuItem .keys(contracts)
key={ index } .map((name, index) => (
label={ name } <MenuItem
value={ index } key={ index }
> label={ name }
{ name } value={ index }>
</MenuItem> { name }
)); </MenuItem>
));
return ( return (
<Select <Select
label='select a contract' label={
<FormattedMessage
id='deployContract.details.contract.label'
defaultMessage='select a contract' />
}
onChange={ this.onContractChange } onChange={ this.onContractChange }
value={ selectedContractIndex } value={ selectedContractIndex }>
>
{ contractsItems } { contractsItems }
</Select> </Select>
); );
@ -180,7 +225,9 @@ export default class DetailsStep extends Component {
} }
const { abi, bin } = contract; const { abi, bin } = contract;
const code = /^0x/.test(bin) ? bin : `0x${bin}`; const code = /^0x/.test(bin)
? bin
: `0x${bin}`;
this.setState({ selectedContractIndex: index }, () => { this.setState({ selectedContractIndex: index }, () => {
this.onAbiChange(abi); this.onAbiChange(abi);

View File

@ -30,6 +30,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { Form, TypedInput } from '~/ui'; import { Form, TypedInput } from '~/ui';
import { parseAbiType } from '~/util/abi'; import { parseAbiType } from '~/util/abi';
@ -77,21 +78,24 @@ export default class ParametersStep extends Component {
return ( return (
<div key={ index } className={ styles.funcparams }> <div key={ index } className={ styles.funcparams }>
<TypedInput <TypedInput
label={ label }
value={ value }
error={ error }
accounts={ accounts } accounts={ accounts }
error={ error }
isEth={ false }
label={ label }
onChange={ onChange } onChange={ onChange }
param={ param } param={ param }
isEth={ false } value={ value } />
/>
</div> </div>
); );
}); });
return ( return (
<div> <div>
<p>Choose the contract parameters</p> <p>
<FormattedMessage
id='deployContract.parameters.choose'
defaultMessage='Choose the contract parameters' />
</p>
{ inputsComponents } { inputsComponents }
</div> </div>
); );

View File

@ -14,13 +14,14 @@
// You should have received a copy of the GNU General Public License // You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // 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 { 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 { ERRORS, validateAbi, validateCode, validateName } from '~/util/validation';
import DetailsStep from './DetailsStep'; import DetailsStep from './DetailsStep';
@ -32,12 +33,34 @@ import styles from './deployContract.css';
import { ERROR_CODES } from '~/api/transport/error'; import { ERROR_CODES } from '~/api/transport/error';
const STEPS = { const STEPS = {
CONTRACT_DETAILS: { title: 'contract details' }, CONTRACT_DETAILS: {
CONTRACT_PARAMETERS: { title: 'contract parameters' }, title:
DEPLOYMENT: { title: 'deployment', waiting: true }, <FormattedMessage
COMPLETED: { title: 'completed' } 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 { class DeployContract extends Component {
static contextTypes = { static contextTypes = {
api: PropTypes.object.isRequired, api: PropTypes.object.isRequired,
@ -46,10 +69,11 @@ class DeployContract extends Component {
static propTypes = { static propTypes = {
accounts: PropTypes.object.isRequired, accounts: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
balances: PropTypes.object,
abi: PropTypes.string, abi: PropTypes.string,
balances: PropTypes.object,
code: PropTypes.string, code: PropTypes.string,
gasLimit: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
readOnly: PropTypes.bool, readOnly: PropTypes.bool,
source: PropTypes.string source: PropTypes.string
}; };
@ -59,11 +83,15 @@ class DeployContract extends Component {
source: '' source: ''
}; };
gasStore = new GasPriceEditor.Store(this.context.api, { gasLimit: this.props.gasLimit });
state = { state = {
abi: '', abi: '',
abiError: ERRORS.invalidAbi, abiError: ERRORS.invalidAbi,
code: '', code: '',
codeError: ERRORS.invalidCode, codeError: ERRORS.invalidCode,
deployState: '',
deployError: null,
description: '', description: '',
descriptionError: null, descriptionError: null,
fromAddress: Object.keys(this.props.accounts)[0], fromAddress: Object.keys(this.props.accounts)[0],
@ -73,9 +101,6 @@ class DeployContract extends Component {
params: [], params: [],
paramsError: [], paramsError: [],
inputs: [], inputs: [],
deployState: '',
deployError: null,
rejected: false, rejected: false,
step: 'CONTRACT_DETAILS' step: 'CONTRACT_DETAILS'
} }
@ -117,7 +142,14 @@ class DeployContract extends Component {
const title = realSteps const title = realSteps
? null ? null
: (deployError ? 'deployment failed' : 'rejected'); : (deployError
? <FormattedMessage
id='deployContract.title.failed'
defaultMessage='deployment failed' />
: <FormattedMessage
id='deployContract.title.rejected'
defaultMessage='rejected' />
);
const waiting = realSteps const waiting = realSteps
? realSteps.map((s, i) => s.waiting ? i : false).filter((v) => v !== false) ? realSteps.map((s, i) => s.waiting ? i : false).filter((v) => v !== false)
@ -127,38 +159,69 @@ class DeployContract extends Component {
<Modal <Modal
actions={ this.renderDialogActions() } actions={ this.renderDialogActions() }
current={ realStep } current={ realStep }
steps={ realSteps ? realSteps.map((s) => s.title) : null } steps={
realSteps
? realSteps.map((s) => s.title)
: null
}
title={ title } title={ title }
waiting={ waiting }
visible visible
> waiting={ waiting }>
{ this.renderExceptionWarning() }
{ this.renderStep() } { this.renderStep() }
</Modal> </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 () { renderDialogActions () {
const { deployError, abiError, codeError, nameError, descriptionError, fromAddressError, fromAddress, step } = this.state; const { deployError, abiError, codeError, nameError, descriptionError, fromAddressError, fromAddress, step } = this.state;
const isValid = !nameError && !fromAddressError && !descriptionError && !abiError && !codeError; const isValid = !nameError && !fromAddressError && !descriptionError && !abiError && !codeError;
const cancelBtn = ( const cancelBtn = (
<Button <Button
icon={ <ContentClear /> } icon={ <CancelIcon /> }
label='Cancel' label={
<FormattedMessage
id='deployContract.button.cancel'
defaultMessage='Cancel' />
}
onClick={ this.onClose } /> onClick={ this.onClose } />
); );
const closeBtn = ( const closeBtn = (
<Button <Button
icon={ <ContentClear /> } icon={ <CancelIcon /> }
label='Close' label={
<FormattedMessage
id='deployContract.button.close'
defaultMessage='Close' />
}
onClick={ this.onClose } /> onClick={ this.onClose } />
); );
const closeBtnOk = ( const closeBtnOk = (
<Button <Button
icon={ <ActionDoneAll /> } icon={ <DoneIcon /> }
label='Close' label={
<FormattedMessage
id='deployContract.button.done'
defaultMessage='Done' />
}
onClick={ this.onClose } /> onClick={ this.onClose } />
); );
@ -172,8 +235,16 @@ class DeployContract extends Component {
cancelBtn, cancelBtn,
<Button <Button
disabled={ !isValid } disabled={ !isValid }
icon={ <IdentityIcon button address={ fromAddress } /> } icon={
label='Next' <IdentityIcon
address={ fromAddress }
button />
}
label={
<FormattedMessage
id='deployContract.button.next'
defaultMessage='Next' />
}
onClick={ this.onParametersStep } /> onClick={ this.onParametersStep } />
]; ];
@ -181,8 +252,16 @@ class DeployContract extends Component {
return [ return [
cancelBtn, cancelBtn,
<Button <Button
icon={ <IdentityIcon button address={ fromAddress } /> } icon={
label='Create' <IdentityIcon
address={ fromAddress }
button />
}
label={
<FormattedMessage
id='deployContract.button.create'
defaultMessage='Create' />
}
onClick={ this.onDeployStart } /> onClick={ this.onDeployStart } />
]; ];
@ -207,9 +286,16 @@ class DeployContract extends Component {
if (rejected) { if (rejected) {
return ( return (
<BusyStep <BusyStep
title='The deployment has been rejected' title={
state='You can safely close this window, the contract deployment will not occur.' <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 } { ...this.state }
accounts={ accounts } accounts={ accounts }
balances={ balances } balances={ balances }
readOnly={ readOnly }
onFromAddressChange={ this.onFromAddressChange } onFromAddressChange={ this.onFromAddressChange }
onDescriptionChange={ this.onDescriptionChange } onDescriptionChange={ this.onDescriptionChange }
onNameChange={ this.onNameChange } onNameChange={ this.onNameChange }
@ -228,6 +313,7 @@ class DeployContract extends Component {
onCodeChange={ this.onCodeChange } onCodeChange={ this.onCodeChange }
onParamsChange={ this.onParamsChange } onParamsChange={ this.onParamsChange }
onInputsChange={ this.onInputsChange } onInputsChange={ this.onInputsChange }
readOnly={ readOnly }
/> />
); );
@ -235,9 +321,9 @@ class DeployContract extends Component {
return ( return (
<ParametersStep <ParametersStep
{ ...this.state } { ...this.state }
readOnly={ readOnly }
accounts={ accounts } accounts={ accounts }
onParamsChange={ this.onParamsChange } onParamsChange={ this.onParamsChange }
readOnly={ readOnly }
/> />
); );
@ -247,7 +333,11 @@ class DeployContract extends Component {
: null; : null;
return ( return (
<BusyStep <BusyStep
title='The deployment is currently in progress' title={
<FormattedMessage
id='deployContract.busy.title'
defaultMessage='The deployment is currently in progress' />
}
state={ deployState }> state={ deployState }>
{ body } { body }
</BusyStep> </BusyStep>
@ -256,11 +346,21 @@ class DeployContract extends Component {
case 'COMPLETED': case 'COMPLETED':
return ( return (
<CompletedStep> <CompletedStep>
<div>Your contract has been deployed at</div>
<div> <div>
<CopyToClipboard data={ address } label='copy address to clipboard' /> <FormattedMessage
<IdentityIcon address={ address } inline center className={ styles.identityicon } /> id='deployContract.completed.description'
<div className={ styles.address }>{ address }</div> 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> </div>
<TxHash hash={ txhash } /> <TxHash hash={ txhash } />
</CompletedStep> </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 = () => { onParametersStep = () => {
const { inputs } = this.state; const { inputs } = this.state;
@ -287,9 +409,13 @@ class DeployContract extends Component {
const fromAddressError = api.util.isAddressValid(fromAddress) const fromAddressError = api.util.isAddressValid(fromAddress)
? null ? 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) => { onNameChange = (name) => {
@ -297,23 +423,23 @@ class DeployContract extends Component {
} }
onParamsChange = (params) => { onParamsChange = (params) => {
this.setState({ params }); this.setState({ params }, this.estimateGas);
} }
onInputsChange = (inputs) => { onInputsChange = (inputs) => {
this.setState({ inputs }); this.setState({ inputs }, this.estimateGas);
} }
onAbiChange = (abi) => { onAbiChange = (abi) => {
const { api } = this.context; const { api } = this.context;
this.setState(validateAbi(abi, api)); this.setState(validateAbi(abi, api), this.estimateGas);
} }
onCodeChange = (code) => { onCodeChange = (code) => {
const { api } = this.context; const { api } = this.context;
this.setState(validateCode(code, api)); this.setState(validateCode(code, api), this.estimateGas);
} }
onDeployStart = () => { onDeployStart = () => {
@ -368,28 +494,54 @@ class DeployContract extends Component {
switch (data.state) { switch (data.state) {
case 'estimateGas': case 'estimateGas':
case 'postTransaction': 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; return;
case 'checkRequest': 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; return;
case 'getTransactionReceipt': 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; return;
case 'hasReceipt': case 'hasReceipt':
case 'getCode': 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; return;
case 'completed': 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; return;
default: default:
console.error('Unknow contract deployment state', data); console.error('Unknown contract deployment state', data);
return; return;
} }
} }
@ -404,11 +556,15 @@ function mapStateToProps (initState, initProps) {
return (state) => { return (state) => {
const balances = pick(state.balances.balances, fromAddresses); const balances = pick(state.balances.balances, fromAddresses);
return { balances }; const { gasLimit } = state.nodeStatus;
return {
balances,
gasLimit
};
}; };
} }
export default connect( export default connect(
mapStateToProps mapStateToProps
)(DeployContract); )(DeployContract);

View File

@ -0,0 +1,54 @@
// Copyright 2015, 2016 Parity Technologies (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 BigNumber from 'bignumber.js';
import { shallow } from 'enzyme';
import React from 'react';
import sinon from 'sinon';
import DeployContract from './';
const STORE = {
dispatch: sinon.stub(),
subscribe: sinon.stub(),
getState: () => {
return {
balances: {
balances: {}
},
nodeStatus: {
gasLimit: new BigNumber(0x12345)
}
};
}
};
function renderShallow () {
return shallow(
<DeployContract
accounts={ {} }
store={ STORE }
onClose={ sinon.stub() } />
);
}
describe('modals/DeployContract', () => {
describe('rendering', () => {
it('renders defaults', () => {
expect(renderShallow()).to.be.ok;
});
});
});

View File

@ -55,7 +55,6 @@ export default class DetailsStep extends Component {
return ( return (
<Form> <Form>
{ this.renderWarning() }
<AddressSelect <AddressSelect
accounts={ accounts } accounts={ accounts }
balances={ balances } balances={ balances }
@ -197,20 +196,6 @@ export default class DetailsStep extends Component {
}); });
} }
renderWarning () {
const { warning } = this.props;
if (!warning) {
return null;
}
return (
<div className={ styles.warning }>
{ warning }
</div>
);
}
onFuncChange = (event, index, signature) => { onFuncChange = (event, index, signature) => {
const { contract, onFuncChange } = this.props; const { contract, onFuncChange } = this.props;

View File

@ -23,7 +23,7 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { toWei } from '~/api/util/wei'; import { toWei } from '~/api/util/wei';
import { BusyStep, Button, CompletedStep, GasPriceEditor, IdentityIcon, Modal, TxHash } from '~/ui'; import { BusyStep, Button, CompletedStep, GasPriceEditor, IdentityIcon, Modal, TxHash, Warning } from '~/ui';
import { CancelIcon, DoneIcon, NextIcon, PrevIcon } from '~/ui/Icons'; import { CancelIcon, DoneIcon, NextIcon, PrevIcon } from '~/ui/Icons';
import { MAX_GAS_ESTIMATION } from '~/util/constants'; import { MAX_GAS_ESTIMATION } from '~/util/constants';
import { validateAddress, validateUint } from '~/util/validation'; import { validateAddress, validateUint } from '~/util/validation';
@ -131,12 +131,31 @@ class ExecuteContract extends Component {
current={ step } current={ step }
steps={ steps } steps={ steps }
visible visible
waiting={ advancedOptions ? [STEP_BUSY] : [STEP_BUSY_OR_ADVANCED] }> waiting={
advancedOptions
? [STEP_BUSY]
: [STEP_BUSY_OR_ADVANCED]
}>
{ this.renderExceptionWarning() }
{ this.renderStep() } { this.renderStep() }
</Modal> </Modal>
); );
} }
renderExceptionWarning () {
const { gasEdit, step } = this.state;
const { errorEstimated } = this.gasStore;
if (!errorEstimated || step >= (gasEdit ? STEP_BUSY : STEP_BUSY_OR_ADVANCED)) {
return null;
}
return (
<Warning
warning={ errorEstimated } />
);
}
renderDialogActions () { renderDialogActions () {
const { onClose, fromAddress } = this.props; const { onClose, fromAddress } = this.props;
const { advancedOptions, sending, step, fromAddressError, minBlockError, valuesError } = this.state; const { advancedOptions, sending, step, fromAddressError, minBlockError, valuesError } = this.state;
@ -221,7 +240,6 @@ class ExecuteContract extends Component {
renderStep () { renderStep () {
const { onFromAddressChange } = this.props; const { onFromAddressChange } = this.props;
const { advancedOptions, step, busyState, minBlock, minBlockError, txhash, rejected } = this.state; const { advancedOptions, step, busyState, minBlock, minBlockError, txhash, rejected } = this.state;
const { errorEstimated } = this.gasStore;
if (rejected) { if (rejected) {
return ( return (
@ -244,7 +262,6 @@ class ExecuteContract extends Component {
<DetailsStep <DetailsStep
{ ...this.props } { ...this.props }
{ ...this.state } { ...this.state }
warning={ errorEstimated }
onAmountChange={ this.onAmountChange } onAmountChange={ this.onAmountChange }
onFromAddressChange={ onFromAddressChange } onFromAddressChange={ onFromAddressChange }
onFuncChange={ this.onFuncChange } onFuncChange={ this.onFuncChange }

View File

@ -20,7 +20,7 @@ import { bindActionCreators } from 'redux';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { pick } from 'lodash'; import { pick } from 'lodash';
import { BusyStep, CompletedStep, Button, IdentityIcon, Modal, TxHash, Input } from '~/ui'; import { BusyStep, CompletedStep, Button, IdentityIcon, Input, Modal, TxHash, Warning } from '~/ui';
import { newError } from '~/ui/Errors/actions'; import { newError } from '~/ui/Errors/actions';
import { CancelIcon, DoneIcon, NextIcon, PrevIcon } from '~/ui/Icons'; import { CancelIcon, DoneIcon, NextIcon, PrevIcon } from '~/ui/Icons';
import { nullableProptype } from '~/util/proptypes'; import { nullableProptype } from '~/util/proptypes';
@ -31,6 +31,10 @@ import Extras from './Extras';
import TransferStore from './store'; import TransferStore from './store';
import styles from './transfer.css'; import styles from './transfer.css';
const STEP_DETAILS = 0;
const STEP_ADVANCED_OR_BUSY = 1;
const STEP_BUSY = 2;
@observer @observer
class Transfer extends Component { class Transfer extends Component {
static contextTypes = { static contextTypes = {
@ -60,15 +64,33 @@ class Transfer extends Component {
actions={ this.renderDialogActions() } actions={ this.renderDialogActions() }
current={ stage } current={ stage }
steps={ steps } steps={ steps }
waiting={ extras ? [2] : [1] } waiting={
extras
? [STEP_BUSY]
: [STEP_ADVANCED_OR_BUSY]
}
visible visible
> >
{ this.renderWarning() } { this.renderExceptionWarning() }
{ this.renderPage() } { this.renderPage() }
</Modal> </Modal>
); );
} }
renderExceptionWarning () {
const { extras, stage } = this.store;
const { errorEstimated } = this.store.gasStore;
if (!errorEstimated || stage >= (extras ? STEP_BUSY : STEP_ADVANCED_OR_BUSY)) {
return null;
}
return (
<Warning
warning={ errorEstimated } />
);
}
renderAccount () { renderAccount () {
const { account } = this.props; const { account } = this.props;
@ -95,9 +117,9 @@ class Transfer extends Component {
renderPage () { renderPage () {
const { extras, stage } = this.store; const { extras, stage } = this.store;
if (stage === 0) { if (stage === STEP_DETAILS) {
return this.renderDetailsPage(); return this.renderDetailsPage();
} else if (stage === 1 && extras) { } else if (stage === STEP_ADVANCED_OR_BUSY && extras) {
return this.renderExtrasPage(); return this.renderExtrasPage();
} }
@ -251,20 +273,6 @@ class Transfer extends Component {
} }
} }
renderWarning () {
const { errorEstimated } = this.store.gasStore;
if (!errorEstimated) {
return null;
}
return (
<div className={ styles.warning }>
{ errorEstimated }
</div>
);
}
handleClose = () => { handleClose = () => {
const { onClose } = this.props; const { onClose } = this.props;