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.

Author: Gudahtt

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 () => {

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>

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}
         />}