From d32e3355895b83c2a6abe655d10ecd011a7aa2c7 Mon Sep 17 00:00:00 2001
From: Guillaume Marquilly <guillaume.marquilly@gmail.com>
Date: Tue, 19 Jun 2018 16:20:53 +0100
Subject: [PATCH] fix - balances were computing too often

---
 .../src/data/components/priceTicker/sagas.js  | 22 ++++--
 .../MenuTop/Balance/BchBalance/selectors.js   | 16 +---
 .../Balance/BchWatchOnlyBalance/selectors.js  | 21 ++---
 .../BchWatchOnlyBalance/template.success.js   |  6 +-
 .../MenuTop/Balance/BtcBalance/selectors.js   | 16 +---
 .../Balance/BtcWatchOnlyBalance/selectors.js  | 21 ++---
 .../BtcWatchOnlyBalance/template.success.js   |  6 +-
 .../MenuTop/Balance/EthBalance/selectors.js   |  4 +-
 .../MenuTop/Balance/TotalBalance/selectors.js | 29 +------
 .../layouts/Wallet/MenuTop/Balance/index.js   | 16 ++--
 .../Wallet/MenuTop/Balance/selectors.js       | 36 ++++++---
 .../Wallet/MenuTop/Balance/template.js        | 78 +++++++++----------
 .../Home/ActivityList/ListItem/index.js       | 58 +++++++-------
 .../src/scenes/Home/ActivityList/selectors.js |  2 +
 .../Home/ActivityList/template.success.js     |  2 +-
 .../src/redux/data/bch/sagaRegister.js        |  1 +
 .../src/redux/data/bitcoin/sagas.js           |  2 +-
 .../src/redux/data/ethereum/sagas.js          |  2 +-
 18 files changed, 157 insertions(+), 181 deletions(-)

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/priceTicker/sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/components/priceTicker/sagas.js
index ccb45e859f3..20afacdc022 100644
--- a/packages/blockchain-wallet-v4-frontend/src/data/components/priceTicker/sagas.js
+++ b/packages/blockchain-wallet-v4-frontend/src/data/components/priceTicker/sagas.js
@@ -1,15 +1,21 @@
-import { put } from 'redux-saga/effects'
+import { put, select } from 'redux-saga/effects'
 import * as actions from '../../actions'
+import * as selectors from '../../selectors'
+import { Remote } from 'blockchain-wallet-v4/src'
+import { equals } from 'ramda'
 
 export default ({ coreSagas }) => {
   const initialized = function * (action) {
-    const { coin } = action.payload
-
-    switch (coin) {
-      case 'BCH': return yield put(actions.core.data.bch.fetchRates())
-      case 'BTC': return yield put(actions.core.data.bitcoin.fetchRates())
-      case 'ETH': return yield put(actions.core.data.ethereum.fetchRates())
-      default: yield put(actions.logs.logErrorMessage('components/priceTicker/sagas', 'coinClicked', 'Price index series chart could not be initialized.'))
+    try {
+      const { coin } = action.payload
+      const bchRates = yield select(selectors.core.data.bitcoin.getRates)
+      const btcRates = yield select(selectors.core.data.bch.getRates)
+      const ethRates = yield select(selectors.core.data.ethereum.getRates)
+      if (equals(coin, 'BCH') && Remote.NotAsked.is(bchRates)) { return yield put(actions.core.data.bch.fetchRates()) }
+      if (equals(coin, 'BTC') && Remote.NotAsked.is(btcRates)) { return yield put(actions.core.data.bitcoin.fetchRates()) }
+      if (equals(coin, 'ETH') && Remote.NotAsked.is(ethRates)) { return yield put(actions.core.data.ethereum.fetchRates()) }
+    } catch (e) {
+      yield put(actions.logs.logErrorMessage('components/priceTicker/sagas', 'coinClicked', 'Price index series chart could not be initialized.'))
     }
   }
 
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BchBalance/selectors.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BchBalance/selectors.js
index 12dc8a0e2da..c8ef5d32461 100644
--- a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BchBalance/selectors.js
+++ b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BchBalance/selectors.js
@@ -1,15 +1,3 @@
-import { selectors } from 'data'
-import { createDeepEqualSelector } from 'services/ReselectHelper'
-import { add, traverse, reduce } from 'ramda'
-import { Remote } from 'blockchain-wallet-v4/src'
+import { getBchBalance } from '../selectors'
 
-export const getData = state => createDeepEqualSelector(
-  [
-    selectors.core.kvStore.bch.getSpendableContext
-  ],
-  (context) => {
-    const getBalance = address => selectors.core.data.bch.getFinalBalance(address, state)
-    const balancesR = traverse(Remote.of, getBalance, context)
-    return balancesR.map(xs => reduce(add, 0, xs))
-  }
-)(state)
+export const getData = getBchBalance
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BchWatchOnlyBalance/selectors.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BchWatchOnlyBalance/selectors.js
index 62d84b8019a..3da7f4b354c 100644
--- a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BchWatchOnlyBalance/selectors.js
+++ b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BchWatchOnlyBalance/selectors.js
@@ -1,15 +1,18 @@
 import { selectors } from 'data'
 import { createDeepEqualSelector } from 'services/ReselectHelper'
-import { add, traverse, reduce } from 'ramda'
-import { Remote } from 'blockchain-wallet-v4/src'
+import { add, contains, filter, reduce, prop, values } from 'ramda'
 
-export const getData = state => createDeepEqualSelector(
+export const getData = createDeepEqualSelector(
   [
-    selectors.core.kvStore.bch.getUnspendableContext
+    selectors.core.kvStore.bch.getUnspendableContext,
+    selectors.core.data.bch.getAddresses
   ],
-  (context) => {
-    const getBalance = address => selectors.core.data.bch.getFinalBalance(address, state)
-    const balancesR = traverse(Remote.of, getBalance, context)
-    return balancesR.map(xs => reduce(add, 0, xs))
+  (context, addressesR) => {
+    const transform = addresses => {
+      const filteredAddresses = filter(x => contains(prop('address', x), context), values(addresses))
+      const filteredBalances = filteredAddresses.map(prop('final_balance'))
+      return reduce(add, 0, filteredBalances)
+    }
+    return addressesR.map(transform)
   }
-)(state)
+)
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BchWatchOnlyBalance/template.success.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BchWatchOnlyBalance/template.success.js
index e1e42299a0e..5a09b6a5e17 100644
--- a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BchWatchOnlyBalance/template.success.js
+++ b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BchWatchOnlyBalance/template.success.js
@@ -22,14 +22,12 @@ const Wrapper = styled.div`
 `
 
 const Success = props => {
-  const { balance } = props
-
-  return (
+  return props.balance === 0 ? < div /> : (
     <LinkContainer to='/bch/transactions'>
       <Wrapper>
         <Text size='10px' weight={300}>BCH</Text>
         <Banner inline type='informational'>
-          <FiatDisplay coin='BCH' cursor='pointer' size='10px' weight={300}>{balance}</FiatDisplay>
+          <FiatDisplay coin='BCH' cursor='pointer' size='10px' weight={300}>{props.balance}</FiatDisplay>
           <span>&nbsp;</span>
           <Text size='10px' weight={300}>
             <FormattedMessage id='scenes.wallet.menutop.balance.watchonlybchbalance' defaultMessage='Non-Spendable' />
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BtcBalance/selectors.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BtcBalance/selectors.js
index b2b5aa83489..d05205fe37a 100644
--- a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BtcBalance/selectors.js
+++ b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BtcBalance/selectors.js
@@ -1,15 +1,3 @@
-import { selectors } from 'data'
-import { createDeepEqualSelector } from 'services/ReselectHelper'
-import { add, traverse, reduce } from 'ramda'
-import { Remote } from 'blockchain-wallet-v4/src'
+import { getBtcBalance } from '../selectors'
 
-export const getData = state => createDeepEqualSelector(
-  [
-    selectors.core.wallet.getSpendableContext
-  ],
-  (context) => {
-    const getBalance = address => selectors.core.data.bitcoin.getFinalBalance(address, state)
-    const balancesR = traverse(Remote.of, getBalance, context)
-    return balancesR.map(xs => reduce(add, 0, xs))
-  }
-)(state)
+export const getData = getBtcBalance
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BtcWatchOnlyBalance/selectors.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BtcWatchOnlyBalance/selectors.js
index 293d7f0c68a..193987a2fcb 100644
--- a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BtcWatchOnlyBalance/selectors.js
+++ b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BtcWatchOnlyBalance/selectors.js
@@ -1,15 +1,18 @@
 import { selectors } from 'data'
 import { createDeepEqualSelector } from 'services/ReselectHelper'
-import { add, traverse, reduce } from 'ramda'
-import { Remote } from 'blockchain-wallet-v4/src'
+import { add, contains, filter, reduce, prop, values } from 'ramda'
 
-export const getData = state => createDeepEqualSelector(
+export const getData = createDeepEqualSelector(
   [
-    selectors.core.wallet.getUnspendableContext
+    selectors.core.wallet.getUnspendableContext,
+    selectors.core.data.bitcoin.getAddresses
   ],
-  (context) => {
-    const getBalance = address => selectors.core.data.bitcoin.getFinalBalance(address, state)
-    const balancesR = traverse(Remote.of, getBalance, context)
-    return balancesR.map(xs => reduce(add, 0, xs))
+  (context, addressesR) => {
+    const transform = addresses => {
+      const filteredAddresses = filter(x => contains(prop('address', x), context), values(addresses))
+      const filteredBalances = filteredAddresses.map(prop('final_balance'))
+      return reduce(add, 0, filteredBalances)
+    }
+    return addressesR.map(transform)
   }
-)(state)
+)
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BtcWatchOnlyBalance/template.success.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BtcWatchOnlyBalance/template.success.js
index d90f3f863b4..dc225280a5a 100644
--- a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BtcWatchOnlyBalance/template.success.js
+++ b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/BtcWatchOnlyBalance/template.success.js
@@ -22,14 +22,12 @@ const Wrapper = styled.div`
 `
 
 const Success = props => {
-  const { balance } = props
-
-  return (
+  return props.balance === 0 ? < div /> : (
     <LinkContainer to='/btc/transactions'>
       <Wrapper>
         <Text size='10px' weight={300}>BTC</Text>
         <Banner inline type='informational'>
-          <FiatDisplay coin='BTC' cursor='pointer' size='10px' weight={300}>{balance}</FiatDisplay>
+          <FiatDisplay coin='BTC' cursor='pointer' size='10px' weight={300}>{props.balance}</FiatDisplay>
           <span>&nbsp;</span>
           <Text size='10px' weight={300}>
             <FormattedMessage id='scenes.wallet.menutop.balance.watchonlybtcbalance' defaultMessage='Non-Spendable' />
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/EthBalance/selectors.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/EthBalance/selectors.js
index 28aa2105dc1..0204f2048d4 100644
--- a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/EthBalance/selectors.js
+++ b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/EthBalance/selectors.js
@@ -1,3 +1,3 @@
-import { selectors } from 'data'
+import { getEthBalance } from '../selectors'
 
-export const getData = selectors.core.data.ethereum.getBalance
+export const getData = getEthBalance
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/TotalBalance/selectors.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/TotalBalance/selectors.js
index cd6a65ab92d..78c71786b8e 100644
--- a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/TotalBalance/selectors.js
+++ b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/TotalBalance/selectors.js
@@ -1,32 +1,9 @@
-import { add, lift, reduce, traverse } from 'ramda'
+import { lift } from 'ramda'
 import { selectors } from 'data'
-import { Exchange, Remote } from 'blockchain-wallet-v4/src'
+import { Exchange } from 'blockchain-wallet-v4/src'
 import * as Currency from 'blockchain-wallet-v4/src/exchange/currency'
 import { createDeepEqualSelector } from 'services/ReselectHelper'
-
-export const getBtcBalance = state => createDeepEqualSelector(
-  [
-    selectors.core.wallet.getSpendableContext
-  ],
-  (context) => {
-    const getBalance = address => selectors.core.data.bitcoin.getFinalBalance(address, state)
-    const balancesR = traverse(Remote.of, getBalance, context)
-    return balancesR.map(xs => reduce(add, 0, xs))
-  }
-)(state)
-
-export const getBchBalance = state => createDeepEqualSelector(
-  [
-    selectors.core.kvStore.bch.getSpendableContext
-  ],
-  (context) => {
-    const getBalance = address => selectors.core.data.bch.getFinalBalance(address, state)
-    const balancesR = traverse(Remote.of, getBalance, context)
-    return balancesR.map(xs => reduce(add, 0, xs))
-  }
-)(state)
-
-export const getEthBalance = selectors.core.data.ethereum.getBalance
+import { getBchBalance, getBtcBalance, getEthBalance } from '../selectors'
 
 export const getBtcBalanceInfo = createDeepEqualSelector(
   [
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/index.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/index.js
index 03b7d4ca474..99efd41fc6b 100644
--- a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/index.js
+++ b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/index.js
@@ -2,24 +2,24 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 
-import { actions } from 'data'
-import { getData } from './selectors'
+import { actions, selectors } from 'data'
 import Template from './template'
 
 class Balance extends React.PureComponent {
+  componentDidMount () {
+    this.props.actions.initialized()
+  }
   render () {
-    const { data } = this.props
-    return <Template btcUnspendableContext={data.btcUnspendableContext} bchUnspendableContext={data.bchUnspendableContext} path={data.path} />
+    return <Template path={this.props.path} />
   }
 }
 
-const mapStateToProps = (state) => ({
-  data: getData(state)
+const mapStateToProps = state => ({
+  path: selectors.router.getPathname(state)
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  actions: bindActionCreators(actions.core.kvStore.ethereum, dispatch),
-  preferencesActions: bindActionCreators(actions.preferences, dispatch)
+  actions: bindActionCreators(actions.components.balance, dispatch)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Balance)
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/selectors.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/selectors.js
index aa79be60c9a..a678fee80ac 100644
--- a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/selectors.js
+++ b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/selectors.js
@@ -1,17 +1,35 @@
+import { add, contains, filter, prop, reduce, values } from 'ramda'
 import { selectors } from 'data'
 import { createDeepEqualSelector } from 'services/ReselectHelper'
 
-export const getData = createDeepEqualSelector(
+export const getBtcBalance = createDeepEqualSelector(
   [
-    selectors.core.kvStore.bch.getUnspendableContext,
-    selectors.core.wallet.getUnspendableContext,
-    selectors.router.getPathname
+    selectors.core.wallet.getSpendableContext,
+    selectors.core.data.bitcoin.getAddresses
   ],
-  (bchUnspendableContext, btcUnspendableContext, path) => {
-    return {
-      bchUnspendableContext,
-      btcUnspendableContext,
-      path
+  (context, addressesR) => {
+    const transform = addresses => {
+      const filteredAddresses = filter(x => contains(prop('address', x), context), values(addresses))
+      const filteredBalances = filteredAddresses.map(prop('final_balance'))
+      return reduce(add, 0, filteredBalances)
     }
+    return addressesR.map(transform)
   }
 )
+
+export const getBchBalance = createDeepEqualSelector(
+  [
+    selectors.core.kvStore.bch.getSpendableContext,
+    selectors.core.data.bch.getAddresses
+  ],
+  (context, addressesR) => {
+    const transform = addresses => {
+      const filteredAddresses = filter(x => contains(prop('address', x), context), values(addresses))
+      const filteredBalances = filteredAddresses.map(prop('final_balance'))
+      return reduce(add, 0, filteredBalances)
+    }
+    return addressesR.map(transform)
+  }
+)
+
+export const getEthBalance = selectors.core.data.ethereum.getBalance
diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/template.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/template.js
index fb3537bc98e..913ac1423c0 100644
--- a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/template.js
+++ b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/template.js
@@ -69,51 +69,47 @@ const SubItems = styled.div`
   flex-direction: column;
 `
 
-const Success = props => {
-  const { ethContext, btcUnspendableContext, bchUnspendableContext, path } = props
-
-  const getComponentOrder = () => {
-    switch (path) {
-      case '/btc/transactions': return [<BtcBalance large />, <EthBalance context={ethContext} />, <BchBalance />, <TotalBalance />]
-      case '/eth/transactions': return [<EthBalance large context={ethContext} />, <BtcBalance />, <BchBalance />, <TotalBalance />]
-      case '/bch/transactions': return [<BchBalance large />, <BtcBalance />, <EthBalance context={ethContext} />, <TotalBalance />]
-      default: return [<TotalBalance large />, <BtcBalance />, <EthBalance context={ethContext} />, <BchBalance />]
-    }
+const getComponentOrder = path => {
+  switch (path) {
+    case '/btc/transactions': return [<BtcBalance large />, <EthBalance />, <BchBalance />, <TotalBalance />]
+    case '/eth/transactions': return [<EthBalance large />, <BtcBalance />, <BchBalance />, <TotalBalance />]
+    case '/bch/transactions': return [<BchBalance large />, <BtcBalance />, <EthBalance />, <TotalBalance />]
+    default: return [<TotalBalance large />, <BtcBalance />, <EthBalance />, <BchBalance />]
   }
+}
 
-  const getBalanceMessage = () => {
-    switch (path) {
-      case '/btc/transactions': return <FormattedMessage id='scenes.wallet.menutop.balance.bitcoinbalance' defaultMessage='Bitcoin Balance' />
-      case '/eth/transactions': return <FormattedMessage id='scenes.wallet.menutop.balance.etherbalance' defaultMessage='Ether Balance' />
-      case '/bch/transactions': return <FormattedMessage id='scenes.wallet.menutop.balance.bchbalance' defaultMessage='Bitcoin Cash Balance' />
-      default: return <FormattedMessage id='scenes.wallet.menutop.balance.totalbalance' defaultMessage='Total Balance' />
-    }
+const getBalanceMessage = path => {
+  switch (path) {
+    case '/btc/transactions': return <FormattedMessage id='scenes.wallet.menutop.balance.bitcoinbalance' defaultMessage='Bitcoin Balance' />
+    case '/eth/transactions': return <FormattedMessage id='scenes.wallet.menutop.balance.etherbalance' defaultMessage='Ether Balance' />
+    case '/bch/transactions': return <FormattedMessage id='scenes.wallet.menutop.balance.bchbalance' defaultMessage='Bitcoin Cash Balance' />
+    default: return <FormattedMessage id='scenes.wallet.menutop.balance.totalbalance' defaultMessage='Total Balance' />
   }
+}
 
-  const getSubBalances = () => {
-    return btcUnspendableContext.length || bchUnspendableContext.length ? <SubItems>
-      <Separator margin='0' />
-      <BtcWatchOnlyBalance context={btcUnspendableContext} />
-      <BchWatchOnlyBalance context={bchUnspendableContext} />
-    </SubItems> : null
-  }
+const getSubBalances = props => (
+  <SubItems>
+    <Separator margin='0' />
+    <BtcWatchOnlyBalance />
+    <BchWatchOnlyBalance />
+  </SubItems>
+)
 
-  return (
-    <Wrapper>
-      <BalanceText weight={300}>
-        {getBalanceMessage()}
-      </BalanceText>
-      <BalanceDropdown>
-        <ComponentDropdown
-          down
-          forceSelected
-          color={'gray-5'}
-          selectedComponent={getComponentOrder()[0]}
-          components={getComponentOrder().concat(getSubBalances())}
-          callback={() => {}} />
-      </BalanceDropdown>
-    </Wrapper>
-  )
-}
+const Success = props => (
+  <Wrapper>
+    <BalanceText weight={300}>
+      {getBalanceMessage(props.path)}
+    </BalanceText>
+    <BalanceDropdown>
+      <ComponentDropdown
+        down
+        forceSelected
+        color={'gray-5'}
+        selectedComponent={getComponentOrder()[0]}
+        components={getComponentOrder().concat(getSubBalances())}
+        callback={() => {}} />
+    </BalanceDropdown>
+  </Wrapper>
+)
 
 export default Success
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/ActivityList/ListItem/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/ActivityList/ListItem/index.js
index e8e3d49e445..4f36fd4c964 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/ActivityList/ListItem/index.js
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/ActivityList/ListItem/index.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import moment from 'moment'
 
 import { FormattedMessage } from 'react-intl'
 import { Icon, SkeletonCircle, Text, Tooltip } from 'blockchain-info-components'
@@ -94,40 +93,39 @@ const selectColor = action => {
   }
 }
 
-const ActivityListItem = (props) => {
-  const { handleLink, activity } = props
-  const { action, time, type, amount, path, coin, watchOnly } = activity
-  const timeFormatted = moment(time).format('ll')
-  const iconName = selectIcon(type)
-  const visibility = coin ? 'visible' : 'hidden'
-
-  return (
-    <Container>
-      <Circle>
-        <Icon name={iconName} color='brand-primary' />
-      </Circle>
-      <Info cursor={coin} onClick={() => path && handleLink(path)}>
-        <RecentActivityText capitalize color={selectColor(action)}>
-          {action} {coin}
-          { watchOnly && <WatchOnly>
-            <Tooltip width='200px' label={<SkeletonCircle bgColor='gray-2' width='10px' height='10px' />} hover>
-              <FormattedMessage id='scenes.home.activitylist.watchonly' defaultMessage='This transaction involves a watch only address.' />
-            </Tooltip>
-          </WatchOnly> }
+const ActivityListItem = props => (
+  <Container>
+    <Circle>
+      <Icon name={selectIcon(props.type)} color='brand-primary' />
+    </Circle>
+    <Info cursor={props.coin} onClick={() => props.path && props.handleLink(props.path)}>
+      <RecentActivityText capitalize color={selectColor(props.action)}>
+        {props.action} {props.coin}
+        {props.watchOnly && <WatchOnly>
+          <Tooltip width='200px' label={<SkeletonCircle bgColor='gray-2' width='10px' height='10px' />} hover>
+            <FormattedMessage id='scenes.home.activitylist.watchonly' defaultMessage='This transaction involves a watch only address.' />
+          </Tooltip>
+        </WatchOnly> }
+      </RecentActivityText>
+      <RecentActivityText>{props.timeFormatted}</RecentActivityText>
+      {props.coin &&
+        <RecentActivityText>
+          <SwitchableDisplay mobileSize='12px' size='14px' coin={props.coin}>{props.amount}</SwitchableDisplay>
         </RecentActivityText>
-        <RecentActivityText>{timeFormatted}</RecentActivityText>
-        <RecentActivityText style={{visibility: visibility}} ><SwitchableDisplay mobileSize='12px' size='14px' visibility={'hidden'} coin={coin}>{amount}</SwitchableDisplay></RecentActivityText>
-      </Info>
-    </Container>
-  )
-}
+      }
+    </Info>
+  </Container>
+)
 
 ActivityListItem.propTypes = {
-  activity: PropTypes.object.isRequired,
-  time: PropTypes.number.isRequired,
   type: PropTypes.string,
+  time: PropTypes.number.isRequired,
+  timeFormatted: PropTypes.string.isRequired,
+  path: PropTypes.string,
+  watchOnly: PropTypes.bool,
   amount: PropTypes.number,
-  coin: PropTypes.string
+  coin: PropTypes.string,
+  action: PropTypes.string
 }
 
 ActivityListItem.defaultProps = {
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/ActivityList/selectors.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/ActivityList/selectors.js
index de295a87255..4850e640897 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/ActivityList/selectors.js
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/ActivityList/selectors.js
@@ -1,4 +1,5 @@
 import { concat, isNil, take, map, lift, prop, curry, compose, descend, reduce, sort, unapply } from 'ramda'
+import moment from 'moment'
 import { selectors } from 'data'
 import { Remote } from 'blockchain-wallet-v4/src'
 import { createDeepEqualSelector } from 'services/ReselectHelper'
@@ -6,6 +7,7 @@ import { createDeepEqualSelector } from 'services/ReselectHelper'
 export const transform = curry((coin, transaction) => ({
   type: 'transaction',
   time: transaction.time * 1000,
+  timeFormatted: moment(transaction.time * 1000).format('ll'),
   path: `/${coin.toLowerCase()}/transactions`,
   watchOnly: transaction.fromWatchOnly || transaction.toWatchOnly,
   amount: transaction.amount,
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/ActivityList/template.success.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/ActivityList/template.success.js
index 88e869d5ac0..f851c1df209 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/ActivityList/template.success.js
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/ActivityList/template.success.js
@@ -77,7 +77,7 @@ const Success = props => (
     <Content>
       { (props.activities.length === 0)
         ? <Empty partner={props.partner} handleRequest={props.handleRequest} />
-        : props.activities.map((activity, index) => <ListItem handleLink={props.handleLink} activity={activity} key={index} />)
+        : props.activities.map((activity, index) => <ListItem key={index} handleLink={props.handleLink} {...activity} />)
       }
     </Content>
   </Wrapper>
diff --git a/packages/blockchain-wallet-v4/src/redux/data/bch/sagaRegister.js b/packages/blockchain-wallet-v4/src/redux/data/bch/sagaRegister.js
index b9134977db4..02e48fbc878 100644
--- a/packages/blockchain-wallet-v4/src/redux/data/bch/sagaRegister.js
+++ b/packages/blockchain-wallet-v4/src/redux/data/bch/sagaRegister.js
@@ -7,6 +7,7 @@ export default ({ api }) => {
 
   return function * () {
     yield takeLatest(AT.FETCH_BCH_DATA, dataBchSagas.fetchData)
+    // yield fork(dataBchSagas.watchData)
     yield takeLatest(AT.FETCH_BCH_FEE, dataBchSagas.fetchFee)
     yield takeLatest(AT.FETCH_BCH_RATES, dataBchSagas.fetchRates)
     yield fork(dataBchSagas.watchTransactions)
diff --git a/packages/blockchain-wallet-v4/src/redux/data/bitcoin/sagas.js b/packages/blockchain-wallet-v4/src/redux/data/bitcoin/sagas.js
index 173850b6797..e03e0f1e7c3 100644
--- a/packages/blockchain-wallet-v4/src/redux/data/bitcoin/sagas.js
+++ b/packages/blockchain-wallet-v4/src/redux/data/bitcoin/sagas.js
@@ -98,8 +98,8 @@ export default ({ api }) => {
   }
 
   return {
-    fetchFee,
     fetchData,
+    fetchFee,
     fetchRates,
     fetchFiatAtTime,
     fetchTransactionHistory,
diff --git a/packages/blockchain-wallet-v4/src/redux/data/ethereum/sagas.js b/packages/blockchain-wallet-v4/src/redux/data/ethereum/sagas.js
index 6702f2a8451..39e35f1a90a 100644
--- a/packages/blockchain-wallet-v4/src/redux/data/ethereum/sagas.js
+++ b/packages/blockchain-wallet-v4/src/redux/data/ethereum/sagas.js
@@ -105,8 +105,8 @@ export default ({ api }) => {
     }
   }
   return {
-    fetchFee,
     fetchData,
+    fetchFee,
     fetchLegacyBalance,
     fetchRates,
     fetchLatestBlock,