feat(Layout): select drop down balances

packages/blockchain-wallet-v4-frontend/src/components/Form/SelectBoxXlmAddresses/selectors.js

@@ -1,57 +1,47 @@
 import { concat, curry, filter, has, map, reduce, sequence } from 'ramda'
-import { createDeepEqualSelector } from 'services/ReselectHelper'
 import { Exchange, Remote } from 'blockchain-wallet-v4/src'
 import { selectors } from 'data'
 
-export const getData = createDeepEqualSelector(
-  [
-    selectors.core.common.xlm.getAccountBalances,
-    selectors.core.common.xlm.getLockboxXlmBalances,
-    selectors.components.send.getPaymentsAccountExchange('XLM'),
-    (state, { includeExchangeAddress }) => includeExchangeAddress,
-    (state, { exclude }) => exclude,
-    (state, { excludeLockbox }) => excludeLockbox
-  ],
-  (
-    walletBalances,
-    lockboxBalances,
-    exchangeAddress,
-    includeExchangeAddress,
-    exclude = [],
-    excludeLockbox
-  ) => {
-    const buildDisplay = wallet => {
-      if (has('balance', wallet)) {
-        let xlmDisplay = Exchange.displayXlmToXlm({
-          value: wallet.balance,
-          fromUnit: 'STROOP',
-          toUnit: 'XLM'
-        })
-        return wallet.label + ` (${xlmDisplay})`
-      }
-      return wallet.label
+export const getData = (state, ownProps) => {
+  const { exclude = [], excludeLockbox, includeExchangeAddress } = ownProps
+
+  const buildDisplay = wallet => {
+    if (has('balance', wallet)) {
+      let xlmDisplay = Exchange.displayXlmToXlm({
+        value: wallet.balance,
+        fromUnit: 'STROOP',
+        toUnit: 'XLM'
+      })
+      return wallet.label + ` (${xlmDisplay})`
     }
-    const excluded = filter(x => !exclude.includes(x.label))
-    const toDropdown = map(x => ({ label: buildDisplay(x), value: x }))
-    const toGroup = curry((label, options) => [{ label, options }])
-    const toExchange = x => [{ label: `Exchange XLM Address`, value: x }]
+    return wallet.label
+  }
+  const excluded = filter(x => !exclude.includes(x.label))
+  const toDropdown = map(x => ({ label: buildDisplay(x), value: x }))
+  const toGroup = curry((label, options) => [{ label, options }])
+  const toExchange = x => [{ label: `Exchange XLM Address`, value: x }]
 
-    const hasExchangeAddress = Remote.Success.is(exchangeAddress)
+  const exchangeAddress = selectors.components.send.getPaymentsAccountExchange(
+    'XLM',
+    state
+  )
+  const hasExchangeAddress = Remote.Success.is(exchangeAddress)
 
-    return sequence(Remote.of, [
-      walletBalances
-        .map(excluded)
-        .map(toDropdown)
-        .map(toGroup('Wallet')),
-      excludeLockbox
-        ? Remote.of([])
-        : lockboxBalances
-            .map(excluded)
-            .map(toDropdown)
-            .map(toGroup('Lockbox')),
-      includeExchangeAddress && hasExchangeAddress
-        ? exchangeAddress.map(toExchange).map(toGroup('Exchange'))
-        : Remote.of([])
-    ]).map(([b1, b2, b3]) => ({ data: reduce(concat, [], [b1, b2, b3]) }))
-  }
-)
+  return sequence(Remote.of, [
+    selectors.core.common.xlm
+      .getAccountBalances(state)
+      .map(excluded)
+      .map(toDropdown)
+      .map(toGroup('Wallet')),
+    excludeLockbox
+      ? Remote.of([])
+      : selectors.core.common.xlm
+          .getLockboxXlmBalances(state)
+          .map(excluded)
+          .map(toDropdown)
+          .map(toGroup('Lockbox')),
+    includeExchangeAddress && hasExchangeAddress
+      ? exchangeAddress.map(toExchange).map(toGroup('Exchange'))
+      : Remote.of([])
+  ]).map(([b1, b2, b3]) => ({ data: reduce(concat, [], [b1, b2, b3]) }))
+}

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/WalletBalanceDropdown/index.tsx

@@ -71,19 +71,33 @@ const FiatContainer = styled.div`
 export class WalletBalanceDropdown extends Component<Props> {
   state = {}
 
+  isBtcTypeCoin = () => {
+    return this.props.coin === 'BTC' || this.props.coin === 'BCH'
+  }
+
+  isTotalBalanceType = (selectProps) => {
+    return selectProps.value === 'all' || !this.isBtcTypeCoin()
+  }
+
+  coinBalance = (selectProps) => {
+    return this.isTotalBalanceType(selectProps) ? this.props.data.getOrElse({ balanceData: 0 }).balanceData : selectProps.value.balance
+  }
+
+
+
   // FIXME: TypeScript use value: { AccountTypes }
   renderDisplay = (props: { value }, children) => {
     const coinType = this.props.coinModel
     const icon = coinType.icons.circleFilled
     const color = coinType.colorCode
-    const balance = props.value === 'all' ? this.props.data.getOrElse({ balanceData: 0 }).balanceData : props.value.balance
+    const balance = this.coinBalance(props)
 
     return (
       <DisplayContainer coinType={coinType}>
         <Icon size='32px' color={color} name={icon} />
         <AccountContainer>
           {children && children.length && children[1]}
-          <Text weight={500} color='grey400'>{props.value === 'all' ? this.props.coin : props.value.label} <FormattedMessage id='scenes.transactions.walletbalancedropdown.balance' defaultMessage='Balance' /></Text>
+          <Text weight={500} color='grey400'>{this.isTotalBalanceType(props) ? this.props.coin : props.value.label} <FormattedMessage id='scenes.transactions.walletbalancedropdown.balance' defaultMessage='Balance' /></Text>
           <AmountContainer>
             <CoinDisplay
               coin={this.props.coin}
@@ -116,12 +130,12 @@ export class WalletBalanceDropdown extends Component<Props> {
 
   renderItem = (props: { value, label }) => {
     const coinType = this.props.coinModel
-    const balance = props.value === 'all' ? this.props.data.getOrElse({ balanceData: 0 }).balanceData : props.value.balance
+    const balance = this.coinBalance(props)
 
     return (
       <DisplayContainer coinType={coinType} isItem>
         <AccountContainer isItem>
-          {props.value === 'all' ? props.label : props.value.label}
+          {this.isTotalBalanceType(props) ? props.label : props.value.label}
           <AmountContainer>
             <CoinDisplay
               coin={this.props.coin}
@@ -153,8 +167,6 @@ export class WalletBalanceDropdown extends Component<Props> {
   }
 
   render () {
-    console.log(this.props.data)
-
     return this.props.data.cata({
       Success: values => {
         return (

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/WalletBalanceDropdown/selectors.ts

@@ -1,21 +1,42 @@
+import * as balanceSelectors from 'components/Balances/wallet/selectors'
+import { getData as getBchAddressData } from 'components/Form/SelectBoxBchAddresses/selectors'
 import { getData as getBtcAddressData } from 'components/Form/SelectBoxBtcAddresses/selectors'
+import {
+  getErc20Data as getErc20AddressData,
+  getEthData as getEthAddressData
+} from 'components/Form/SelectBoxEthAddresses/selectors'
+import { getData as getXlmAddressData } from 'components/Form/SelectBoxXlmAddresses/selectors'
 import { lift } from 'ramda'
 import { OwnProps } from '.'
-import { selectors } from 'data'
 import Remote from 'blockchain-wallet-v4/src/remote/remote'
 
 export const getData = (state, ownProps: OwnProps) => {
   let addressDataR
-  let balanceDataR = selectors.core.data[
-    ownProps.coin.toLowerCase()
-  ].getBalance(state)
+  let balanceDataR
 
   switch (ownProps.coin) {
     case 'BTC':
       addressDataR = getBtcAddressData(state, { excludeLockbox: true })
+      balanceDataR = balanceSelectors.getBtcBalance(state)
+      break
+    case 'BCH':
+      addressDataR = getBchAddressData(state, { excludeLockbox: true })
+      balanceDataR = balanceSelectors.getBchBalance(state)
+      break
+    case 'ETH':
+      addressDataR = getEthAddressData(state, { excludeLockbox: true })
+      balanceDataR = balanceSelectors.getEthBalance(state)
+      break
+    case 'PAX':
+      addressDataR = getErc20AddressData(state, { coin: ownProps.coin })
+      balanceDataR = balanceSelectors.getPaxBalance(state)
+      break
+    case 'XLM':
+      addressDataR = getXlmAddressData(state, { excludeLockbox: true })
+      balanceDataR = balanceSelectors.getXlmBalance(state)
       break
     default:
-      addressDataR = Remote.Success([])
+      addressDataR = Remote.Success({ data: [] })
   }
 
   const transform = (addressData, balanceData) => ({ addressData, balanceData })