Show fiat amounts inline on token transfers (#8786)

Fiat amounts are now shown inline on token transfers in the transaction
list, where possible (i.e. where the conversion rates are known).

The logic for this hook is pretty tangled because it's used for so many
fundamentally different types of items (eth transactions, token
transactions, signature requests). In the future we should split these
into different components.

The documentation for the `useTokenFiatAmount` hook was updated to make
`tokenAmount` optional, but in practice it already worked as expected
without the amount being passed in.

ui/app/hooks/tests/useTransactionDisplayData.test.js

@@ -4,6 +4,7 @@ import { renderHook } from '@testing-library/react-hooks'
 import sinon from 'sinon'
 import transactions from '../../../../test/data/transaction-data.json'
 import { useTransactionDisplayData } from '../useTransactionDisplayData'
+import * as useTokenFiatAmountHooks from '../useTokenFiatAmount'
 import { getPreferences, getShouldShowFiat, getNativeCurrency, getCurrentCurrency } from '../../selectors'
 import { getTokens } from '../../ducks/metamask/metamask'
 import * as i18nhooks from '../useI18nContext'
@@ -74,11 +75,15 @@ const expectedResults = [
     status: 'confirmed' },
 ]
 
-let useSelector, useI18nContext
+let useSelector, useI18nContext, useTokenFiatAmount
 
 describe('useTransactionDisplayData', function () {
   before(function () {
     useSelector = sinon.stub(reactRedux, 'useSelector')
+    useTokenFiatAmount = sinon.stub(useTokenFiatAmountHooks, 'useTokenFiatAmount')
+    useTokenFiatAmount.returns((tokenAddress) => {
+      return tokenAddress ? '1 TST' : undefined
+    })
     useI18nContext = sinon.stub(i18nhooks, 'useI18nContext')
     useI18nContext.returns((key, variables) => getMessage('en', messages, key, variables))
     useSelector.callsFake((selector) => {

ui/app/hooks/useTokenFiatAmount.js

@@ -6,7 +6,7 @@ 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} [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

ui/app/hooks/useTransactionDisplayData.js

@@ -3,6 +3,7 @@ import { getKnownMethodData } from '../selectors/selectors'
 import { getTransactionActionKey, getStatusKey } from '../helpers/utils/transactions.util'
 import { camelCaseToCapitalize } from '../helpers/utils/common.util'
 import { useI18nContext } from './useI18nContext'
+import { useTokenFiatAmount } from './useTokenFiatAmount'
 import { PRIMARY, SECONDARY } from '../helpers/constants/common'
 import { getTokenToAddress } from '../helpers/utils/token-util'
 import { useUserPreferencedCurrency } from './useUserPreferencedCurrency'
@@ -84,6 +85,7 @@ export function useTransactionDisplayData (transactionGroup) {
   const token = isTokenCategory && knownTokens.find((token) => token.address === recipientAddress)
   const tokenData = useTokenData(initialTransaction?.txParams?.data, isTokenCategory)
   const tokenDisplayValue = useTokenDisplayValue(initialTransaction?.txParams?.data, token, isTokenCategory)
+  const tokenFiatAmount = useTokenFiatAmount(token?.address, tokenDisplayValue, token?.symbol)
 
   let category
   let title
@@ -127,14 +129,15 @@ export function useTransactionDisplayData (transactionGroup) {
 
   const [primaryCurrency] = useCurrencyDisplay(primaryValue, {
     prefix,
-    displayValue: isTokenCategory && tokenDisplayValue,
+    displayValue: isTokenCategory ? tokenDisplayValue : undefined,
-    suffix: isTokenCategory && token?.symbol,
+    suffix: isTokenCategory ? token?.symbol : undefined,
     ...primaryCurrencyPreferences,
   })
 
   const [secondaryCurrency] = useCurrencyDisplay(primaryValue, {
     prefix,
-    displayValue: isTokenCategory && tokenDisplayValue,
+    displayValue: isTokenCategory ? tokenFiatAmount : undefined,
+    hideLabel: isTokenCategory ? true : undefined,
     ...secondaryCurrencyPreferences,
   })
 
@@ -146,7 +149,7 @@ export function useTransactionDisplayData (transactionGroup) {
     primaryCurrency,
     senderAddress,
     recipientAddress,
-    secondaryCurrency: isTokenCategory ? undefined : secondaryCurrency,
+    secondaryCurrency: isTokenCategory && !tokenFiatAmount ? undefined : secondaryCurrency,
     status,
     isPending: status in PENDING_STATUS_HASH,
   }