chore(balance): refactor balances (#6288)

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

@@ -1,69 +1,41 @@
 import React from 'react'
-import { connect, ConnectedProps } from 'react-redux'
-import { toLower } from 'ramda'
-import { bindActionCreators } from 'redux'
+import { useDispatch } from 'react-redux'
 
-import { CoinType, ExtractSuccess } from '@core/types'
-import { actions } from 'data'
+import { fetchErc20Data } from '@core/redux/data/eth/actions'
+import { CoinType } from '@core/types'
+import { actions, selectors } from 'data'
+import { useRemote } from 'hooks'
 
 import { LoadingBalance } from '../../model'
-import { getData } from './selectors'
 import Error from './template.error'
 import Success from './template.success'
 
-class Balance extends React.PureComponent<Props> {
-  handleRefresh = () => {
-    const { coin } = this.props
-    const { coinfig } = window.coins[coin]
-    if (coinfig.type.erc20Address) {
-      this.props.ethActions.fetchErc20Data(coin)
+const Balance = ({ coin, coinTicker, large }: Props) => {
+  const dispatch = useDispatch()
+  const { data, hasError, isLoading, isNotAsked } = useRemote(
+    selectors.balances.getCoinTotalBalance(coin)
+  )
+  const handleRefresh = () => {
+    if (window.coins?.[coin]?.coinfig?.type.erc20Address) {
+      dispatch(fetchErc20Data(coin))
     } else {
-      const coinLower = toLower(coin)
-      this.props[`${coinLower}Actions`].fetchData()
+      dispatch(actions.core.data[coin].fetchData())
     }
   }
 
-  render() {
-    const { coin, coinTicker, data, large } = this.props
-
-    return data.cata({
-      Failure: () => <Error onRefresh={this.handleRefresh} />,
-      Loading: () => <LoadingBalance large={large} coinTicker={coinTicker} />,
-      NotAsked: () => <LoadingBalance large={large} coinTicker={coinTicker} />,
-      Success: (value) => (
-        // @ts-ignore
-        <Success
-          {...this.props}
-          balance={value}
-          large={large}
-          coin={coin}
-          coinTicker={coinTicker}
-        />
-      )
-    })
+  if (isLoading || isNotAsked || !data) {
+    return <LoadingBalance large={large} coinTicker={coinTicker} />
   }
-}
 
-const mapStateToProps = (state, ownProps) => ({
-  data: getData(state, ownProps)
-})
+  if (hasError) return <Error onRefresh={handleRefresh} />
 
-const mapDispatchToProps = (dispatch) => ({
-  bchActions: bindActionCreators(actions.core.data.bch, dispatch),
-  btcActions: bindActionCreators(actions.core.data.btc, dispatch),
-  ethActions: bindActionCreators(actions.core.data.eth, dispatch),
-  stxActions: bindActionCreators(actions.core.data.stx, dispatch),
-  xlmActions: bindActionCreators(actions.core.data.xlm, dispatch)
-})
-
-const connector = connect(mapStateToProps, mapDispatchToProps)
+  return <Success balance={data} large={large} coin={coin} coinTicker={coinTicker} />
+}
 
-export type OwnProps = {
+export type Props = {
   coin: CoinType
   coinTicker: string
-  large: boolean
+  large?: boolean
 }
-export type SuccessStateType = ExtractSuccess<ReturnType<typeof getData>>
-export type Props = OwnProps & ConnectedProps<typeof connector>
 
-export default connector(Balance)
+export default Balance

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/WalletBalance/Balance/template.success.tsx

@@ -1,24 +1,16 @@
 import React from 'react'
 
 import { CoinBalanceWrapper } from '../../model'
-import { Props as OwnProps, SuccessStateType } from '.'
-
-const Success = (props: Props) => {
-  const { balance, coin, coinTicker, large } = props
+import { Props as OwnProps } from '.'
 
+const Success = ({ balance, coin, coinTicker, large }: Props) => {
   return (
     <div data-e2e={`balanceDropdown-wallet-${coin}`}>
-      <CoinBalanceWrapper
-        {...props}
-        coin={coin}
-        balance={balance}
-        large={large}
-        coinTicker={coinTicker}
-      />
+      <CoinBalanceWrapper balance={balance} coin={coin} coinTicker={coinTicker} large={large} />
     </div>
   )
 }
 
-export type Props = OwnProps & SuccessStateType & { balance: number }
+export type Props = OwnProps & { balance: number }
 
 export default Success

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

@@ -64,7 +64,7 @@ export const CoinBalanceWrapper = (props: OwnProps) => {
   ) : (
     <LinkContainer to={`/coins/${props.coin}`}>
       <CoinBalanceSwitchable>
-        <CoinNameText>{props.coinTicker ? props.coinTicker : props.coin}</CoinNameText>
+        <CoinNameText>{props.coinTicker ?? props.coin}</CoinNameText>
         <SwitchableDisplay size='12px' weight={500} coin={props.coin} hideCoinTicker>
           {props.balance}
         </SwitchableDisplay>