1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-input-subtext/advanced-gas-fee-input-subtext.js
George Marshall 8fcbebc546
Update design tokens library from 1.5 to 1.6 WIP (#14732)
* 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
2022-05-25 08:35:36 -07:00

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;