1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-27 04:46:10 +01:00
metamask-extension/ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js
Mark Stacey ba54a3d83b
Update ESLint config to v8 (#12886)
The ESLint config has been updated to v8. The breaking changes are:

* The Prettier rule `quoteProps` has been changed from `consistent` to
`as-needed`, meaning that if one key requires quoting, only that key is
quoted rather than all keys.
* The ESLint rule `no-shadow` has been made more strict. It now
prevents globals from being shadowed as well.

Most of these changes were applied with `yarn lint:fix`. Only the
shadowing changes required manual fixing (shadowing variable names were
either replaced with destructuring or renamed).

The dependency `globalThis` was added to the list of dynamic
dependencies in the build system, where it should have been already.
This was causing `depcheck` to fail because the new lint rules required
removing the one place where `globalThis` had been erroneously imported
previously.

A rule requiring a newline between multiline blocks and expressions has
been disabled temporarily to make this PR smaller and to avoid
introducing conflicts with other PRs.
2021-12-09 15:36:24 -03:30

63 lines
1.8 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 = 12,
ethNumberOfDecimals,
fiatNumberOfDecimals,
numberOfDecimals: propsNumberOfDecimals,
showEthLogo,
type,
...restProps
}) {
const { currency, numberOfDecimals } = useUserPreferencedCurrency(type, {
ethNumberOfDecimals,
fiatNumberOfDecimals,
numberOfDecimals: propsNumberOfDecimals,
});
const prefixComponent = useMemo(() => {
return (
currency === ETH &&
showEthLogo && (
<img src="./images/eth.svg" height={ethLogoHeight} alt="" />
)
);
}, [currency, showEthLogo, ethLogoHeight]);
return (
<CurrencyDisplay
{...restProps}
currency={currency}
data-testid={dataTestId}
numberOfDecimals={numberOfDecimals}
prefixComponent={prefixComponent}
/>
);
}
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.oneOfType([PropTypes.string, PropTypes.number]),
type: PropTypes.oneOf([PRIMARY, SECONDARY]),
ethNumberOfDecimals: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
fiatNumberOfDecimals: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
};