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
106
|
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import PageContainer from '../../page-container'
import { Tabs, Tab } from '../../tabs'
import AdvancedTabContent from './advanced-tab-content'
import BasicTabContent from './basic-tab-content'
export default class GasModalPageContainer extends Component {
static contextTypes = {
t: PropTypes.func,
}
static propTypes = {
hideModal: PropTypes.func,
updateCustomGasPrice: PropTypes.func,
updateCustomGasLimit: PropTypes.func,
customGasPrice: PropTypes.number,
customGasLimit: PropTypes.number,
gasPriceButtonGroupProps: PropTypes.object,
}
state = {}
renderBasicTabContent () {
return (
<BasicTabContent
gasPriceButtonGroupProps={this.props.gasPriceButtonGroupProps}
/>
)
}
renderAdvancedTabContent = () => {
const {
updateCustomGasPrice,
updateCustomGasLimit,
customGasPrice,
customGasLimit,
} = this.props
return (
<AdvancedTabContent
updateCustomGasPrice={updateCustomGasPrice}
updateCustomGasLimit={updateCustomGasLimit}
customGasPrice={customGasPrice}
customGasLimit={customGasLimit}
millisecondsRemaining={91000}
totalFee={'$0.30'}
/>
)
}
renderInfoRow (className, totalLabelKey, fiatTotal, cryptoTotal) {
return (
<div className={className}>
<div className={`${className}__total-info`}>
<span className={`${className}__total-info__total-label`}>{`${this.context.t(totalLabelKey)}:`}</span>
<span className={`${className}__total-info__total-value`}>{fiatTotal}</span>
</div>
<div className={`${className}__sum-info`}>
<span className={`${className}__sum-info__sum-label`}>{`${this.context.t('amountPlusTxFee')}`}</span>
<span className={`${className}__sum-info__sum-value`}>{cryptoTotal}</span>
</div>
</div>
)
}
renderTabContent (mainTabContent) {
return (
<div className="gas-modal-content">
{ mainTabContent }
{ this.renderInfoRow('gas-modal-content__info-row--fade', 'originalTotal', '$20.02 USD', '0.06685 ETH') }
{ this.renderInfoRow('gas-modal-content__info-row', 'newTotal', '$20.02 USD', '0.06685 ETH') }
</div>
)
}
renderTabs () {
return (
<Tabs>
<Tab name={this.context.t('basic')}>
{ this.renderTabContent(this.renderBasicTabContent()) }
</Tab>
<Tab name={this.context.t('advanced')}>
{ this.renderTabContent(this.renderAdvancedTabContent()) }
</Tab>
</Tabs>
)
}
render () {
const { hideModal } = this.props
return (
<div className="gas-modal-page-container">
<PageContainer
title={this.context.t('customGas')}
subtitle={this.context.t('customGasSubTitle')}
tabsComponent={this.renderTabs()}
disabled={false}
onCancel={() => hideModal()}
onClose={() => hideModal()}
/>
</div>
)
}
}
|
