fix - balances were computing too often

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.'))
     }
   }
 

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

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)
+)

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' />

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

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)
+)

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' />

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

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(
   [

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)

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

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