1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js
Dan J Miller 6602e4a013
Ensure smart contract interactions are properly represented on the confirm screen (#15446)
* Ensure smart contract interactions are properly represented on the confirm screen

* Fix unit tests

* Code cleanup

* Cleanup

* Code cleanup

* Fix test
2022-08-03 17:05:34 -02:30

75 lines
2.0 KiB
JavaScript

import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { PRIMARY, SECONDARY, ETH } from '../../../helpers/constants/common';
import CurrencyDisplay from '../../ui/currency-display';
import { useUserPreferencedCurrency } from '../../../hooks/useUserPreferencedCurrency';
export default function UserPreferencedCurrencyDisplay({
'data-testid': dataTestId,
ethLogoHeight = 14,
ethNumberOfDecimals,
fiatNumberOfDecimals,
numberOfDecimals: propsNumberOfDecimals,
showEthLogo,
type,
showFiat,
showCurrencySuffix,
...restProps
}) {
const { currency, numberOfDecimals } = useUserPreferencedCurrency(type, {
ethNumberOfDecimals,
fiatNumberOfDecimals,
numberOfDecimals: propsNumberOfDecimals,
showFiatOverride: showFiat,
});
const prefixComponent = useMemo(() => {
return (
currency === ETH &&
showEthLogo && (
<i
className="fab fa-ethereum"
style={{
color: 'var(--color-icon-default)',
fontSize: ethLogoHeight,
}}
/>
)
);
}, [currency, showEthLogo, ethLogoHeight]);
return (
<CurrencyDisplay
{...restProps}
currency={currency}
data-testid={dataTestId}
numberOfDecimals={numberOfDecimals}
prefixComponent={prefixComponent}
suffix={showCurrencySuffix && !showEthLogo && currency}
/>
);
}
UserPreferencedCurrencyDisplay.propTypes = {
className: PropTypes.string,
'data-testid': PropTypes.string,
prefix: PropTypes.string,
value: PropTypes.string,
numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
hideLabel: PropTypes.bool,
hideTitle: PropTypes.bool,
style: PropTypes.object,
showEthLogo: PropTypes.bool,
ethLogoHeight: PropTypes.number,
type: PropTypes.oneOf([PRIMARY, SECONDARY]),
ethNumberOfDecimals: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
fiatNumberOfDecimals: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
showFiat: PropTypes.bool,
showCurrencySuffix: PropTypes.bool,
};