metamask-extension/ui/app/components/modals/customize-gas/customize-gas.component.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import BigNumber from 'bignumber.js'
import GasModalCard from '../../customize-gas-modal/gas-modal-card'
import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants'
import Button from '../../button'

import {
  getDecimalGasLimit,
  getDecimalGasPrice,
  getPrefixedHexGasLimit,
  getPrefixedHexGasPrice,
} from './customize-gas.util'

export default class CustomizeGas extends Component {
  static contextTypes = {
    t: PropTypes.func,
    metricsEvent: 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, metricsEvent } = this.context
    const { hideModal } = this.props
    const { gasPrice, gasLimit, originalGasPrice, originalGasLimit } = 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
                type="default"
                className="customize-gas__cancel"
                onClick={() => hideModal()}
                style={{ marginRight: '10px' }}
              >
                { t('cancel') }
              </Button>
              <Button
                type="primary"
                className="customize-gas__save"
                onClick={() => {
                  metricsEvent({
                    eventOpts: {
                      category: 'Activation',
                      action: 'userCloses',
                      name: 'closeCustomizeGas',
                    },
                    pageOpts: {
                      section: 'customizeGasModal',
                      component: 'customizeGasSaveButton',
                    },
                    customVariables: {
                      gasPriceChange: (new BigNumber(gasPrice)).minus(new BigNumber(originalGasPrice)).toString(10),
                      gasLimitChange: (new BigNumber(gasLimit)).minus(new BigNumber(originalGasLimit)).toString(10),
                    },
                  })
                  this.handleSave()
                }}
                style={{ marginRight: '10px' }}
                disabled={!valid}
              >
                { t('save') }
              </Button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}