Split advanced-tab-content.component.js render() method into smaller pieces; add translations to the same file.

app/_locales/en/messages.json

@@ -439,6 +439,9 @@
   "failed": {
     "message": "Failed"
   },
+  "feeChartTitle": {
+    "message": "Live Transaction Fee Predictions"
+  },
   "fiat": {
     "message": "Fiat",
     "description": "Exchange type"
@@ -493,6 +496,9 @@
   "gasPrice": {
     "message": "Gas Price (GWEI)"
   },
+  "gasPriceNoDenom": {
+    "message": "Gas Price"
+  },
   "gasPriceCalculation": {
     "message": "We calculate the suggested gas prices based on network success rates."
   },
@@ -773,6 +779,9 @@
   "newTotal": {
     "message": "New Total"
   },
+  "newTransactionFee": {
+    "message": "New Transaction Fee"
+  },
   "next": {
     "message": "Next"
   },
@@ -1274,6 +1283,9 @@
   "transactionNumber": {
     "message": "Transaction Number"
   },
+  "transactionTime": {
+    "message": "Transaction Time"
+  },
   "transfer": {
     "message": "Transfer"
   },

ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js

@@ -18,6 +18,7 @@ export default class AdvancedTabContent extends Component {
     customGasPrice: PropTypes.number,
     customGasLimit: PropTypes.number,
     millisecondsRemaining: PropTypes.number,
+    totalFee: PropTypes.string,
   }
 
   gasInput (value, onChange, min, precision, showGWEI) {
@@ -40,6 +41,46 @@ export default class AdvancedTabContent extends Component {
     return <i className="fa info-circle" onClick={onClick} />
   }
 
+  renderDataSummary (totalFee, millisecondsRemaining) {
+    return (
+      <div className="advanced-tab__transaction-data-summary">
+        <div className="advanced-tab__transaction-data-summary__titles">
+          <span>{ this.context.t('newTransactionFee') }</span>
+          <span>~{ this.context.t('transactionTime') }</span>
+        </div>
+        <div className="advanced-tab__transaction-data-summary__container">
+          <div className="advanced-tab__transaction-data-summary__fee">
+            {totalFee}
+          </div>
+          <TimeRemaining
+            milliseconds={millisecondsRemaining}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit) {
+    return (
+      <div className="advanced-tab__gas-edit-rows">
+        <div className="advanced-tab__gas-edit-row">
+          <div className="advanced-tab__gas-edit-row__label">
+            { this.context.t('gasPriceNoDenom') }
+            { this.infoButton(() => {}) }
+          </div>
+          { this.gasInput(customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
+        </div>
+        <div className="advanced-tab__gas-edit-row">
+          <div className="advanced-tab__gas-edit-row__label">
+            { this.context.t('gasLimit') }
+            { this.infoButton(() => {}) }
+          </div>
+          { this.gasInput(customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
+        </div>
+      </div>
+    )
+  }
+
   render () {
     const {
       updateCustomGasPrice,
@@ -47,26 +88,14 @@ export default class AdvancedTabContent extends Component {
       millisecondsRemaining,
       customGasPrice,
       customGasLimit,
+      totalFee,
     } = this.props
 
     return (
       <div className="advanced-tab">
-        <div className="advanced-tab__transaction-data-summary">
-          <div className="advanced-tab__transaction-data-summary__titles">
-            <span>New Transaction Fee</span>
-            <span>~Transaction Time</span>
-          </div>
-          <div className="advanced-tab__transaction-data-summary__container">
-            <div className="advanced-tab__transaction-data-summary__fee">
-              $0.30
-            </div>
-            <TimeRemaining
-              milliseconds={millisecondsRemaining}
-            />
-          </div>
-        </div>
+        { this.renderDataSummary(totalFee, millisecondsRemaining) }
         <div className="advanced-tab__fee-chart-title">
-          Live Transaction Fee Predictions
+          { this.context.t('feeChartTitle') }
         </div>
         <div className="advanced-tab__fee-chart" />
         <div className="advanced-tab__slider-container">
@@ -83,22 +112,12 @@ export default class AdvancedTabContent extends Component {
             coloredStart={{}}
           />
         </div>
-        <div className="advanced-tab__gas-edit-rows">
-          <div className="advanced-tab__gas-edit-row">
-            <div className="advanced-tab__gas-edit-row__label">
-              Gas Price
-              { this.infoButton(() => {}) }
-            </div>
-            { this.gasInput(customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
-          </div>
-          <div className="advanced-tab__gas-edit-row">
-            <div className="advanced-tab__gas-edit-row__label">
-              Gas Limit
-              { this.infoButton(() => {}) }
-            </div>
-            { this.gasInput(customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
-          </div>
-        </div>
+        { this.renderGasEditRows(
+            customGasPrice,
+            updateCustomGasPrice,
+            customGasLimit,
+            updateCustomGasLimit
+        ) }
       </div>
     )
   }

ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js

@@ -40,6 +40,7 @@ export default class GasModalPageContainer extends Component {
         customGasPrice={customGasPrice}
         customGasLimit={customGasLimit}
         millisecondsRemaining={91000}
+        totalFee={'$0.30'}
       />
     )
   }