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

js/src/api/contract/contract.js

@@ -89,9 +89,15 @@ export default class Contract {
     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) => {
       if (!statecb) {
         return;
@@ -102,31 +108,32 @@ export default class Contract {
 
     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);
 
         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) => {
         setState({ state: 'getCode' });

js/src/modals/DeployContract/DetailsStep/detailsStep.js

@@ -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) => (
+    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 (
       <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);

js/src/modals/DeployContract/ParametersStep/parametersStep.js

@@ -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>
     );

js/src/modals/DeployContract/deployContract.js

@@ -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_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 {
   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 /> }
+        icon={ <CancelIcon /> }
-        label='Cancel'
+        label={
+          <FormattedMessage
+            id='deployContract.button.cancel'
+            defaultMessage='Cancel' />
+        }
         onClick={ this.onClose } />
     );
 
     const closeBtn = (
       <Button
-        icon={ <ContentClear /> }
+        icon={ <CancelIcon /> }
-        label='Close'
+        label={
+          <FormattedMessage
+            id='deployContract.button.close'
+            defaultMessage='Close' />
+        }
         onClick={ this.onClose } />
     );
 
     const closeBtnOk = (
       <Button
-        icon={ <ActionDoneAll /> }
+        icon={ <DoneIcon /> }
-        label='Close'
+        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 } /> }
+            icon={
-            label='Next'
+              <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 } /> }
+            icon={
-            label='Create'
+              <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'
+          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 }
             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' />
+              <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>
             <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);
-

js/src/modals/DeployContract/deployContract.spec.js

@@ -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;
+    });
+  });
+});

js/src/modals/ExecuteContract/DetailsStep/detailsStep.js

@@ -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;
 

js/src/modals/ExecuteContract/executeContract.js

@@ -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 }

js/src/modals/Transfer/transfer.js

@@ -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;