Skip to content

Commit 49e17d1

Browse files
author
Yakov Karavelov
authored
[DDW-551] Adjust sorting on rewards screen (#2333)
* [DDW-551]: Adjust sorting on rewards screen * [DDW-551]: Update changelog * [DDW-551]: Fix type declarations
1 parent 49f61d1 commit 49e17d1

File tree

5 files changed

+276
-91
lines changed

5 files changed

+276
-91
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ Changelog
1313

1414
### Chores
1515

16+
- Adjusted sorting on rewards ([PR 2333](https://github.com/input-output-hk/daedalus/pull/2333))
1617
- Fixed error thrown when closing delegation wizard while transaction fees are being calculated ([PR 2330](https://github.com/input-output-hk/daedalus/pull/2330))
1718
- Fixed number format for syncing percentage and stake pools count ([PR 2313](https://github.com/input-output-hk/daedalus/pull/2313))
1819
- Updated `cardano-wallet` to version `2021-01-28` and `cardano-node` to version `1.25.1` ([PR 2270](https://github.com/input-output-hk/daedalus/pull/2270))

‎source/renderer/app/components/staking/rewards/StakingRewards.js‎

Lines changed: 107 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@ import React, { Component } from 'react';
33
import { observer } from 'mobx-react';
44
import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
55
import SVGInline from 'react-svg-inline';
6-
import { get, map, orderBy } from 'lodash';
6+
import { get, map } from 'lodash';
77
import classNames from 'classnames';
8-
import { BigNumber } from 'bignumber.js';
98
import { Link } from 'react-polymorph/lib/components/Link';
109
import { LinkSkin } from 'react-polymorph/lib/skins/simple/LinkSkin';
10+
import {
11+
bigNumberComparator,
12+
stringComparator,
13+
dateComparator,
14+
} from '../../../utils/sortComparators';
1115
import BorderedBox from '../../widgets/BorderedBox';
1216
import LoadingSpinner from '../../widgets/LoadingSpinner';
1317
import sortIcon from '../../../assets/images/ascending.inline.svg';
@@ -66,6 +70,21 @@ const messages = defineMessages({
6670
},
6771
});
6872

73+
const REWARD_FIELDS = {
74+
WALLET_NAME: 'wallet',
75+
IS_RESTORING: 'isRestoring',
76+
POOL: 'pool',
77+
NAME: 'name',
78+
TICKER: 'ticker',
79+
REWARD: 'reward',
80+
DATE: 'date',
81+
};
82+
83+
const REWARD_ORDERS = {
84+
ASCENDING: 'asc',
85+
DESCENDING: 'desc',
86+
};
87+
6988
type Props = {
7089
rewards: Array<Reward>,
7190
isLoading: boolean,
@@ -87,46 +106,89 @@ export default class StakingRewards extends Component<Props, State> {
87106
isLoading: false,
88107
};
89108

90-
constructor() {
91-
super();
109+
constructor(props: Props) {
110+
super(props);
92111
this.state = {
93-
rewardsOrder: 'desc',
94-
rewardsSortBy: 'date',
112+
rewardsOrder: REWARD_ORDERS.DESCENDING,
113+
rewardsSortBy: REWARD_FIELDS.DATE,
95114
};
96115
}
97116

98-
render() {
117+
getSortedRewards = (): Array<Reward> => {
118+
const { rewards } = this.props;
99119
const { rewardsOrder, rewardsSortBy } = this.state;
100-
const { rewards, isLoading, onLearnMoreClick } = this.props;
120+
return rewards.slice().sort((rewardA: Reward, rewardB: Reward) => {
121+
const rewardCompareResult = bigNumberComparator(
122+
rewardA.reward,
123+
rewardB.reward,
124+
rewardsOrder === REWARD_ORDERS.ASCENDING
125+
);
126+
const walletNameCompareResult = stringComparator(
127+
rewardA.wallet,
128+
rewardB.wallet,
129+
rewardsOrder === REWARD_ORDERS.ASCENDING
130+
);
131+
const poolCompareResult = stringComparator(
132+
rewardA.pool.name,
133+
rewardB.pool.name,
134+
rewardsOrder === REWARD_ORDERS.ASCENDING
135+
);
136+
const dateCompareResult = dateComparator(
137+
rewardA.date,
138+
rewardB.date,
139+
rewardsOrder === REWARD_ORDERS.ASCENDING
140+
);
141+
if (rewardsSortBy === REWARD_FIELDS.REWARD) {
142+
if (rewardCompareResult === 0) {
143+
return walletNameCompareResult;
144+
}
145+
return rewardCompareResult;
146+
}
147+
if (rewardsSortBy === REWARD_FIELDS.WALLET_NAME) {
148+
if (walletNameCompareResult === 0) {
149+
return rewardCompareResult;
150+
}
151+
return walletNameCompareResult;
152+
}
153+
if (rewardsSortBy === REWARD_FIELDS.DATE) {
154+
if (dateCompareResult === 0) {
155+
return walletNameCompareResult;
156+
}
157+
return dateCompareResult;
158+
}
159+
if (rewardsSortBy === REWARD_FIELDS.POOL) {
160+
if (poolCompareResult === 0) {
161+
return walletNameCompareResult;
162+
}
163+
return poolCompareResult;
164+
}
165+
166+
return 0;
167+
});
168+
};
101169

170+
render() {
171+
const { rewards, isLoading, onLearnMoreClick } = this.props;
172+
const { rewardsOrder, rewardsSortBy } = this.state;
102173
const { intl } = this.context;
103174
const noRewards = !isLoading && ((rewards && !rewards.length) || !rewards);
104175
const showRewards = rewards && rewards.length > 0 && !isLoading;
105-
106-
let sortedRewards;
107-
if (showRewards) {
108-
sortedRewards = orderBy(
109-
rewards,
110-
rewardsSortBy === 'pool' ? 'pool.name' : rewardsSortBy,
111-
rewardsOrder
112-
);
113-
}
114-
176+
const sortedRewards = showRewards ? this.getSortedRewards() : [];
115177
const availableTableHeaders = [
116178
{
117-
name: 'date',
179+
name: REWARD_FIELDS.DATE,
118180
title: intl.formatMessage(messages.tableHeaderDate),
119181
},
120182
{
121-
name: 'pool',
183+
name: REWARD_FIELDS.POOL,
122184
title: intl.formatMessage(messages.tableHeaderPool),
123185
},
124186
{
125-
name: 'wallet',
187+
name: REWARD_FIELDS.WALLET_NAME,
126188
title: intl.formatMessage(messages.tableHeaderWallet),
127189
},
128190
{
129-
name: 'reward',
191+
name: REWARD_FIELDS.REWARD,
130192
title: intl.formatMessage(messages.tableHeaderReward),
131193
},
132194
];
@@ -179,12 +241,28 @@ export default class StakingRewards extends Component<Props, State> {
179241
</thead>
180242
<tbody>
181243
{map(sortedRewards, (reward, key) => {
182-
const rewardDate = get(reward, 'date', '');
183-
const rewardPoolTicker = get(reward, ['pool', 'ticker'], '');
184-
const rewardPoolName = get(reward, ['pool', 'name'], '');
185-
const rewardWallet = get(reward, 'wallet', '');
186-
const rewardAmount = get(reward, 'reward', '');
187-
const isRestoring = get(reward, 'isRestoring');
244+
const rewardDate = get(reward, REWARD_FIELDS.DATE, '');
245+
const rewardPoolTicker = get(
246+
reward,
247+
[REWARD_FIELDS.POOL, REWARD_FIELDS.TICKER],
248+
''
249+
);
250+
const rewardPoolName = get(
251+
reward,
252+
[REWARD_FIELDS.POOL, REWARD_FIELDS.NAME],
253+
''
254+
);
255+
const rewardWallet = get(
256+
reward,
257+
REWARD_FIELDS.WALLET_NAME,
258+
''
259+
);
260+
const isRestoring = get(reward, REWARD_FIELDS.IS_RESTORING);
261+
const rewardAmount = get(
262+
reward,
263+
REWARD_FIELDS.REWARD
264+
).toFormat(DECIMAL_PLACES_IN_ADA);
265+
188266
return (
189267
<tr key={key}>
190268
<td>{rewardDate}</td>
@@ -197,13 +275,7 @@ export default class StakingRewards extends Component<Props, State> {
197275
</p>
198276
</td>
199277
<td>{rewardWallet}</td>
200-
<td>
201-
{isRestoring
202-
? '-'
203-
: `${new BigNumber(rewardAmount).toFormat(
204-
DECIMAL_PLACES_IN_ADA
205-
)} ADA`}
206-
</td>
278+
<td>{isRestoring ? '-' : `${rewardAmount} ADA`}</td>
207279
</tr>
208280
);
209281
})}

‎source/renderer/app/components/staking/rewards/StakingRewardsForIncentivizedTestnet.js‎

Lines changed: 79 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,18 @@ import React, { Component } from 'react';
33
import { observer } from 'mobx-react';
44
import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
55
import SVGInline from 'react-svg-inline';
6-
import { get, map, orderBy } from 'lodash';
6+
import { get, map } from 'lodash';
77
import classNames from 'classnames';
88
import { PopOver } from 'react-polymorph/lib/components/PopOver';
99
import moment from 'moment';
1010
import { Button } from 'react-polymorph/lib/components/Button';
1111
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
1212
import { DECIMAL_PLACES_IN_ADA } from '../../../config/numbersConfig';
1313
import { StakingPageScrollContext } from '../layouts/StakingWithNavigation';
14+
import {
15+
bigNumberComparator,
16+
stringComparator,
17+
} from '../../../utils/sortComparators';
1418
import BorderedBox from '../../widgets/BorderedBox';
1519
import LoadingSpinner from '../../widgets/LoadingSpinner';
1620
import sortIcon from '../../../assets/images/ascending.inline.svg';
@@ -75,6 +79,18 @@ const messages = defineMessages({
7579
},
7680
});
7781

82+
const REWARD_FIELDS = {
83+
WALLET_NAME: 'wallet',
84+
IS_RESTORING: 'isRestoring',
85+
SYNCING_PROGRESS: 'syncingProgress',
86+
REWARD: 'reward',
87+
};
88+
89+
const REWARD_ORDERS = {
90+
ASCENDING: 'asc',
91+
DESCENDING: 'desc',
92+
};
93+
7894
type Props = {
7995
rewards: Array<RewardForIncentivizedTestnet>,
8096
isLoading: boolean,
@@ -101,11 +117,11 @@ export default class StakingRewardsForIncentivizedTestnet extends Component<
101117
isExporting: false,
102118
};
103119

104-
constructor() {
105-
super();
120+
constructor(props: Props) {
121+
super(props);
106122
this.state = {
107-
rewardsOrder: 'desc',
108-
rewardsSortBy: 'wallet',
123+
rewardsOrder: REWARD_ORDERS.DESCENDING,
124+
rewardsSortBy: REWARD_FIELDS.WALLET_NAME,
109125
};
110126
}
111127

@@ -121,9 +137,9 @@ export default class StakingRewardsForIncentivizedTestnet extends Component<
121137
];
122138
const date = `${moment().utc().format('YYYY-MM-DDTHHmmss.0SSS')}Z`;
123139
const exportedBody = sortedRewards.map((reward) => {
124-
const rewardWallet = get(reward, 'wallet');
125-
const isRestoring = get(reward, 'isRestoring');
126-
const rewardAmount = get(reward, 'reward').toFormat(
140+
const rewardWallet = get(reward, REWARD_FIELDS.WALLET_NAME);
141+
const isRestoring = get(reward, REWARD_FIELDS.IS_RESTORING);
142+
const rewardAmount = get(reward, REWARD_FIELDS.REWARD).toFormat(
127143
DECIMAL_PLACES_IN_ADA
128144
);
129145
return [rewardWallet, isRestoring ? '-' : `${rewardAmount} ADA`, date];
@@ -136,6 +152,43 @@ export default class StakingRewardsForIncentivizedTestnet extends Component<
136152
});
137153
};
138154

155+
getSortedRewards = (): Array<RewardForIncentivizedTestnet> => {
156+
const { rewards } = this.props;
157+
const { rewardsOrder, rewardsSortBy } = this.state;
158+
return rewards
159+
.slice()
160+
.sort(
161+
(
162+
rewardA: RewardForIncentivizedTestnet,
163+
rewardB: RewardForIncentivizedTestnet
164+
) => {
165+
const rewardCompareResult = bigNumberComparator(
166+
rewardA.reward,
167+
rewardB.reward,
168+
rewardsOrder === REWARD_ORDERS.ASCENDING
169+
);
170+
const walletNameCompareResult = stringComparator(
171+
rewardA.wallet,
172+
rewardB.wallet,
173+
rewardsOrder === REWARD_ORDERS.ASCENDING
174+
);
175+
if (rewardsSortBy === REWARD_FIELDS.REWARD) {
176+
if (rewardCompareResult === 0) {
177+
return walletNameCompareResult;
178+
}
179+
return rewardCompareResult;
180+
}
181+
if (rewardsSortBy === REWARD_FIELDS.WALLET_NAME) {
182+
if (walletNameCompareResult === 0) {
183+
return rewardCompareResult;
184+
}
185+
return walletNameCompareResult;
186+
}
187+
return 0;
188+
}
189+
);
190+
};
191+
139192
render() {
140193
const {
141194
rewards,
@@ -147,16 +200,14 @@ export default class StakingRewardsForIncentivizedTestnet extends Component<
147200
const { intl } = this.context;
148201
const noRewards = !isLoading && ((rewards && !rewards.length) || !rewards);
149202
const showRewards = rewards && rewards.length > 0 && !isLoading;
150-
const sortedRewards = showRewards
151-
? orderBy(rewards, rewardsSortBy, rewardsOrder)
152-
: [];
203+
const sortedRewards = showRewards ? this.getSortedRewards() : [];
153204
const availableTableHeaders = [
154205
{
155-
name: 'wallet',
206+
name: REWARD_FIELDS.WALLET_NAME,
156207
title: intl.formatMessage(messages.tableHeaderWallet),
157208
},
158209
{
159-
name: 'reward',
210+
name: REWARD_FIELDS.REWARD,
160211
title: intl.formatMessage(messages.tableHeaderReward),
161212
},
162213
];
@@ -238,12 +289,22 @@ export default class StakingRewardsForIncentivizedTestnet extends Component<
238289
</thead>
239290
<tbody>
240291
{map(sortedRewards, (reward, key) => {
241-
const rewardWallet = get(reward, 'wallet');
242-
const isRestoring = get(reward, 'isRestoring');
243-
const syncingProgress = get(reward, 'syncingProgress');
244-
const rewardAmount = get(reward, 'reward').toFormat(
245-
DECIMAL_PLACES_IN_ADA
292+
const rewardWallet = get(
293+
reward,
294+
REWARD_FIELDS.WALLET_NAME
295+
);
296+
const isRestoring = get(
297+
reward,
298+
REWARD_FIELDS.IS_RESTORING
299+
);
300+
const syncingProgress = get(
301+
reward,
302+
REWARD_FIELDS.SYNCING_PROGRESS
246303
);
304+
const rewardAmount = get(
305+
reward,
306+
REWARD_FIELDS.REWARD
307+
).toFormat(DECIMAL_PLACES_IN_ADA);
247308

248309
return (
249310
<tr key={key}>

0 commit comments

Comments
 (0)