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
Gav Wood
parent
9529b6fa8c
commit
466f84f485
|
|
@ -89,9 +89,15 @@ export default class Contract {
|
|||
return this;
|
||||
}
|
||||
|
||||
deploy (options, values, statecb) {
|
||||
let gas;
|
||||
deployEstimateGas (options, values) {
|
||||
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) => {
|
||||
if (!statecb) {
|
||||
return;
|
||||
|
|
@ -102,31 +108,32 @@ export default class Contract {
|
|||
|
||||
setState({ state: 'estimateGas' });
|
||||
|
||||
return this._api.eth
|
||||
.estimateGas(this._encodeOptions(this.constructors[0], options, values))
|
||||
.then((_gas) => {
|
||||
gas = _gas.mul(1.2);
|
||||
return this
|
||||
.deployEstimateGas(options, values)
|
||||
.then(([gasEst, gas]) => {
|
||||
options.gas = gas.toFixed(0);
|
||||
|
||||
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 });
|
||||
this._address = receipt.contractAddress;
|
||||
return this._address;
|
||||
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 });
|
||||
this._address = receipt.contractAddress;
|
||||
return this._address;
|
||||
});
|
||||
})
|
||||
.then((address) => {
|
||||
setState({ state: 'getCode' });
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { MenuItem } from 'material-ui';
|
||||
|
||||
import { AddressSelect, Form, Input, Select } from '~/ui';
|
||||
|
|
@ -92,27 +93,51 @@ export default class DetailsStep extends Component {
|
|||
return (
|
||||
<Form>
|
||||
<AddressSelect
|
||||
label='from account (contract owner)'
|
||||
hint='the owner account for this contract'
|
||||
accounts={ accounts }
|
||||
balances={ balances }
|
||||
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 }
|
||||
value={ fromAddress }
|
||||
/>
|
||||
|
||||
<Input
|
||||
label='contract name'
|
||||
hint='a name for the deployed contract'
|
||||
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 }
|
||||
value={ name || '' }
|
||||
/>
|
||||
|
||||
<Input
|
||||
label='contract description (optional)'
|
||||
hint='a description for the contract'
|
||||
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 }
|
||||
value={ description }
|
||||
/>
|
||||
|
|
@ -120,18 +145,34 @@ export default class DetailsStep extends Component {
|
|||
{ this.renderContractSelect() }
|
||||
|
||||
<Input
|
||||
label='abi / solc combined-output'
|
||||
hint='the abi of the contract to deploy or solc combined-output'
|
||||
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 }
|
||||
onSubmit={ this.onSolcSubmit }
|
||||
readOnly={ readOnly }
|
||||
value={ solcOutput }
|
||||
/>
|
||||
<Input
|
||||
label='code'
|
||||
hint='the compiled code of the contract to deploy'
|
||||
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 }
|
||||
readOnly={ readOnly || solc }
|
||||
value={ code }
|
||||
|
|
@ -149,22 +190,26 @@ export default class DetailsStep extends Component {
|
|||
}
|
||||
|
||||
const { selectedContractIndex } = this.state;
|
||||
const contractsItems = Object.keys(contracts).map((name, index) => (
|
||||
<MenuItem
|
||||
key={ index }
|
||||
label={ name }
|
||||
value={ index }
|
||||
>
|
||||
{ name }
|
||||
</MenuItem>
|
||||
));
|
||||
const contractsItems = Object
|
||||
.keys(contracts)
|
||||
.map((name, index) => (
|
||||
<MenuItem
|
||||
key={ index }
|
||||
label={ name }
|
||||
value={ index }>
|
||||
{ name }
|
||||
</MenuItem>
|
||||
));
|
||||
|
||||
return (
|
||||
<Select
|
||||
label='select a contract'
|
||||
label={
|
||||
<FormattedMessage
|
||||
id='deployContract.details.contract.label'
|
||||
defaultMessage='select a contract' />
|
||||
}
|
||||
onChange={ this.onContractChange }
|
||||
value={ selectedContractIndex }
|
||||
>
|
||||
value={ selectedContractIndex }>
|
||||
{ contractsItems }
|
||||
</Select>
|
||||
);
|
||||
|
|
@ -180,7 +225,9 @@ export default class DetailsStep extends Component {
|
|||
}
|
||||
|
||||
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.onAbiChange(abi);
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Component, PropTypes } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import { Form, TypedInput } from '~/ui';
|
||||
import { parseAbiType } from '~/util/abi';
|
||||
|
|
@ -77,21 +78,24 @@ export default class ParametersStep extends Component {
|
|||
return (
|
||||
<div key={ index } className={ styles.funcparams }>
|
||||
<TypedInput
|
||||
label={ label }
|
||||
value={ value }
|
||||
error={ error }
|
||||
accounts={ accounts }
|
||||
error={ error }
|
||||
isEth={ false }
|
||||
label={ label }
|
||||
onChange={ onChange }
|
||||
param={ param }
|
||||
isEth={ false }
|
||||
/>
|
||||
value={ value } />
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>Choose the contract parameters</p>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id='deployContract.parameters.choose'
|
||||
defaultMessage='Choose the contract parameters' />
|
||||
</p>
|
||||
{ inputsComponents }
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -55,7 +55,6 @@ export default class DetailsStep extends Component {
|
|||
|
||||
return (
|
||||
<Form>
|
||||
{ this.renderWarning() }
|
||||
<AddressSelect
|
||||
accounts={ accounts }
|
||||
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) => {
|
||||
const { contract, onFuncChange } = this.props;
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import { connect } from 'react-redux';
|
|||
import { bindActionCreators } from 'redux';
|
||||
|
||||
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 { MAX_GAS_ESTIMATION } from '~/util/constants';
|
||||
import { validateAddress, validateUint } from '~/util/validation';
|
||||
|
|
@ -131,12 +131,31 @@ class ExecuteContract extends Component {
|
|||
current={ step }
|
||||
steps={ steps }
|
||||
visible
|
||||
waiting={ advancedOptions ? [STEP_BUSY] : [STEP_BUSY_OR_ADVANCED] }>
|
||||
waiting={
|
||||
advancedOptions
|
||||
? [STEP_BUSY]
|
||||
: [STEP_BUSY_OR_ADVANCED]
|
||||
}>
|
||||
{ this.renderExceptionWarning() }
|
||||
{ this.renderStep() }
|
||||
</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 () {
|
||||
const { onClose, fromAddress } = this.props;
|
||||
const { advancedOptions, sending, step, fromAddressError, minBlockError, valuesError } = this.state;
|
||||
|
|
@ -221,7 +240,6 @@ class ExecuteContract extends Component {
|
|||
renderStep () {
|
||||
const { onFromAddressChange } = this.props;
|
||||
const { advancedOptions, step, busyState, minBlock, minBlockError, txhash, rejected } = this.state;
|
||||
const { errorEstimated } = this.gasStore;
|
||||
|
||||
if (rejected) {
|
||||
return (
|
||||
|
|
@ -244,7 +262,6 @@ class ExecuteContract extends Component {
|
|||
<DetailsStep
|
||||
{ ...this.props }
|
||||
{ ...this.state }
|
||||
warning={ errorEstimated }
|
||||
onAmountChange={ this.onAmountChange }
|
||||
onFromAddressChange={ onFromAddressChange }
|
||||
onFuncChange={ this.onFuncChange }
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { bindActionCreators } from 'redux';
|
|||
import { observer } from 'mobx-react';
|
||||
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 { CancelIcon, DoneIcon, NextIcon, PrevIcon } from '~/ui/Icons';
|
||||
import { nullableProptype } from '~/util/proptypes';
|
||||
|
|
@ -31,6 +31,10 @@ import Extras from './Extras';
|
|||
import TransferStore from './store';
|
||||
import styles from './transfer.css';
|
||||
|
||||
const STEP_DETAILS = 0;
|
||||
const STEP_ADVANCED_OR_BUSY = 1;
|
||||
const STEP_BUSY = 2;
|
||||
|
||||
@observer
|
||||
class Transfer extends Component {
|
||||
static contextTypes = {
|
||||
|
|
@ -60,15 +64,33 @@ class Transfer extends Component {
|
|||
actions={ this.renderDialogActions() }
|
||||
current={ stage }
|
||||
steps={ steps }
|
||||
waiting={ extras ? [2] : [1] }
|
||||
waiting={
|
||||
extras
|
||||
? [STEP_BUSY]
|
||||
: [STEP_ADVANCED_OR_BUSY]
|
||||
}
|
||||
visible
|
||||
>
|
||||
{ this.renderWarning() }
|
||||
{ this.renderExceptionWarning() }
|
||||
{ this.renderPage() }
|
||||
</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 () {
|
||||
const { account } = this.props;
|
||||
|
||||
|
|
@ -95,9 +117,9 @@ class Transfer extends Component {
|
|||
renderPage () {
|
||||
const { extras, stage } = this.store;
|
||||
|
||||
if (stage === 0) {
|
||||
if (stage === STEP_DETAILS) {
|
||||
return this.renderDetailsPage();
|
||||
} else if (stage === 1 && extras) {
|
||||
} else if (stage === STEP_ADVANCED_OR_BUSY && extras) {
|
||||
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 = () => {
|
||||
const { onClose } = this.props;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue