From b2cc11b4e4c98aa91b53853c556f4442ce23f3fc Mon Sep 17 00:00:00 2001
From: Thomas Zarebczan <thomas.zarebczan@gmail.com>
Date: Wed, 25 Sep 2019 08:59:47 -0400
Subject: [PATCH] [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 | 12 +++++++++++-
 src/ui/component/walletBalance/view.jsx | 26 ++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/ui/component/walletBalance/index.js b/src/ui/component/walletBalance/index.js
index 6e136f1bd..68130b405 100644
--- a/src/ui/component/walletBalance/index.js
+++ b/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(
diff --git a/src/ui/component/walletBalance/view.jsx b/src/ui/component/walletBalance/view.jsx
index 55ef017a1..9ab46aac6 100644
--- a/src/ui/component/walletBalance/view.jsx
+++ b/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>
   );
 };