Merge pull request #2803 from input-output-hk/feature/ddw-614-add-display-of-current-rewards-balance

[DDW-614] Show unspent ADA amount in rewards table

Author: DominikGuzei

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Features
 
+- Added display of current/unspent rewards ([PR 2803](https://github.com/input-output-hk/daedalus/pull/2803))
 - Improve the syncing screen by showing syncing progress split into three stages ([PR 2877](https://github.com/input-output-hk/daedalus/pull/2877))
 - Improved stake pool searchbar ([PR 2847](https://github.com/input-output-hk/daedalus/pull/2847))
 - Implemented catalyst dynamic content ([PR 2856](https://github.com/input-output-hk/daedalus/pull/2856))

package.json

@@ -92,6 +92,7 @@
     "@testing-library/jest-dom": "5.15.1",
     "@testing-library/react": "12.1.2",
     "@types/aes-js": "^3.1.1",
+    "@types/jest": "27.4.0",
     "@types/node": "^17.0.12",
     "@types/qrcode.react": "^1.0.2",
     "@types/react": "^17.0.38",

source/renderer/app/api/staking/types.ts

@@ -56,8 +56,11 @@ export type AdaApiStakePools = Array<AdaApiStakePool>;
 export type Reward = {
   date?: string;
   wallet: string;
-  reward: BigNumber;
+  total: BigNumber;
+  unspent: BigNumber;
   rewardsAddress: string;
+  isRestoring: boolean;
+  syncingProgress: number;
   pool?: StakePool;
 };
 export type EpochData = {

source/renderer/app/components/staking/rewards/StakingRewards.scss

@@ -180,6 +180,12 @@
           visibility: visible;
         }
       }
+
+      &.total,
+      &.unspent {
+        padding-right: 10px;
+        text-align: right;
+      }
     }
 
     td {
@@ -209,12 +215,9 @@
 
       .syncingProgress {
         position: absolute;
-        right: 10px;
-        top: 0;
-
+        right: 22px;
+        top: 10px;
         :global .LoadingSpinner_component.LoadingSpinner_medium {
-          margin: 10px auto !important;
-
           .LoadingSpinner_icon svg path {
             fill: var(--theme-loading-spinner-color);
             opacity: 0.3;
@@ -273,16 +276,11 @@
 
       &.rewardWallet {
         max-width: 200px;
-        min-width: 200px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
 
-      &.rewardAmount {
-        min-width: 250px;
-      }
-
       &.rewardsAddress {
         min-width: 100px;
 
@@ -301,7 +299,7 @@
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            width: 237px;
+            width: 200px;
 
             &:hover {
               cursor: pointer;
@@ -325,6 +323,12 @@
           }
         }
       }
+
+      &.rewardTotal,
+      &.rewardUnspent {
+        padding-right: 23px;
+        text-align: right;
+      }
     }
   }
 }

source/renderer/app/components/staking/rewards/StakingRewards.tsx

@@ -57,10 +57,15 @@ const messages = defineMessages({
     defaultMessage: '!!!Wallet',
     description: 'Table header "Wallet" label on staking rewards page',
   },
-  tableHeaderReward: {
-    id: 'staking.rewards.tableHeader.reward',
+  tableHeaderRewardTotal: {
+    id: 'staking.rewards.tableHeader.total',
     defaultMessage: '!!!Total rewards earned (ADA)',
-    description: 'Table header "Reward" label on staking rewards page',
+    description: 'Table header "Total Reward" label on staking rewards page',
+  },
+  tableHeaderRewardUnspent: {
+    id: 'staking.rewards.tableHeader.unspent',
+    defaultMessage: '!!!Unspent (ADA)',
+    description: 'Table header "Unspent" label on staking rewards page',
   },
   tableHeaderRewardsAddress: {
     id: 'staking.rewards.tableHeader.rewardsAddress',
@@ -93,7 +98,8 @@ const REWARD_FIELDS = {
   WALLET_NAME: 'wallet',
   IS_RESTORING: 'isRestoring',
   SYNCING_PROGRESS: 'syncingProgress',
-  REWARD: 'reward',
+  REWARD_TOTAL: 'total',
+  REWARD_UNSPENT: 'unspent',
   REWARDS_ADDRESS: 'rewardsAddress',
 };
 const REWARD_ORDERS = {
@@ -148,14 +154,18 @@ class StakingRewards extends Component<Props, State> {
     const exportedBody = sortedRewards.map((reward) => {
       const rewardWallet = get(reward, REWARD_FIELDS.WALLET_NAME);
       const isRestoring = get(reward, REWARD_FIELDS.IS_RESTORING);
-      const rewardAmount = get(reward, REWARD_FIELDS.REWARD).toFormat(
+      const rewardTotal = get(reward, REWARD_FIELDS.REWARD_TOTAL).toFormat(
+        DECIMAL_PLACES_IN_ADA
+      );
+      const rewardUnspent = get(reward, REWARD_FIELDS.REWARD_UNSPENT).toFormat(
         DECIMAL_PLACES_IN_ADA
       );
       const rewardsAddress = get(reward, REWARD_FIELDS.REWARDS_ADDRESS);
       return [
         rewardWallet,
         rewardsAddress,
-        isRestoring ? '-' : rewardAmount,
+        isRestoring ? '-' : rewardTotal,
+        isRestoring ? '-' : rewardUnspent,
         date,
       ];
     });
@@ -169,9 +179,14 @@ class StakingRewards extends Component<Props, State> {
     const { rewards } = this.props;
     const { rewardsOrder, rewardsSortBy } = this.state;
     return rewards.slice().sort((rewardA: Reward, rewardB: Reward) => {
-      const rewardCompareResult = bigNumberComparator(
-        rewardA.reward,
-        rewardB.reward,
+      const totalCompareResult = bigNumberComparator(
+        rewardA.total,
+        rewardB.total,
+        rewardsOrder === REWARD_ORDERS.ASCENDING
+      );
+      const unspentCompareResult = bigNumberComparator(
+        rewardA.unspent,
+        rewardB.unspent,
         rewardsOrder === REWARD_ORDERS.ASCENDING
       );
       const walletNameCompareResult = stringComparator(
@@ -185,40 +200,28 @@ class StakingRewards extends Component<Props, State> {
         rewardsOrder === REWARD_ORDERS.ASCENDING
       );
 
-      if (rewardsSortBy === REWARD_FIELDS.REWARD) {
-        if (rewardCompareResult === 0 && walletAddressCompareResult === 0) {
-          return walletNameCompareResult;
-        }
-
-        if (rewardCompareResult === 0 && walletNameCompareResult === 0) {
-          return walletAddressCompareResult;
-        }
+      if (rewardsSortBy === REWARD_FIELDS.REWARD_TOTAL) {
+        if (totalCompareResult !== 0) return totalCompareResult;
+        if (walletNameCompareResult !== 0) return walletNameCompareResult;
+        return walletAddressCompareResult;
+      }
 
-        return rewardCompareResult;
+      if (rewardsSortBy === REWARD_FIELDS.REWARD_UNSPENT) {
+        if (unspentCompareResult !== 0) return unspentCompareResult;
+        if (walletNameCompareResult !== 0) return walletNameCompareResult;
+        return walletAddressCompareResult;
       }
 
       if (rewardsSortBy === REWARD_FIELDS.WALLET_NAME) {
-        if (walletNameCompareResult === 0 && walletAddressCompareResult) {
-          return rewardCompareResult;
-        }
-
-        if (rewardCompareResult === 0 && walletNameCompareResult === 0) {
-          return walletAddressCompareResult;
-        }
-
-        return walletNameCompareResult;
+        if (walletNameCompareResult !== 0) return walletNameCompareResult;
+        if (totalCompareResult !== 0) return totalCompareResult;
+        return walletAddressCompareResult;
       }
 
       if (rewardsSortBy === REWARD_FIELDS.REWARDS_ADDRESS) {
-        if (walletAddressCompareResult === 0 && rewardCompareResult === 0) {
-          return walletNameCompareResult;
-        }
-
-        if (walletAddressCompareResult === 0 && walletNameCompareResult === 0) {
-          return rewardCompareResult;
-        }
-
-        return walletAddressCompareResult;
+        if (walletAddressCompareResult !== 0) return walletAddressCompareResult;
+        if (walletNameCompareResult !== 0) return walletNameCompareResult;
+        return totalCompareResult;
       }
 
       return 0;
@@ -253,9 +256,15 @@ class StakingRewards extends Component<Props, State> {
         title: intl.formatMessage(messages.tableHeaderRewardsAddress),
       },
       {
-        name: REWARD_FIELDS.REWARD,
+        name: REWARD_FIELDS.REWARD_TOTAL,
         title: `${intl.formatMessage(
-          messages.tableHeaderReward
+          messages.tableHeaderRewardTotal
+        )} (${intl.formatMessage(globalMessages.adaUnit)})`,
+      },
+      {
+        name: REWARD_FIELDS.REWARD_UNSPENT,
+        title: `${intl.formatMessage(
+          messages.tableHeaderRewardUnspent
         )} (${intl.formatMessage(globalMessages.adaUnit)})`,
       },
     ];
@@ -323,6 +332,7 @@ class StakingRewards extends Component<Props, State> {
                       ]);
                       return (
                         <th
+                          className={styles[tableHeader.name]}
                           key={tableHeader.name}
                           onClick={() =>
                             this.handleRewardsSort(tableHeader.name)
@@ -346,9 +356,13 @@ class StakingRewards extends Component<Props, State> {
                       reward,
                       REWARD_FIELDS.SYNCING_PROGRESS
                     );
-                    const rewardAmount = get(
+                    const rewardTotal = get(
                       reward,
-                      REWARD_FIELDS.REWARD
+                      REWARD_FIELDS.REWARD_TOTAL
+                    ).toFormat(DECIMAL_PLACES_IN_ADA);
+                    const rewardUnspent = get(
+                      reward,
+                      REWARD_FIELDS.REWARD_UNSPENT
                     ).toFormat(DECIMAL_PLACES_IN_ADA);
                     const rewardsAddress = get(
                       reward,
@@ -397,11 +411,9 @@ class StakingRewards extends Component<Props, State> {
                             </div>
                           )}
                         </td>
-                        <td className={styles.rewardAmount}>
-                          {isRestoring ? (
-                            '-'
-                          ) : (
-                            <RewardAmount amount={rewardAmount} />
+                        <td className={styles.rewardTotal}>
+                          {!isRestoring && (
+                            <RewardAmount amount={rewardTotal} />
                           )}
                           {isRestoring && (
                             <div className={styles.syncingProgress}>
@@ -418,6 +430,13 @@ class StakingRewards extends Component<Props, State> {
                             </div>
                           )}
                         </td>
+                        <td className={styles.rewardUnspent}>
+                          {isRestoring ? (
+                            '-'
+                          ) : (
+                            <RewardAmount amount={rewardUnspent} />
+                          )}
+                        </td>
                       </tr>
                     );
                   })}

source/renderer/app/components/wallet/summary/WalletSummary.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
+import type { Reward } from '../../../api/staking/types';
 import Wallet from '../../../domains/Wallet';
 import type { Currency } from '../../../types/currencyTypes';
 import WalletSummaryHeader from './WalletSummaryHeader';
@@ -18,6 +19,7 @@ const messages = defineMessages({
 });
 type Props = {
   wallet: Wallet;
+  reward: Reward;
   numberOfRecentTransactions: number;
   numberOfTransactions?: number;
   numberOfPendingTransactions: number;
@@ -50,6 +52,7 @@ class WalletSummary extends Component<Props> {
   render() {
     const {
       wallet,
+      reward,
       numberOfPendingTransactions,
       numberOfRecentTransactions,
       numberOfTransactions,
@@ -78,6 +81,7 @@ class WalletSummary extends Component<Props> {
       <>
         <WalletSummaryHeader
           wallet={wallet}
+          reward={reward}
           numberOfRecentTransactions={numberOfRecentTransactions}
           numberOfTransactions={numberOfTransactions}
           numberOfPendingTransactions={numberOfPendingTransactions}

source/renderer/app/components/wallet/summary/WalletSummaryCurrency.scss

@@ -32,7 +32,7 @@
   font-family: var(--font-bold);
   font-size: 16px;
   line-height: 1;
-  margin-bottom: 5.5px;
+  margin-bottom: 8.5px;
   user-select: text;
   word-break: break-all;
 

source/renderer/app/components/wallet/summary/WalletSummaryHeader.scss

@@ -14,12 +14,16 @@
 }
 
 .walletContent {
-  align-items: center;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
+.currency {
+  min-width: 187px;
+  padding-top: 6px;
+}
+
 .walletName {
   color: var(--theme-bordered-box-text-color);
   font-family: var(--font-regular);
@@ -40,28 +44,28 @@
   word-break: break-all;
 
   .currencyCode {
-    font-size: 16px;
     font-size: 16px;
     margin-left: 6px;
     opacity: 0.7;
   }
 }
 
+.rewards {
+  @extend %smallText;
+  height: auto;
+}
+
+.rewardsAmount {
+  font-family: var(--font-medium);
+}
+
 .transactionsCountWrapper {
-  .numberOfTransactions,
-  .numberOfPendingTransactions {
+  .numberOfTransactions {
     @extend %smallText;
-
-    span:first-child {
+    font-family: var(--font-light);
+    span {
       font-family: var(--font-medium);
-      opacity: 0.7;
     }
-
-    span:last-child {
-      font-family: var(--font-light);
-      opacity: 1;
-    }
-
     &.isLoadingNumberOfTransactions {
       @include animated-ellipsis($width: 16px);
     }