mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 23:44:56 +01:00
140 lines
3.8 KiB
JavaScript
140 lines
3.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import ButtonGroup from '../../../ui/button-group';
|
|
import Button from '../../../ui/button';
|
|
import { GAS_ESTIMATE_TYPES } from '../../../../helpers/constants/common';
|
|
|
|
const GAS_OBJECT_PROPTYPES_SHAPE = {
|
|
gasEstimateType: PropTypes.oneOf(Object.values(GAS_ESTIMATE_TYPES))
|
|
.isRequired,
|
|
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,
|
|
};
|
|
|
|
gasEstimateTypeLabel(gasEstimateType) {
|
|
if (gasEstimateType === GAS_ESTIMATE_TYPES.SLOW) {
|
|
return this.context.t('slow');
|
|
} else if (gasEstimateType === GAS_ESTIMATE_TYPES.AVERAGE) {
|
|
return this.context.t('average');
|
|
} else if (gasEstimateType === GAS_ESTIMATE_TYPES.FAST) {
|
|
return this.context.t('fast');
|
|
} else if (gasEstimateType === GAS_ESTIMATE_TYPES.FASTEST) {
|
|
return this.context.t('fastest');
|
|
}
|
|
throw new Error(`Unrecognized gas estimate type: ${gasEstimateType}`);
|
|
}
|
|
|
|
renderButtonContent(
|
|
{
|
|
gasEstimateType,
|
|
feeInPrimaryCurrency,
|
|
feeInSecondaryCurrency,
|
|
timeEstimate,
|
|
},
|
|
{ className, showCheck },
|
|
) {
|
|
return (
|
|
<div>
|
|
{gasEstimateType && (
|
|
<div className={`${className}__label`}>
|
|
{this.gasEstimateTypeLabel(gasEstimateType)}
|
|
</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({
|
|
gasPrice: priceInHexWei,
|
|
gasEstimateType: renderableGasInfo.gasEstimateType,
|
|
})
|
|
}
|
|
key={`gas-price-button-${index}`}
|
|
>
|
|
{this.renderButtonContent(
|
|
renderableGasInfo,
|
|
buttonContentPropsAndFlags,
|
|
)}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
gasButtonInfo,
|
|
defaultActiveButtonIndex = 1,
|
|
newActiveButtonIndex,
|
|
noButtonActiveByDefault = false,
|
|
buttonDataLoading,
|
|
...buttonPropsAndFlags
|
|
} = this.props;
|
|
|
|
return buttonDataLoading ? (
|
|
<div className={`${buttonPropsAndFlags.className}__loading-container`}>
|
|
{this.context.t('loading')}
|
|
</div>
|
|
) : (
|
|
<ButtonGroup
|
|
className={buttonPropsAndFlags.className}
|
|
defaultActiveButtonIndex={defaultActiveButtonIndex}
|
|
newActiveButtonIndex={newActiveButtonIndex}
|
|
noButtonActiveByDefault={noButtonActiveByDefault}
|
|
>
|
|
{gasButtonInfo.map((obj, index) =>
|
|
this.renderButton(obj, buttonPropsAndFlags, index),
|
|
)}
|
|
</ButtonGroup>
|
|
);
|
|
}
|
|
}
|