Send value & contract execute gas limit warnings

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

@@ -36,6 +36,7 @@ export default class DetailsStep extends Component {
     onFuncChange: PropTypes.func,
     values: PropTypes.array.isRequired,
     valuesError: PropTypes.array.isRequired,
+    warning: PropTypes.string,
     onValueChange: PropTypes.func.isRequired
   }
 
@@ -44,6 +45,7 @@ export default class DetailsStep extends Component {
 
     return (
       <Form>
+        { this.renderWarning() }
         <AddressSelect
           label='from account'
           hint='the account to transact with'
@@ -178,6 +180,20 @@ 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.css

@@ -33,3 +33,12 @@
 .txhash {
   word-break: break-all;
 }
+
+.warning {
+  border-radius: 0.5em;
+  background: #f80;
+  color: white;
+  font-size: 0.75em;
+  padding: 0.75em;
+  text-align: center;
+}

js/src/modals/ExecuteContract/executeContract.js

@@ -15,17 +15,21 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
 import ContentClear from 'material-ui/svg-icons/content/clear';
 
 import { BusyStep, CompletedStep, Button, IdentityIcon, Modal, TxHash } from '../../ui';
+import { MAX_GAS_ESTIMATION } from '../../util/constants';
 import { validateAddress, validateUint } from '../../util/validation';
 
 import DetailsStep from './DetailsStep';
 
+import ERRORS from '../Transfer/errors';
 import { ERROR_CODES } from '../../api/transport/error';
 
-export default class ExecuteContract extends Component {
+class ExecuteContract extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired,
     store: PropTypes.object.isRequired
@@ -36,6 +40,7 @@ export default class ExecuteContract extends Component {
     fromAddress: PropTypes.string,
     accounts: PropTypes.object,
     contract: PropTypes.object,
+    gasLimit: PropTypes.object.isRequired,
     onClose: PropTypes.func.isRequired,
     onFromAddressChange: PropTypes.func.isRequired
   }
@@ -46,6 +51,8 @@ export default class ExecuteContract extends Component {
     fromAddressError: null,
     func: null,
     funcError: null,
+    gas: null,
+    gasLimitError: null,
     values: [],
     valuesError: [],
     step: 0,
@@ -64,6 +71,12 @@ export default class ExecuteContract extends Component {
     this.onFuncChange(null, functions[0]);
   }
 
+  componentWillReceiveProps (newProps) {
+    if (newProps.fromAddress !== this.props.fromAddress) {
+      this.estimateGas(newProps.fromAddress);
+    }
+  }
+
   render () {
     const { sending } = this.state;
 
@@ -119,7 +132,7 @@ export default class ExecuteContract extends Component {
 
   renderStep () {
     const { onFromAddressChange } = this.props;
-    const { step, busyState, txhash, rejected } = this.state;
+    const { step, busyState, gasLimitError, txhash, rejected } = this.state;
 
     if (rejected) {
       return (
@@ -135,6 +148,7 @@ export default class ExecuteContract extends Component {
         <DetailsStep
           { ...this.props }
           { ...this.state }
+          warning={ gasLimitError }
           onAmountChange={ this.onAmountChange }
           onFromAddressChange={ onFromAddressChange }
           onFuncChange={ this.onFuncChange }
@@ -156,7 +170,7 @@ export default class ExecuteContract extends Component {
   }
 
   onAmountChange = (amount) => {
-    this.setState({ amount });
+    this.setState({ amount }, this.estimateGas);
   }
 
   onFuncChange = (event, func) => {
@@ -182,7 +196,7 @@ export default class ExecuteContract extends Component {
     this.setState({
       func,
       values
-    });
+    }, this.estimateGas);
   }
 
   onValueChange = (event, index, _value) => {
@@ -211,14 +225,55 @@ export default class ExecuteContract extends Component {
     this.setState({
       values: [].concat(values),
       valuesError: [].concat(valuesError)
+    }, () => {
+      if (!valueError) {
+        this.estimateGas();
+      }
     });
   }
 
+  estimateGas = (_fromAddress) => {
+    const { api } = this.context;
+    const { fromAddress, gasLimit } = this.props;
+    const { amount, func, values } = this.state;
+    const options = {
+      gas: MAX_GAS_ESTIMATION,
+      from: _fromAddress || fromAddress,
+      value: api.util.toWei(amount || 0)
+    };
+
+    if (!func) {
+      return;
+    }
+
+    func
+      .estimateGas(options, values)
+      .then((gasEst) => {
+        const gas = gasEst.mul(1.2);
+        let gasLimitError = null;
+
+        if (gas.gte(MAX_GAS_ESTIMATION)) {
+          gasLimitError = ERRORS.gasException;
+        } else if (gas.gt(gasLimit)) {
+          gasLimitError = ERRORS.gasBlockLimit;
+        }
+
+        this.setState({
+          gas,
+          gasLimitError
+        });
+      })
+      .catch((error) => {
+        console.warn('estimateGas', error);
+      });
+  }
+
   postTransaction = () => {
     const { api, store } = this.context;
     const { fromAddress } = this.props;
     const { amount, func, values } = this.state;
     const options = {
+      gas: MAX_GAS_ESTIMATION,
       from: fromAddress,
       value: api.util.toWei(amount || 0)
     };
@@ -237,13 +292,13 @@ export default class ExecuteContract extends Component {
 
         return api
           .pollMethod('parity_checkRequest', requestId)
-          .catch((e) => {
-            if (e.code === ERROR_CODES.REQUEST_REJECTED) {
+          .catch((error) => {
+            if (error.code === ERROR_CODES.REQUEST_REJECTED) {
               this.setState({ rejected: true });
               return false;
             }
 
-            throw e;
+            throw error;
           });
       })
       .then((txhash) => {
@@ -255,3 +310,18 @@ export default class ExecuteContract extends Component {
       });
   }
 }
+
+function mapStateToProps (state) {
+  const { gasLimit } = state.nodeStatus;
+
+  return { gasLimit };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ExecuteContract);

js/src/modals/Transfer/errors.js

@@ -19,7 +19,9 @@ const ERRORS = {
   invalidAddress: 'the supplied address is an invalid network address',
   invalidAmount: 'the supplied amount should be a valid positive number',
   invalidDecimals: 'the supplied amount exceeds the allowed decimals',
-  largeAmount: 'the transaction total is higher than the available balance'
+  largeAmount: 'the transaction total is higher than the available balance',
+  gasException: 'the transaction will throw an exception with the current values',
+  gasBlockLimit: 'the transaction execution will exceed the block gas limit'
 };
 
 export default ERRORS;

js/src/modals/Transfer/transfer.css

@@ -14,6 +14,7 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 .info {
   line-height: 1.618em;
   width: 100%;
@@ -151,3 +152,13 @@
 .gasPriceDesc {
   font-size: 0.9em;
 }
+
+.warning {
+  border-radius: 0.5em;
+  background: #f80;
+  color: white;
+  font-size: 0.75em;
+  margin-bottom: 1em;
+  padding: 0.75em;
+  text-align: center;
+}