1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-13 05:07:12 +01:00
metamask-extension/ui/components/app/edit-gas-fee-popover/network-statistics/status-slider/status-slider.js
Nidhi Kumari 0fd37cd5ff
removed i18nValue component (#15179)
* removed i18nValue component

* fixed bracket issue
2022-07-12 19:29:38 +05:30

93 lines
2.4 KiB
JavaScript

import React from 'react';
import { NETWORK_CONGESTION_THRESHOLDS } from '../../../../../../shared/constants/gas';
import { useGasFeeContext } from '../../../../../contexts/gasFee';
import { useI18nContext } from '../../../../../hooks/useI18nContext';
import { NetworkStabilityTooltip } from '../tooltips';
const GRADIENT_COLORS = [
'#037DD6',
'#1876C8',
'#2D70BA',
'#4369AB',
'#57629E',
'#6A5D92',
'#805683',
'#9A4D71',
'#B44561',
'#C54055',
'#D73A49',
];
const determineStatusInfo = (givenNetworkCongestion) => {
const networkCongestion = givenNetworkCongestion ?? 0.5;
const colorIndex = Math.round(networkCongestion * 10);
const color = GRADIENT_COLORS[colorIndex];
const sliderTickValue = colorIndex * 10;
if (networkCongestion >= NETWORK_CONGESTION_THRESHOLDS.BUSY) {
return {
statusLabel: 'busy',
tooltipLabel: 'highLowercase',
color,
sliderTickValue,
};
} else if (networkCongestion >= NETWORK_CONGESTION_THRESHOLDS.STABLE) {
return {
statusLabel: 'stable',
tooltipLabel: 'stableLowercase',
color,
sliderTickValue,
};
}
return {
statusLabel: 'notBusy',
tooltipLabel: 'lowLowercase',
color,
sliderTickValue,
};
};
const StatusSlider = () => {
const t = useI18nContext();
const { gasFeeEstimates } = useGasFeeContext();
const statusInfo = determineStatusInfo(gasFeeEstimates.networkCongestion);
return (
<NetworkStabilityTooltip
color={statusInfo.color}
tooltipLabel={statusInfo.tooltipLabel}
>
<div className="status-slider">
<div className="status-slider__arrow-container">
<div
className="status-slider__arrow-border"
style={{
marginLeft: `${statusInfo.sliderTickValue}%`,
}}
data-testid="status-slider-arrow-border"
>
<div
className="status-slider__arrow"
style={{
borderTopColor: statusInfo.color,
}}
data-testid="status-slider-arrow"
/>
</div>
</div>
<div className="status-slider__line" />
<div
className="status-slider__label"
style={{ color: statusInfo.color }}
data-testid="status-slider-label"
>
{t(statusInfo.statusLabel)}
</div>
</div>
</NetworkStabilityTooltip>
);
};
export default StatusSlider;