Adds speed up slide-in gas customization sidebar

1 files changed, 18 insertions, 7 deletions

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index b9ae93684..23945483d 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import GasPriceChart from '../../gas-price-chart'
 
 export default class AdvancedTabContent extends Component {
@@ -16,23 +17,31 @@ export default class AdvancedTabContent extends Component {
     totalFee: PropTypes.string,
     timeRemaining: PropTypes.string,
     gasChartProps: PropTypes.object,
+    insufficientBalance: PropTypes.bool,
   }
 
-  gasInput (value, onChange, min, precision, showGWEI) {
+  gasInput (value, onChange, min, insufficientBalance, precision, showGWEI) {
     return (
       <div className="advanced-tab__gas-edit-row__input-wrapper">
         <input
-          className="advanced-tab__gas-edit-row__input"
+          className={classnames('advanced-tab__gas-edit-row__input', {
+            'advanced-tab__gas-edit-row__input--error': insufficientBalance,
+          })}
           type="number"
           value={value}
           min={min}
           precision={precision}
           onChange={event => onChange(Number(event.target.value))}
         />
-        <div className="advanced-tab__gas-edit-row__input-arrows">
+        <div className={classnames('advanced-tab__gas-edit-row__input-arrows', {
+          'advanced-tab__gas-edit-row__input-arrows--error': insufficientBalance,
+        })}>
           <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap"><i className="fa fa-sm fa-angle-up" onClick={() => onChange(value + 1)} /></div>
           <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap"><i className="fa fa-sm fa-angle-down" onClick={() => onChange(value - 1)} /></div>
         </div>
+        {insufficientBalance && <div className="advanced-tab__gas-edit-row__insufficient-balance">
+          Insufficient Balance
+        </div>}
       </div>
     )
   }
@@ -70,11 +79,11 @@ export default class AdvancedTabContent extends Component {
     )
   }
 
-  renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit) {
+  renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit, insufficientBalance) {
     return (
       <div className="advanced-tab__gas-edit-rows">
-        { this.renderGasEditRow('gasPrice', customGasPrice, updateCustomGasPrice, customGasPrice, 9, true) }
-        { this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, customGasLimit, 0) }
+        { this.renderGasEditRow('gasPrice', customGasPrice, updateCustomGasPrice, customGasPrice, insufficientBalance, 9, true) }
+        { this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, customGasLimit, insufficientBalance, 0) }
       </div>
     )
   }
@@ -86,6 +95,7 @@ export default class AdvancedTabContent extends Component {
       timeRemaining,
       customGasPrice,
       customGasLimit,
+      insufficientBalance,
       totalFee,
       gasChartProps,
     } = this.props
@@ -98,7 +108,8 @@ export default class AdvancedTabContent extends Component {
               customGasPrice,
               updateCustomGasPrice,
               customGasLimit,
-              updateCustomGasLimit
+              updateCustomGasLimit,
+              insufficientBalance
           ) }
           <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div>
           <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} />