[WIP] granular balances

- [ ] Should we only show them if it has a balance? Or keep that are static? i..e if I never publish or create a channel, does it make sense to show me locked in claims?

-[ ] Needs better wording

-  [ ] <3 Sean
bump: redux bump

src/ui/component/walletBalance/index.js

@@ -1,9 +1,19 @@
 import { connect } from 'react-redux';
-import { selectBalance } from 'lbry-redux';
+import {
+  selectBalance,
+  selectTotalBalance,
+  selectClaimsBalance,
+  selectSupportsBalance,
+  selectTipsBalance,
+} from 'lbry-redux';
 import WalletBalance from './view';
 
 const select = state => ({
   balance: selectBalance(state),
+  totalBalance: selectTotalBalance(state),
+  claimsBalance: selectClaimsBalance(state),
+  supportsBalance: selectSupportsBalance(state),
+  tipsBalance: selectTipsBalance(state),
 });
 
 export default connect(

src/ui/component/walletBalance/view.jsx

@@ -5,10 +5,14 @@ import BalanceBackground from './balance-background.png';
 
 type Props = {
   balance: number,
+  totalBalance: number,
+  claimsBalance: number,
+  supportsBalance: number,
+  tipsBalance: number,
 };
 
 const WalletBalance = (props: Props) => {
-  const { balance } = props;
+  const { balance, totalBalance, claimsBalance, supportsBalance, tipsBalance } = props;
   return (
     <section
       className="card card--section card--wallet-balance"
@@ -18,6 +22,26 @@ const WalletBalance = (props: Props) => {
       <span className="card__content--large">
         {(balance || balance === 0) && <CreditAmount badge={false} amount={balance} precision={8} />}
       </span>
+      {tipsBalance > 0 && (
+        <div className="card__content--small">
+          Locked in Tips: <CreditAmount badge={false} amount={tipsBalance} precision={8} />
+        </div>
+      )}
+      {claimsBalance > 0 && (
+        <div className="card__content--small">
+          Locked in claims: <CreditAmount badge={false} amount={claimsBalance} precision={8} />
+        </div>
+      )}
+      {supportsBalance > 0 && (
+        <div className="card__content--small">
+          Locked in supports: <CreditAmount badge={false} amount={supportsBalance} precision={8} />
+        </div>
+      )}
+      {totalBalance > 0 && (
+        <div className="card__content--small">
+          Total account value: <CreditAmount badge={false} amount={totalBalance} precision={8} />
+        </div>
+      )}
     </section>
   );
 };