From 5ee40675b9f986a9ff2e5d15a271d7de2145d0e9 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 30 Jul 2018 22:03:20 -0700 Subject: Refactor transactions list views. Add redesign components --- .../transaction-list/transaction-list.component.js | 90 ++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 ui/app/components/transaction-list/transaction-list.component.js (limited to 'ui/app/components/transaction-list/transaction-list.component.js') 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..63d171127 --- /dev/null +++ b/ui/app/components/transaction-list/transaction-list.component.js @@ -0,0 +1,90 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import TransactionListItem from '../transaction-list-item' + +export default class TransactionList extends PureComponent { + static contextTypes = { + t: PropTypes.func, + } + + static defaultProps = { + pendingTransactions: [], + completedTransactions: [], + } + + static propTypes = { + pendingTransactions: PropTypes.array, + completedTransactions: PropTypes.array, + } + + renderTransactions () { + const { t } = this.context + const { pendingTransactions, completedTransactions } = this.props + + return ( +
+ { + pendingTransactions.length > 0 && ( +
+
+ { `${t('pending')} (${pendingTransactions.length})` } +
+ { + pendingTransactions.map(transaction => { + return ( + + ) + }) + } +
+ ) + } +
+
+ { t('history') } +
+ { + completedTransactions.length > 0 + ? ( + completedTransactions.map(transaction => { + return ( + + ) + }) + ) + : this.renderEmpty() + } +
+
+ ) + } + + renderEmpty () { + return ( +
+
+ { this.context.t('noTransactions') } +
+
+ ) + } + + render () { + return ( +
+ { + this.renderTransactions() + // pendingTransactions.length + completedTransactions.length > 0 + // ? this.renderTransactions() + // : this.renderEmpty() + } +
+ ) + } +} -- cgit From 5de48c67a080f2681a005e364eefb9ea1d6b1e12 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 31 Jul 2018 19:37:38 -0700 Subject: Use css grid for TransactionListItem for responsive layout --- ui/app/components/transaction-list/transaction-list.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/transaction-list/transaction-list.component.js') diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js index 63d171127..48e731d24 100644 --- a/ui/app/components/transaction-list/transaction-list.component.js +++ b/ui/app/components/transaction-list/transaction-list.component.js @@ -27,7 +27,7 @@ export default class TransactionList extends PureComponent { pendingTransactions.length > 0 && (
- { `${t('pending')} (${pendingTransactions.length})` } + { `${t('queue')} (${pendingTransactions.length})` }
{ pendingTransactions.map(transaction => { -- cgit From fa8313f9036882e1a558d871f4e520da71ffaa03 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 31 Jul 2018 19:56:51 -0700 Subject: Code cleanup --- .../transaction-list/transaction-list.component.js | 37 ++++++++-------------- 1 file changed, 13 insertions(+), 24 deletions(-) (limited to 'ui/app/components/transaction-list/transaction-list.component.js') diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js index 48e731d24..d9b8e3cf8 100644 --- a/ui/app/components/transaction-list/transaction-list.component.js +++ b/ui/app/components/transaction-list/transaction-list.component.js @@ -30,14 +30,12 @@ export default class TransactionList extends PureComponent { { `${t('queue')} (${pendingTransactions.length})` }
{ - pendingTransactions.map(transaction => { - return ( - - ) - }) + pendingTransactions.map(transaction => ( + + )) } ) @@ -48,16 +46,12 @@ export default class TransactionList extends PureComponent { { completedTransactions.length > 0 - ? ( - completedTransactions.map(transaction => { - return ( - - ) - }) - ) + ? completedTransactions.map(transaction => ( + + )) : this.renderEmpty() } @@ -78,12 +72,7 @@ export default class TransactionList extends PureComponent { render () { return (
- { - this.renderTransactions() - // pendingTransactions.length + completedTransactions.length > 0 - // ? this.renderTransactions() - // : this.renderEmpty() - } + { this.renderTransactions() }
) } -- cgit From 5ddd9b55be0d8bd778822b4b401cbd22a7b57c54 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 2 Aug 2018 20:20:15 -0700 Subject: Add retry button to TransactionListItem --- .../components/transaction-list/transaction-list.component.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'ui/app/components/transaction-list/transaction-list.component.js') diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js index d9b8e3cf8..fb23ece7a 100644 --- a/ui/app/components/transaction-list/transaction-list.component.js +++ b/ui/app/components/transaction-list/transaction-list.component.js @@ -10,16 +10,24 @@ export default class TransactionList extends PureComponent { static defaultProps = { pendingTransactions: [], completedTransactions: [], + transactionToRetry: {}, } static propTypes = { pendingTransactions: PropTypes.array, completedTransactions: PropTypes.array, + transactionToRetry: PropTypes.object, + } + + 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 + const { pendingTransactions = [], completedTransactions = [] } = this.props return (
@@ -34,6 +42,7 @@ export default class TransactionList extends PureComponent { )) } -- cgit From 33a94332e48b280fcf4c9fb23aa4d349eaa8a54d Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sun, 5 Aug 2018 22:25:58 -0700 Subject: Show token amounts in TransactionListItem for token transfers --- ui/app/components/transaction-list/transaction-list.component.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'ui/app/components/transaction-list/transaction-list.component.js') diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js index fb23ece7a..953b07217 100644 --- a/ui/app/components/transaction-list/transaction-list.component.js +++ b/ui/app/components/transaction-list/transaction-list.component.js @@ -17,6 +17,7 @@ export default class TransactionList extends PureComponent { pendingTransactions: PropTypes.array, completedTransactions: PropTypes.array, transactionToRetry: PropTypes.object, + selectedToken: PropTypes.object, } shouldShowRetry = transaction => { @@ -27,7 +28,11 @@ export default class TransactionList extends PureComponent { renderTransactions () { const { t } = this.context - const { pendingTransactions = [], completedTransactions = [] } = this.props + const { + pendingTransactions = [], + completedTransactions = [], + selectedToken, + } = this.props return (
@@ -43,6 +48,7 @@ export default class TransactionList extends PureComponent { transaction={transaction} key={transaction.id} showRetry={this.shouldShowRetry(transaction)} + token={selectedToken} /> )) } @@ -59,6 +65,7 @@ export default class TransactionList extends PureComponent { )) : this.renderEmpty() -- cgit From e104744d3b29af518bc60c45339d4d4458baaa68 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 6 Aug 2018 13:45:56 -0700 Subject: Fix shapeshift transactions. Delete unused files --- .../transaction-list/transaction-list.component.js | 44 +++++++++++++--------- 1 file changed, 26 insertions(+), 18 deletions(-) (limited to 'ui/app/components/transaction-list/transaction-list.component.js') diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js index 953b07217..c1e1885f3 100644 --- a/ui/app/components/transaction-list/transaction-list.component.js +++ b/ui/app/components/transaction-list/transaction-list.component.js @@ -1,6 +1,8 @@ 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 = { @@ -28,11 +30,7 @@ export default class TransactionList extends PureComponent { renderTransactions () { const { t } = this.context - const { - pendingTransactions = [], - completedTransactions = [], - selectedToken, - } = this.props + const { pendingTransactions = [], completedTransactions = [] } = this.props return (
@@ -43,13 +41,8 @@ export default class TransactionList extends PureComponent { { `${t('queue')} (${pendingTransactions.length})` }
{ - pendingTransactions.map(transaction => ( - + pendingTransactions.map((transaction, index) => ( + this.renderTransaction(transaction, index) )) }
@@ -61,12 +54,8 @@ export default class TransactionList extends PureComponent {
{ completedTransactions.length > 0 - ? completedTransactions.map(transaction => ( - + ? completedTransactions.map((transaction, index) => ( + this.renderTransaction(transaction, index) )) : this.renderEmpty() } @@ -75,6 +64,25 @@ export default class TransactionList extends PureComponent { ) } + renderTransaction (transaction, index) { + const { selectedToken } = this.props + + return transaction.key === TRANSACTION_TYPE_SHAPESHIFT + ? ( + + ) : ( + + ) + } + renderEmpty () { return (
-- cgit From b48a293af059d2ad23fea0af601740888acd3f8b Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sat, 11 Aug 2018 23:12:30 -0500 Subject: Update retry transaction logic to use network nonce --- .../transaction-list/transaction-list.component.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'ui/app/components/transaction-list/transaction-list.component.js') diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js index c1e1885f3..e30476d8c 100644 --- a/ui/app/components/transaction-list/transaction-list.component.js +++ b/ui/app/components/transaction-list/transaction-list.component.js @@ -20,6 +20,20 @@ export default class TransactionList extends PureComponent { 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 => { -- cgit From c8e5068537b6f0fa0f68752f246058d2c24cb4b8 Mon Sep 17 00:00:00 2001 From: Esteban MIno Date: Thu, 30 Aug 2018 13:51:57 -0300 Subject: fix watched tokens images showing in tx list --- ui/app/components/transaction-list/transaction-list.component.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'ui/app/components/transaction-list/transaction-list.component.js') diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js index e30476d8c..79d9d1445 100644 --- a/ui/app/components/transaction-list/transaction-list.component.js +++ b/ui/app/components/transaction-list/transaction-list.component.js @@ -21,6 +21,7 @@ export default class TransactionList extends PureComponent { transactionToRetry: PropTypes.object, selectedToken: PropTypes.object, updateNetworkNonce: PropTypes.func, + assetImages: PropTypes.object, } componentDidMount () { @@ -44,8 +45,8 @@ export default class TransactionList extends PureComponent { renderTransactions () { const { t } = this.context - const { pendingTransactions = [], completedTransactions = [] } = this.props - + const { pendingTransactions = [], completedTransactions = [], assetImages } = this.props + console.log('REMDERING FROM TX LIST', assetImages) return (
{ @@ -79,7 +80,7 @@ export default class TransactionList extends PureComponent { } renderTransaction (transaction, index) { - const { selectedToken } = this.props + const { selectedToken, assetImages } = this.props return transaction.key === TRANSACTION_TYPE_SHAPESHIFT ? ( @@ -93,6 +94,7 @@ export default class TransactionList extends PureComponent { key={transaction.id} showRetry={this.shouldShowRetry(transaction)} token={selectedToken} + assetImages={assetImages} /> ) } -- cgit From 165a966a2a0c1a6eb03b7eb53fd0824f4437200a Mon Sep 17 00:00:00 2001 From: Esteban MIno Date: Thu, 30 Aug 2018 17:19:10 -0300 Subject: balance components using selectors --- ui/app/components/transaction-list/transaction-list.component.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'ui/app/components/transaction-list/transaction-list.component.js') diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js index 79d9d1445..c864fea3b 100644 --- a/ui/app/components/transaction-list/transaction-list.component.js +++ b/ui/app/components/transaction-list/transaction-list.component.js @@ -45,8 +45,7 @@ export default class TransactionList extends PureComponent { renderTransactions () { const { t } = this.context - const { pendingTransactions = [], completedTransactions = [], assetImages } = this.props - console.log('REMDERING FROM TX LIST', assetImages) + const { pendingTransactions = [], completedTransactions = [] } = this.props return (
{ -- cgit