1 files changed, 140 insertions, 0 deletions
diff --git a/ui/app/components/modals/customize-gas/customize-gas.component.js b/ui/app/components/modals/customize-gas/customize-gas.component.js
new file mode 100644
index 000000000..0337c5413
--- /dev/null
+++ b/ui/app/components/modals/customize-gas/customize-gas.component.js
@@ -0,0 +1,140 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import GasModalCard from '../../customize-gas-modal/gas-modal-card'
+import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants'
+
+import {
+  getDecimalGasLimit,
+  getDecimalGasPrice,
+  getPrefixedHexGasLimit,
+  getPrefixedHexGasPrice,
+} from './customize-gas.util'
+
+export default class CustomizeGas extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    txData: PropTypes.object.isRequired,
+    hideModal: PropTypes.func,
+    validate: PropTypes.func,
+    onSubmit: PropTypes.func,
+  }
+
+  state = {
+    gasPrice: 0,
+    gasLimit: 0,
+    originalGasPrice: 0,
+    originalGasLimit: 0,
+  }
+
+  componentDidMount () {
+    const { txData = {} } = this.props
+    const { txParams: { gas: hexGasLimit, gasPrice: hexGasPrice } = {} } = txData
+
+    const gasLimit = getDecimalGasLimit(hexGasLimit)
+    const gasPrice = getDecimalGasPrice(hexGasPrice)
+
+    this.setState({
+      gasPrice,
+      gasLimit,
+      originalGasPrice: gasPrice,
+      originalGasLimit: gasLimit,
+    })
+  }
+
+  handleRevert () {
+    const { originalGasPrice, originalGasLimit } = this.state
+
+    this.setState({
+      gasPrice: originalGasPrice,
+      gasLimit: originalGasLimit,
+    })
+  }
+
+  handleSave () {
+    const { onSubmit, hideModal } = this.props
+    const { gasLimit, gasPrice } = this.state
+    const prefixedHexGasPrice = getPrefixedHexGasPrice(gasPrice)
+    const prefixedHexGasLimit = getPrefixedHexGasLimit(gasLimit)
+
+    Promise.resolve(onSubmit({ gasPrice: prefixedHexGasPrice, gasLimit: prefixedHexGasLimit }))
+      .then(() => hideModal())
+  }
+
+  validate () {
+    const { gasLimit, gasPrice } = this.state
+    return this.props.validate({
+      gasPrice: getPrefixedHexGasPrice(gasPrice),
+      gasLimit: getPrefixedHexGasLimit(gasLimit),
+    })
+  }
+
+  render () {
+    const { t } = this.context
+    const { hideModal } = this.props
+    const { gasPrice, gasLimit } = this.state
+    const { valid, errorKey } = this.validate()
+
+    return (
+      <div className="customize-gas">
+        <div className="customize-gas__content">
+          <div className="customize-gas__header">
+            <div className="customize-gas__title">
+              { this.context.t('customGas') }
+            </div>
+            <div
+              className="customize-gas__close"
+              onClick={() => hideModal()}
+            />
+          </div>
+          <div className="customize-gas__body">
+            <GasModalCard
+              value={gasPrice}
+              min={MIN_GAS_PRICE_GWEI}
+              step={1}
+              onChange={value => this.setState({ gasPrice: value })}
+              title={t('gasPrice')}
+              copy={t('gasPriceCalculation')}
+            />
+            <GasModalCard
+              value={gasLimit}
+              min={1}
+              step={1}
+              onChange={value => this.setState({ gasLimit: value })}
+              title={t('gasLimit')}
+              copy={t('gasLimitCalculation')}
+            />
+          </div>
+          <div className="customize-gas__footer">
+            { !valid && <div className="customize-gas__error-message">{ t(errorKey) }</div> }
+            <div
+              className="customize-gas__revert"
+              onClick={() => this.handleRevert()}
+            >
+              { t('revert') }
+            </div>
+            <div className="customize-gas__buttons">
+              <button
+                className="btn-default customize-gas__cancel"
+                onClick={() => hideModal()}
+                style={{ marginRight: '10px' }}
+              >
+                { t('cancel') }
+              </button>
+              <button
+                className="btn-primary customize-gas__save"
+                onClick={() => this.handleSave()}
+                style={{ marginRight: '10px' }}
+                disabled={!valid}
+              >
+                { t('save') }
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}