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, totalFee: PropTypes.string, timeRemaining: PropTypes.string, gasChartProps: PropTypes.object, insufficientBalance: 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) } } gasInput (value, onChange, min, insufficientBalance, showGWEI) { return (
onChange(Number(event.target.value))} />
onChange(value + 1)}>
onChange(value - 1)}>
{insufficientBalance &&
Insufficient Balance
}
) } infoButton (onClick) { return } renderDataSummary (totalFee, timeRemaining) { return (
{ this.context.t('newTransactionFee') } ~{ this.context.t('transactionTime') }
{totalFee}
{timeRemaining}
) } renderGasEditRow (labelKey, ...gasInputArgs) { return (
{ this.context.t(labelKey) } { this.infoButton(() => {}) }
{ this.gasInput(...gasInputArgs) }
) } renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit, insufficientBalance) { return (
{ this.renderGasEditRow('gasPrice', customGasPrice, updateCustomGasPrice, customGasPrice, insufficientBalance, true) } { this.renderGasEditRow('gasLimit', customGasLimit, this.onChangeGasLimit, customGasLimit, insufficientBalance) }
) } render () { const { updateCustomGasPrice, updateCustomGasLimit, timeRemaining, customGasPrice, customGasLimit, insufficientBalance, totalFee, gasChartProps, gasEstimatesLoading, } = this.props return (
{ this.renderDataSummary(totalFee, timeRemaining) }
{ this.renderGasEditRows( customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit, insufficientBalance ) }
Live Gas Price Predictions
{!gasEstimatesLoading ? : }
Slower Faster
) } }