diff options
author | Alexander Tseung <alextsg@users.noreply.github.com> | 2018-12-10 04:48:06 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-12-10 04:48:06 +0800 |
commit | d8ab9cc002c10757b7382a174dafff7a0247e307 (patch) | |
tree | d0a46ac3ca2334ddec2ee240214d67a8122e81b7 /ui/app/components/transaction-list-item | |
parent | 575fb607c3b8deea831aa28293303991b3f6be29 (diff) | |
download | tangerine-wallet-browser-d8ab9cc002c10757b7382a174dafff7a0247e307.tar.gz tangerine-wallet-browser-d8ab9cc002c10757b7382a174dafff7a0247e307.tar.zst tangerine-wallet-browser-d8ab9cc002c10757b7382a174dafff7a0247e307.zip |
Group transactions by nonce (#5886)
Diffstat (limited to 'ui/app/components/transaction-list-item')
3 files changed, 68 insertions, 43 deletions
diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss index 449974734..9e73a546c 100644 --- a/ui/app/components/transaction-list-item/index.scss +++ b/ui/app/components/transaction-list-item/index.scss @@ -117,12 +117,6 @@ } } - &__details-container { - padding: 8px 16px 16px; - background: #f3f4f7; - width: 100%; - } - &__expander { max-height: 0px; width: 100%; diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js index 5334484db..ecd8b4cef 100644 --- a/ui/app/components/transaction-list-item/transaction-list-item.component.js +++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js @@ -18,6 +18,7 @@ export default class TransactionListItem extends PureComponent { history: PropTypes.object, methodData: PropTypes.object, nonceAndDate: PropTypes.string, + primaryTransaction: PropTypes.object, retryTransaction: PropTypes.func, setSelectedToken: PropTypes.func, showCancelModal: PropTypes.func, @@ -26,6 +27,7 @@ export default class TransactionListItem extends PureComponent { token: PropTypes.object, tokenData: PropTypes.object, transaction: PropTypes.object, + transactionGroup: PropTypes.object, value: PropTypes.string, fetchBasicGasAndTimeEstimates: PropTypes.func, fetchGasEstimates: PropTypes.func, @@ -51,36 +53,48 @@ export default class TransactionListItem extends PureComponent { this.setState({ showTransactionDetails: !showTransactionDetails }) } - handleCancel = () => { - const { transaction: { id, txParams: { gasPrice } } = {}, showCancelModal } = this.props - showCancelModal(id, gasPrice) + handleCancel = id => { + const { + primaryTransaction: { txParams: { gasPrice } } = {}, + transaction: { id: initialTransactionId }, + showCancelModal, + } = this.props + + const cancelId = id || initialTransactionId + showCancelModal(cancelId, gasPrice) } - handleRetry = () => { + /** + * @name handleRetry + * @description Resubmits a transaction. Retrying a transaction within a list of transactions with + * the same nonce requires keeping the original value while increasing the gas price of the latest + * transaction. + * @param {number} id - Transaction id + */ + handleRetry = id => { const { - transaction: { txParams: { to } = {} }, + primaryTransaction: { txParams: { gasPrice } } = {}, + transaction: { txParams: { to } = {}, id: initialTransactionId }, methodData: { name } = {}, setSelectedToken, + retryTransaction, + fetchBasicGasAndTimeEstimates, + fetchGasEstimates, } = this.props if (name === TOKEN_METHOD_TRANSFER) { setSelectedToken(to) } - return this.resubmit() - } + const retryId = id || initialTransactionId - resubmit () { - const { transaction, retryTransaction, fetchBasicGasAndTimeEstimates, fetchGasEstimates } = this.props - fetchBasicGasAndTimeEstimates().then(basicEstimates => { - fetchGasEstimates(basicEstimates.blockTime) - }).then(() => { - retryTransaction(transaction) - }) + return fetchBasicGasAndTimeEstimates() + .then(basicEstimates => fetchGasEstimates(basicEstimates.blockTime)) + .then(retryTransaction(retryId, gasPrice)) } renderPrimaryCurrency () { - const { token, transaction: { txParams: { data } = {} } = {}, value } = this.props + const { token, primaryTransaction: { txParams: { data } = {} } = {}, value } = this.props return token ? ( @@ -118,12 +132,14 @@ export default class TransactionListItem extends PureComponent { render () { const { assetImages, + transaction, methodData, nonceAndDate, + primaryTransaction, showCancel, showRetry, tokenData, - transaction, + transactionGroup, } = this.props const { txParams = {} } = transaction const { showTransactionDetails } = this.state @@ -156,11 +172,11 @@ export default class TransactionListItem extends PureComponent { </div> <TransactionStatus className="transaction-list-item__status" - statusKey={getStatusKey(transaction)} + statusKey={getStatusKey(primaryTransaction)} title={( - (transaction.err && transaction.err.rpc) - ? transaction.err.rpc.message - : transaction.err && transaction.err.message + (primaryTransaction.err && primaryTransaction.err.rpc) + ? primaryTransaction.err.rpc.message + : primaryTransaction.err && primaryTransaction.err.message )} /> { this.renderPrimaryCurrency() } @@ -173,7 +189,7 @@ export default class TransactionListItem extends PureComponent { showTransactionDetails && ( <div className="transaction-list-item__details-container"> <TransactionListItemDetails - transaction={transaction} + transactionGroup={transactionGroup} onRetry={this.handleRetry} showRetry={showRetry && methodData.done} onCancel={this.handleCancel} diff --git a/ui/app/components/transaction-list-item/transaction-list-item.container.js b/ui/app/components/transaction-list-item/transaction-list-item.container.js index 61ecb04d0..73d9d8250 100644 --- a/ui/app/components/transaction-list-item/transaction-list-item.container.js +++ b/ui/app/components/transaction-list-item/transaction-list-item.container.js @@ -6,6 +6,7 @@ import TransactionListItem from './transaction-list-item.component' import { setSelectedToken, showModal, showSidebar } from '../../actions' import { hexToDecimal } from '../../helpers/conversions.util' import { getTokenData } from '../../helpers/transactions.util' +import { increaseLastGasPrice } from '../../helpers/confirm-transaction/util' import { formatDate } from '../../util' import { fetchBasicGasAndTimeEstimates, @@ -14,26 +15,13 @@ import { setCustomGasLimit, } from '../../ducks/gas.duck' -const mapStateToProps = (state, ownProps) => { - const { transaction: { txParams: { value, nonce, data } = {}, time } = {} } = ownProps - - const tokenData = data && getTokenData(data) - const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time) - - return { - value, - nonceAndDate, - tokenData, - } -} - const mapDispatchToProps = dispatch => { return { fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()), fetchGasEstimates: (blockTime) => dispatch(fetchGasEstimates(blockTime)), setSelectedToken: tokenAddress => dispatch(setSelectedToken(tokenAddress)), - retryTransaction: (transaction) => { - dispatch(setCustomGasPrice(transaction.txParams.gasPrice)) + retryTransaction: (transaction, gasPrice) => { + dispatch(setCustomGasPrice(gasPrice || transaction.txParams.gasPrice)) dispatch(setCustomGasLimit(transaction.txParams.gas)) dispatch(showSidebar({ transitionName: 'sidebar-left', @@ -47,8 +35,35 @@ const mapDispatchToProps = dispatch => { } } +const mergeProps = (stateProps, dispatchProps, ownProps) => { + const { transactionGroup: { primaryTransaction, initialTransaction } = {} } = ownProps + const { retryTransaction, ...restDispatchProps } = dispatchProps + const { txParams: { nonce, data } = {}, time } = initialTransaction + const { txParams: { value } = {} } = primaryTransaction + + const tokenData = data && getTokenData(data) + const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time) + + return { + ...stateProps, + ...restDispatchProps, + ...ownProps, + value, + nonceAndDate, + tokenData, + transaction: initialTransaction, + primaryTransaction, + retryTransaction: (transactionId, gasPrice) => { + const { transactionGroup: { transactions = [] } } = ownProps + const transaction = transactions.find(tx => tx.id === transactionId) || {} + const increasedGasPrice = increaseLastGasPrice(gasPrice) + retryTransaction(transaction, increasedGasPrice) + }, + } +} + export default compose( withRouter, - connect(mapStateToProps, mapDispatchToProps), + connect(null, mapDispatchToProps, mergeProps), withMethodData, )(TransactionListItem) |