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
|
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ButtonGroup from '../../button-group'
import Button from '../../button'
const GAS_OBJECT_PROPTYPES_SHAPE = {
label: PropTypes.string,
feeInPrimaryCurrency: PropTypes.string,
feeInSecondaryCurrency: PropTypes.string,
timeEstimate: PropTypes.string,
priceInHexWei: PropTypes.string,
}
export default class GasPriceButtonGroup extends Component {
static contextTypes = {
t: PropTypes.func,
}
static propTypes = {
buttonDataLoading: PropTypes.bool,
className: PropTypes.string,
defaultActiveButtonIndex: PropTypes.number,
gasButtonInfo: PropTypes.arrayOf(PropTypes.shape(GAS_OBJECT_PROPTYPES_SHAPE)),
handleGasPriceSelection: PropTypes.func,
newActiveButtonIndex: PropTypes.number,
noButtonActiveByDefault: PropTypes.bool,
showCheck: PropTypes.bool,
}
renderButtonContent ({
labelKey,
feeInPrimaryCurrency,
feeInSecondaryCurrency,
timeEstimate,
}, {
className,
showCheck,
}) {
return (<div>
{ labelKey && <div className={`${className}__label`}>{ this.context.t(labelKey) }</div> }
{ timeEstimate && <div className={`${className}__time-estimate`}>{ timeEstimate }</div> }
{ feeInPrimaryCurrency && <div className={`${className}__primary-currency`}>{ feeInPrimaryCurrency }</div> }
{ feeInSecondaryCurrency && <div className={`${className}__secondary-currency`}>{ feeInSecondaryCurrency }</div> }
{ showCheck && <div className="button-check-wrapper"><i className="fa fa-check fa-sm" /></div> }
</div>)
}
renderButton ({
priceInHexWei,
...renderableGasInfo
}, {
buttonDataLoading,
handleGasPriceSelection,
...buttonContentPropsAndFlags
}, index) {
return (
<Button
onClick={() => handleGasPriceSelection(priceInHexWei)}
key={`gas-price-button-${index}`}
>
{this.renderButtonContent(renderableGasInfo, buttonContentPropsAndFlags)}
</Button>
)
}
render () {
const {
gasButtonInfo,
defaultActiveButtonIndex = 1,
newActiveButtonIndex,
noButtonActiveByDefault = false,
buttonDataLoading,
...buttonPropsAndFlags
} = this.props
return (
!buttonDataLoading
? <ButtonGroup
className={buttonPropsAndFlags.className}
defaultActiveButtonIndex={defaultActiveButtonIndex}
newActiveButtonIndex={newActiveButtonIndex}
noButtonActiveByDefault={noButtonActiveByDefault}
>
{ gasButtonInfo.map((obj, index) => this.renderButton(obj, buttonPropsAndFlags, index)) }
</ButtonGroup>
: <div className={`${buttonPropsAndFlags.className}__loading-container`}>{ this.context.t('loading') }</div>
)
}
}
|
