-
Notifications
You must be signed in to change notification settings - Fork 295
/
StakingCountdown.tsx
83 lines (79 loc) · 3.04 KB
/
StakingCountdown.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
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { defineMessages, intlShape } from 'react-intl';
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
import CountdownWidget from '../../widgets/CountdownWidget';
import styles from './StakingCountdown.scss';
import ButtonLink from '../../widgets/ButtonLink';
const messages = defineMessages({
heading: {
id: 'staking.delegationCountdown.heading',
defaultMessage: '!!!Shelley upgrade',
description: 'Headline for the Decentralisation notification.',
},
description: {
id: 'staking.delegationCountdown.description',
defaultMessage:
'!!!Cardano will soon start transitioning from a federated to a decentralized system. The first step is the activation of the Shelley upgrade. Once the upgrade is complete, stake pools will start registering and users will be able to delegate their wallets. Two epochs (10 days) later, stake pools will begin producing blocks and users could start earning rewards from delegating their stakes. The first rewards, where due, will be distributed two more epochs later (10 days).',
description: 'Info for the Decentralisation notification.',
},
timeLeftDesc: {
id: 'staking.delegationCountdown.timeLeftDesc',
defaultMessage: '!!!Rewards begin in',
description: 'Description for the Decentralisation notification.',
},
buttonLabel: {
id: 'staking.delegationCountdown.buttonLabel',
defaultMessage: '!!!Learn more',
description: 'Button Label for the Decentralisation notification.',
},
});
type Props = {
redirectToStakingInfo?: Function,
startDateTime: string,
onLearnMoreClick: Function,
};
@observer
export default class StakingCountdown extends Component<Props> {
static contextTypes = {
intl: intlShape.isRequired,
};
render() {
const {
redirectToStakingInfo,
startDateTime,
onLearnMoreClick,
} = this.props;
const { intl } = this.context;
const heading = intl.formatMessage(messages.heading);
const description = intl.formatMessage(messages.description);
const timeLeftDesc = intl.formatMessage(messages.timeLeftDesc);
const buttonLabel = intl.formatMessage(messages.buttonLabel);
const showLearnMoreButton = false;
return (
<div className={styles.component}>
<div className={styles.mainContent}>
<div className={styles.heading}>{heading}</div>
<div className={styles.description}>{description}</div>
<div className={styles.timeLeftDesc}>{timeLeftDesc}</div>
<CountdownWidget
startDateTime={startDateTime}
redirectOnEnd={redirectToStakingInfo}
/>
{showLearnMoreButton && (
<ButtonLink
className={styles.learnMoreButton}
onClick={onLearnMoreClick}
skin={ButtonSkin}
label={buttonLabel}
linkProps={{
className: styles.externalLinkIcon,
}}
/>
)}
</div>
</div>
);
}
}