diff options
Adds redesign for the customize gas advanced tab.
Diffstat (limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js')
-rw-r--r-- | ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js | 35 |
1 files changed, 15 insertions, 20 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 56d10cc2b..5218dd477 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 @@ -1,6 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import TimeRemaining from './time-remaining' +import GasPriceChart from '../../gas-price-chart' export default class AdvancedTabContent extends Component { static contextTypes = { @@ -14,6 +14,7 @@ export default class AdvancedTabContent extends Component { customGasLimit: PropTypes.number, millisecondsRemaining: PropTypes.number, totalFee: PropTypes.string, + timeRemaining: PropTypes.string, } gasInput (value, onChange, min, precision, showGWEI) { @@ -27,9 +28,6 @@ export default class AdvancedTabContent extends Component { precision={precision} onChange={event => onChange(Number(event.target.value))} /> - {showGWEI - ? <span className="advanced-tab__gas-edit-row__gwei-symbol">GWEI</span> - : null} </div> ) } @@ -38,7 +36,7 @@ export default class AdvancedTabContent extends Component { return <i className="fa fa-info-circle" onClick={onClick} /> } - renderDataSummary (totalFee, millisecondsRemaining) { + renderDataSummary (totalFee, timeRemaining) { return ( <div className="advanced-tab__transaction-data-summary"> <div className="advanced-tab__transaction-data-summary__titles"> @@ -49,9 +47,7 @@ export default class AdvancedTabContent extends Component { <div className="advanced-tab__transaction-data-summary__fee"> {totalFee} </div> - <TimeRemaining - milliseconds={millisecondsRemaining} - /> + <div className="time-remaining">{timeRemaining}</div> </div> </div> ) @@ -72,7 +68,7 @@ export default class AdvancedTabContent extends Component { renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit) { return ( <div className="advanced-tab__gas-edit-rows"> - { this.renderGasEditRow('gasPriceNoDenom', customGasPrice, updateCustomGasPrice, customGasPrice, 9, true) } + { this.renderGasEditRow('gasPrice', customGasPrice, updateCustomGasPrice, customGasPrice, 9, true) } { this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, customGasLimit, 0) } </div> ) @@ -82,7 +78,7 @@ export default class AdvancedTabContent extends Component { const { updateCustomGasPrice, updateCustomGasLimit, - millisecondsRemaining, + timeRemaining, customGasPrice, customGasLimit, totalFee, @@ -90,17 +86,16 @@ export default class AdvancedTabContent extends Component { return ( <div className="advanced-tab"> - { this.renderDataSummary(totalFee, millisecondsRemaining) } - <div className="advanced-tab__fee-chart-title"> - { this.context.t('feeChartTitle') } + { this.renderDataSummary(totalFee, timeRemaining) } + <div className="advanced-tab__fee-chart"> + { this.renderGasEditRows( + customGasPrice, + updateCustomGasPrice, + customGasLimit, + updateCustomGasLimit + ) } + <GasPriceChart /> </div> - <div className="advanced-tab__fee-chart" /> - { this.renderGasEditRows( - customGasPrice, - updateCustomGasPrice, - customGasLimit, - updateCustomGasLimit - ) } </div> ) } |