Skip to content

Commit b527992

Browse files
author
Yakov Karavelov
authored
[DDW-522] Display fee and deposit on transaction details and delegation modal (#2339)
* [DDW-522]: Display fee and deposit on transaction details and delegation confirmation modal * [DDW-522]: Update changelog * [DDW-522]: Hide deposit value when it is zero * [DDW-522]: Update hardware delegation deposit value shown up on delegation confirmation modal * [DDW-522]: Update hardware delegation deposit value shown up on delegation confirmation modal * [DDW-522]: Update delegation fee calculation * [DDW-522]: Update color variable of itn theme
1 parent 65b1318 commit b527992

File tree

26 files changed

+287
-83
lines changed

26 files changed

+287
-83
lines changed

‎CHANGELOG.md‎

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

66
### Features
77

8+
- Displayed fee and deposit info in transaction details and in the delegation wizard ([PR 2339](https://github.com/input-output-hk/daedalus/pull/2339))
89
- Added SMASH server configuration options ([PR 2259](https://github.com/input-output-hk/daedalus/pull/2259))
910

1011
### Fixes

‎source/renderer/app/api/api.js‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,7 @@ import type { GetNewsResponse } from './news/types';
186186
import type {
187187
JoinStakePoolRequest,
188188
GetDelegationFeeRequest,
189+
DelegationCalculateFeeResponse,
189190
AdaApiStakePools,
190191
AdaApiStakePool,
191192
QuitStakePoolRequest,
@@ -390,9 +391,7 @@ export default class AdaApi {
390391
const transactions = response.map((tx) =>
391392
_createTransactionFromServerData(tx)
392393
);
393-
return new Promise((resolve) =>
394-
resolve({ transactions, total: response.length })
395-
);
394+
return Promise.resolve({ transactions, total: response.length });
396395
} catch (error) {
397396
logger.error('AdaApi::getTransactions error', { error });
398397
throw new ApiError(error);
@@ -2139,7 +2138,7 @@ export default class AdaApi {
21392138

21402139
calculateDelegationFee = async (
21412140
request: GetDelegationFeeRequest
2142-
): Promise<BigNumber> => {
2141+
): Promise<DelegationCalculateFeeResponse> => {
21432142
logger.debug('AdaApi::calculateDelegationFee called', {
21442143
parameters: filterLogData(request),
21452144
});
@@ -2148,8 +2147,7 @@ export default class AdaApi {
21482147
walletId: request.walletId,
21492148
});
21502149
logger.debug('AdaApi::calculateDelegationFee success', { response });
2151-
const delegationFee = _createDelegationFeeFromServerData(response);
2152-
return delegationFee;
2150+
return _createDelegationFeeFromServerData(response);
21532151
} catch (error) {
21542152
logger.error('AdaApi::calculateDelegationFee error', { error });
21552153
throw new ApiError(error);
@@ -2305,6 +2303,8 @@ const _createTransactionFromServerData = action(
23052303
const {
23062304
id,
23072305
amount,
2306+
fee,
2307+
deposit,
23082308
inserted_at, // eslint-disable-line camelcase
23092309
pending_since, // eslint-disable-line camelcase
23102310
depth,
@@ -2333,6 +2333,8 @@ const _createTransactionFromServerData = action(
23332333
amount: new BigNumber(
23342334
direction === 'outgoing' ? amount.quantity * -1 : amount.quantity
23352335
).dividedBy(LOVELACES_PER_ADA),
2336+
fee: new BigNumber(fee.quantity).dividedBy(LOVELACES_PER_ADA),
2337+
deposit: new BigNumber(deposit.quantity).dividedBy(LOVELACES_PER_ADA),
23362338
date: utcStringToDate(date),
23372339
description: '',
23382340
addresses: {
@@ -2369,8 +2371,14 @@ const _createMigrationFeeFromServerData = action(
23692371
const _createDelegationFeeFromServerData = action(
23702372
'AdaApi::_createDelegationFeeFromServerData',
23712373
(data: TransactionFee) => {
2372-
const amount = get(data, ['estimated_max', 'quantity'], 0);
2373-
return new BigNumber(amount).dividedBy(LOVELACES_PER_ADA);
2374+
const feeWithDeposit = new BigNumber(
2375+
get(data, ['estimated_max', 'quantity'], 0)
2376+
).dividedBy(LOVELACES_PER_ADA);
2377+
const deposit = new BigNumber(
2378+
get(data, ['deposit', 'quantity'], 0)
2379+
).dividedBy(LOVELACES_PER_ADA);
2380+
const fee = feeWithDeposit.minus(deposit);
2381+
return { fee, deposit };
23742382
}
23752383
);
23762384

‎source/renderer/app/api/staking/types.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,11 @@ export type GetDelegationFeeRequest = {
9494
walletId: string,
9595
};
9696

97+
export type DelegationCalculateFeeResponse = {
98+
fee: BigNumber,
99+
deposit: BigNumber,
100+
};
101+
97102
export type QuitStakePoolRequest = {
98103
walletId: string,
99104
passphrase: string,

‎source/renderer/app/components/staking/delegation-setup-wizard/DelegationSetupWizardDialog.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// @flow
22
import React, { Component } from 'react';
33
import { observer } from 'mobx-react';
4-
import { BigNumber } from 'bignumber.js';
54
import { get } from 'lodash';
65
import DelegationStepsSuccessDialog from './DelegationStepsSuccessDialog';
76
import DelegationStepsChooseWalletDialog from './DelegationStepsChooseWalletDialog';
@@ -13,6 +12,7 @@ import LocalizableError from '../../../i18n/LocalizableError';
1312
import StakePool from '../../../domains/StakePool';
1413
import Wallet from '../../../domains/Wallet';
1514

15+
import type { DelegationCalculateFeeResponse } from '../../../api/staking/types';
1616
import type { HwDeviceStatus } from '../../../domains/Wallet';
1717

1818
type Props = {
@@ -35,7 +35,7 @@ type Props = {
3535
currentTheme: string,
3636
selectedWallet: ?Wallet,
3737
selectedPool: ?StakePool,
38-
stakePoolJoinFee: ?BigNumber,
38+
stakePoolJoinFee: ?DelegationCalculateFeeResponse,
3939
isSubmitting: boolean,
4040
error: ?LocalizableError,
4141
futureEpochStartTime: string,

‎source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js‎

Lines changed: 52 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { Stepper } from 'react-polymorph/lib/components/Stepper';
1414
import { StepperSkin } from 'react-polymorph/lib/skins/simple/StepperSkin';
1515
import { Input } from 'react-polymorph/lib/components/Input';
1616
import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
17-
import BigNumber from 'bignumber.js';
1817
import commonStyles from './DelegationSteps.scss';
1918
import styles from './DelegationStepsConfirmationDialog.scss';
2019
import DialogCloseButton from '../../widgets/DialogCloseButton';
@@ -31,6 +30,7 @@ import StakePool from '../../../domains/StakePool';
3130
import LoadingSpinner from '../../widgets/LoadingSpinner';
3231
import HardwareWalletStatus from '../../hardware-wallet/HardwareWalletStatus';
3332

33+
import type { DelegationCalculateFeeResponse } from '../../../api/staking/types';
3434
import type { HwDeviceStatus } from '../../../domains/Wallet';
3535

3636
const messages = defineMessages({
@@ -65,6 +65,12 @@ const messages = defineMessages({
6565
description:
6666
'Fees label on the delegation setup "confirmation" step dialog.',
6767
},
68+
depositLabel: {
69+
id: 'staking.delegationSetup.confirmation.step.dialog.depositLabel',
70+
defaultMessage: '!!!Deposit',
71+
description:
72+
'Deposit label on the delegation setup "confirmation" step dialog.',
73+
},
6874
spendingPasswordPlaceholder: {
6975
id:
7076
'staking.delegationSetup.confirmation.step.dialog.spendingPasswordPlaceholder',
@@ -92,7 +98,12 @@ const messages = defineMessages({
9298
calculatingFees: {
9399
id: 'staking.delegationSetup.confirmation.step.dialog.calculatingFees',
94100
defaultMessage: '!!!Calculating fees',
95-
description: '"Calculating fees" message in the "Undelegate" dialog.',
101+
description: '"Calculating fees" message in the "confirmation" dialog.',
102+
},
103+
calculatingDeposit: {
104+
id: 'staking.delegationSetup.confirmation.step.dialog.calculatingDeposit',
105+
defaultMessage: '!!!Calculating deposit',
106+
description: '"Calculating deposit" message in the "confirmation" dialog.',
96107
},
97108
});
98109

@@ -102,7 +113,7 @@ type Props = {
102113
onBack: Function,
103114
onClose: Function,
104115
onConfirm: Function,
105-
transactionFee: ?BigNumber,
116+
transactionFee: ?DelegationCalculateFeeResponse,
106117
selectedWallet: ?Wallet,
107118
selectedPool: ?StakePool,
108119
stepsList: Array<string>,
@@ -276,24 +287,45 @@ export default class DelegationStepsConfirmationDialog extends Component<Props>
276287
<p className={styles.stakePoolId}>{selectedPoolId}</p>
277288
</div>
278289

279-
<div className={styles.feesWrapper}>
280-
<p className={styles.feesLabel}>
281-
{intl.formatMessage(messages.feesLabel)}
282-
</p>
283-
<p className={styles.feesAmount}>
284-
{!transactionFee ? (
285-
<span className={styles.calculatingFeesLabel}>
286-
{intl.formatMessage(messages.calculatingFees)}
287-
</span>
288-
) : (
289-
<>
290-
<span>{formattedWalletAmount(transactionFee, false)}</span>
291-
<span className={styles.feesAmountLabel}>
292-
&nbsp;{intl.formatMessage(globalMessages.unitAda)}
290+
<div className={styles.feesRow}>
291+
<div className={styles.feesWrapper}>
292+
<p className={styles.feesLabel}>
293+
{intl.formatMessage(messages.feesLabel)}
294+
</p>
295+
<p className={styles.feesAmount}>
296+
{!transactionFee ? (
297+
<span className={styles.calculatingFeesLabel}>
298+
{intl.formatMessage(messages.calculatingFees)}
293299
</span>
294-
</>
295-
)}
296-
</p>
300+
) : (
301+
<>
302+
<span>
303+
{formattedWalletAmount(transactionFee.fee, false)}
304+
</span>
305+
<span className={styles.feesAmountLabel}>
306+
&nbsp;{intl.formatMessage(globalMessages.unitAda)}
307+
</span>
308+
</>
309+
)}
310+
</p>
311+
</div>
312+
{transactionFee && !transactionFee.deposit.isZero() && (
313+
<>
314+
<div className={styles.depositWrapper}>
315+
<p className={styles.depositLabel}>
316+
{intl.formatMessage(messages.depositLabel)}
317+
</p>
318+
<p className={styles.depositAmount}>
319+
<span>
320+
{formattedWalletAmount(transactionFee.deposit, false)}
321+
</span>
322+
<span className={styles.depositAmountLabel}>
323+
&nbsp;{intl.formatMessage(globalMessages.unitAda)}
324+
</span>
325+
</p>
326+
</div>
327+
</>
328+
)}
297329
</div>
298330

299331
{isHardwareWallet ? (

‎source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.scss‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@
1515
}
1616

1717
.stakePoolIdWrapper,
18-
.feesWrapper {
18+
.feesRow {
1919
font-family: var(--font-medium);
2020
font-weight: 500;
2121
line-height: 1.38;
2222
margin-bottom: 20px;
2323

2424
.stakePoolIdLabel,
25-
.feesLabel {
25+
.feesLabel,
26+
.depositLabel {
2627
color: var(--theme-delegation-steps-confirmation-fees-label-color);
2728
margin-bottom: 6px;
2829
}
@@ -33,21 +34,35 @@
3334
user-select: text;
3435
}
3536

36-
.calculatingFeesLabel {
37+
.calculatingFeesLabel,
38+
.calculatingDepositLabel {
3739
@include animated-ellipsis($duration: 1500, $width: 20px);
3840
--webkit-backface-visibility: hidden;
3941
}
4042

41-
.feesAmount {
43+
.feesAmount,
44+
.depositAmount {
4245
color: var(--theme-delegation-steps-confirmation-fees-amount-color);
4346
user-select: text;
4447

45-
.feesAmountLabel {
48+
.feesAmountLabel,
49+
.depositAmountLabel {
4650
font-family: var(--font-light);
4751
}
4852
}
4953
}
5054

55+
.feesRow {
56+
align-items: center;
57+
display: flex;
58+
justify-content: space-between;
59+
60+
.feesWrapper,
61+
.depositWrapper {
62+
flex: 1;
63+
}
64+
}
65+
5166
.hardwareWalletStatusWrapper {
5267
margin-top: 20px;
5368
max-width: 640px;

‎source/renderer/app/components/wallet/transactions/Transaction.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,16 @@ const messages = defineMessages({
8686
defaultMessage: '!!!To addresses',
8787
description: 'To addresses',
8888
},
89+
transactionFee: {
90+
id: 'wallet.transaction.transactionFee',
91+
defaultMessage: '!!!Transaction fee',
92+
description: 'Transaction fee',
93+
},
94+
deposit: {
95+
id: 'wallet.transaction.deposit',
96+
defaultMessage: '!!!Deposit',
97+
description: 'Deposit',
98+
},
8999
transactionAmount: {
90100
id: 'wallet.transaction.transactionAmount',
91101
defaultMessage: '!!!Transaction amount',
@@ -486,6 +496,30 @@ export default class Transaction extends Component<Props, State> {
486496
</div>
487497
))}
488498

499+
{data.type === TransactionTypes.EXPEND && (
500+
<>
501+
<h2>{intl.formatMessage(messages.transactionFee)}</h2>
502+
<div className={styles.transactionFeeRow}>
503+
<div className={styles.amount}>
504+
{formattedWalletAmount(data.fee, false)}
505+
<span className={styles.currency}>ADA</span>
506+
</div>
507+
</div>
508+
</>
509+
)}
510+
511+
{!data.deposit.isZero() && (
512+
<>
513+
<h2>{intl.formatMessage(messages.deposit)}</h2>
514+
<div className={styles.depositRow}>
515+
<div className={styles.amount}>
516+
{formattedWalletAmount(data.deposit, false)}
517+
<span className={styles.currency}>ADA</span>
518+
</div>
519+
</div>
520+
</>
521+
)}
522+
489523
<h2>{intl.formatMessage(messages.transactionId)}</h2>
490524
<div className={styles.transactionIdRow}>
491525
<Link

‎source/renderer/app/components/wallet/transactions/Transaction.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,18 @@
179179
}
180180
}
181181

182+
.transactionFeeRow,
183+
.depositRow {
184+
.amount {
185+
color: var(--theme-transactions-list-item-highlight-color);
186+
187+
.currency {
188+
font-family: var(--font-light);
189+
margin-left: 5px;
190+
}
191+
}
192+
}
193+
182194
span {
183195
font-family: var(--font-light);
184196
font-size: 15px;

‎source/renderer/app/containers/staking/dialogs/DelegationSetupWizardDialogContainer.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
RECENT_STAKE_POOLS_COUNT,
1111
DELEGATION_ACTIONS,
1212
} from '../../../config/stakingConfig';
13+
import type { DelegationCalculateFeeResponse } from '../../../api/staking/types';
1314
import type { InjectedDialogContainerProps } from '../../../types/injectedPropsType';
1415

1516
const messages = defineMessages({
@@ -40,7 +41,7 @@ type State = {
4041
activeStep: number,
4142
selectedWalletId: string,
4243
selectedPoolId: string,
43-
stakePoolJoinFee: ?BigNumber,
44+
stakePoolJoinFee: ?DelegationCalculateFeeResponse,
4445
};
4546

4647
type Props = InjectedDialogContainerProps;
@@ -260,7 +261,11 @@ export default class DelegationSetupWizardDialogContainer extends Component<
260261
poolId,
261262
delegationAction: DELEGATION_ACTIONS.JOIN,
262263
});
263-
stakePoolJoinFee = coinsSelection.feeWithDeposits;
264+
const { feeWithDeposits, fee } = coinsSelection;
265+
stakePoolJoinFee = {
266+
fee,
267+
deposit: feeWithDeposits.minus(fee),
268+
};
264269
// Initiate Transaction (Delegation)
265270
hardwareWallets.initiateTransaction({ walletId: selectedWalletId });
266271
} else {

0 commit comments

Comments
 (0)