diff options
author | Dan Miller <danjm.com@gmail.com> | 2018-11-14 01:02:04 +0800 |
---|---|---|
committer | Dan Miller <danjm.com@gmail.com> | 2018-12-04 11:36:22 +0800 |
commit | 7ffea926f23b2542c5182df7958defcdd9398b04 (patch) | |
tree | 81ebaea6a741402c7462736ea850d79b11b21088 /ui/app/components | |
parent | 7f2c5c09de67a67972fcbaae254d39aac6c96f56 (diff) | |
download | tangerine-wallet-browser-7ffea926f23b2542c5182df7958defcdd9398b04.tar tangerine-wallet-browser-7ffea926f23b2542c5182df7958defcdd9398b04.tar.gz tangerine-wallet-browser-7ffea926f23b2542c5182df7958defcdd9398b04.tar.bz2 tangerine-wallet-browser-7ffea926f23b2542c5182df7958defcdd9398b04.tar.lz tangerine-wallet-browser-7ffea926f23b2542c5182df7958defcdd9398b04.tar.xz tangerine-wallet-browser-7ffea926f23b2542c5182df7958defcdd9398b04.tar.zst tangerine-wallet-browser-7ffea926f23b2542c5182df7958defcdd9398b04.zip |
Add loading spinners when waiting for APIs in the gas customization modal
Diffstat (limited to 'ui/app/components')
8 files changed, 56 insertions, 6 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 23945483d..ac68b833c 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,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' +import Loading from '../../../loading-screen' import GasPriceChart from '../../gas-price-chart' export default class AdvancedTabContent extends Component { @@ -13,6 +14,7 @@ export default class AdvancedTabContent extends Component { updateCustomGasLimit: PropTypes.func, customGasPrice: PropTypes.number, customGasLimit: PropTypes.number, + gasEstimatesLoading: PropTypes.bool, millisecondsRemaining: PropTypes.number, totalFee: PropTypes.string, timeRemaining: PropTypes.string, @@ -98,6 +100,7 @@ export default class AdvancedTabContent extends Component { insufficientBalance, totalFee, gasChartProps, + gasEstimatesLoading, } = this.props return ( @@ -112,7 +115,10 @@ export default class AdvancedTabContent extends Component { insufficientBalance ) } <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div> - <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} /> + {!gasEstimatesLoading + ? <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} /> + : <Loading /> + } <div className="advanced-tab__fee-chart__speed-buttons"> <span>Slower</span> <span>Faster</span> 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 0c25874bb..f321ca696 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 @@ -5,6 +5,7 @@ import sinon from 'sinon' import AdvancedTabContent from '../advanced-tab-content.component.js' import GasPriceChart from '../../../gas-price-chart' +import Loading from '../../../../loading-screen' const propsMethodSpies = { updateCustomGasPrice: sinon.spy(), @@ -60,6 +61,22 @@ describe('AdvancedTabContent Component', function () { assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons')) }) + it('should render a loading component instead of the chart if gasEstimatesLoading is true', () => { + wrapper.setProps({ gasEstimatesLoading: true }) + const advancedTabChildren = wrapper.children() + assert.equal(advancedTabChildren.length, 2) + + assert(advancedTabChildren.at(0).hasClass('advanced-tab__transaction-data-summary')) + assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart')) + + const feeChartDiv = advancedTabChildren.at(1) + + assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows')) + assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title')) + assert(feeChartDiv.childAt(2).is(Loading)) + assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons')) + }) + it('should call renderDataSummary with the expected params', () => { assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1) const renderDataSummaryArgs = AdvancedTabContent.prototype.renderDataSummary.getCall(0).args diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js index 4483b71df..264d038da 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' +import Loading from '../../../loading-screen' import GasPriceButtonGroup from '../../gas-price-button-group' export default class BasicTabContent extends Component { @@ -12,15 +13,20 @@ export default class BasicTabContent extends Component { } render () { + const { gasPriceButtonGroupProps } = this.props + return ( <div className="basic-tab-content"> <div className="basic-tab-content__title">Estimated Processing Times</div> <div className="basic-tab-content__blurb">Select a higher gas fee to accelerate the processing of your transaction.*</div> - <GasPriceButtonGroup - className="gas-price-button-group--alt" - showCheck={true} - {...this.props.gasPriceButtonGroupProps} - /> + {!gasPriceButtonGroupProps.loading + ? <GasPriceButtonGroup + className="gas-price-button-group--alt" + showCheck={true} + {...gasPriceButtonGroupProps} + /> + : <Loading /> + } <div className="basic-tab-content__footer-blurb">* Accelerating a transaction by using a higher gas price increases its chances of getting processed by the network faster, but it is not always guaranteed.</div> </div> ) diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js index 0c9c6ac63..25abdd997 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js @@ -4,6 +4,7 @@ import { shallow } from 'enzyme' import BasicTabContent from '../basic-tab-content.component' import GasPriceButtonGroup from '../../../gas-price-button-group/' +import Loading from '../../../../loading-screen' const mockGasPriceButtonGroupProps = { buttonDataLoading: false, @@ -60,6 +61,7 @@ describe('BasicTabContent Component', function () { noButtonActiveByDefault, showCheck, } = wrapper.find(GasPriceButtonGroup).props() + assert.equal(wrapper.find(GasPriceButtonGroup).length, 1) assert.equal(buttonDataLoading, mockGasPriceButtonGroupProps.buttonDataLoading) assert.equal(className, mockGasPriceButtonGroupProps.className) assert.equal(noButtonActiveByDefault, mockGasPriceButtonGroupProps.noButtonActiveByDefault) @@ -67,5 +69,14 @@ describe('BasicTabContent Component', function () { assert.deepEqual(gasButtonInfo, mockGasPriceButtonGroupProps.gasButtonInfo) assert.equal(JSON.stringify(handleGasPriceSelection), JSON.stringify(mockGasPriceButtonGroupProps.handleGasPriceSelection)) }) + + it('should render a loading component instead of the GasPriceButtonGroup if gasPriceButtonGroupProps.loading is true', () => { + wrapper.setProps({ + gasPriceButtonGroupProps: { ...mockGasPriceButtonGroupProps, loading: true }, + }) + + assert.equal(wrapper.find(GasPriceButtonGroup).length, 0) + assert.equal(wrapper.find(Loading).length, 1) + }) }) }) 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 b5b13c849..5d8f92a59 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 @@ -68,6 +68,7 @@ export default class GasModalPageContainer extends Component { gasChartProps, currentTimeEstimate, insufficientBalance, + gasEstimatesLoading, }) { const { transactionFee } = this.props return ( @@ -81,6 +82,7 @@ export default class GasModalPageContainer extends Component { totalFee={newTotalFiat} gasChartProps={gasChartProps} insufficientBalance={insufficientBalance} + gasEstimatesLoading={gasEstimatesLoading} /> ) } diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js index 770493be0..42b96a729 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js @@ -32,6 +32,7 @@ import { formatTimeEstimate, getFastPriceEstimateInHexWEI, getBasicGasEstimateLoadingStatus, + getGasEstimatesLoadingStatus, getCustomGasLimit, getCustomGasPrice, getDefaultActiveButtonIndex, @@ -65,6 +66,8 @@ import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price const mapStateToProps = (state, ownProps) => { const { transaction = {} } = ownProps const buttonDataLoading = getBasicGasEstimateLoadingStatus(state) + const gasEstimatesLoading = getGasEstimatesLoadingStatus(state) + const { gasPrice: currentGasPrice, gas: currentGasLimit, value } = getTxParams(state, transaction.id) const customModalGasPriceInHex = getCustomGasPrice(state) || currentGasPrice const customModalGasLimitInHex = getCustomGasLimit(state) || currentGasLimit @@ -127,6 +130,7 @@ const mapStateToProps = (state, ownProps) => { isSpeedUp: transaction.status === 'submitted', txId: transaction.id, insufficientBalance, + gasEstimatesLoading, } } diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js index 22f2f02dd..2ba2fa9e7 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js @@ -232,6 +232,7 @@ describe('GasModalPageContainer Component', function () { customGasLimit: 456, newTotalFiat: '$0.30', currentTimeEstimate: '1 min 31 sec', + gasEstimatesLoading: 'mockGasEstimatesLoading', }) const advancedTabContentProps = renderAdvancedTabContentResult.props assert.equal(advancedTabContentProps.updateCustomGasPrice(), 'mockConvertThenUpdateCustomGasPrice') @@ -240,6 +241,7 @@ describe('GasModalPageContainer Component', function () { assert.equal(advancedTabContentProps.customGasLimit, 456) assert.equal(advancedTabContentProps.timeRemaining, '1 min 31 sec') assert.equal(advancedTabContentProps.totalFee, '$0.30') + assert.equal(advancedTabContentProps.gasEstimatesLoading, 'mockGasEstimatesLoading') }) }) diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js index ba2cfe282..82c6dcd69 100644 --- a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js +++ b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js @@ -80,6 +80,7 @@ describe('gas-modal-page-container container', () => { limit: 'aaaaaaaa', price: 'ffffffff', }, + gasEstimatesLoading: false, priceAndTimeEstimates: [ { gasprice: 3, expectedTime: '31' }, { gasprice: 4, expectedTime: '62' }, @@ -118,6 +119,7 @@ describe('gas-modal-page-container container', () => { defaultActiveButtonIndex: 'mockRenderableBasicEstimateData:4ffffffff', gasButtonInfo: 'mockRenderableBasicEstimateData:4', }, + gasEstimatesLoading: false, hideBasic: true, infoRowProps: { originalTotalFiat: '637.41', |