1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Cancel error rebased (#6341)

* Check balance before showing cancel

* Fix linter

* Use existing helper methods for calculating increased cancel price

* Add tooltip for disabled button

* Lint fix for cancelError branch.

* Disabling of cancel button should account for value of tx.
This commit is contained in:
Dan J Miller 2019-03-25 13:55:23 -02:30 committed by GitHub
parent 69f7968c70
commit 2f13a97d00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 72 additions and 16 deletions

View File

@ -989,6 +989,9 @@
"noTransactions": {
"message": "You have no transactions"
},
"notEnoughGas": {
"message": "Not Enough Gas"
},
"notFound": {
"message": "Not Found"
},

View File

@ -20,11 +20,13 @@ export default class TransactionListItemDetails extends PureComponent {
onRetry: PropTypes.func,
showCancel: PropTypes.bool,
showRetry: PropTypes.bool,
cancelDisabled: PropTypes.bool,
transactionGroup: PropTypes.object,
}
state = {
justCopied: false,
cancelDisabled: false,
}
handleEtherscanClick = () => {
@ -78,10 +80,52 @@ export default class TransactionListItemDetails extends PureComponent {
})
}
renderCancel () {
const { t } = this.context
const {
showCancel,
cancelDisabled,
} = this.props
if (!showCancel) {
return null
}
return cancelDisabled
? (
<Tooltip title={t('notEnoughGas')}>
<div>
<Button
type="raised"
onClick={this.handleCancel}
className="transaction-list-item-details__header-button"
disabled
>
{ t('cancel') }
</Button>
</div>
</Tooltip>
)
: (
<Button
type="raised"
onClick={this.handleCancel}
className="transaction-list-item-details__header-button"
>
{ t('cancel') }
</Button>
)
}
render () {
const { t } = this.context
const { justCopied } = this.state
const { transactionGroup, showCancel, showRetry, onCancel, onRetry } = this.props
const {
transactionGroup,
showRetry,
onCancel,
onRetry,
} = this.props
const { primaryTransaction: transaction } = transactionGroup
const { txParams: { to, from } = {} } = transaction
@ -101,17 +145,7 @@ export default class TransactionListItemDetails extends PureComponent {
</Button>
)
}
{
showCancel && (
<Button
type="raised"
onClick={this.handleCancel}
className="transaction-list-item-details__header-button"
>
{ t('cancel') }
</Button>
)
}
{ this.renderCancel() }
<Tooltip title={justCopied ? t('copiedTransactionId') : t('copyTransactionId')}>
<Button
type="raised"

View File

@ -23,6 +23,7 @@ export default class TransactionListItem extends PureComponent {
setSelectedToken: PropTypes.func,
showCancelModal: PropTypes.func,
showCancel: PropTypes.bool,
hasEnoughCancelGas: PropTypes.bool,
showRetry: PropTypes.bool,
showFiat: PropTypes.bool,
token: PropTypes.object,
@ -156,6 +157,7 @@ export default class TransactionListItem extends PureComponent {
nonceAndDate,
primaryTransaction,
showCancel,
hasEnoughCancelGas,
showRetry,
tokenData,
transactionGroup,
@ -213,6 +215,7 @@ export default class TransactionListItem extends PureComponent {
showRetry={showRetry && methodData.done}
onCancel={this.handleCancel}
showCancel={showCancel}
cancelDisabled={!hasEnoughCancelGas}
/>
</div>
)

View File

@ -6,7 +6,7 @@ import TransactionListItem from './transaction-list-item.component'
import { setSelectedToken, showModal, showSidebar, addKnownMethodData } from '../../../store/actions'
import { hexToDecimal } from '../../../helpers/utils/conversions.util'
import { getTokenData } from '../../../helpers/utils/transactions.util'
import { increaseLastGasPrice } from '../../../helpers/utils/confirm-tx.util'
import { getHexGasTotal, increaseLastGasPrice } from '../../../helpers/utils/confirm-tx.util'
import { formatDate } from '../../../helpers/utils/util'
import {
fetchBasicGasAndTimeEstimates,
@ -14,16 +14,32 @@ import {
setCustomGasPriceForRetry,
setCustomGasLimit,
} from '../../../ducks/gas/gas.duck'
import {getIsMainnet, preferencesSelector} from '../../../selectors/selectors'
import { getIsMainnet, preferencesSelector, getSelectedAddress, conversionRateSelector } from '../../../selectors/selectors'
import { isBalanceSufficient } from '../send/send.utils'
const mapStateToProps = state => {
const { metamask: { knownMethodData } } = state
const mapStateToProps = (state, ownProps) => {
const { metamask: { knownMethodData, accounts } } = state
const { showFiatInTestnets } = preferencesSelector(state)
const isMainnet = getIsMainnet(state)
const { transactionGroup: { primaryTransaction } = {} } = ownProps
const { txParams: { gas: gasLimit, gasPrice, value } = {} } = primaryTransaction
const selectedAccountBalance = accounts[getSelectedAddress(state)].balance
const hasEnoughCancelGas = primaryTransaction.txParams && isBalanceSufficient({
amount: value,
gasTotal: getHexGasTotal({
gasPrice: increaseLastGasPrice(gasPrice),
gasLimit,
}),
balance: selectedAccountBalance,
conversionRate: conversionRateSelector(state),
})
return {
knownMethodData,
showFiat: (isMainnet || !!showFiatInTestnets),
selectedAccountBalance,
hasEnoughCancelGas,
}
}