diff --git a/ui/app/components/app/token-cell/token-cell.js b/ui/app/components/app/token-cell/token-cell.js index a40a7f89b..cf23b51ac 100644 --- a/ui/app/components/app/token-cell/token-cell.js +++ b/ui/app/components/app/token-cell/token-cell.js @@ -3,27 +3,16 @@ import PropTypes from 'prop-types' import React from 'react' import AssetListItem from '../asset-list-item' import { useSelector } from 'react-redux' -import { getTokenExchangeRates, getConversionRate, getCurrentCurrency, getSelectedAddress } from '../../../selectors' +import { getSelectedAddress } from '../../../selectors' import { useI18nContext } from '../../../hooks/useI18nContext' -import { getFormattedTokenFiatAmount } from '../../../helpers/utils/token-util' +import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount' export default function TokenCell ({ address, outdatedBalance, symbol, string, image, onClick }) { - const contractExchangeRates = useSelector(getTokenExchangeRates) - const conversionRate = useSelector(getConversionRate) - const currentCurrency = useSelector(getCurrentCurrency) const userAddress = useSelector(getSelectedAddress) const t = useI18nContext() - const formattedFiat = getFormattedTokenFiatAmount( - contractExchangeRates[address], - conversionRate, - currentCurrency, - string, - symbol - ) - - const showFiat = Boolean(formattedFiat) && currentCurrency.toUpperCase() !== symbol + const formattedFiat = useTokenFiatAmount(address, string, symbol) const warning = outdatedBalance ? ( @@ -50,7 +39,7 @@ export default function TokenCell ({ address, outdatedBalance, symbol, string, i tokenImage={image} warning={warning} primary={`${string || 0} ${symbol}`} - secondary={showFiat ? formattedFiat : undefined} + secondary={formattedFiat} /> ) diff --git a/ui/app/hooks/useTokenFiatAmount.js b/ui/app/hooks/useTokenFiatAmount.js new file mode 100644 index 000000000..b1c0ea251 --- /dev/null +++ b/ui/app/hooks/useTokenFiatAmount.js @@ -0,0 +1,37 @@ +import { useMemo } from 'react' +import { useSelector } from 'react-redux' +import { getTokenExchangeRates, getConversionRate, getCurrentCurrency } from '../selectors' +import { getFormattedTokenFiatAmount } from '../helpers/utils/token-util' + +/** + * Get the token balance converted to fiat and formatted for display + * + * @param {string} tokenAddress - The token address + * @param {string} [tokenAmount] - The token balance + * @param {string} [tokenSymbol] - The token symbol + * @return {string} - The formatted token amount in the user's chosen fiat currency + */ +export function useTokenFiatAmount (tokenAddress, tokenAmount, tokenSymbol) { + const contractExchangeRates = useSelector(getTokenExchangeRates) + const conversionRate = useSelector(getConversionRate) + const currentCurrency = useSelector(getCurrentCurrency) + + const tokenExchangeRate = contractExchangeRates[tokenAddress] + + const formattedFiat = useMemo( + () => getFormattedTokenFiatAmount( + tokenExchangeRate, + conversionRate, + currentCurrency, + tokenAmount, + tokenSymbol + ), + [tokenExchangeRate, conversionRate, currentCurrency, tokenAmount, tokenSymbol] + ) + + if (currentCurrency.toUpperCase() === tokenSymbol) { + return undefined + } + + return formattedFiat +}