import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import TransactionListItem from '../transaction-list-item' import ShapeShiftTransactionListItem from '../shift-list-item' import { TRANSACTION_TYPE_SHAPESHIFT } from '../../constants/transactions' export default class TransactionList extends PureComponent { static contextTypes = { t: PropTypes.func, } static defaultProps = { pendingTransactions: [], completedTransactions: [], } static propTypes = { pendingTransactions: PropTypes.array, completedTransactions: PropTypes.array, selectedToken: PropTypes.object, updateNetworkNonce: PropTypes.func, assetImages: PropTypes.object, } componentDidMount () { this.props.updateNetworkNonce() } componentDidUpdate (prevProps) { const { pendingTransactions: prevPendingTransactions = [] } = prevProps const { pendingTransactions = [], updateNetworkNonce } = this.props if (pendingTransactions.length > prevPendingTransactions.length) { updateNetworkNonce() } } shouldShowRetry = (transactionGroup, isEarliestNonce) => { const { transactions = [], hasRetried } = transactionGroup const [earliestTransaction = {}] = transactions const { submittedTime } = earliestTransaction return Date.now() - submittedTime > 30000 && isEarliestNonce && !hasRetried } shouldShowCancel (transactionGroup) { const { hasCancelled } = transactionGroup return !hasCancelled } renderTransactions () { const { t } = this.context const { pendingTransactions = [], completedTransactions = [] } = this.props const pendingLength = pendingTransactions.length return (
{ pendingLength > 0 && (
{ `${t('queue')} (${pendingTransactions.length})` }
{ pendingTransactions.map((transactionGroup, index) => ( this.renderTransaction(transactionGroup, index, true, index === pendingLength - 1) )) }
) }
{ t('history') }
{ completedTransactions.length > 0 ? completedTransactions.map((transactionGroup, index) => ( this.renderTransaction(transactionGroup, index) )) : this.renderEmpty() }
) } renderTransaction (transactionGroup, index, isPendingTx = false, isEarliestNonce = false) { const { selectedToken, assetImages } = this.props const { transactions = [] } = transactionGroup return transactions[0].key === TRANSACTION_TYPE_SHAPESHIFT ? ( ) : ( ) } renderEmpty () { return (
{ this.context.t('noTransactions') }
) } render () { return (
{ this.renderTransactions() }
) } }