aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorDan J Miller <danjm.com@gmail.com>2018-06-28 03:57:51 +0800
committerGitHub <noreply@github.com>2018-06-28 03:57:51 +0800
commit08b69a0cb07c46a7adfa180463e97d802f24d0dd (patch)
tree0e8ae94f69204bc0443a8066b4a48ef204a26283 /ui
parent1839ab53461913716d573a54511a408eb7865077 (diff)
parent957d729c17fcf49881d5e403afb9bfc9d0fd852a (diff)
downloadtangerine-wallet-browser-08b69a0cb07c46a7adfa180463e97d802f24d0dd.tar
tangerine-wallet-browser-08b69a0cb07c46a7adfa180463e97d802f24d0dd.tar.gz
tangerine-wallet-browser-08b69a0cb07c46a7adfa180463e97d802f24d0dd.tar.bz2
tangerine-wallet-browser-08b69a0cb07c46a7adfa180463e97d802f24d0dd.tar.lz
tangerine-wallet-browser-08b69a0cb07c46a7adfa180463e97d802f24d0dd.tar.xz
tangerine-wallet-browser-08b69a0cb07c46a7adfa180463e97d802f24d0dd.tar.zst
tangerine-wallet-browser-08b69a0cb07c46a7adfa180463e97d802f24d0dd.zip
Merge pull request #4677 from MetaMask/customize-gas-loading-wait
Only show the customize gas modal if the estimateGas call is not currently in flight.
Diffstat (limited to 'ui')
-rw-r--r--ui/app/actions.js21
-rw-r--r--ui/app/components/customize-gas-modal/index.js48
-rw-r--r--ui/app/reducers/app.js11
-rw-r--r--ui/app/selectors.js5
4 files changed, 79 insertions, 6 deletions
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 1edf692b6..41fc3c504 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -175,6 +175,8 @@ var actions = {
CLEAR_SEND: 'CLEAR_SEND',
OPEN_FROM_DROPDOWN: 'OPEN_FROM_DROPDOWN',
CLOSE_FROM_DROPDOWN: 'CLOSE_FROM_DROPDOWN',
+ GAS_LOADING_STARTED: 'GAS_LOADING_STARTED',
+ GAS_LOADING_FINISHED: 'GAS_LOADING_FINISHED',
setGasLimit,
setGasPrice,
updateGasData,
@@ -190,6 +192,8 @@ var actions = {
updateSendErrors,
clearSend,
setSelectedAddress,
+ gasLoadingStarted,
+ gasLoadingFinished,
// app messages
confirmSeedWords: confirmSeedWords,
showAccountDetail: showAccountDetail,
@@ -740,8 +744,9 @@ function updateGasData ({
to,
value,
}) {
- const estimatedGasPrice = estimateGasPriceFromRecentBlocks(recentBlocks)
return (dispatch) => {
+ dispatch(actions.gasLoadingStarted())
+ const estimatedGasPrice = estimateGasPriceFromRecentBlocks(recentBlocks)
return Promise.all([
Promise.resolve(estimatedGasPrice),
estimateGas({
@@ -762,14 +767,28 @@ function updateGasData ({
.then((gasEstimate) => {
dispatch(actions.setGasTotal(gasEstimate))
dispatch(updateSendErrors({ gasLoadingError: null }))
+ dispatch(actions.gasLoadingFinished())
})
.catch(err => {
log.error(err)
dispatch(updateSendErrors({ gasLoadingError: 'gasLoadingError' }))
+ dispatch(actions.gasLoadingFinished())
})
}
}
+function gasLoadingStarted () {
+ return {
+ type: actions.GAS_LOADING_STARTED,
+ }
+}
+
+function gasLoadingFinished () {
+ return {
+ type: actions.GAS_LOADING_FINISHED,
+ }
+}
+
function updateSendTokenBalance ({
selectedToken,
tokenContract,
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index c8522a3c7..cd8f76ed5 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -33,6 +33,7 @@ const {
const {
getGasPrice,
getGasLimit,
+ getGasIsLoading,
getForceGasMin,
conversionRateSelector,
getSendAmount,
@@ -51,6 +52,7 @@ function mapStateToProps (state) {
return {
gasPrice: getGasPrice(state),
gasLimit: getGasLimit(state),
+ gasIsLoading: getGasIsLoading(state),
forceGasMin: getForceGasMin(state),
conversionRate,
amount: getSendAmount(state),
@@ -73,7 +75,7 @@ function mapDispatchToProps (dispatch) {
}
}
-function getOriginalState (props) {
+function getFreshState (props) {
const gasPrice = props.gasPrice || MIN_GAS_PRICE_DEC
const gasLimit = props.gasLimit || MIN_GAS_LIMIT_DEC
@@ -97,7 +99,11 @@ inherits(CustomizeGasModal, Component)
function CustomizeGasModal (props) {
Component.call(this)
- this.state = getOriginalState(props)
+ const originalState = getFreshState(props)
+ this.state = {
+ ...originalState,
+ originalState,
+ }
}
CustomizeGasModal.contextTypes = {
@@ -106,6 +112,36 @@ CustomizeGasModal.contextTypes = {
module.exports = connect(mapStateToProps, mapDispatchToProps)(CustomizeGasModal)
+CustomizeGasModal.prototype.componentWillReceiveProps = function (nextProps) {
+ const currentState = getFreshState(this.props)
+ const {
+ gasPrice: currentGasPrice,
+ gasLimit: currentGasLimit,
+ } = currentState
+ const newState = getFreshState(nextProps)
+ const {
+ gasPrice: newGasPrice,
+ gasLimit: newGasLimit,
+ gasTotal: newGasTotal,
+ } = newState
+ const gasPriceChanged = currentGasPrice !== newGasPrice
+ const gasLimitChanged = currentGasLimit !== newGasLimit
+
+ if (gasPriceChanged) {
+ this.setState({
+ gasPrice: newGasPrice,
+ gasTotal: newGasTotal,
+ priceSigZeros: '',
+ priceSigDec: '',
+ })
+ }
+ if (gasLimitChanged) {
+ this.setState({ gasLimit: newGasLimit, gasTotal: newGasTotal })
+ }
+ if (gasLimitChanged || gasPriceChanged) {
+ this.validate({ gasLimit: newGasLimit, gasTotal: newGasTotal })
+ }
+}
CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
const {
@@ -137,7 +173,7 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) {
}
CustomizeGasModal.prototype.revert = function () {
- this.setState(getOriginalState(this.props))
+ this.setState(this.state.originalState)
}
CustomizeGasModal.prototype.validate = function ({ gasTotal, gasLimit }) {
@@ -233,7 +269,7 @@ CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) {
}
CustomizeGasModal.prototype.render = function () {
- const { hideModal, forceGasMin } = this.props
+ const { hideModal, forceGasMin, gasIsLoading } = this.props
const { gasPrice, gasLimit, gasTotal, error, priceSigZeros, priceSigDec } = this.state
let convertedGasPrice = conversionUtil(gasPrice, {
@@ -266,7 +302,7 @@ CustomizeGasModal.prototype.render = function () {
toNumericBase: 'dec',
})
- return h('div.send-v2__customize-gas', {}, [
+ return !gasIsLoading && h('div.send-v2__customize-gas', {}, [
h('div.send-v2__customize-gas__content', {
}, [
h('div.send-v2__customize-gas__header', {}, [
@@ -288,6 +324,7 @@ CustomizeGasModal.prototype.render = function () {
onChange: value => this.convertAndSetGasPrice(value),
title: this.context.t('gasPrice'),
copy: this.context.t('gasPriceCalculation'),
+ gasIsLoading,
}),
h(GasModalCard, {
@@ -297,6 +334,7 @@ CustomizeGasModal.prototype.render = function () {
onChange: value => this.convertAndSetGasLimit(value),
title: this.context.t('gasLimit'),
copy: this.context.t('gasLimitCalculation'),
+ gasIsLoading,
}),
]),
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 4e9d0848c..9cacf5fe7 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -62,6 +62,7 @@ function reduceApp (state, action) {
warning: null,
buyView: {},
isMouseUser: false,
+ gasIsLoading: false,
}, state.appState)
switch (action.type) {
@@ -675,6 +676,16 @@ function reduceApp (state, action) {
isMouseUser: action.value,
})
+ case actions.GAS_LOADING_STARTED:
+ return extend(appState, {
+ gasIsLoading: true,
+ })
+
+ case actions.GAS_LOADING_FINISHED:
+ return extend(appState, {
+ gasIsLoading: false,
+ })
+
default:
return appState
}
diff --git a/ui/app/selectors.js b/ui/app/selectors.js
index a29294b86..cf0affe9c 100644
--- a/ui/app/selectors.js
+++ b/ui/app/selectors.js
@@ -16,6 +16,7 @@ const selectors = {
transactionsSelector,
accountsWithSendEtherInfoSelector,
getCurrentAccountWithSendEtherInfo,
+ getGasIsLoading,
getGasPrice,
getGasLimit,
getForceGasMin,
@@ -117,6 +118,10 @@ function transactionsSelector (state) {
.sort((a, b) => b.time - a.time)
}
+function getGasIsLoading (state) {
+ return state.appState.gasIsLoading
+}
+
function getGasPrice (state) {
return state.metamask.send.gasPrice
}