diff options
author | Esteban MIno <efmino@uc.cl> | 2018-08-29 02:20:30 +0800 |
---|---|---|
committer | Esteban MIno <efmino@uc.cl> | 2018-08-29 02:20:30 +0800 |
commit | e743f44150d4c09908d24945de5a281e15e8469d (patch) | |
tree | 76984504e65b06ae15633d721fedc7ddd5b0cca7 /ui/app/components/transaction-list | |
parent | 3106374cc31b66e5a0faadd657b4430e21aa48b2 (diff) | |
parent | 0259eb02140fec1db9861506a6ff7890911af652 (diff) | |
download | tangerine-wallet-browser-e743f44150d4c09908d24945de5a281e15e8469d.tar.gz tangerine-wallet-browser-e743f44150d4c09908d24945de5a281e15e8469d.tar.zst tangerine-wallet-browser-e743f44150d4c09908d24945de5a281e15e8469d.zip |
fix conflicts
Diffstat (limited to 'ui/app/components/transaction-list')
4 files changed, 214 insertions, 0 deletions
diff --git a/ui/app/components/transaction-list/index.js b/ui/app/components/transaction-list/index.js new file mode 100644 index 000000000..688994367 --- /dev/null +++ b/ui/app/components/transaction-list/index.js @@ -0,0 +1 @@ +export { default } from './transaction-list.container' diff --git a/ui/app/components/transaction-list/index.scss b/ui/app/components/transaction-list/index.scss new file mode 100644 index 000000000..0e8db485c --- /dev/null +++ b/ui/app/components/transaction-list/index.scss @@ -0,0 +1,46 @@ +.transaction-list { + display: flex; + flex-direction: column; + flex: 1; + overflow-y: hidden; + + &__completed-transactions { + display: flex; + flex-direction: column; + height: 100%; + } + + &__header { + flex: 0 0 auto; + font-size: .875rem; + color: $dusty-gray; + border-bottom: 1px solid $geyser; + padding: 16px 0 8px 20px; + + @media screen and (max-width: $break-small) { + padding: 8px 0 8px 16px; + } + } + + &__transactions { + flex: 1; + overflow-y: auto; + } + + &__pending-transactions { + margin-bottom: 16px; + } + + &__empty { + flex: 1; + display: grid; + grid-template-rows: 35% 1fr; + } + + &__empty-text { + grid-row-start: 2; + display: flex; + justify-content: center; + color: $silver; + } +} 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..e30476d8c --- /dev/null +++ b/ui/app/components/transaction-list/transaction-list.component.js @@ -0,0 +1,117 @@ +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 ( + <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) + )) + } + </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) { + const { selectedToken } = this.props + + return transaction.key === TRANSACTION_TYPE_SHAPESHIFT + ? ( + <ShapeShiftTransactionListItem + { ...transaction } + key={`shapeshift${index}`} + /> + ) : ( + <TransactionListItem + transaction={transaction} + key={transaction.id} + showRetry={this.shouldShowRetry(transaction)} + token={selectedToken} + /> + ) + } + + 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> + ) + } +} diff --git a/ui/app/components/transaction-list/transaction-list.container.js b/ui/app/components/transaction-list/transaction-list.container.js new file mode 100644 index 000000000..1ec1f9ccf --- /dev/null +++ b/ui/app/components/transaction-list/transaction-list.container.js @@ -0,0 +1,50 @@ +import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' +import TransactionList from './transaction-list.component' +import { + pendingTransactionsSelector, + submittedPendingTransactionsSelector, + completedTransactionsSelector, +} from '../../selectors/transactions' +import { getSelectedAddress } from '../../selectors' +import { selectedTokenSelector } from '../../selectors/tokens' +import { getLatestSubmittedTxWithNonce } from '../../helpers/transactions.util' +import { updateNetworkNonce } from '../../actions' + +const mapStateToProps = state => { + const pendingTransactions = pendingTransactionsSelector(state) + const submittedPendingTransactions = submittedPendingTransactionsSelector(state) + const networkNonce = state.appState.networkNonce + + return { + completedTransactions: completedTransactionsSelector(state), + pendingTransactions, + transactionToRetry: getLatestSubmittedTxWithNonce(submittedPendingTransactions, networkNonce), + selectedToken: selectedTokenSelector(state), + selectedAddress: getSelectedAddress(state), + } +} + +const mapDispatchToProps = dispatch => { + return { + updateNetworkNonce: address => dispatch(updateNetworkNonce(address)), + } +} + +const mergeProps = (stateProps, dispatchProps, ownProps) => { + const { selectedAddress, ...restStateProps } = stateProps + const { updateNetworkNonce, ...restDispatchProps } = dispatchProps + + return { + ...restStateProps, + ...restDispatchProps, + ...ownProps, + updateNetworkNonce: () => updateNetworkNonce(selectedAddress), + } +} + +export default compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps, mergeProps) +)(TransactionList) |