[DDW-579] Undelegated wallet shown as delegated on "Delegation center" screen

CHANGELOG.md

@@ -5,6 +5,7 @@ Changelog
 
 ### Chores
 
+- Updated delegated stake pool status on delegation center screen ([PR 2404](https://github.com/input-output-hk/daedalus/pull/2404))
 - Adjusted hover PopOver styles on the first tile in the delegation center screen ([PR 2386](https://github.com/input-output-hk/daedalus/pull/2386))
 
 ## 3.3.1

source/renderer/app/components/staking/delegation-center/WalletRow.js

@@ -6,7 +6,8 @@ import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
 import SVGInline from 'react-svg-inline';
 import classnames from 'classnames';
 import { PopOver } from 'react-polymorph/lib/components/PopOver';
-import Wallet from '../../../domains/Wallet';
+import Wallet, { WalletDelegationStatuses } from '../../../domains/Wallet';
+import type { WalletNextDelegation } from '../../../api/wallets/types';
 import StakePool from '../../../domains/StakePool';
 import { getColorFromRange, getSaturationColor } from '../../../utils/colors';
 import adaIcon from '../../../assets/images/ada-symbol.inline.svg';
@@ -85,8 +86,8 @@ type Props = {
   onDelegate: Function,
   onUndelegate: Function,
   getStakePoolById: Function,
-  nextEpochNumber: ?number,
-  futureEpochNumber: ?number,
+  nextEpochNumber: number,
+  futureEpochNumber: number,
   onSelect?: Function,
   selectedPoolId?: ?number,
   isListActive?: boolean,
@@ -166,6 +167,49 @@ export default class WalletRow extends Component<Props, WalletRowState> {
     document.getElementsByTagName('head')[0].appendChild(firstTilePopOverStyle);
   };
 
+  handleShowTooltip = () => {
+    this.setState({
+      highlightedPoolId: true,
+    });
+  };
+
+  handleHideTooltip = () => {
+    this.setState({
+      highlightedPoolId: false,
+    });
+  };
+
+  getPendingDelegatedStakePoolId = (
+    epochNumber: number,
+    fallbackStakePoolId: ?string
+  ): ?string => {
+    const {
+      wallet: { pendingDelegations },
+    } = this.props;
+
+    if (!pendingDelegations || !pendingDelegations.length) {
+      return fallbackStakePoolId;
+    }
+
+    const foundDelegation = pendingDelegations.find(
+      (delegation: WalletNextDelegation) =>
+        get(delegation, ['changes_at', 'epoch_number'], 0) === epochNumber
+    );
+
+    if (!foundDelegation) {
+      return fallbackStakePoolId;
+    }
+
+    const isDelegating =
+      get(foundDelegation, 'status') === WalletDelegationStatuses.DELEGATING;
+
+    if (!isDelegating) {
+      return null;
+    }
+
+    return get(foundDelegation, 'target', null);
+  };
+
   render() {
     const { intl } = this.context;
     const {
@@ -180,6 +224,7 @@ export default class WalletRow extends Component<Props, WalletRowState> {
       },
       delegatedStakePool,
       numberOfRankedStakePools,
+      getStakePoolById,
       onDelegate,
       onUndelegate,
       nextEpochNumber,
@@ -189,6 +234,7 @@ export default class WalletRow extends Component<Props, WalletRowState> {
       showWithSelectButton,
       containerClassName,
     } = this.props;
+    const { top, left, highlightedPoolId } = this.state;
 
     // @TODO - remove once quit stake pool delegation is connected with rewards balance
     const isUndelegateBlocked = true;
@@ -199,44 +245,42 @@ export default class WalletRow extends Component<Props, WalletRowState> {
     const delegateText = intl.formatMessage(messages.delegate);
     const redelegateText = intl.formatMessage(messages.redelegate);
 
-    const {
-      stakePoolId: nextPendingDelegationStakePoolId,
-      stakePool: nextPendingDelegationStakePool,
-    } = this.getPendingStakePool(nextEpochNumber || 0);
-
-    const {
-      stakePoolId: futurePendingDelegationStakePoolId,
-      stakePool: futurePendingDelegationStakePool,
-    } = this.getPendingStakePool(
-      futureEpochNumber || 0,
-      nextPendingDelegationStakePool
+    const nextPendingDelegatedStakePoolId = this.getPendingDelegatedStakePoolId(
+      nextEpochNumber,
+      delegatedStakePoolId
     );
+    const nextPendingDelegatedStakePool = nextPendingDelegatedStakePoolId
+      ? getStakePoolById(nextPendingDelegatedStakePoolId)
+      : null;
+    const futurePendingDelegatedStakePoolId = this.getPendingDelegatedStakePoolId(
+      futureEpochNumber,
+      nextPendingDelegatedStakePoolId
+    );
+    const futurePendingDelegatedStakePool = futurePendingDelegatedStakePoolId
+      ? getStakePoolById(futurePendingDelegatedStakePoolId)
+      : null;
 
-    const { top, left, highlightedPoolId } = this.state;
-
-    const stakePoolRankingColor = futurePendingDelegationStakePool
+    const stakePoolRankingColor = futurePendingDelegatedStakePool
       ? getColorFromRange(
-          futurePendingDelegationStakePool.ranking,
+          futurePendingDelegatedStakePool.ranking,
           numberOfRankedStakePools
         )
       : '';
 
     const saturationStyles = classnames([
       styles.saturationBar,
-      futurePendingDelegationStakePool
-        ? styles[
-            getSaturationColor(futurePendingDelegationStakePool.saturation)
-          ]
+      futurePendingDelegatedStakePool
+        ? styles[getSaturationColor(futurePendingDelegatedStakePool.saturation)]
         : null,
     ]);
 
     const futureStakePoolTileStyles = classnames([
       styles.stakePoolTile,
       highlightedPoolId ? styles.active : null,
-      futurePendingDelegationStakePoolId && futurePendingDelegationStakePool
+      futurePendingDelegatedStakePoolId && futurePendingDelegatedStakePool
         ? styles.futureStakePoolTileDelegated
         : styles.futureStakePoolTileUndelegated,
-      futurePendingDelegationStakePoolId && !futurePendingDelegationStakePool
+      futurePendingDelegatedStakePoolId && !futurePendingDelegatedStakePool
         ? styles.futureStakePoolTileUndefined
         : null,
     ]);
@@ -341,15 +385,15 @@ export default class WalletRow extends Component<Props, WalletRowState> {
               )}
               <SVGInline svg={arrow} className={styles.arrow} />
               <div className={styles.stakePoolTile}>
-                {nextPendingDelegationStakePoolId ? (
+                {nextPendingDelegatedStakePoolId ? (
                   <div
                     className={
-                      !nextPendingDelegationStakePool ? styles.unknown : null
+                      !nextPendingDelegatedStakePool ? styles.unknown : null
                     }
                   >
-                    {nextPendingDelegationStakePool ? (
+                    {nextPendingDelegatedStakePool ? (
                       <div className={styles.stakePoolTicker}>
-                        {nextPendingDelegationStakePool.ticker}
+                        {nextPendingDelegatedStakePool.ticker}
                       </div>
                     ) : (
                       <div className={styles.stakePoolUnknown}>
@@ -365,12 +409,12 @@ export default class WalletRow extends Component<Props, WalletRowState> {
               </div>
               <SVGInline svg={arrow} className={styles.arrow} />
               <div className={futureStakePoolTileStyles}>
-                {futurePendingDelegationStakePoolId ? (
+                {futurePendingDelegatedStakePoolId ? (
                   <div
                     onMouseEnter={this.handleShowTooltip}
                     onMouseLeave={this.handleHideTooltip}
                   >
-                    {futurePendingDelegationStakePool ? (
+                    {futurePendingDelegatedStakePool ? (
                       <PopOver
                         key="stakePoolTooltip"
                         placement="auto"
@@ -382,7 +426,7 @@ export default class WalletRow extends Component<Props, WalletRowState> {
                         allowHTML
                         content={
                           <TooltipPool
-                            stakePool={futurePendingDelegationStakePool}
+                            stakePool={futurePendingDelegatedStakePool}
                             isVisible
                             currentTheme={currentTheme}
                             onClick={this.handleHideTooltip}
@@ -398,15 +442,15 @@ export default class WalletRow extends Component<Props, WalletRowState> {
                         }
                       >
                         <div className={styles.stakePoolTicker}>
-                          {futurePendingDelegationStakePool.ticker}
+                          {futurePendingDelegatedStakePool.ticker}
                         </div>
                         {IS_RANKING_DATA_AVAILABLE ? (
                           <div
                             className={styles.ranking}
                             style={{ color: stakePoolRankingColor }}
                           >
-                            {futurePendingDelegationStakePool.nonMyopicMemberRewards ? (
-                              futurePendingDelegationStakePool.ranking
+                            {futurePendingDelegatedStakePool.nonMyopicMemberRewards ? (
+                              futurePendingDelegatedStakePool.ranking
                             ) : (
                               <>
                                 {numberOfRankedStakePools + 1}
@@ -424,7 +468,7 @@ export default class WalletRow extends Component<Props, WalletRowState> {
                             <span
                               style={{
                                 width: `${parseFloat(
-                                  futurePendingDelegationStakePool.saturation
+                                  futurePendingDelegatedStakePool.saturation
                                 ).toFixed(2)}%`,
                               }}
                             />
@@ -446,7 +490,7 @@ export default class WalletRow extends Component<Props, WalletRowState> {
                     {notDelegatedText}
                   </div>
                 )}
-                {futurePendingDelegationStakePoolId && !isUndelegateBlocked && (
+                {futurePendingDelegatedStakePoolId && !isUndelegateBlocked && (
                   <div
                     className={actionButtonStyles}
                     role="presentation"
@@ -461,7 +505,7 @@ export default class WalletRow extends Component<Props, WalletRowState> {
                   role="presentation"
                   onClick={onDelegate}
                 >
-                  {!futurePendingDelegationStakePoolId
+                  {!futurePendingDelegatedStakePoolId
                     ? delegateText
                     : redelegateText}
                 </div>
@@ -480,55 +524,4 @@ export default class WalletRow extends Component<Props, WalletRowState> {
       </div>
     );
   }
-
-  handleShowTooltip = () => {
-    this.setState({
-      highlightedPoolId: true,
-    });
-  };
-
-  handleHideTooltip = () => {
-    this.setState({
-      highlightedPoolId: false,
-    });
-  };
-
-  getPendingStakePool = (
-    epochNumber: number,
-    fallbackStakePool: ?StakePool
-  ) => {
-    const {
-      wallet: { delegatedStakePoolId, pendingDelegations },
-      delegatedStakePool,
-      getStakePoolById,
-    } = this.props;
-
-    let stakePoolId;
-    let stakePool;
-    const hasPendingDelegations =
-      pendingDelegations && pendingDelegations.length;
-
-    if (hasPendingDelegations) {
-      const pendingDelegation = pendingDelegations.filter(
-        (item) => get(item, ['changes_at', 'epoch_number'], 0) === epochNumber
-      );
-      stakePoolId = get(pendingDelegation, '[0].target');
-      stakePool = getStakePoolById(stakePoolId);
-    }
-
-    if (!stakePool && fallbackStakePool) {
-      stakePoolId = fallbackStakePool.id;
-      stakePool = fallbackStakePool;
-    }
-
-    if (!stakePool && delegatedStakePoolId) {
-      stakePoolId = delegatedStakePoolId;
-      stakePool = delegatedStakePool;
-    }
-
-    return {
-      stakePoolId,
-      stakePool,
-    };
-  };
 }