diff options
author | Kevin Serrano <kevgagser@gmail.com> | 2018-10-15 08:32:29 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-10-15 08:32:29 +0800 |
commit | 85884b21afe6e5e85b58123b24e72776d1437cc6 (patch) | |
tree | 6dbec947089691c0dffd5febbe6e92c1f712e40f /ui/app/components/transaction-list/transaction-list.component.js | |
parent | db981b827b07c946e17d3a8aeaefd2143c236ef7 (diff) | |
parent | 7f6b488c04e6ea12b2ef24ac936b6a236ad904c2 (diff) | |
download | tangerine-wallet-browser-85884b21afe6e5e85b58123b24e72776d1437cc6.tar.gz tangerine-wallet-browser-85884b21afe6e5e85b58123b24e72776d1437cc6.tar.zst tangerine-wallet-browser-85884b21afe6e5e85b58123b24e72776d1437cc6.zip |
Merge pull request #5512 from MetaMask/v4.14.0
Version 4.14.0
Diffstat (limited to 'ui/app/components/transaction-list/transaction-list.component.js')
-rw-r--r-- | ui/app/components/transaction-list/transaction-list.component.js | 119 |
1 files changed, 119 insertions, 0 deletions
diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js new file mode 100644 index 000000000..eef60186d --- /dev/null +++ b/ui/app/components/transaction-list/transaction-list.component.js @@ -0,0 +1,119 @@ +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, + 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 = 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 ( + <div className="transaction-list__transactions"> + { + pendingTransactions.length > 0 && ( + <div className="transaction-list__pending-transactions"> + <div className="transaction-list__header"> + { `${t('queue')} (${pendingTransactions.length})` } + </div> + { + pendingTransactions.map((transaction, index) => ( + this.renderTransaction(transaction, index, true) + )) + } + </div> + ) + } + <div className="transaction-list__completed-transactions"> + <div className="transaction-list__header"> + { t('history') } + </div> + { + completedTransactions.length > 0 + ? completedTransactions.map((transaction, index) => ( + this.renderTransaction(transaction, index) + )) + : this.renderEmpty() + } + </div> + </div> + ) + } + + renderTransaction (transaction, index, showCancel) { + const { selectedToken, assetImages } = this.props + + return transaction.key === TRANSACTION_TYPE_SHAPESHIFT + ? ( + <ShapeShiftTransactionListItem + { ...transaction } + key={`shapeshift${index}`} + /> + ) : ( + <TransactionListItem + transaction={transaction} + key={transaction.id} + showRetry={this.shouldShowRetry(transaction)} + showCancel={showCancel} + token={selectedToken} + assetImages={assetImages} + /> + ) + } + + renderEmpty () { + return ( + <div className="transaction-list__empty"> + <div className="transaction-list__empty-text"> + { this.context.t('noTransactions') } + </div> + </div> + ) + } + + render () { + return ( + <div className="transaction-list"> + { this.renderTransactions() } + </div> + ) + } +} |