GasPrice selection for contract execution

js/src/ui/GasPriceEditor/gasPriceEditor.js

@@ -26,8 +26,11 @@ import styles from './gasPriceEditor.css';
 
 @observer
 export default class GasPriceEditor extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  };
+
   static propTypes = {
-    children: PropTypes.node,
     store: PropTypes.object.isRequired,
     onChange: PropTypes.func
   }
@@ -35,9 +38,11 @@ export default class GasPriceEditor extends Component {
   static Store = Store;
 
   render () {
-    const { children, store } = this.props;
-    const { estimated, priceDefault, price, gas, histogram, errorGas, errorPrice } = store;
+    const { api } = this.context;
+    const { store } = this.props;
+    const { estimated, priceDefault, price, gas, histogram, errorGas, errorPrice, errorTotal, totalValue } = store;
 
+    const eth = api.util.fromWei(totalValue).toFormat();
     const gasLabel = `gas (estimated: ${new BigNumber(estimated).toFormat()})`;
     const priceLabel = `price (current: ${new BigNumber(priceDefault).toFormat()})`;
 
@@ -75,7 +80,12 @@ export default class GasPriceEditor extends Component {
           </div>
 
           <div className={ styles.row }>
-            { children }
+            <Input
+              disabled
+              label='total transaction amount'
+              hint='the total amount of the transaction'
+              error={ errorTotal }
+              value={ `${eth} ETH` } />
           </div>
         </div>
       </div>

js/src/ui/GasPriceEditor/store.js

@@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import BigNumber from 'bignumber.js';
-import { action, observable, transaction } from 'mobx';
+import { action, computed, observable, transaction } from 'mobx';
 
 import { ERRORS, validatePositiveNumber } from '~/util/validation';
 import { DEFAULT_GAS, DEFAULT_GASPRICE, MAX_GAS_ESTIMATION } from '~/util/constants';
@@ -24,12 +24,14 @@ export default class GasPriceEditor {
   @observable errorEstimated = null;
   @observable errorGas = null;
   @observable errorPrice = null;
+  @observable errorTotal = null;
   @observable estimated = DEFAULT_GAS;
   @observable histogram = null;
   @observable price = DEFAULT_GASPRICE;
   @observable priceDefault = DEFAULT_GASPRICE;
   @observable gas = DEFAULT_GAS;
   @observable gasLimit = 0;
+  @observable weiValue = '0';
 
   constructor (api, gasLimit, loadDefaults = true) {
     this._api = api;
@@ -40,6 +42,18 @@ export default class GasPriceEditor {
     }
   }
 
+  @computed get totalValue () {
+    try {
+      return new BigNumber(this.gas).mul(this.price).add(this.weiValue);
+    } catch (error) {
+      return new BigNumber(0);
+    }
+  }
+
+  @action setErrorTotal = (errorTotal) => {
+    this.errorTotal = errorTotal;
+  }
+
   @action setEstimated = (estimated) => {
     transaction(() => {
       const bn = new BigNumber(estimated);
@@ -56,6 +70,10 @@ export default class GasPriceEditor {
     });
   }
 
+  @action setEthValue = (weiValue) => {
+    this.weiValue = weiValue;
+  }
+
   @action setHistogram = (gasHistogram) => {
     this.histogram = gasHistogram;
   }