You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.2 KiB
106 lines
3.2 KiB
6 years ago
|
import React, { Component } from 'react'
|
||
|
|
import PropTypes from 'prop-types'
|
||
|
|
import {
|
||
|
|
MIN_GAS_PRICE_DEC,
|
||
|
|
MIN_GAS_LIMIT_DEC,
|
||
|
|
} from '../../../send/send.constants'
|
||
|
|
import GasSlider from '../../gas-slider'
|
||
|
|
import TimeRemaining from './time-remaining'
|
||
|
|
|
||
|
|
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,
|
||
|
|
millisecondsRemaining: PropTypes.number,
|
||
|
|
}
|
||
|
|
|
||
|
|
gasInput (value, onChange, min, precision, showGWEI) {
|
||
|
|
return (
|
||
|
|
<div className="advanced-tab__gas-edit-row__input-wrapper">
|
||
|
|
<input
|
||
|
|
className="advanced-tab__gas-edit-row__input"
|
||
|
|
type="number"
|
||
|
|
value={value}
|
||
|
|
onChange={event => onChange(Number(event.target.value))}
|
||
|
|
/>
|
||
|
|
{showGWEI
|
||
|
|
? <span className="advanced-tab__gas-edit-row__gwei-symbol">GWEI</span>
|
||
|
|
: null}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
infoButton (onClick) {
|
||
|
|
return <i className="fa info-circle" onClick={onClick} />
|
||
|
|
}
|
||
|
|
|
||
|
|
render () {
|
||
|
|
const {
|
||
|
|
updateCustomGasPrice,
|
||
|
|
updateCustomGasLimit,
|
||
|
|
millisecondsRemaining,
|
||
|
|
customGasPrice,
|
||
|
|
customGasLimit,
|
||
|
|
} = this.props
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="advanced-tab">
|
||
|
|
<div className="advanced-tab__transaction-data-summary">
|
||
|
|
<div className="advanced-tab__transaction-data-summary__titles">
|
||
|
|
<span>New Transaction Fee</span>
|
||
|
|
<span>~Transaction Time</span>
|
||
|
|
</div>
|
||
|
|
<div className="advanced-tab__transaction-data-summary__container">
|
||
|
|
<div className="advanced-tab__transaction-data-summary__fee">
|
||
|
|
$0.30
|
||
|
|
</div>
|
||
|
|
<TimeRemaining
|
||
|
|
milliseconds={millisecondsRemaining}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="advanced-tab__fee-chart-title">
|
||
|
|
Live Transaction Fee Predictions
|
||
|
|
</div>
|
||
|
|
<div className="advanced-tab__fee-chart" />
|
||
|
|
<div className="advanced-tab__slider-container">
|
||
|
|
<GasSlider
|
||
|
|
onChange={value => {
|
||
|
|
updateCustomGasPrice(Number(value))
|
||
|
|
}}
|
||
|
|
lowLabel={'Cheaper'}
|
||
|
|
highLabel={'Faster'}
|
||
|
|
value={customGasPrice}
|
||
|
|
step={0.1}
|
||
|
|
max={200}
|
||
|
|
min={0}
|
||
|
|
coloredStart={{}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="advanced-tab__gas-edit-rows">
|
||
|
|
<div className="advanced-tab__gas-edit-row">
|
||
|
|
<div className="advanced-tab__gas-edit-row__label">
|
||
|
|
Gas Price
|
||
|
|
{ this.infoButton(() => {}) }
|
||
|
|
</div>
|
||
|
|
{ this.gasInput(customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
|
||
|
|
</div>
|
||
|
|
<div className="advanced-tab__gas-edit-row">
|
||
|
|
<div className="advanced-tab__gas-edit-row__label">
|
||
|
|
Gas Limit
|
||
|
|
{ this.infoButton(() => {}) }
|
||
|
|
</div>
|
||
|
|
{ this.gasInput(customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|