chore(balances): refactor code (#6289)

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/WalletBalance/PendingBSTransactions/index.tsx

@@ -1,33 +1,28 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
-import { connect, ConnectedProps } from 'react-redux'
+import { useSelector } from 'react-redux'
 import styled from 'styled-components'
 
+import { getTotalBSTransactionsPendingN } from '@core/redux/data/custodial/selectors'
 import { Text } from 'blockchain-info-components'
-import { selectors } from 'data'
-import { RootState } from 'data/rootReducer'
 
 const Wrapper = styled.div`
   margin-bottom: 16px;
   cursor: initial;
 `
 
-const PendingBSTransactions: React.FC<Props> = ({ n }) => {
-  return n > 0 ? (
+const PendingBSTransactions = () => {
+  const pendingTransactions = useSelector(getTotalBSTransactionsPendingN)
+
+  if (pendingTransactions <= 0) return null
+  return (
     <Wrapper>
       <Text size='12px' weight={600} color='grey600'>
-        {n} <FormattedMessage defaultMessage='Pending Transactions' id='copy.pending_txs' />
+        {pendingTransactions}{' '}
+        <FormattedMessage defaultMessage='Pending Transactions' id='copy.pending_txs' />
       </Text>
     </Wrapper>
-  ) : null
+  )
 }
 
-const mapStateToProps = (state: RootState) => ({
-  n: selectors.core.data.custodial.getTotalBSTransactionsPendingN(state)
-})
-
-const connector = connect(mapStateToProps)
-
-type Props = ConnectedProps<typeof connector>
-
-export default connector(PendingBSTransactions)
+export default PendingBSTransactions

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/WalletBalance/index.tsx

@@ -1,42 +1,27 @@
 import React from 'react'
-import { connect, ConnectedProps } from 'react-redux'
-import { prop } from 'ramda'
-import { bindActionCreators } from 'redux'
-
-import { actions, selectors } from 'data'
-
-import Template from './template'
-
-class WalletBalanceContainer extends React.PureComponent<Props> {
-  render() {
-    const { coins, preferencesActions, totalBalancesDropdown } = this.props
-    const isActive = prop('wallet', totalBalancesDropdown)
-    return (
-      <Template
-        isActive={isActive}
-        coins={coins}
-        handleToggle={() =>
-          preferencesActions.setTotalBalancesDropdown({
-            key: 'wallet',
-            val: !isActive
-          })
-        }
-      />
-    )
-  }
+import { useSelector } from 'react-redux'
+
+import { Wrapper } from 'components/Balances'
+import { selectors } from 'data'
+
+import { BalancesWrapper } from '../model'
+import Balance from './Balance'
+import PendingBSTransactions from './PendingBSTransactions'
+
+const WalletBalance = () => {
+  const coins = useSelector(selectors.balances.getTotalWalletBalancesSorted).getOrElse([])
+  const isActive = useSelector(selectors.preferences.getTotalBalancesDropdown)?.wallet
+
+  return (
+    <Wrapper>
+      <PendingBSTransactions />
+      <BalancesWrapper className={isActive ? 'active' : ''}>
+        {coins.map((coin) => (
+          <Balance coin={coin.symbol} coinTicker={coin.symbol} key={coin.symbol} />
+        ))}
+      </BalancesWrapper>
+    </Wrapper>
+  )
 }
 
-const mapStateToProps = (state) => ({
-  coins: selectors.balances.getTotalWalletBalancesSorted(state).getOrElse([]),
-  totalBalancesDropdown: selectors.preferences.getTotalBalancesDropdown(state)
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  preferencesActions: bindActionCreators(actions.preferences, dispatch)
-})
-
-const connector = connect(mapStateToProps, mapDispatchToProps)
-
-type Props = ConnectedProps<typeof connector>
-
-export default connector(WalletBalanceContainer)
+export default WalletBalance

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/model.tsx

@@ -7,9 +7,7 @@ import CoinDisplay from 'components/Display/CoinDisplay'
 import FiatDisplay from 'components/Display/FiatDisplay'
 import SwitchableDisplay from 'components/Display/SwitchableDisplay'
 
-import { Props as OwnProps } from './WalletBalance/Balance/template.success'
-
-export const CoinBalanceMain = styled.div`
+const CoinBalanceMain = styled.div`
   display: inline-flex;
   flex-direction: row;
   align-items: center;
@@ -51,37 +49,50 @@ export const BalancesWrapper = styled.div`
   }
 `
 
-export const CoinBalanceWrapper = (props: OwnProps) => {
-  return props.large ? (
-    <CoinBalanceMain>
-      <CoinDisplay coin={props.coin} cursor='pointer' mobileSize='14px' size='18px' weight={400}>
-        {props.balance}
-      </CoinDisplay>
-      <FiatDisplay coin={props.coin} cursor='pointer' mobileSize='14px' size='18px' weight={400}>
-        {props.balance}
-      </FiatDisplay>
-    </CoinBalanceMain>
-  ) : (
-    <LinkContainer to={`/coins/${props.coin}`}>
+type Props = {
+  balance: number
+  coin: string
+  coinTicker: string
+  large: boolean
+}
+
+export const CoinBalanceWrapper = ({ balance, coin, coinTicker, large }: Props) => {
+  if (large) {
+    return (
+      <CoinBalanceMain>
+        <CoinDisplay coin={coin} cursor='pointer' mobileSize='14px' size='18px' weight={400}>
+          {balance}
+        </CoinDisplay>
+        <FiatDisplay coin={coin} cursor='pointer' mobileSize='14px' size='18px' weight={400}>
+          {balance}
+        </FiatDisplay>
+      </CoinBalanceMain>
+    )
+  }
+  return (
+    <LinkContainer to={`/coins/${coin}`}>
       <CoinBalanceSwitchable>
-        <CoinNameText>{props.coinTicker ?? props.coin}</CoinNameText>
-        <SwitchableDisplay size='12px' weight={500} coin={props.coin} hideCoinTicker>
-          {props.balance}
+        <CoinNameText>{coinTicker ?? coin}</CoinNameText>
+        <SwitchableDisplay size='12px' weight={500} coin={coin} hideCoinTicker>
+          {balance}
         </SwitchableDisplay>
       </CoinBalanceSwitchable>
     </LinkContainer>
   )
 }
 
-export const LoadingBalance = (props) => {
-  return props.large ? (
-    <BalanceSkeleton>
-      <SkeletonRectangle width='170px' height='12px' />
-    </BalanceSkeleton>
-  ) : (
+export const LoadingBalance = ({ coinTicker, large }: Pick<Props, 'coinTicker' | 'large'>) => {
+  if (large) {
+    return (
+      <BalanceSkeleton>
+        <SkeletonRectangle width='170px' height='12px' />
+      </BalanceSkeleton>
+    )
+  }
+  return (
     <CoinSkeletonWrapper>
       <Text size='12px' weight={600} color='grey800'>
-        {props.coinTicker}
+        {coinTicker}
       </Text>
       <SkeletonRectangle width='40px' height='12px' />
     </CoinSkeletonWrapper>

packages/blockchain-wallet-v4/src/redux/data/custodial/selectors.ts

@@ -9,10 +9,8 @@ export const getBSTransactionsPending = (state: RootState, currency: string) =>
 }
 
 export const getTotalBSTransactionsPendingN = (state: RootState) => {
-  let n = 0
-  Object.keys(state.dataPath.custodial).map((coin) => {
-    n += state.dataPath.custodial.coins[coin]?.pendingTxsN || 0
-    return n
-  })
-  return n
+  return Object.keys(state.dataPath.custodial).reduce((acc, currency) => {
+    acc += getBSTransactionsPending(state, currency)
+    return acc
+  }, 0)
 }