From 66f7102c060f89d08e5997de4c318267e9b1357c Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Wed, 12 Dec 2018 13:13:10 -0330
Subject: [PATCH] Show transaction fee instead of total fee in top left of gas
 customization modal.

---
 .../advanced-tab-content.component.js                  | 10 +++++-----
 .../tests/advanced-tab-content-component.test.js       |  2 +-
 .../gas-modal-page-container.component.js              |  4 ++--
 .../tests/gas-modal-page-container-component.test.js   |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index ba28ba63d..366ad88c9 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
@@ -17,7 +17,7 @@ export default class AdvancedTabContent extends Component {
     customGasLimit: PropTypes.number,
     gasEstimatesLoading: PropTypes.bool,
     millisecondsRemaining: PropTypes.number,
-    totalFee: PropTypes.string,
+    transactionFee: PropTypes.string,
     timeRemaining: PropTypes.string,
     gasChartProps: PropTypes.object,
     insufficientBalance: PropTypes.bool,
@@ -104,7 +104,7 @@ export default class AdvancedTabContent extends Component {
     return <i className="fa fa-info-circle" onClick={onClick} />
   }
 
-  renderDataSummary (totalFee, timeRemaining) {
+  renderDataSummary (transactionFee, timeRemaining) {
     return (
       <div className="advanced-tab__transaction-data-summary">
         <div className="advanced-tab__transaction-data-summary__titles">
@@ -113,7 +113,7 @@ export default class AdvancedTabContent extends Component {
         </div>
         <div className="advanced-tab__transaction-data-summary__container">
           <div className="advanced-tab__transaction-data-summary__fee">
-            {totalFee}
+            {transactionFee}
           </div>
           <div className="time-remaining">{timeRemaining}</div>
         </div>
@@ -173,16 +173,16 @@ export default class AdvancedTabContent extends Component {
       customGasPrice,
       customGasLimit,
       insufficientBalance,
-      totalFee,
       gasChartProps,
       gasEstimatesLoading,
       customPriceIsSafe,
       isSpeedUp,
+      transactionFee,
     } = this.props
 
     return (
       <div className="advanced-tab">
-        { this.renderDataSummary(totalFee, timeRemaining) }
+        { this.renderDataSummary(transactionFee, timeRemaining) }
         <div className="advanced-tab__fee-chart">
           { this.renderGasEditRows({
             customGasPrice,
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
index 932be6290..2500ee267 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@@ -28,7 +28,7 @@ describe('AdvancedTabContent Component', function () {
       customGasPrice={11}
       customGasLimit={23456}
       timeRemaining={21500}
-      totalFee={'$0.25'}
+      transactionFee={'$0.25'}
       insufficientBalance={false}
       customPriceIsSafe={true}
       isSpeedUp={false}
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
index 64c2be353..174bd8ea8 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
@@ -74,8 +74,8 @@ export default class GasModalPageContainer extends Component {
     gasEstimatesLoading,
     customPriceIsSafe,
     isSpeedUp,
+    transactionFee,
   }) {
-    const { transactionFee } = this.props
     return (
       <AdvancedTabContent
         updateCustomGasPrice={convertThenUpdateCustomGasPrice}
@@ -133,7 +133,7 @@ export default class GasModalPageContainer extends Component {
   }) {
     let tabsToRender = [
       { name: 'basic', content: this.renderBasicTabContent(gasPriceButtonGroupProps) },
-      { name: 'advanced', content: this.renderAdvancedTabContent(advancedTabProps) },
+      { name: 'advanced', content: this.renderAdvancedTabContent({ transactionFee, ...advancedTabProps }) },
     ]
 
     if (hideBasic) {
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js
index f068c40d0..1761ad2b0 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js
@@ -185,7 +185,7 @@ describe('GasModalPageContainer Component', function () {
       assert.equal(GP.renderAdvancedTabContent.callCount, 1)
 
       assert.deepEqual(GP.renderBasicTabContent.getCall(0).args[0], mockGasPriceButtonGroupProps)
-      assert.deepEqual(GP.renderAdvancedTabContent.getCall(0).args[0], { otherProps: 'mockAdvancedTabProps' })
+      assert.deepEqual(GP.renderAdvancedTabContent.getCall(0).args[0], { transactionFee: 'mockTransactionFee', otherProps: 'mockAdvancedTabProps' })
     })
 
     it('should call renderInfoRows with the expected props', () => {