-
Notifications
You must be signed in to change notification settings - Fork 293
/
UndelegateWalletSuccessDialog.tsx
127 lines (117 loc) · 3.87 KB
/
UndelegateWalletSuccessDialog.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
import SVGInline from 'react-svg-inline';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
import styles from './UndelegateWalletSuccessDialog.scss';
import globalMessages from '../../../i18n/global-messages';
import sadLogo from '../../../assets/images/untada.inline.svg';
import humanizeDurationByLocale from '../../../utils/humanizeDurationByLocale';
import { EPOCH_COUNTDOWN_INTERVAL } from '../../../config/stakingConfig';
const messages = defineMessages({
title: {
id: 'wallet.settings.undelegate.result.dialog.title',
defaultMessage: '!!!Wallet undelegated',
description: 'Title for the "Undelegate Result" dialog.',
},
description1: {
id: 'wallet.settings.undelegate.result.dialog.description1',
defaultMessage:
'!!!The stake from your wallet <strong>{walletName}</strong> is no longer delegated and you will soon stop earning rewards for this wallet.',
description: 'Description 1 for the "Undelegate Result" dialog.',
},
description2: {
id: 'wallet.settings.undelegate.result.dialog.description2',
defaultMessage:
'!!!Your new delegation preferences are now posted on the blockchain <strong>and will take effect after both the current and next Cardano epochs have completed in {timeUntilNextEpochStart}</strong>. During this time, your previous delegation preferences are still active.',
description: 'Description 2 for the "Undelegate Result" dialog.',
},
});
type Props = {
walletName: string,
futureEpochStartTime: string,
currentLocale: string,
onClose: Function,
};
type State = { timeUntilNextEpochStart: number };
@observer
export default class UndelegateWalletSuccessDialog extends Component<
Props,
State
> {
intervalHandler: ?IntervalID = null;
state = { timeUntilNextEpochStart: 0 };
static contextTypes = {
intl: intlShape.isRequired,
};
componentDidMount() {
this.updateTimeUntilNextEpochStart();
this.intervalHandler = setInterval(
() => this.updateTimeUntilNextEpochStart(),
EPOCH_COUNTDOWN_INTERVAL
);
}
updateTimeUntilNextEpochStart = () => {
const { futureEpochStartTime } = this.props;
const timeUntilNextEpochStart = Math.max(
0,
new Date(futureEpochStartTime).getTime() - new Date().getTime()
);
this.setState({ timeUntilNextEpochStart });
};
componentWillUnmount() {
if (this.intervalHandler) {
clearInterval(this.intervalHandler);
}
}
render() {
const { intl } = this.context;
const { walletName, onClose, currentLocale } = this.props;
const actions = [
{
label: intl.formatMessage(globalMessages.close),
onClick: onClose,
primary: true,
},
];
const timeUntilNextEpochStart = humanizeDurationByLocale(
this.state.timeUntilNextEpochStart,
currentLocale
);
return (
<Dialog
title={intl.formatMessage(messages.title)}
subtitle={walletName}
actions={actions}
closeOnOverlayClick
onClose={onClose}
className={styles.dialog}
closeButton={<DialogCloseButton onClose={onClose} />}
>
<div className={styles.sadLogoContainer}>
<SVGInline svg={sadLogo} className={styles.sadLogoIcon} />
</div>
<div className={styles.description}>
<p>
<FormattedHTMLMessage
{...messages.description1}
values={{
walletName,
}}
/>
</p>
<p>
<FormattedHTMLMessage
{...messages.description2}
values={{
timeUntilNextEpochStart,
}}
/>
</p>
</div>
</Dialog>
);
}
}