Reorganize overview balances (#3319)

decred · Mar 19, 2021 · 249b17b · 249b17b
1 parent 8a8cbd8
commit 249b17b
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 36 deletions.
diff --git a/app/components/views/HomePage/HomePage.module.css b/app/components/views/HomePage/HomePage.module.css
@@ -19,7 +19,7 @@
 }
 
 .overviewSpendableLockedWrapper {
-  padding-top: 96px;
+  padding-top: 146px;
 }
 
 .overviewTransactionsTicket {
@@ -58,6 +58,7 @@
   font-size: 17px;
   font-family: var(--font-family-monospace);
   line-height: 18px;
+  white-space: nowrap;
 }
 
 .overviewBalanceSpendableLocked.active {
@@ -114,6 +115,11 @@
   height: 250px;
 }
 
+.lockedBalanceTooltipGrid {
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
+}
+
 @media screen and (max-width: 1179px) {
   .overviewTransactionsTicket {
     padding: 30px 20px;
@@ -127,10 +133,6 @@
   .overviewContentWrapper {
     padding-left: 20px;
   }
-
-  .overviewSpendableLockedWrapper {
-    padding-top: 96px;
-  }
 }
 
 @media screen and (max-width: 768px) {

diff --git a/app/components/views/HomePage/Tabs/BalanceTab/BalanceTab.jsx b/app/components/views/HomePage/Tabs/BalanceTab/BalanceTab.jsx
@@ -2,15 +2,18 @@ import { Balance } from "shared";
 import { FormattedMessage as T } from "react-intl";
 import { BalanceChart } from "charts";
 import { useBalance } from "./hooks";
-import { classNames } from "pi-ui";
+import { Tooltip, classNames } from "pi-ui";
 import styles from "../../HomePage.module.css";
 
 const BalanceTab = () => {
   const {
     spendableTotalBalance,
     lockedTotalBalance,
     spendableAndLockedBalance,
-    unconfirmedTotalBalance
+    unconfirmedTotalBalance,
+    lockedByTicketsTotalBalance,
+    immatureRewardTotalBalance,
+    immatureStakeGenerationTotalBalance
   } = useBalance();
   return (
     <div className={styles.overviewContentWrapper}>
@@ -28,32 +31,69 @@ const BalanceTab = () => {
             <T id="home.currentTotalSpendableBalanceLabel" m="Available" />
           </div>
         </div>
-        <div className={styles.overviewSpendableLockedWrapperArea}>
-          <Balance
-            classNameWrapper={classNames(
-              styles.overviewBalanceSpendableLocked,
-              styles.locked,
-              styles.amount
-            )}
-            amount={lockedTotalBalance}
-          />
-          <div className={styles.overviewBalanceSpendableLockedLabel}>
-            <T id="home.currentTotalLockedBalanceLabel" m="Locked" />
-          </div>
-        </div>
-        <div className={styles.overviewSpendableLockedWrapperArea}>
-          <Balance
-            classNameWrapper={classNames(
-              styles.overviewBalanceSpendableLocked,
-              styles.available,
-              styles.amount
-            )}
-            amount={unconfirmedTotalBalance}
-          />
-          <div className={styles.overviewBalanceSpendableLockedLabel}>
-            <T id="home.currentTotalUnconfirmedBalanceLabel" m="Unconfirmed" />
+        <Tooltip
+          content={
+            <div className={styles.lockedBalanceTooltipGrid}>
+              <T id="home.immatureRewardBalanceLabel" m="Immature Rewards" />:
+              <Balance
+                classNameWrapper={classNames(
+                  styles.overviewBalanceSpendableLocked,
+                  styles.amount
+                )}
+                amount={immatureRewardTotalBalance}
+              />
+              <T
+                id="home.lockedByTicketsTotalBalanceLabel"
+                m="Locked by tickets"
+              />
+              :
+              <Balance
+                classNameWrapper={classNames(
+                  styles.overviewBalanceSpendableLocked,
+                  styles.amount
+                )}
+                amount={lockedByTicketsTotalBalance}
+              />
+              <T
+                id="home.immatureStakeGenerationBalanceLabel"
+                m="Immature Stake Gen"
+              />
+              :
+              <Balance
+                classNameWrapper={classNames(
+                  styles.overviewBalanceSpendableLocked,
+                  styles.amount
+                )}
+                amount={immatureStakeGenerationTotalBalance}
+              />
+              <T
+                id="home.currentTotalUnconfirmedBalanceLabel"
+                m="Unconfirmed"
+              />
+              :
+              <Balance
+                classNameWrapper={classNames(
+                  styles.overviewBalanceSpendableLocked,
+                  styles.amount
+                )}
+                amount={unconfirmedTotalBalance}
+              />
+            </div>
+          }>
+          <div className={styles.overviewSpendableLockedWrapperArea}>
+            <Balance
+              classNameWrapper={classNames(
+                styles.overviewBalanceSpendableLocked,
+                styles.locked,
+                styles.amount
+              )}
+              amount={lockedTotalBalance}
+            />
+            <div className={styles.overviewBalanceSpendableLockedLabel}>
+              <T id="home.currentTotalLockedBalanceLabel" m="Locked" />
+            </div>
           </div>
-        </div>
+        </Tooltip>
       </div>
       <BalanceChart data={spendableAndLockedBalance} />
     </div>

diff --git a/app/components/views/HomePage/Tabs/BalanceTab/hooks.js b/app/components/views/HomePage/Tabs/BalanceTab/hooks.js
@@ -2,15 +2,28 @@ import { useSelector } from "react-redux";
 import * as sel from "selectors";
 
 export function useBalance() {
-  const lockedTotalBalance = useSelector(sel.lockedBalance);
+  const lockedTotalBalance = useSelector(sel.lockedTotalBalance);
   const spendableTotalBalance = useSelector(sel.spendableTotalBalance);
   const unconfirmedTotalBalance = useSelector(sel.unconfirmedTotalBalance);
   const spendableAndLockedBalance = useSelector(sel.spendableAndLockedBalance);
+  const lockedByTicketsTotalBalance = useSelector(
+    sel.lockedByTicketsTotalBalance
+  );
+
+  const immatureRewardTotalBalance = useSelector(
+    sel.immatureRewardTotalBalance
+  );
+  const immatureStakeGenerationTotalBalance = useSelector(
+    sel.immatureStakeGenerationTotalBalance
+  );
 
   return {
     lockedTotalBalance,
     spendableTotalBalance,
     spendableAndLockedBalance,
-    unconfirmedTotalBalance
+    unconfirmedTotalBalance,
+    lockedByTicketsTotalBalance,
+    immatureRewardTotalBalance,
+    immatureStakeGenerationTotalBalance
   };
 }
diff --git a/app/selectors.js b/app/selectors.js
@@ -236,6 +236,11 @@ export const spendableTotalBalance = createSelector(
   )
 );
 
+export const lockedTotalBalance = createSelector(
+  [totalBalance, spendableTotalBalance],
+  (totalBalance, spendableTotalBalance) => totalBalance - spendableTotalBalance
+);
+
 export const unconfirmedTotalBalance = createSelector(
   [balances],
   reduce(
@@ -287,11 +292,24 @@ export const getNotMixedAcctIfAllowed = createSelector(
   }
 );
 
-export const lockedBalance = createSelector(
+export const lockedByTicketsTotalBalance = createSelector(
   [balances],
   reduce((atoms, { lockedByTickets }) => atoms + lockedByTickets, 0)
 );
 
+export const immatureRewardTotalBalance = createSelector(
+  [balances],
+  reduce((total, { immatureReward }) => total + immatureReward, 0)
+);
+
+export const immatureStakeGenerationTotalBalance = createSelector(
+  [balances],
+  reduce(
+    (total, { immatureStakeGeneration }) => total + immatureStakeGeneration,
+    0
+  )
+);
+
 export const networks = () => [{ name: TESTNET }, { name: MAINNET }];
 export const network = get(["settings", "currentSettings", "network"]);
 export const isTestNet = compose(eq(TESTNET), network);
@@ -1105,7 +1123,10 @@ export const changePassphraseRequestAttempt = get([
 
 export const constructTxLowBalance = get(["control", "constructTxLowBalance"]);
 export const constructTxResponse = get(["control", "constructTxResponse"]);
-export const constructTxRequestAttempt = get(["control", "constructTxRequestAttempt"]);
+export const constructTxRequestAttempt = get([
+  "control",
+  "constructTxRequestAttempt"
+]);
 const signTransactionRequestAttempt = get([
   "control",
   "signTransactionRequestAttempt"