mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 15:35:46 +01:00
8fcbebc546
* Updating account menu icon color * Updating design-tokens and making appropriate updates to extension styles * Adding more deprecated tags to colors * Adding spinner and removing todo comment * Remove comment * Updates * Updating snapshots * More color and ui updates * reverting transition change
98 lines
2.9 KiB
JavaScript
98 lines
2.9 KiB
JavaScript
import React, { useContext } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
|
|
import { isNullish } from '../../../../helpers/utils/util';
|
|
import { formatGasFeeOrFeeRange } from '../../../../helpers/utils/gas';
|
|
import { I18nContext } from '../../../../contexts/i18n';
|
|
import Box from '../../../ui/box';
|
|
import LoadingHeartBeat from '../../../ui/loading-heartbeat';
|
|
|
|
function determineTrendInfo(trend, t) {
|
|
switch (trend) {
|
|
case 'up':
|
|
return {
|
|
className: 'fa-arrow-up advanced-gas-fee-input-subtext__up',
|
|
color: 'var(--color-success-default)',
|
|
title: t('upArrow'),
|
|
};
|
|
case 'down':
|
|
return {
|
|
className: 'fa-arrow-down advanced-gas-fee-input-subtext__down',
|
|
color: 'var(--color-error-default)',
|
|
title: t('downArrow'),
|
|
};
|
|
case 'level':
|
|
return {
|
|
className: 'fa-arrow-right advanced-gas-fee-input-subtext__level',
|
|
color: 'var(--color-icon-alternative)',
|
|
title: t('levelArrow'),
|
|
};
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
const AdvancedGasFeeInputSubtext = ({ latest, historical, trend }) => {
|
|
const t = useContext(I18nContext);
|
|
const trendInfo = determineTrendInfo(trend, t);
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={4}
|
|
className="advanced-gas-fee-input-subtext"
|
|
>
|
|
{isNullish(latest) ? null : (
|
|
<Box display="flex" alignItems="center" data-testid="latest">
|
|
<span className="advanced-gas-fee-input-subtext__label">
|
|
{t('currentTitle')}
|
|
</span>
|
|
<span className="advanced-gas-fee-input-subtext__value">
|
|
<LoadingHeartBeat />
|
|
{formatGasFeeOrFeeRange(latest)}
|
|
</span>
|
|
{trendInfo === null ? null : (
|
|
<span className="advanced-gas-fee-input-subtext__icon">
|
|
<i
|
|
className={classnames('fa', trendInfo.className)}
|
|
style={{ color: trendInfo.color }}
|
|
title={trendInfo.title}
|
|
data-testid="fee-arrow"
|
|
/>
|
|
</span>
|
|
)}
|
|
</Box>
|
|
)}
|
|
{isNullish(historical) ? null : (
|
|
<Box>
|
|
<span
|
|
className="advanced-gas-fee-input-subtext__label"
|
|
data-testid="historical"
|
|
>
|
|
{t('twelveHrTitle')}
|
|
</span>
|
|
<span className="advanced-gas-fee-input-subtext__value">
|
|
<LoadingHeartBeat />
|
|
{formatGasFeeOrFeeRange(historical)}
|
|
</span>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
AdvancedGasFeeInputSubtext.propTypes = {
|
|
latest: PropTypes.oneOfType([
|
|
PropTypes.string,
|
|
PropTypes.arrayOf(PropTypes.string),
|
|
]),
|
|
historical: PropTypes.oneOfType([
|
|
PropTypes.string,
|
|
PropTypes.arrayOf(PropTypes.string),
|
|
]),
|
|
trend: PropTypes.oneOf(['up', 'down', 'level']),
|
|
};
|
|
|
|
export default AdvancedGasFeeInputSubtext;
|