import React, { Component } from 'react' 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 = { t: PropTypes.func, } static propTypes = { updateCustomGasPrice: PropTypes.func, updateCustomGasLimit: PropTypes.func, customGasPrice: PropTypes.number, customGasLimit: PropTypes.number, gasEstimatesLoading: PropTypes.bool, millisecondsRemaining: PropTypes.number, transactionFee: PropTypes.string, timeRemaining: PropTypes.string, gasChartProps: PropTypes.object, insufficientBalance: PropTypes.bool, customPriceIsSafe: PropTypes.bool, isSpeedUp: PropTypes.bool, } 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) } } 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 (
onChange(Number(event.target.value))} />
onChange(value + 1)} >
onChange(Math.max(value - 1, 0))} >
{ isInError ?
{ errorText }
: null }
) } infoButton (onClick) { return } renderDataSummary (transactionFee, timeRemaining) { return (
{ this.context.t('newTransactionFee') } ~{ this.context.t('transactionTime') }
{transactionFee}
{timeRemaining}
) } renderGasEditRow (gasInputArgs) { return (
{ this.context.t(gasInputArgs.labelKey) } { this.infoButton(() => {}) }
{ this.gasInput(gasInputArgs) }
) } renderGasEditRows ({ customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit, insufficientBalance, customPriceIsSafe, isSpeedUp, }) { return (
{ this.renderGasEditRow({ labelKey: 'gasPrice', value: customGasPrice, onChange: updateCustomGasPrice, insufficientBalance, customPriceIsSafe, showGWEI: true, isSpeedUp, }) } { this.renderGasEditRow({ labelKey: 'gasLimit', value: customGasLimit, onChange: this.onChangeGasLimit, insufficientBalance, customPriceIsSafe, }) }
) } render () { const { t } = this.context const { updateCustomGasPrice, updateCustomGasLimit, timeRemaining, customGasPrice, customGasLimit, insufficientBalance, gasChartProps, gasEstimatesLoading, customPriceIsSafe, isSpeedUp, transactionFee, } = this.props return (
{ this.renderDataSummary(transactionFee, timeRemaining) }
{ this.renderGasEditRows({ customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit, insufficientBalance, customPriceIsSafe, isSpeedUp, }) }
{ t('liveGasPricePredictions') }
{!gasEstimatesLoading ? : }
{ t('slower') } { t('faster') }
) } }