Adds speed up slide-in gas customization sidebar

3 files changed, 41 insertions, 14 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} />
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
index 69bb65f2f..b62919c0a 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
@@ -102,6 +102,11 @@
       }
     }
 
+    &__insufficient-balance {
+      font-size: 12px;
+      color: red;
+    }
+
 
     &__input-wrapper {
       position: relative;
@@ -119,6 +124,10 @@
       margin-top: 7px;
     }
 
+    &__input--error {
+       border: 1px solid $red;
+    }
+
     &__input-arrows {
       position: absolute;
       top: 7px;
@@ -155,6 +164,9 @@
       }
     }
 
+    &__input-arrows--error {
+      border: 1px solid $red;
+    }
 
     input[type="number"]::-webkit-inner-spin-button {
       -webkit-appearance: none;
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
index d4549f4cd..0c25874bb 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -27,6 +27,7 @@ describe('AdvancedTabContent Component', function () {
       customGasLimit={23456}
       timeRemaining={21500}
       totalFee={'$0.25'}
+      insufficientBalance={false}
     />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } })
   })
 
@@ -63,11 +64,13 @@ describe('AdvancedTabContent Component', function () {
       assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1)
       const renderDataSummaryArgs = AdvancedTabContent.prototype.renderDataSummary.getCall(0).args
       assert.deepEqual(renderDataSummaryArgs, ['$0.25', 21500])
+    })
 
+    it('should call renderGasEditRows with the expected params', () => {
       assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1)
       const renderGasEditRowArgs = AdvancedTabContent.prototype.renderGasEditRows.getCall(0).args
       assert.deepEqual(renderGasEditRowArgs, [
-        11, propsMethodSpies.updateCustomGasPrice, 23456, propsMethodSpies.updateCustomGasLimit,
+        11, propsMethodSpies.updateCustomGasPrice, 23456, propsMethodSpies.updateCustomGasLimit, false,
       ])
     })
   })
@@ -142,7 +145,8 @@ describe('AdvancedTabContent Component', function () {
         'mockGasPrice',
         () => 'mockUpdateCustomGasPriceReturn',
         'mockGasLimit',
-        () => 'mockUpdateCustomGasLimitReturn'
+        () => 'mockUpdateCustomGasLimitReturn',
+        false
       ))
     })
 
@@ -161,10 +165,10 @@ describe('AdvancedTabContent Component', function () {
       const renderGasEditRowSpyArgs = AdvancedTabContent.prototype.renderGasEditRow.args
       assert.equal(renderGasEditRowSpyArgs.length, 2)
       assert.deepEqual(renderGasEditRowSpyArgs[0].map(String), [
-        'gasPrice', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasPrice', 9, true,
+        'gasPrice', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasPrice', false, 9, true,
       ].map(String))
       assert.deepEqual(renderGasEditRowSpyArgs[1].map(String), [
-        'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 'mockGasLimit', 0,
+        'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 'mockGasLimit', false, 0,
       ].map(String))
     })
   })
@@ -195,8 +199,8 @@ describe('AdvancedTabContent Component', function () {
         321,
         value => value + 7,
         0,
-        8,
-        false
+        false,
+        8
       ))
     })
 
@@ -204,7 +208,7 @@ describe('AdvancedTabContent Component', function () {
       assert(gasInput.hasClass('advanced-tab__gas-edit-row__input-wrapper'))
     })
 
-    it('should render an input, but not a GWEI symbol', () => {
+    it('should render two children, including an input', () => {
       assert.equal(gasInput.children().length, 2)
       assert(gasInput.children().at(0).hasClass('advanced-tab__gas-edit-row__input'))
     })