aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/transaction-list-item
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/transaction-list-item')
-rw-r--r--ui/app/components/transaction-list-item/index.scss6
-rw-r--r--ui/app/components/transaction-list-item/transaction-list-item.component.js57
-rw-r--r--ui/app/components/transaction-list-item/transaction-list-item.container.js57
3 files changed, 83 insertions, 37 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 696634fe0..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,7 +27,10 @@ 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,
}
state = {
@@ -49,33 +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: { id }, retryTransaction, history } = this.props
- return retryTransaction(id)
- .then(id => history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`))
+ 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
? (
@@ -113,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
@@ -151,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() }
@@ -168,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 62ed7a73f..e08d3232f 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
@@ -3,36 +3,67 @@ import { withRouter } from 'react-router-dom'
import { compose } from 'recompose'
import withMethodData from '../../higher-order-components/with-method-data'
import TransactionListItem from './transaction-list-item.component'
-import { setSelectedToken, retryTransaction, showModal } from '../../actions'
+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,
+ fetchGasEstimates,
+ setCustomGasPriceForRetry,
+ setCustomGasLimit,
+} from '../../ducks/gas.duck'
-const mapStateToProps = (state, ownProps) => {
- const { transaction: { txParams: { value, nonce, data } = {}, time } = {} } = ownProps
+const mapDispatchToProps = dispatch => {
+ return {
+ fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()),
+ fetchGasEstimates: (blockTime) => dispatch(fetchGasEstimates(blockTime)),
+ setSelectedToken: tokenAddress => dispatch(setSelectedToken(tokenAddress)),
+ retryTransaction: (transaction, gasPrice) => {
+ dispatch(setCustomGasPriceForRetry(gasPrice || transaction.txParams.gasPrice))
+ dispatch(setCustomGasLimit(transaction.txParams.gas))
+ dispatch(showSidebar({
+ transitionName: 'sidebar-left',
+ type: 'customize-gas',
+ props: { transaction },
+ }))
+ },
+ showCancelModal: (transactionId, originalGasPrice) => {
+ return dispatch(showModal({ name: 'CANCEL_TRANSACTION', transactionId, originalGasPrice }))
+ },
+ }
+}
+
+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,
- }
-}
-
-const mapDispatchToProps = dispatch => {
- return {
- setSelectedToken: tokenAddress => dispatch(setSelectedToken(tokenAddress)),
- retryTransaction: transactionId => dispatch(retryTransaction(transactionId)),
- showCancelModal: (transactionId, originalGasPrice) => {
- return dispatch(showModal({ name: 'CANCEL_TRANSACTION', transactionId, originalGasPrice }))
+ 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)