1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/hooks/useCurrencyDisplay.js
Mark Stacey 3732c5f71e
Add JSDoc ESLint rules (#12112)
ESLint rules have been added to enforce our JSDoc conventions. These
rules were introduced by updating `@metamask/eslint-config` to v9.

Some of the rules have been disabled because the effort to fix all lint
errors was too high. It might be easiest to enable these rules one
directory at a time, or one rule at a time.

Most of the changes in this PR were a result of running
`yarn lint:fix`. There were a handful of manual changes that seemed
obvious and simple to make. Anything beyond that and the rule was left
disabled.
2022-01-07 12:27:33 -03:30

106 lines
3.2 KiB
JavaScript

import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import {
formatCurrency,
getValueFromWeiHex,
} from '../helpers/utils/confirm-tx.util';
import { getCurrentCurrency } from '../selectors';
import {
getConversionRate,
getNativeCurrency,
} from '../ducks/metamask/metamask';
import { conversionUtil } from '../../shared/modules/conversion.utils';
/**
* Defines the shape of the options parameter for useCurrencyDisplay
*
* @typedef {Object} UseCurrencyOptions
* @property {string} [displayValue] - When present is used in lieu of formatting the inputValue
* @property {string} [prefix] - String to prepend to the final result
* @property {number} [numberOfDecimals] - Number of significant decimals to display
* @property {string} [denomination] - Denomination (wei, gwei) to convert to for display
* @property {string} [currency] - Currency type to convert to. Will override nativeCurrency
*/
/**
* Defines the return shape of the second value in the tuple
*
* @typedef {Object} CurrencyDisplayParts
* @property {string} [prefix] - string to prepend to the value for display
* @property {string} value - string representing the value, formatted for display
* @property {string} [suffix] - string to append to the value for display
*/
/**
* useCurrencyDisplay hook
*
* Given a hexadecimal encoded value string and an object of parameters used for formatting the
* display, produce both a fully formed string and the pieces of that string used for displaying
* the currency to the user
*
* @param {string} inputValue - The value to format for display
* @param {UseCurrencyOptions} opts - An object for options to format the inputValue
* @returns {[string, CurrencyDisplayParts]}
*/
export function useCurrencyDisplay(
inputValue,
{ displayValue, prefix, numberOfDecimals, denomination, currency, ...opts },
) {
const currentCurrency = useSelector(getCurrentCurrency);
const nativeCurrency = useSelector(getNativeCurrency);
const conversionRate = useSelector(getConversionRate);
const isUserPreferredCurrency = currency === currentCurrency;
const value = useMemo(() => {
if (displayValue) {
return displayValue;
}
if (
currency === nativeCurrency ||
(!isUserPreferredCurrency && !nativeCurrency)
) {
return conversionUtil(inputValue, {
fromNumericBase: 'hex',
toNumericBase: 'dec',
fromDenomination: 'WEI',
numberOfDecimals: numberOfDecimals || 2,
toDenomination: denomination,
});
} else if (isUserPreferredCurrency && conversionRate) {
return formatCurrency(
getValueFromWeiHex({
value: inputValue,
fromCurrency: nativeCurrency,
toCurrency: currency,
conversionRate,
numberOfDecimals: numberOfDecimals || 2,
toDenomination: denomination,
}),
currency,
);
}
return null;
}, [
inputValue,
nativeCurrency,
conversionRate,
displayValue,
numberOfDecimals,
denomination,
currency,
isUserPreferredCurrency,
]);
let suffix;
if (!opts.hideLabel) {
suffix = opts.suffix || currency?.toUpperCase();
}
return [
`${prefix || ''}${value}${suffix ? ` ${suffix}` : ''}`,
{ prefix, value, suffix },
];
}