diff options
Diffstat (limited to 'ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content')
3 files changed, 41 insertions, 14 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} /> diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss index 69bb65f2f..b62919c0a 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss +++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss @@ -102,6 +102,11 @@ } } + &__insufficient-balance { + font-size: 12px; + color: red; + } + &__input-wrapper { position: relative; @@ -119,6 +124,10 @@ margin-top: 7px; } + &__input--error { + border: 1px solid $red; + } + &__input-arrows { position: absolute; top: 7px; @@ -155,6 +164,9 @@ } } + &__input-arrows--error { + border: 1px solid $red; + } input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js index d4549f4cd..0c25874bb 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js @@ -27,6 +27,7 @@ describe('AdvancedTabContent Component', function () { customGasLimit={23456} timeRemaining={21500} totalFee={'$0.25'} + insufficientBalance={false} />, { context: { t: (str1, str2) => str2 ? str1 + str2 : str1 } }) }) @@ -63,11 +64,13 @@ describe('AdvancedTabContent Component', function () { assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1) const renderDataSummaryArgs = AdvancedTabContent.prototype.renderDataSummary.getCall(0).args assert.deepEqual(renderDataSummaryArgs, ['$0.25', 21500]) + }) + it('should call renderGasEditRows with the expected params', () => { assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1) const renderGasEditRowArgs = AdvancedTabContent.prototype.renderGasEditRows.getCall(0).args assert.deepEqual(renderGasEditRowArgs, [ - 11, propsMethodSpies.updateCustomGasPrice, 23456, propsMethodSpies.updateCustomGasLimit, + 11, propsMethodSpies.updateCustomGasPrice, 23456, propsMethodSpies.updateCustomGasLimit, false, ]) }) }) @@ -142,7 +145,8 @@ describe('AdvancedTabContent Component', function () { 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasLimit', - () => 'mockUpdateCustomGasLimitReturn' + () => 'mockUpdateCustomGasLimitReturn', + false )) }) @@ -161,10 +165,10 @@ describe('AdvancedTabContent Component', function () { const renderGasEditRowSpyArgs = AdvancedTabContent.prototype.renderGasEditRow.args assert.equal(renderGasEditRowSpyArgs.length, 2) assert.deepEqual(renderGasEditRowSpyArgs[0].map(String), [ - 'gasPrice', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasPrice', 9, true, + 'gasPrice', 'mockGasPrice', () => 'mockUpdateCustomGasPriceReturn', 'mockGasPrice', false, 9, true, ].map(String)) assert.deepEqual(renderGasEditRowSpyArgs[1].map(String), [ - 'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 'mockGasLimit', 0, + 'gasLimit', 'mockGasLimit', () => 'mockUpdateCustomGasLimitReturn', 'mockGasLimit', false, 0, ].map(String)) }) }) @@ -195,8 +199,8 @@ describe('AdvancedTabContent Component', function () { 321, value => value + 7, 0, - 8, - false + false, + 8 )) }) @@ -204,7 +208,7 @@ describe('AdvancedTabContent Component', function () { assert(gasInput.hasClass('advanced-tab__gas-edit-row__input-wrapper')) }) - it('should render an input, but not a GWEI symbol', () => { + it('should render two children, including an input', () => { assert.equal(gasInput.children().length, 2) assert(gasInput.children().at(0).hasClass('advanced-tab__gas-edit-row__input')) }) |