Final gas customization fixes

7 files changed, 73 insertions, 21 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 ac68b833c..ba738ff75 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
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import Loading from '../../../loading-screen'
 import GasPriceChart from '../../gas-price-chart'
+import debounce from 'lodash.debounce'
 
 export default class AdvancedTabContent extends Component {
   static contextTypes = {
@@ -22,7 +23,21 @@ export default class AdvancedTabContent extends Component {
     insufficientBalance: PropTypes.bool,
   }
 
-  gasInput (value, onChange, min, insufficientBalance, precision, showGWEI) {
+  constructor (props) {
+    super(props)
+
+    this.debouncedGasLimitReset = debounce((dVal) => {
+      if (dVal < 21000) {
+        props.updateCustomGasLimit(21000)
+      }
+    }, 1000, { trailing: true })
+    this.onChangeGasLimit = (val) => {
+      props.updateCustomGasLimit(val)
+      this.debouncedGasLimitReset(val)
+    }
+  }
+
+  gasInput (value, onChange, min, insufficientBalance, showGWEI) {
     return (
       <div className="advanced-tab__gas-edit-row__input-wrapper">
         <input
@@ -32,14 +47,13 @@ export default class AdvancedTabContent extends Component {
           type="number"
           value={value}
           min={min}
-          precision={precision}
           onChange={event => onChange(Number(event.target.value))}
         />
         <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 className="advanced-tab__gas-edit-row__input-arrows__i-wrap" onClick={() => onChange(value + 1)}><i className="fa fa-sm fa-angle-up" /></div>
+          <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap" onClick={() => onChange(value - 1)}><i className="fa fa-sm fa-angle-down" /></div>
         </div>
         {insufficientBalance && <div className="advanced-tab__gas-edit-row__insufficient-balance">
           Insufficient Balance
@@ -84,8 +98,8 @@ export default class AdvancedTabContent extends Component {
   renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit, insufficientBalance) {
     return (
       <div className="advanced-tab__gas-edit-rows">
-        { this.renderGasEditRow('gasPrice', customGasPrice, updateCustomGasPrice, customGasPrice, insufficientBalance, 9, true) }
-        { this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, customGasLimit, insufficientBalance, 0) }
+        { this.renderGasEditRow('gasPrice', customGasPrice, updateCustomGasPrice, customGasPrice, insufficientBalance, true) }
+        { this.renderGasEditRow('gasLimit', customGasLimit, this.onChangeGasLimit, customGasLimit, insufficientBalance) }
       </div>
     )
   }
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 b62919c0a..88c69faf4 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
@@ -148,6 +148,7 @@
         height: 100%;
         display: flex;
         justify-content: center;
+        cursor: pointer;
       }
 
       &__i-wrap:hover {
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 f321ca696..d6920454d 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
@@ -155,8 +155,11 @@ describe('AdvancedTabContent Component', function () {
 
   describe('renderGasEditRows()', () => {
     let gasEditRows
+    let tempOnChangeGasLimit
 
     beforeEach(() => {
+      tempOnChangeGasLimit = wrapper.instance().onChangeGasLimit
+      wrapper.instance().onChangeGasLimit = () => 'mockOnChangeGasLimit'
       AdvancedTabContent.prototype.renderGasEditRow.resetHistory()
       gasEditRows = shallow(wrapper.instance().renderGasEditRows(
         'mockGasPrice',
@@ -167,6 +170,10 @@ describe('AdvancedTabContent Component', function () {
       ))
     })
 
+    afterEach(() => {
+      wrapper.instance().onChangeGasLimit = tempOnChangeGasLimit
+    })
+
     it('should render the gas-edit-rows root node', () => {
       assert(gasEditRows.hasClass('advanced-tab__gas-edit-rows'))
     })
@@ -182,10 +189,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', false, 9, true,
+        'gasPrice', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasPrice', false, true,
       ].map(String))
       assert.deepEqual(renderGasEditRowSpyArgs[1].map(String), [
-        'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 'mockGasLimit', false, 0,
+        'gasLimit', 'mockGasLimit', () => 'mockOnChangeGasLimit', 'mockGasLimit', false,
       ].map(String))
     })
   })
@@ -234,7 +241,6 @@ describe('AdvancedTabContent Component', function () {
       const inputProps = gasInput.find('input').props()
       assert.equal(inputProps.min, 0)
       assert.equal(inputProps.value, 321)
-      assert.equal(inputProps.precision, 8)
     })
 
     it('should call the passed onChange method with the value of the input onChange event', () => {
@@ -257,9 +263,9 @@ describe('AdvancedTabContent Component', function () {
         8,
         false
       ))
-      const upArrow = gasInput.find('.fa-angle-up')
+      const upArrow = gasInput.find('.advanced-tab__gas-edit-row__input-arrows__i-wrap').at(0)
       assert.equal(upArrow.props().onClick(), 329)
-      const downArrow = gasInput.find('.fa-angle-down')
+      const downArrow = gasInput.find('.advanced-tab__gas-edit-row__input-arrows__i-wrap').at(1)
       assert.equal(downArrow.props().onClick(), 327)
     })
   })
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
index 5d8f92a59..be91bef0f 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
@@ -89,7 +89,7 @@ export default class GasModalPageContainer extends Component {
 
   renderInfoRows (newTotalFiat, newTotalEth, sendAmount, transactionFee) {
     return (
-      <div>
+      <div className="gas-modal-content__info-row-wrapper">
         <div className="gas-modal-content__info-row">
           <div className="gas-modal-content__info-row__send-info">
             <span className="gas-modal-content__info-row__send-info__label">{this.context.t('sendAmount')}</span>
@@ -167,7 +167,6 @@ export default class GasModalPageContainer extends Component {
           onClose={() => cancelAndClose()}
           onSubmit={() => {
             onSubmit(customModalGasLimitInHex, customModalGasPriceInHex)
-            cancelAndClose()
           }}
           submitText={this.context.t('save')}
           headerCloseText={'Close'}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index 42b96a729..c619a0988 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -142,6 +142,7 @@ const mapDispatchToProps = dispatch => {
       dispatch(resetCustomData())
       dispatch(hideModal())
     },
+    hideModal: () => dispatch(hideModal()),
     updateCustomGasPrice,
     convertThenUpdateCustomGasPrice: newPrice => updateCustomGasPrice(decGWEIToHexWEI(newPrice)),
     convertThenUpdateCustomGasLimit: newLimit => dispatch(setCustomGasLimit(addHexPrefix(newLimit.toString(16)))),
@@ -150,6 +151,8 @@ const mapDispatchToProps = dispatch => {
       dispatch(setGasPrice(newPrice))
     },
     updateConfirmTxGasAndCalculate: (gasLimit, gasPrice) => {
+      updateCustomGasPrice(gasPrice)
+      dispatch(setCustomGasLimit(addHexPrefix(gasLimit.toString(16))))
       return dispatch(updateGasAndCalculate({ gasLimit, gasPrice }))
     },
     createSpeedUpTransaction: (txId, gasPrice) => {
@@ -172,6 +175,8 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     updateConfirmTxGasAndCalculate: dispatchUpdateConfirmTxGasAndCalculate,
     createSpeedUpTransaction: dispatchCreateSpeedUpTransaction,
     hideSidebar: dispatchHideSidebar,
+    cancelAndClose: dispatchCancelAndClose,
+    hideModal: dispatchHideModal,
     ...otherDispatchProps
   } = dispatchProps
 
@@ -182,18 +187,27 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     onSubmit: (gasLimit, gasPrice) => {
       if (isConfirm) {
         dispatchUpdateConfirmTxGasAndCalculate(gasLimit, gasPrice)
+        dispatchHideModal()
       } else if (isSpeedUp) {
         dispatchCreateSpeedUpTransaction(txId, gasPrice)
         dispatchHideSidebar()
+        dispatchCancelAndClose()
       } else {
         dispatchSetGasData(gasLimit, gasPrice)
         dispatchHideGasButtonGroup()
+        dispatchCancelAndClose()
       }
     },
     gasPriceButtonGroupProps: {
       ...gasPriceButtonGroupProps,
       handleGasPriceSelection: dispatchUpdateCustomGasPrice,
     },
+    cancelAndClose: () => {
+      dispatchCancelAndClose()
+      if (isSpeedUp) {
+        dispatchHideSidebar()
+      }
+    },
   }
 }
 
@@ -241,20 +255,29 @@ function addHexWEIsToRenderableFiat (aHexWEI, bHexWEI, convertedCurrency, conver
 }
 
 function getRenderableTimeEstimate (currentGasPrice, gasPrices, estimatedTimes) {
+  const minGasPrice = gasPrices[0]
+  const maxGasPrice = gasPrices[gasPrices.length - 1]
+  let priceForEstimation = currentGasPrice
+  if (currentGasPrice < minGasPrice) {
+    priceForEstimation = minGasPrice
+  } else if (currentGasPrice > maxGasPrice) {
+    priceForEstimation = maxGasPrice
+  }
+
   const {
     closestLowerValueIndex,
     closestHigherValueIndex,
     closestHigherValue,
     closestLowerValue,
-  } = getAdjacentGasPrices({ gasPrices, priceToPosition: currentGasPrice })
+  } = getAdjacentGasPrices({ gasPrices, priceToPosition: priceForEstimation })
 
   const newTimeEstimate = extrapolateY({
     higherY: estimatedTimes[closestHigherValueIndex],
     lowerY: estimatedTimes[closestLowerValueIndex],
     higherX: closestHigherValue,
     lowerX: closestLowerValue,
-    xForExtrapolation: currentGasPrice,
+    xForExtrapolation: priceForEstimation,
   })
 
-  return formatTimeEstimate(newTimeEstimate)
+  return formatTimeEstimate(newTimeEstimate, currentGasPrice > maxGasPrice, currentGasPrice < minGasPrice)
 }
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/index.scss
index 2532c1fc2..6c76f1bdd 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/index.scss
@@ -44,6 +44,7 @@
       display: flex;
       justify-content: center;
       align-items: flex-start;
+      margin-right: 0;
     }
 
     &__subtitle {
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
index 82c6dcd69..512832866 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
@@ -82,10 +82,10 @@ describe('gas-modal-page-container container', () => {
           },
           gasEstimatesLoading: false,
           priceAndTimeEstimates: [
-            { gasprice: 3, expectedTime: '31' },
-            { gasprice: 4, expectedTime: '62' },
-            { gasprice: 5, expectedTime: '93' },
-            { gasprice: 6, expectedTime: '124' },
+            { gasprice: 3, expectedTime: 31 },
+            { gasprice: 4, expectedTime: 62 },
+            { gasprice: 5, expectedTime: 93 },
+            { gasprice: 6, expectedTime: 124 },
           ],
         },
         confirmTransaction: {
@@ -235,7 +235,7 @@ describe('gas-modal-page-container container', () => {
     describe('updateConfirmTxGasAndCalculate()', () => {
       it('should dispatch a updateGasAndCalculate action with the correct props', () => {
         mapDispatchToPropsObject.updateConfirmTxGasAndCalculate('ffff', 'aaaa')
-        assert(dispatchSpy.calledOnce)
+        assert.equal(dispatchSpy.callCount, 3)
         assert(confirmTransactionActionSpies.updateGasAndCalculate.calledOnce)
         assert.deepEqual(confirmTransactionActionSpies.updateGasAndCalculate.getCall(0).args[0], { gasLimit: 'ffff', gasPrice: 'aaaa' })
       })
@@ -265,6 +265,8 @@ describe('gas-modal-page-container container', () => {
           someOtherDispatchProp: sinon.spy(),
           createSpeedUpTransaction: sinon.spy(),
           hideSidebar: sinon.spy(),
+          hideModal: sinon.spy(),
+          cancelAndClose: sinon.spy(),
         }
         ownProps = { someOwnProp: 123 }
       })
@@ -277,6 +279,7 @@ describe('gas-modal-page-container container', () => {
         dispatchProps.someOtherDispatchProp.resetHistory()
         dispatchProps.createSpeedUpTransaction.resetHistory()
         dispatchProps.hideSidebar.resetHistory()
+        dispatchProps.hideModal.resetHistory()
       })
     it('should return the expected props when isConfirm is true', () => {
       const result = mergeProps(stateProps, dispatchProps, ownProps)
@@ -290,12 +293,14 @@ describe('gas-modal-page-container container', () => {
       assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
       assert.equal(dispatchProps.setGasData.callCount, 0)
       assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+      assert.equal(dispatchProps.hideModal.callCount, 0)
 
       result.onSubmit()
 
       assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 1)
       assert.equal(dispatchProps.setGasData.callCount, 0)
       assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+      assert.equal(dispatchProps.hideModal.callCount, 1)
 
       assert.equal(dispatchProps.updateCustomGasPrice.callCount, 0)
       result.gasPriceButtonGroupProps.handleGasPriceSelection()
@@ -318,6 +323,7 @@ describe('gas-modal-page-container container', () => {
       assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
       assert.equal(dispatchProps.setGasData.callCount, 0)
       assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+      assert.equal(dispatchProps.cancelAndClose.callCount, 0)
 
       result.onSubmit('mockNewLimit', 'mockNewPrice')
 
@@ -325,6 +331,7 @@ describe('gas-modal-page-container container', () => {
       assert.equal(dispatchProps.setGasData.callCount, 1)
       assert.deepEqual(dispatchProps.setGasData.getCall(0).args, ['mockNewLimit', 'mockNewPrice'])
       assert.equal(dispatchProps.hideGasButtonGroup.callCount, 1)
+      assert.equal(dispatchProps.cancelAndClose.callCount, 1)
 
       assert.equal(dispatchProps.updateCustomGasPrice.callCount, 0)
       result.gasPriceButtonGroupProps.handleGasPriceSelection()
@@ -343,6 +350,7 @@ describe('gas-modal-page-container container', () => {
       assert.equal(dispatchProps.updateConfirmTxGasAndCalculate.callCount, 0)
       assert.equal(dispatchProps.setGasData.callCount, 0)
       assert.equal(dispatchProps.hideGasButtonGroup.callCount, 0)
+      assert.equal(dispatchProps.cancelAndClose.callCount, 1)
 
       assert.equal(dispatchProps.createSpeedUpTransaction.callCount, 1)
       assert.equal(dispatchProps.hideSidebar.callCount, 1)