Add togglable advanced gas controls on send and confirm screens (#6112)

* Extract advanced gas input controls to their own component

* Add advanced inline gas toggle to settings

* Add optional advanced inline gas to send send screen

* Adds optional advanced gas inputs to the confirm screen

* Add info modals for advanced gas inputs.

* Fix translation of advance gas toggle description.

* Lint and unit test fixes for inline-advanced-gas-inputs

* Increase margin above advanced options button on send screen

* Move methods from constructor to property syntax in advanced-gas-inputs.component

1 files changed, 146 insertions, 0 deletions

diff --git a/ui/app/components/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js b/ui/app/components/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
new file mode 100644
index 000000000..f0abff478
--- /dev/null
+++ b/ui/app/components/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
@@ -0,0 +1,146 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+import debounce from 'lodash.debounce'
+
+export default class AdvancedTabContent extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    updateCustomGasPrice: PropTypes.func,
+    updateCustomGasLimit: PropTypes.func,
+    customGasPrice: PropTypes.number,
+    customGasLimit: PropTypes.number,
+    insufficientBalance: PropTypes.bool,
+    customPriceIsSafe: PropTypes.bool,
+    isSpeedUp: PropTypes.bool,
+    showGasPriceInfoModal: PropTypes.func,
+    showGasLimitInfoModal: PropTypes.func,
+  }
+
+  debouncedGasLimitReset = debounce((dVal) => {
+    if (dVal < 21000) {
+      this.props.updateCustomGasLimit(21000)
+    }
+  }, 1000, { trailing: true })
+
+  onChangeGasLimit = (val) => {
+    this.props.updateCustomGasLimit(val)
+    this.debouncedGasLimitReset(val)
+  }
+
+  gasInputError ({ labelKey, insufficientBalance, customPriceIsSafe, isSpeedUp, value }) {
+    const { t } = this.context
+    let errorText
+    let errorType
+    let isInError = true
+
+
+    if (insufficientBalance) {
+      errorText = t('insufficientBalance')
+      errorType = 'error'
+    } else if (labelKey === 'gasPrice' && isSpeedUp && value === 0) {
+      errorText = t('zeroGasPriceOnSpeedUpError')
+      errorType = 'error'
+    } else if (labelKey === 'gasPrice' && !customPriceIsSafe) {
+      errorText = t('gasPriceExtremelyLow')
+      errorType = 'warning'
+    } else {
+      isInError = false
+    }
+
+    return {
+      isInError,
+      errorText,
+      errorType,
+    }
+  }
+
+  gasInput ({ labelKey, value, onChange, insufficientBalance, showGWEI, customPriceIsSafe, isSpeedUp }) {
+    const {
+      isInError,
+      errorText,
+      errorType,
+    } = this.gasInputError({ labelKey, insufficientBalance, customPriceIsSafe, isSpeedUp, value })
+
+    return (
+      <div className="advanced-gas-inputs__gas-edit-row__input-wrapper">
+        <input
+          className={classnames('advanced-gas-inputs__gas-edit-row__input', {
+            'advanced-gas-inputs__gas-edit-row__input--error': isInError && errorType === 'error',
+            'advanced-gas-inputs__gas-edit-row__input--warning': isInError && errorType === 'warning',
+          })}
+          type="number"
+          value={value}
+          onChange={event => onChange(Number(event.target.value))}
+        />
+        <div className={classnames('advanced-gas-inputs__gas-edit-row__input-arrows', {
+          'advanced-gas-inputs__gas-edit-row__input--error': isInError && errorType === 'error',
+          'advanced-gas-inputs__gas-edit-row__input--warning': isInError && errorType === 'warning',
+        })}>
+          <div className="advanced-gas-inputs__gas-edit-row__input-arrows__i-wrap" onClick={() => onChange(value + 1)}><i className="fa fa-sm fa-angle-up" /></div>
+          <div className="advanced-gas-inputs__gas-edit-row__input-arrows__i-wrap" onClick={() => onChange(value - 1)}><i className="fa fa-sm fa-angle-down" /></div>
+        </div>
+        { isInError
+          ? <div className={`advanced-gas-inputs__gas-edit-row__${errorType}-text`}>
+              { errorText }
+            </div>
+          : null }
+      </div>
+    )
+  }
+
+  infoButton (onClick) {
+    return <i className="fa fa-info-circle" onClick={onClick} />
+  }
+
+  renderGasEditRow (gasInputArgs) {
+    return (
+      <div className="advanced-gas-inputs__gas-edit-row">
+        <div className="advanced-gas-inputs__gas-edit-row__label">
+          { this.context.t(gasInputArgs.labelKey) }
+          { this.infoButton(() => gasInputArgs.infoOnClick()) }
+        </div>
+        { this.gasInput(gasInputArgs) }
+      </div>
+    )
+  }
+
+  render () {
+    const {
+      customGasPrice,
+      updateCustomGasPrice,
+      customGasLimit,
+      insufficientBalance,
+      customPriceIsSafe,
+      isSpeedUp,
+      showGasPriceInfoModal,
+      showGasLimitInfoModal,
+    } = this.props
+
+    return (
+      <div className="advanced-gas-inputs__gas-edit-rows">
+        { this.renderGasEditRow({
+          labelKey: 'gasPrice',
+          value: customGasPrice,
+          onChange: updateCustomGasPrice,
+          insufficientBalance,
+          customPriceIsSafe,
+          showGWEI: true,
+          isSpeedUp,
+          infoOnClick: showGasPriceInfoModal,
+        }) }
+        { this.renderGasEditRow({
+          labelKey: 'gasLimit',
+          value: customGasLimit,
+          onChange: this.onChangeGasLimit,
+          insufficientBalance,
+          customPriceIsSafe,
+          infoOnClick: showGasLimitInfoModal,
+        }) }
+      </div>
+    )
+  }
+}