Extract token to fiat conversion (#8777)

The conversion of token amounts to fiat amounts was extracted from the
`TokenCell` component, and moved to a utility function. This will be
used elsewhere in an upcoming PR.

ui/app/components/app/token-cell/token-cell.js

@@ -1,12 +1,12 @@
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { conversionUtil, multiplyCurrencies } from '../../../helpers/utils/conversion-util'
 import AssetListItem from '../asset-list-item'
 import { useSelector } from 'react-redux'
 import { getTokenExchangeRates, getConversionRate, getCurrentCurrency, getSelectedAddress } from '../../../selectors'
 import { useI18nContext } from '../../../hooks/useI18nContext'
-import { formatCurrency } from '../../../helpers/utils/confirm-tx.util'
+import { getFormattedTokenFiatAmount } from '../../../helpers/utils/token-util'
+
 
 export default function TokenCell ({ address, outdatedBalance, symbol, string, image, onClick }) {
   const contractExchangeRates = useSelector(getTokenExchangeRates)
@@ -15,33 +15,15 @@ export default function TokenCell ({ address, outdatedBalance, symbol, string, i
   const userAddress = useSelector(getSelectedAddress)
   const t = useI18nContext()
 
-  let currentTokenToFiatRate
+  const formattedFiat = getFormattedTokenFiatAmount(
-  let currentTokenInFiat
+    contractExchangeRates[address],
-  let formattedFiat = ''
+    conversionRate,
+    currentCurrency,
+    string,
+    symbol
+  )
 
-
+  const showFiat = Boolean(formattedFiat) && currentCurrency.toUpperCase() !== symbol
-  // if the conversionRate is 0 eg: currently unknown
-  // or the contract exchange rate is currently unknown
-  // the effective currentTokenToFiatRate is 0 and erroneous.
-  // Skipping this entire block will result in fiat not being
-  // shown to the user, instead of a fiat value of 0 for a non-zero
-  // token amount.
-  if (conversionRate > 0 && contractExchangeRates[address]) {
-    currentTokenToFiatRate = multiplyCurrencies(
-      contractExchangeRates[address],
-      conversionRate
-    )
-    currentTokenInFiat = conversionUtil(string, {
-      fromNumericBase: 'dec',
-      fromCurrency: symbol,
-      toCurrency: currentCurrency.toUpperCase(),
-      numberOfDecimals: 2,
-      conversionRate: currentTokenToFiatRate,
-    })
-    formattedFiat = `${formatCurrency(currentTokenInFiat, currentCurrency)} ${currentCurrency.toUpperCase()}`
-  }
-
-  const showFiat = Boolean(currentTokenInFiat) && currentCurrency.toUpperCase() !== symbol
 
   const warning = outdatedBalance
     ? (

ui/app/helpers/utils/token-util.js

@@ -2,6 +2,8 @@ import log from 'loglevel'
 import * as util from './util'
 import BigNumber from 'bignumber.js'
 import contractMap from 'eth-contract-metadata'
+import { conversionUtil, multiplyCurrencies } from './conversion-util'
+import { formatCurrency } from './confirm-tx.util'
 
 const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
   return {
@@ -142,3 +144,41 @@ export function getTokenToAddress (tokenParams = []) {
   const toAddressData = tokenParams.find((param) => param.name === '_to')
   return toAddressData ? toAddressData.value : tokenParams[0].value
 }
+
+/**
+ * Get the token balance converted to fiat and formatted for display
+ *
+ * @param {number} [contractExchangeRate] - The exchange rate between the current token and the native currency
+ * @param {number} conversionRate - The exchange rate between the current fiat currency and the native currency
+ * @param {string} currentCurrency - The currency code for the user's chosen fiat currency
+ * @param {string} [tokenAmount] - The current token balance
+ * @param {string} [tokenSymbol] - The token symbol
+ * @returns {string|undefined} The formatted token amount in the user's chosen fiat currency
+ */
+export function getFormattedTokenFiatAmount (
+  contractExchangeRate,
+  conversionRate,
+  currentCurrency,
+  tokenAmount,
+  tokenSymbol
+) {
+  // If the conversionRate is 0 (i.e. unknown) or the contract exchange rate
+  // is currently unknown, the fiat amount cannot be calculated so it is not
+  // shown to the user
+  if (conversionRate <= 0 || !contractExchangeRate || tokenAmount === undefined) {
+    return undefined
+  }
+
+  const currentTokenToFiatRate = multiplyCurrencies(
+    contractExchangeRate,
+    conversionRate
+  )
+  const currentTokenInFiat = conversionUtil(tokenAmount, {
+    fromNumericBase: 'dec',
+    fromCurrency: tokenSymbol,
+    toCurrency: currentCurrency.toUpperCase(),
+    numberOfDecimals: 2,
+    conversionRate: currentTokenToFiatRate,
+  })
+  return `${formatCurrency(currentTokenInFiat, currentCurrency)} ${currentCurrency.toUpperCase()}`
+}