Create `useTokenFiatAmount` hook (#8778)

This hook is responsible for converting a token balance to fiat. It has
been extracted from the `TokenCell` component, and will be used
elsewhere in a future PR.

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(
+  const formattedFiat = useTokenFiatAmount(address, string, symbol)
-    contractExchangeRates[address],
-    conversionRate,
-    currentCurrency,
-    string,
-    symbol
-  )
-
-  const showFiat = Boolean(formattedFiat) && currentCurrency.toUpperCase() !== 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}
     />
 
   )

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
+}