From cf08131b49c380fca1fa327c029a7dc2f56f9130 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Fri, 12 Jun 2020 15:47:39 -0300
Subject: [PATCH] Show fiat balance on token page (#8791)

The token page overview now shows the balance in fiat.
---
 .../components/app/wallet-overview/index.scss |  7 ++++++
 .../app/wallet-overview/token-overview.js     | 23 ++++++++++++++++---
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/ui/app/components/app/wallet-overview/index.scss b/ui/app/components/app/wallet-overview/index.scss
index ac62d3f43..b563a33e1 100644
--- a/ui/app/components/app/wallet-overview/index.scss
+++ b/ui/app/components/app/wallet-overview/index.scss
@@ -102,6 +102,13 @@
     justify-content: center;
   }
 
+  &__secondary-balance {
+    font-size: 16px;
+    line-height: 23px;
+    font-weight: 400;
+    color: $Grey-400;
+  }
+
   &__button {
     min-width: initial;
     width: 100px;
diff --git a/ui/app/components/app/wallet-overview/token-overview.js b/ui/app/components/app/wallet-overview/token-overview.js
index 67f5783fb..ec2e9f19a 100644
--- a/ui/app/components/app/wallet-overview/token-overview.js
+++ b/ui/app/components/app/wallet-overview/token-overview.js
@@ -5,11 +5,13 @@ import { useHistory } from 'react-router-dom'
 
 import Button from '../../ui/button'
 import Identicon from '../../ui/identicon'
-import TokenBalance from '../../ui/token-balance'
+import CurrencyDisplay from '../../ui/currency-display'
 import { I18nContext } from '../../../contexts/i18n'
 import WalletOverview from './wallet-overview'
 import { SEND_ROUTE } from '../../../helpers/constants/routes'
 import { useMetricEvent } from '../../../hooks/useMetricEvent'
+import { useTokenTracker } from '../../../hooks/useTokenTracker'
+import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'
 import { getAssetImages } from '../../../selectors/selectors'
 import { updateSendToken } from '../../../store/actions'
 
@@ -25,15 +27,30 @@ const TokenOverview = ({ className, token }) => {
   })
   const history = useHistory()
   const assetImages = useSelector(getAssetImages)
+  const { tokensWithBalances } = useTokenTracker([token])
+  const balance = tokensWithBalances[0]?.string
+  const formattedFiatBalance = useTokenFiatAmount(token.address, balance, token.symbol)
 
   return (
     <WalletOverview
       balance={(
         <div className="token-overview__balance">
-          <TokenBalance
+          <CurrencyDisplay
             className="token-overview__primary-balance"
-            token={token}
+            displayValue={balance}
+            suffix={token.symbol}
           />
+          {
+            formattedFiatBalance
+              ? (
+                <CurrencyDisplay
+                  className="token-overview__secondary-balance"
+                  displayValue={formattedFiatBalance}
+                  hideLabel
+                />
+              )
+              : null
+          }
         </div>
       )}
       buttons={(