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') } +
+
+
+ {totalFee} +
+ +
+
+ ) + } + + 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 -
-
-
- $0.30 -
- -
-
+ { 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'} /> ) }