1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
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>
)
}
}
|
