fix - performance issues on activity list

packages/blockchain-wallet-v4-frontend/package.json

@@ -96,6 +96,7 @@
     "redux-persist": "^4.8.3",
     "redux-saga": "^0.16.0",
     "redux-ui": "^0.1.1",
+    "reselect": "^3.0.1",
     "styled-components": "^3.2.4",
     "zxcvbn": "^4.4.2"
   }

packages/blockchain-wallet-v4-frontend/src/data/components/actionTypes.js

@@ -1,3 +1,4 @@
+import * as activityList from './activityList/actionTypes'
 import * as exchange from './exchange/actionTypes'
 import * as exchangeHistory from './exchangeHistory/actionTypes'
 import * as importBtcAddress from './importBtcAddress/actionTypes'
@@ -10,6 +11,7 @@ import * as signMessage from './signMessage/actionTypes'
 import * as usedAddresses from './usedAddresses/actionTypes'
 
 export {
+  activityList,
   exchange,
   exchangeHistory,
   importBtcAddress,

packages/blockchain-wallet-v4-frontend/src/data/components/actions.js

@@ -1,3 +1,4 @@
+import * as activityList from './activityList/actions'
 import * as exchange from './exchange/actions'
 import * as exchangeHistory from './exchangeHistory/actions'
 import * as importBtcAddress from './importBtcAddress/actions'
@@ -10,6 +11,7 @@ import * as signMessage from './signMessage/actions'
 import * as usedAddresses from './usedAddresses/actions'
 
 export {
+  activityList,
   exchange,
   exchangeHistory,
   importBtcAddress,

packages/blockchain-wallet-v4-frontend/src/data/components/activityList/actionTypes.js

@@ -0,0 +1,2 @@
+
+export const ACTIVITY_LIST_INITIALIZED = '@EVENT.ACTIVITY_LIST_INITIALIZED'

packages/blockchain-wallet-v4-frontend/src/data/components/activityList/actions.js

@@ -0,0 +1,3 @@
+import * as AT from './actionTypes'
+
+export const initialized = () => ({ type: AT.ACTIVITY_LIST_INITIALIZED })

packages/blockchain-wallet-v4-frontend/src/data/components/activityList/sagas.js

@@ -0,0 +1,25 @@
+import { select, put } from 'redux-saga/effects'
+import { Remote } from 'blockchain-wallet-v4/src'
+import { actions, selectors } from 'data'
+
+export default ({ coreSagas }) => {
+  const initialized = function * (action) {
+    try {
+      const logsR = yield select(selectors.core.data.misc.getLogs)
+      const btcTransactionsR = yield select(selectors.core.data.bitcoin.getTransactions)
+      const bchTransactionsR = yield select(selectors.core.data.bch.getTransactions)
+      const ethTransactionsR = yield select(selectors.core.data.ethereum.getTransactions)
+      if (!Remote.Success.is(logsR)) yield put(actions.core.data.misc.fetchLogs())
+      if (!Remote.Success.is(btcTransactionsR)) yield put(actions.core.data.bitcoin.fetchTransactions('', true))
+      if (!Remote.Success.is(bchTransactionsR)) yield put(actions.core.data.bch.fetchTransactions('', true))
+      if (!Remote.Success.is(ethTransactionsR)) yield put(actions.core.data.misc.ethereum.fetchTransactions())
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+
+  return {
+    initialized
+  }
+}

packages/blockchain-wallet-v4-frontend/src/data/components/sagas.js

@@ -1,4 +1,5 @@
 import { fork } from 'redux-saga/effects'
+import activityList from './activityList/sagas'
 import exchange from './exchange/sagas'
 import exchangeHistory from './exchangeHistory/sagas'
 import importBtcAddress from './importBtcAddress/sagas'
@@ -11,6 +12,7 @@ import signMessage from './signMessage/sagas'
 import usedAddresses from './usedAddresses/sagas'
 
 export default ({ api, coreSagas }) => function * () {
+  yield fork(activityList({ api, coreSagas }))
   yield fork(exchange({ api, coreSagas }))
   yield fork(exchangeHistory({ api, coreSagas }))
   yield fork(importBtcAddress({ api, coreSagas }))

packages/blockchain-wallet-v4-frontend/src/scenes/Home/ActivityList/index.js

@@ -3,26 +3,18 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 
 import { actions } from 'data'
-import { getData, getEthereumContext } from './selectors'
+import { getData } from './selectors'
 import Error from './template.error'
 import Loading from './template.loading'
 import Success from './template.success'
-import { Remote } from 'blockchain-wallet-v4/src'
 
 class ActivityListContainer extends React.PureComponent {
-  componentWillMount () {
-    this.props.miscActions.fetchLogs()
-    this.props.btcActions.fetchTransactions('', true)
-    if (Remote.Success.is(this.props.ethContext)) {
-      this.props.ethContext.map(x => this.props.ethActions.fetchData(x))
-    }
-    this.props.bchActions.fetchTransactions('', true)
+  componentDidMount () {
+    this.props.actions.initialized()
   }
 
   render () {
-    const { data } = this.props
-
-    return data.cata({
+    return this.props.data.cata({
       Success: (value) => <Success activities={value} />,
       Failure: (message) => <Error>{message}</Error>,
       Loading: () => <Loading />,
@@ -32,15 +24,11 @@ class ActivityListContainer extends React.PureComponent {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  data: getData(state, 8),
-  ethContext: getEthereumContext(state)
+  data: getData(state, 8)
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  miscActions: bindActionCreators(actions.core.data.misc, dispatch),
-  btcActions: bindActionCreators(actions.core.data.bitcoin, dispatch),
-  ethActions: bindActionCreators(actions.core.data.ethereum, dispatch),
-  bchActions: bindActionCreators(actions.core.data.bch, dispatch)
+  actions: bindActionCreators(actions.components.activityList, dispatch)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(ActivityListContainer)

packages/blockchain-wallet-v4-frontend/src/scenes/Home/ActivityList/selectors.js

@@ -1,5 +1,6 @@
-import { take, map, sequence, prop, curry, compose, descend, sort } from 'ramda'
+import { isNil, take, map, lift, prop, curry, compose, descend, sort } from 'ramda'
 import { selectors } from 'data'
+import { createSelector } from 'reselect'
 import { Remote } from 'blockchain-wallet-v4/src'
 
 export const transform = curry((coin, transaction) => {
@@ -11,28 +12,35 @@ export const transform = curry((coin, transaction) => {
     coin: coin
   }
 })
-export const getData = (state, number) => {
-  let activities = selectors.core.settings.getLoggingLevel(state).getOrElse(false)
-    ? selectors.core.data.misc.getLogs(state).map(take(number))
-    : Remote.of([])
 
-  const btcTransactions = selectors.core.common.bitcoin.getWalletTransactions(state)
-  if (btcTransactions[0] !== undefined) {
-    const b = btcTransactions[0].map(compose(take(number), map(transform('BTC'))))
-    activities = sequence(Remote.of, [activities, b]).map(([a, b]) => a.concat(b))
-  }
+export const getNumber = () => 8
 
-  const bchTransactions = selectors.core.common.bch.getWalletTransactions(state)
-  if (bchTransactions[0] !== undefined) {
-    const b = bchTransactions[0].map(compose(take(number), map(transform('BCH'))))
-    activities = sequence(Remote.of, [activities, b]).map(([a, b]) => a.concat(b))
-  }
+export const getLogs = createSelector(
+  [selectors.core.settings.getLoggingLevel, selectors.core.data.misc.getLogs, getNumber],
+  (level, logs, number) => level.getOrElse(false) ? logs.map(take(number)) : Remote.of([])
+)
 
-  const ethTransactions = selectors.core.common.ethereum.getTransactions(state)
-  const b = ethTransactions.map(compose(take(number), map(transform('ETH'))))
-  activities = sequence(Remote.of, [activities, b]).map(([a, b]) => a.concat(b))
+export const getBtcTransactions = createSelector(
+  [selectors.core.common.bitcoin.getWalletTransactions, getNumber],
+  (transactions, number) => isNil(transactions[0]) ? Remote.of([]) : transactions[0].map(compose(take(number), map(transform('BTC'))))
+)
 
-  return activities.map(sort(descend(prop('time')))).map(take(number))
-}
+export const getBchTransactions = createSelector(
+  [selectors.core.common.bitcoin.getWalletTransactions, getNumber],
+  (transactions, number) => isNil(transactions[0]) ? Remote.of([]) : transactions[0].map(compose(take(number), map(transform('BCH'))))
+)
 
-export const getEthereumContext = selectors.core.kvStore.ethereum.getContext
+export const getEthTransactions = createSelector(
+  [selectors.core.common.ethereum.getTransactions, getNumber],
+  (transactions, number) => transactions.map(compose(take(number), map(transform('ETH'))))
+)
+
+export const getData = createSelector(
+  [getLogs, getBtcTransactions, getBchTransactions, getEthTransactions, getNumber],
+  (logs, btc, bch, eth, number) => {
+    const transform = (logs, btc, bch, eth) => {
+      return [logs, btc, bch, eth].map(sort(descend(prop('time')))).map(take(number))
+    }
+    return lift(transform)(logs, btc, bch, eth)
+  }
+)