diff options
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 | 25 |
1 files changed, 18 insertions, 7 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 b9ae93684..23945483d 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,5 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import classnames from 'classnames' import GasPriceChart from '../../gas-price-chart' export default class AdvancedTabContent extends Component { @@ -16,23 +17,31 @@ export default class AdvancedTabContent extends Component { totalFee: PropTypes.string, timeRemaining: PropTypes.string, gasChartProps: PropTypes.object, + insufficientBalance: PropTypes.bool, } - gasInput (value, onChange, min, precision, showGWEI) { + gasInput (value, onChange, min, insufficientBalance, precision, showGWEI) { return ( <div className="advanced-tab__gas-edit-row__input-wrapper"> <input - className="advanced-tab__gas-edit-row__input" + className={classnames('advanced-tab__gas-edit-row__input', { + 'advanced-tab__gas-edit-row__input--error': insufficientBalance, + })} type="number" value={value} min={min} precision={precision} onChange={event => onChange(Number(event.target.value))} /> - <div className="advanced-tab__gas-edit-row__input-arrows"> + <div className={classnames('advanced-tab__gas-edit-row__input-arrows', { + 'advanced-tab__gas-edit-row__input-arrows--error': insufficientBalance, + })}> <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap"><i className="fa fa-sm fa-angle-up" onClick={() => onChange(value + 1)} /></div> <div className="advanced-tab__gas-edit-row__input-arrows__i-wrap"><i className="fa fa-sm fa-angle-down" onClick={() => onChange(value - 1)} /></div> </div> + {insufficientBalance && <div className="advanced-tab__gas-edit-row__insufficient-balance"> + Insufficient Balance + </div>} </div> ) } @@ -70,11 +79,11 @@ export default class AdvancedTabContent extends Component { ) } - renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit) { + renderGasEditRows (customGasPrice, updateCustomGasPrice, customGasLimit, updateCustomGasLimit, insufficientBalance) { return ( <div className="advanced-tab__gas-edit-rows"> - { this.renderGasEditRow('gasPrice', customGasPrice, updateCustomGasPrice, customGasPrice, 9, true) } - { this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, customGasLimit, 0) } + { this.renderGasEditRow('gasPrice', customGasPrice, updateCustomGasPrice, customGasPrice, insufficientBalance, 9, true) } + { this.renderGasEditRow('gasLimit', customGasLimit, updateCustomGasLimit, customGasLimit, insufficientBalance, 0) } </div> ) } @@ -86,6 +95,7 @@ export default class AdvancedTabContent extends Component { timeRemaining, customGasPrice, customGasLimit, + insufficientBalance, totalFee, gasChartProps, } = this.props @@ -98,7 +108,8 @@ export default class AdvancedTabContent extends Component { customGasPrice, updateCustomGasPrice, customGasLimit, - updateCustomGasLimit + updateCustomGasLimit, + insufficientBalance ) } <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div> <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} /> |