Graphical gas price selection (#2898)

* Added gasPriceStatistics

* WIP graph fas price stats (#2142)

* Chart to select gas price in Extra Tx (#2142)

* Gas Selection UI

* Gas Price Selection: better UI (right octiles, point on graph) (#2142)

* Gas Price Selection chart update using D3 (#2142)

* Working UI, more fluid... (#2142)

* Using the new gasPriceHistogram Call: display histogram (#2142)

* Code Clean

* Updated gas Selection explaination

* PR grumble // Gas Price Selector (#2898)

* Fixing linting issues

js/src/modals/Transfer/Extras/extras.js

@@ -17,6 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 
 import Form, { Input } from '../../../ui/Form';
+import GasPriceSelector from '../GasPriceSelector';
 
 import styles from '../transfer.css';
 
@@ -28,50 +29,83 @@ export default class Extras extends Component {
     gas: PropTypes.string,
     gasEst: PropTypes.string,
     gasError: PropTypes.string,
-    gasPrice: PropTypes.string,
+    gasPrice: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object
+    ]),
     gasPriceDefault: PropTypes.string,
     gasPriceError: PropTypes.string,
+    gasPriceHistogram: PropTypes.object,
     total: PropTypes.string,
     totalError: PropTypes.string,
     onChange: PropTypes.func.isRequired
   }
 
   render () {
-    const { gas, gasError, gasEst, gasPrice, gasPriceDefault, gasPriceError, total, totalError } = this.props;
+    const { gas, gasPrice, gasError, gasEst, gasPriceDefault, gasPriceError, gasPriceHistogram, total, totalError } = this.props;
+
     const gasLabel = `gas amount (estimated: ${gasEst})`;
     const priceLabel = `gas price (current: ${gasPriceDefault})`;
 
     return (
       <Form>
+
         { this.renderData() }
+
         <div className={ styles.columns }>
-          <div>
-            <Input
-              label={ gasLabel }
-              hint='the amount of gas to use for the transaction'
-              error={ gasError }
-              value={ gas }
-              onChange={ this.onEditGas } />
+          <div style={ { flex: 65 } }>
+            <GasPriceSelector
+              gasPriceHistogram={ gasPriceHistogram }
+              gasPrice={ gasPrice }
+              onChange={ this.onEditGasPrice }
+            />
           </div>
-          <div>
-            <Input
-              label={ priceLabel }
-              hint='the price of gas to use for the transaction'
-              error={ gasPriceError }
-              value={ gasPrice }
-              onChange={ this.onEditGasPrice } />
+
+          <div
+            className={ styles.row }
+            style={ {
+              flex: 35, paddingLeft: '1rem',
+              justifyContent: 'space-around',
+              paddingBottom: 12
+            } }
+          >
+            <div className={ styles.row }>
+              <Input
+                label={ gasLabel }
+                hint='the amount of gas to use for the transaction'
+                error={ gasError }
+                value={ gas }
+                onChange={ this.onEditGas } />
+
+              <Input
+                label={ priceLabel }
+                hint='the price of gas to use for the transaction'
+                error={ gasPriceError }
+                value={ (gasPrice || '').toString() }
+                onChange={ this.onEditGasPrice } />
+            </div>
+
+            <div className={ styles.row }>
+              <Input
+                disabled
+                label='total transaction amount'
+                hint='the total amount of the transaction'
+                error={ totalError }
+                value={ `${total} ETH` } />
+            </div>
           </div>
         </div>
-        <div className={ styles.columns }>
-          <div>
-            <Input
-              disabled
-              label='total transaction amount'
-              hint='the total amount of the transaction'
-              error={ totalError }
-              value={ `${total} ETH` } />
-          </div>
+
+        <div>
+          <p className={ styles.gasPriceDesc }>
+            You can choose the gas price based on the
+            distribution of recent included transactions' gas prices.
+            The lower the gas price is, the cheaper the transaction will
+            be. The higher the gas price is, the faster it should
+            get mined by the network.
+          </p>
         </div>
+
       </Form>
     );
   }
@@ -99,8 +133,8 @@ export default class Extras extends Component {
     this.props.onChange('gas', event.target.value);
   }
 
-  onEditGasPrice = (event) => {
-    this.props.onChange('gasPrice', event.target.value);
+  onEditGasPrice = (event, value) => {
+    this.props.onChange('gasPrice', value);
   }
 
   onEditData = (event) => {