mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 15:35:46 +01:00
60 lines
2.1 KiB
JavaScript
60 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
|
|
import { toBigNumber } from '../../../../../shared/modules/conversion.utils';
|
|
import { COLORS } from '../../../../helpers/constants/design-system';
|
|
import { useGasFeeContext } from '../../../../contexts/gasFee';
|
|
import I18nValue from '../../../ui/i18n-value';
|
|
import Typography from '../../../ui/typography/typography';
|
|
|
|
import StatusSlider from './status-slider';
|
|
|
|
const NetworkStatus = () => {
|
|
const { gasFeeEstimates } = useGasFeeContext();
|
|
let estBaseFee = null;
|
|
if (gasFeeEstimates?.estimatedBaseFee) {
|
|
// estimatedBaseFee is not likely to be below 1, value .01 is used as test networks sometimes
|
|
// show have small values for it and more decimal places may cause UI to look broken.
|
|
estBaseFee = toBigNumber.dec(gasFeeEstimates?.estimatedBaseFee);
|
|
estBaseFee = estBaseFee.lessThan(0.01) ? 0.01 : estBaseFee.toFixed(2);
|
|
}
|
|
|
|
return (
|
|
<div className="network-status">
|
|
<Typography
|
|
color={COLORS.UI4}
|
|
fontSize="10px"
|
|
fontWeight="bold"
|
|
margin={[3, 0]}
|
|
variant="h6"
|
|
>
|
|
<I18nValue messageKey="networkStatus" />
|
|
</Typography>
|
|
<div className="network-status__info">
|
|
<div className="network-status__info__field">
|
|
<span className="network-status__info__field-data">
|
|
{estBaseFee !== null && `${estBaseFee} GWEI`}
|
|
</span>
|
|
<span className="network-status__info__field-label">Base fee</span>
|
|
</div>
|
|
<div className="network-status__info__separator" />
|
|
<div className="network-status__info__field network-status__info__field--priority-fee">
|
|
<span className="network-status__info__field-data">
|
|
0.5 - 22 GWEI
|
|
</span>
|
|
<span className="network-status__info__field-label">
|
|
Priority fee
|
|
</span>
|
|
</div>
|
|
<div className="network-status__info__separator" />
|
|
<div className="network-status__info__field">
|
|
<StatusSlider />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
NetworkStatus.propTypes = {};
|
|
|
|
export default NetworkStatus;
|