1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/components/app/gas-customization/gas-price-button-group/gas-price-button-group.component.js
2021-04-28 14:53:59 -05:00

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>
);
}
}