mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-12 04:37:13 +01:00
90 lines
2.7 KiB
JavaScript
90 lines
2.7 KiB
JavaScript
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>
|
|
)
|
|
}
|
|
}
|