From 3c98be4214b19f8a8050a6798885d43ad24c1512 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Fri, 12 Jun 2020 14:37:06 -0300
Subject: [PATCH] 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 |  7 ++++++-
 ui/app/hooks/useTokenFiatAmount.js                   |  2 +-
 ui/app/hooks/useTransactionDisplayData.js            | 11 +++++++----
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/ui/app/hooks/tests/useTransactionDisplayData.test.js b/ui/app/hooks/tests/useTransactionDisplayData.test.js
index c394cfbb2..e8281cc72 100644
--- a/ui/app/hooks/tests/useTransactionDisplayData.test.js
+++ b/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) => {
diff --git a/ui/app/hooks/useTokenFiatAmount.js b/ui/app/hooks/useTokenFiatAmount.js
index b1c0ea251..34eaf0612 100644
--- a/ui/app/hooks/useTokenFiatAmount.js
+++ b/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
diff --git a/ui/app/hooks/useTransactionDisplayData.js b/ui/app/hooks/useTransactionDisplayData.js
index 2894191f6..a0509966f 100644
--- a/ui/app/hooks/useTransactionDisplayData.js
+++ b/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,
-    suffix: isTokenCategory && token?.symbol,
+    displayValue: isTokenCategory ? tokenDisplayValue : undefined,
+    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,
   }