diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 103d8534f..017a8a380 100644
--- a/app/_locales/en/messages.json
+++ b/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"
},
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 7ddf13e51..8e593f029 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
@@ -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
}
+ renderDataSummary (totalFee, millisecondsRemaining) {
+ return (
+
+
+ { this.context.t('newTransactionFee') }
+ ~{ this.context.t('transactionTime') }
+
+
+
+ )
+ }
+
+ renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit) {
+ return (
+
+
+
+ { this.context.t('gasPriceNoDenom') }
+ { this.infoButton(() => {}) }
+
+ { this.gasInput(customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
+
+
+
+ { this.context.t('gasLimit') }
+ { this.infoButton(() => {}) }
+
+ { this.gasInput(customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
+
+
+ )
+ }
+
render () {
const {
updateCustomGasPrice,
@@ -47,26 +88,14 @@ export default class AdvancedTabContent extends Component {
millisecondsRemaining,
customGasPrice,
customGasLimit,
+ totalFee,
} = this.props
return (
-
-
- New Transaction Fee
- ~Transaction Time
-
-
-
+ { this.renderDataSummary(totalFee, millisecondsRemaining) }
- Live Transaction Fee Predictions
+ { this.context.t('feeChartTitle') }
@@ -83,22 +112,12 @@ export default class AdvancedTabContent extends Component {
coloredStart={{}}
/>
-
-
-
- Gas Price
- { this.infoButton(() => {}) }
-
- { this.gasInput(customGasPrice, updateCustomGasPrice, MIN_GAS_PRICE_DEC, 9, true) }
-
-
-
- Gas Limit
- { this.infoButton(() => {}) }
-
- { this.gasInput(customGasLimit, updateCustomGasLimit, MIN_GAS_LIMIT_DEC, 0) }
-
-
+ { this.renderGasEditRows(
+ customGasPrice,
+ updateCustomGasPrice,
+ customGasLimit,
+ updateCustomGasLimit
+ ) }
)
}
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 1d7a9d986..e47ebaf65 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
@@ -40,6 +40,7 @@ export default class GasModalPageContainer extends Component {
customGasPrice={customGasPrice}
customGasLimit={customGasLimit}
millisecondsRemaining={91000}
+ totalFee={'$0.30'}
/>
)
}