diff options
3 files changed, 63 insertions, 31 deletions
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 <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> ) } 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'} /> ) } |