From 1b3f1947ae003517e0097783acd6ba637af3468e Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Mon, 18 Nov 2019 19:16:05 -0400
Subject: [PATCH] Show transaction fee units on approve screen

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 143e274cd202..a0efe56f9668 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 9f11fbb2fb28..38644541dd8c 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 2a40cfa96005..65c91c12d312 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}
         />}