diff --git a/src/components/DashboardPage/AccountCard.js b/src/components/DashboardPage/AccountCard.js
index 5837847b..b2670992 100644
--- a/src/components/DashboardPage/AccountCard.js
+++ b/src/components/DashboardPage/AccountCard.js
@@ -9,7 +9,6 @@ import IconCurrencyBitcoin from 'icons/currencies/Bitcoin'
import { AreaChart } from 'components/base/Chart'
import Bar from 'components/base/Bar'
import Box, { Card } from 'components/base/Box'
-import Defer from 'components/base/Defer'
import FormattedVal from 'components/base/FormattedVal'
const AccountCard = ({
@@ -47,17 +46,15 @@ const AccountCard = ({
/>
)}
-
-
-
+
)
diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js
index 04910c34..aeb734af 100644
--- a/src/components/DashboardPage/index.js
+++ b/src/components/DashboardPage/index.js
@@ -25,7 +25,6 @@ import { saveSettings } from 'actions/settings'
import { AreaChart } from 'components/base/Chart'
import Box, { Card } from 'components/base/Box'
import Pills from 'components/base/Pills'
-import Defer from 'components/base/Defer'
import Text from 'components/base/Text'
import TransactionsList from 'components/TransactionsList'
@@ -56,6 +55,7 @@ type State = {
}
const ACCOUNTS_BY_LINE = 3
+const ALL_TRANSACTIONS_LIMIT = 10
const TIMEOUT_REFRESH_DATAS = 5e3
const itemsTimes = [
@@ -92,7 +92,9 @@ const getAllTransactions = accounts => {
return result
}, [])
- return sortBy(allTransactions, t => t.received_at).reverse()
+ return sortBy(allTransactions, t => t.received_at)
+ .reverse()
+ .slice(0, ALL_TRANSACTIONS_LIMIT)
}
const getAccountsChunk = accounts => {
@@ -123,7 +125,7 @@ class DashboardPage extends PureComponent {
})
}
- if (nextProps.accounts.length !== this.props.accounts.length) {
+ if (nextProps.accounts !== this.props.accounts) {
this.setState({
accountsChunk: getAccountsChunk(nextProps.accounts),
allTransactions: getAllTransactions(nextProps.accounts),
@@ -192,33 +194,31 @@ class DashboardPage extends PureComponent {
-
-
- {
- data.forEach((d, i) => {
- res[i] = {
- name: d.name,
- value: (res[i] ? res[i].value : 0) + d.value,
- }
- })
- return res
- }, []),
- 25,
- )}
- />
-
-
+
+ {
+ data.forEach((d, i) => {
+ res[i] = {
+ name: d.name,
+ value: (res[i] ? res[i].value : 0) + d.value,
+ }
+ })
+ return res
+ }, []),
+ 25,
+ )}
+ />
+
diff --git a/src/components/TransactionsList/index.js b/src/components/TransactionsList/index.js
index 413e40cd..df1f8057 100644
--- a/src/components/TransactionsList/index.js
+++ b/src/components/TransactionsList/index.js
@@ -1,9 +1,10 @@
// @flow
-import React from 'react'
+import React, { Component } from 'react'
import styled from 'styled-components'
import moment from 'moment'
import get from 'lodash/get'
+import isEqual from 'lodash/isEqual'
import type { Transaction as TransactionType } from 'types/common'
@@ -118,28 +119,48 @@ type Props = {
withAccounts?: boolean,
}
-const TransactionsList = ({ transactions, withAccounts }: Props) => (
-
-
- {'Date'}
- {withAccounts && {'Account'}}
- {'Address'}
-
- {'Amount'}
-
-
-
-
- {transactions.map(t => (
-
- ))}
-
-
-
-)
+class TransactionsList extends Component {
+ static defaultProps = {
+ withAccounts: false,
+ }
+
+ componentWillReceiveProps(nextProps: Props) {
+ if (nextProps.transactions !== this.props.transactions) {
+ this._hashCache = this.getHashCache(nextProps.transactions)
+ }
+ }
+
+ shouldComponentUpdate(nextProps: Props) {
+ return !isEqual(this._hashCache, this.getHashCache(nextProps.transactions))
+ }
-TransactionsList.defaultProps = {
- withAccounts: false,
+ getHashCache = (transactions: Array) => transactions.map(t => t.hash)
+
+ _hashCache = this.getHashCache(this.props.transactions)
+
+ render() {
+ const { transactions, withAccounts } = this.props
+
+ return (
+
+
+ {'Date'}
+ {withAccounts && {'Account'}}
+ {'Address'}
+
+ {'Amount'}
+
+
+
+
+ {transactions.map(t => (
+
+ ))}
+
+
+
+ )
+ }
}
export default TransactionsList