Skip to content

Commit

Permalink
[DDW-579] Undelegated wallet shown as delegated on "Delegation center…
Browse files Browse the repository at this point in the history 
…" screen (#2404)

* [DDW-579] Fix delegated stake pool error on delegation center screen

* [DDW-579] Update changelog

* [DDW-579] Improve code style

* [DDW-579] Fix changelog
  • Loading branch information
@topseniors
topseniors authored Feb 27, 2021
1 parent 4fc35fb commit 64fc98e
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 106 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
169 changes: 81 additions & 88 deletions source/renderer/app/components/staking/delegation-center/WalletRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand All @@ -180,6 +224,7 @@ export default class WalletRow extends Component<Props, WalletRowState> {
},
delegatedStakePool,
numberOfRankedStakePools,
getStakePoolById,
onDelegate,
onUndelegate,
nextEpochNumber,
Expand All @@ -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;
Expand All @@ -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,
]);
Expand Down Expand Up @@ -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}>
Expand All @@ -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"
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -424,7 +468,7 @@ export default class WalletRow extends Component<Props, WalletRowState> {
<span
style={{
width: `${parseFloat(
futurePendingDelegationStakePool.saturation
futurePendingDelegatedStakePool.saturation
).toFixed(2)}%`,
}}
/>
Expand All @@ -446,7 +490,7 @@ export default class WalletRow extends Component<Props, WalletRowState> {
{notDelegatedText}
</div>
)}
{futurePendingDelegationStakePoolId && !isUndelegateBlocked && (
{futurePendingDelegatedStakePoolId && !isUndelegateBlocked && (
<div
className={actionButtonStyles}
role="presentation"
Expand All @@ -461,7 +505,7 @@ export default class WalletRow extends Component<Props, WalletRowState> {
role="presentation"
onClick={onDelegate}
>
{!futurePendingDelegationStakePoolId
{!futurePendingDelegatedStakePoolId
? delegateText
: redelegateText}
</div>
Expand All @@ -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,
};
};
}
Loading

0 comments on commit 64fc98e

Please sign in to comment.