GasPrice selection for contract execution

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

@@ -15,13 +15,19 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import { MenuItem } from 'material-ui';
+import { Checkbox, MenuItem } from 'material-ui';
 
 import { AddressSelect, Form, Input, Select, TypedInput } from '~/ui';
 import { parseAbiType } from '~/util/abi';
 
 import styles from '../executeContract.css';
 
+const CHECK_STYLE = {
+  position: 'absolute',
+  top: '38px',
+  left: '1em'
+};
+
 export default class DetailsStep extends Component {
   static propTypes = {
     accounts: PropTypes.object.isRequired,
@@ -31,18 +37,20 @@ export default class DetailsStep extends Component {
     onAmountChange: PropTypes.func.isRequired,
     fromAddress: PropTypes.string,
     fromAddressError: PropTypes.string,
+    gasEdit: PropTypes.bool,
     onFromAddressChange: PropTypes.func.isRequired,
     func: PropTypes.object,
     funcError: PropTypes.string,
     onFuncChange: PropTypes.func,
+    onGasEditClick: PropTypes.func,
     values: PropTypes.array.isRequired,
     valuesError: PropTypes.array.isRequired,
     warning: PropTypes.string,
     onValueChange: PropTypes.func.isRequired
   }
 
   render () {
-    const { accounts, amount, amountError, fromAddress, fromAddressError, onFromAddressChange, onAmountChange } = this.props;
+    const { accounts, amount, amountError, fromAddress, fromAddressError, gasEdit, onGasEditClick, onFromAddressChange, onAmountChange } = this.props;
 
     return (
       <Form>
@@ -56,12 +64,23 @@ export default class DetailsStep extends Component {
           onChange={ onFromAddressChange } />
         { this.renderFunctionSelect() }
         { this.renderParameters() }
-        <Input
-          label='transaction value (in ETH)'
-          hint='the amount to send to with the transaction'
-          value={ amount }
-          error={ amountError }
-          onSubmit={ onAmountChange } />
+        <div className={ styles.columns }>
+          <div>
+            <Input
+              label='transaction value (in ETH)'
+              hint='the amount to send to with the transaction'
+              value={ amount }
+              error={ amountError }
+              onSubmit={ onAmountChange } />
+          </div>
+          <div>
+            <Checkbox
+              checked={ gasEdit }
+              label='edit gas price or value'
+              onCheck={ onGasEditClick }
+              style={ CHECK_STYLE } />
+          </div>
+        </div>
       </Form>
     );
   }

js/src/modals/ExecuteContract/executeContract.css

@@ -42,3 +42,15 @@
   padding: 0.75em;
   text-align: center;
 }
+
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+
+  &>div {
+    flex: 0 1 50%;
+    width: 50%;
+    position: relative;
+  }
+}