From 5c356a4cac8f1cbefc3d863e22d8273ab73614aa Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Tue, 19 Nov 2019 09:41:28 -0400
Subject: [PATCH] Show transaction fee units on approve screen (#7468)

The units for the amounts shown on the approve screen in the
transaction fee section were missing. It appears that they were present
in an early version of the approve screen (#7271) but they got lost
somewhere along the way.
---
 test/e2e/metamask-ui.spec.js                               | 2 +-
 .../confirm-approve-content.component.js                   | 7 +++++--
 ui/app/pages/confirm-approve/confirm-approve.component.js  | 2 ++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index 143e274cd..a0efe56f9 100644
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@@ -1190,7 +1190,7 @@ describe('MetaMask', function () {
       await driver.wait(until.stalenessOf(gasModal))
 
       const gasFeeInEth = await findElement(driver, By.css('.confirm-approve-content__transaction-details-content__secondary-fee'))
-      assert.equal(await gasFeeInEth.getText(), '0.0006')
+      assert.equal(await gasFeeInEth.getText(), '0.0006 ETH')
     })
 
     it('edits the permission', async () => {
diff --git a/ui/app/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/app/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
index 9f11fbb2f..38644541d 100644
--- a/ui/app/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/app/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@@ -5,6 +5,7 @@ import Identicon from '../../../components/ui/identicon'
 import {
   addressSummary,
 } from '../../../helpers/utils/util'
+import { formatCurrency } from '../../../helpers/utils/confirm-tx.util'
 
 export default class ConfirmApproveContent extends Component {
   static contextTypes = {
@@ -26,6 +27,7 @@ export default class ConfirmApproveContent extends Component {
     tokenBalance: PropTypes.string,
     data: PropTypes.string,
     toAddress: PropTypes.string,
+    currentCurrency: PropTypes.string,
     fiatTransactionTotal: PropTypes.string,
     ethTransactionTotal: PropTypes.string,
   }
@@ -68,6 +70,7 @@ export default class ConfirmApproveContent extends Component {
   renderTransactionDetailsContent () {
     const { t } = this.context
     const {
+      currentCurrency,
       ethTransactionTotal,
       fiatTransactionTotal,
     } = this.props
@@ -78,10 +81,10 @@ export default class ConfirmApproveContent extends Component {
         </div>
         <div className="confirm-approve-content__transaction-details-content__fee">
           <div className="confirm-approve-content__transaction-details-content__primary-fee">
-            { fiatTransactionTotal }
+            { formatCurrency(fiatTransactionTotal, currentCurrency) }
           </div>
           <div className="confirm-approve-content__transaction-details-content__secondary-fee">
-            { ethTransactionTotal }
+            { `${ethTransactionTotal} ETH` }
           </div>
         </div>
       </div>
diff --git a/ui/app/pages/confirm-approve/confirm-approve.component.js b/ui/app/pages/confirm-approve/confirm-approve.component.js
index be1eb1969..e8c44cd4f 100644
--- a/ui/app/pages/confirm-approve/confirm-approve.component.js
+++ b/ui/app/pages/confirm-approve/confirm-approve.component.js
@@ -62,6 +62,7 @@ export default class ConfirmApprove extends Component {
       data,
       decimals,
       txData,
+      currentCurrency,
       ethTransactionTotal,
       fiatTransactionTotal,
       ...restProps
@@ -95,6 +96,7 @@ export default class ConfirmApprove extends Component {
           showEditApprovalPermissionModal={showEditApprovalPermissionModal}
           data={data}
           toAddress={toAddress}
+          currentCurrency={currentCurrency}
           ethTransactionTotal={ethTransactionTotal}
           fiatTransactionTotal={fiatTransactionTotal}
         />}