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: [], transactionToRetry: {}, } static propTypes = { pendingTransactions: PropTypes.array, completedTransactions: PropTypes.array, transactionToRetry: PropTypes.object, selectedToken: PropTypes.object, updateNetworkNonce: PropTypes.func, } componentDidMount () { this.props.updateNetworkNonce() } componentDidUpdate (prevProps) { const { pendingTransactions: prevPendingTransactions = [] } = prevProps const { pendingTransactions = [], updateNetworkNonce } = this.props if (pendingTransactions.length > prevPendingTransactions.length) { updateNetworkNonce() } } shouldShowRetry = transaction => { const { transactionToRetry } = this.props const { id, submittedTime } = transaction return id === transactionToRetry.id && Date.now() - submittedTime > 30000 } renderTransactions () { const { t } = this.context const { pendingTransactions = [], completedTransactions = [] } = this.props return (
{ pendingTransactions.length > 0 && (
{ `${t('queue')} (${pendingTransactions.length})` }
{ pendingTransactions.map((transaction, index) => ( this.renderTransaction(transaction, index) )) }
) }
{ t('history') }
{ completedTransactions.length > 0 ? completedTransactions.map((transaction, index) => ( this.renderTransaction(transaction, index) )) : this.renderEmpty() }
) } renderTransaction (transaction, index) { const { selectedToken } = this.props return transaction.key === TRANSACTION_TYPE_SHAPESHIFT ? ( ) : ( ) } renderEmpty () { return (
{ this.context.t('noTransactions') }
) } render () { return (
{ this.renderTransactions() }
) } }