Skip to content
Permalink
Browse files

[DDW-646] Update decentralisation notification

Update text internationalization

Make stories of storyboard

Use different configs for screens and storyboard
  • Loading branch information...
yakovkaravelov committed May 14, 2019
1 parent ab3092a commit 0a540477208fc219004997ccac6f6fc57c27dcb8
@@ -3,24 +3,34 @@ import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { Button } from 'react-polymorph/lib/components/Button';
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
import moment from 'moment';
import styles from './BlockGenerationInfo.scss';

type Props = {
heading: string,
info: string,
timeLeftDesc: string,
timeLeft: number,
buttonLabel: string,
};

@observer
export default class BlockGenerationInfo extends Component<any> {
export default class BlockGenerationInfo extends Component<Props> {
render() {
const { heading, info, timeLeftDesc, timeLeft, buttonLabel } = this.props;
const duration = moment.duration(timeLeft);
const days = duration.days();
const hours = duration.hours();
const minutes = duration.minutes();
const timeLeftString = `${days} days ${hours} hours ${minutes} minutes`;

return (
<div className={styles.component}>
<div className={styles.heading}>Cardano decentralisation</div>
<div className={styles.info}>
Cardano will soon start its transition from a federated to a
decentralized system. This will mark the beginning of the reward era
in which stakeholders will be able to participate in the process of
staking or can delegate their stake to stake pools to earn rewards in
ada.
</div>
<div className={styles.timeLeftDesc}>Reward era begins in</div>
<div className={styles.timeLeft}>3 days 6 hours 10 minutes</div>
<Button label="Learn more" skin={ButtonSkin} />
<div className={styles.heading}>{heading}</div>
<div className={styles.info}>{info}</div>
<div className={styles.timeLeftDesc}>{timeLeftDesc}</div>
<div className={styles.timeLeft}>{timeLeftString}</div>
<Button label={buttonLabel} skin={ButtonSkin} />
</div>
);
}
@@ -1,8 +1,9 @@
@import './stakingConfig';

.component {
margin: 20px;
margin: 20px auto;
text-align: center;
width: 800px;
}

.heading {
@@ -1,16 +1,53 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { defineMessages, intlShape } from 'react-intl';
import BlockGenerationInfo from './BlockGenerationInfo';
import styles from './Staking.scss';

const messages = defineMessages({
heading: {
id: 'paper.delegation.notification.heading',
defaultMessage: '!!!Cardano decentralisation',
description: 'Headline for the Decentralisation notification.',
},
info: {
id: 'paper.delegation.notification.info',
defaultMessage:
'!!!Cardano will soon start its transition from a federated to a decentralized system.This will mark the beginning of the reward era in which stakeholders will be able to participate in the process of staking or can delegate their stake to stake pools to earn rewards in ada.',
description: 'Info for the Decentralisation notification.',
},
timeLeftDesc: {
id: 'paper.delegation.notification.timeLeftDesc',
defaultMessage: '!!!Reward era begins in',
description: 'Description for the Decentralisation notification.',
},
buttonLabel: {
id: 'paper.delegation.notification.buttonLabel',
defaultMessage: '!!!Learn more',
description: 'Button Label for the Decentralisation notification.',
},
});

@observer
export default class Staking extends Component<any> {
static contextTypes = {
intl: intlShape.isRequired,
};

render() {
const { intl } = this.context;

return (
<div className={styles.component}>
<div className={styles.mainContent}>
<BlockGenerationInfo />
<BlockGenerationInfo
heading={intl.formatMessage(messages.heading)}
info={intl.formatMessage(messages.info)}
timeLeftDesc={intl.formatMessage(messages.timeLeftDesc)}
timeLeft={(78 * 60 + 10) * 60 * 1000}
buttonLabel={intl.formatMessage(messages.buttonLabel)}
/>
</div>
</div>
);
@@ -31,6 +31,11 @@ export const CATEGORIES_BY_NAME = {
export const CATEGORIES = [
CATEGORIES_BY_NAME.WALLETS,
CATEGORIES_BY_NAME.PAPER_WALLET_CREATE_CERTIFICATE,
CATEGORIES_BY_NAME.SETTINGS,
];

export const CATEGORIES_FOR_STORYBOARD = [
CATEGORIES_BY_NAME.WALLETS,
CATEGORIES_BY_NAME.CARDANO_DECENTRALISATION_NOTIFICATION,
CATEGORIES_BY_NAME.SETTINGS,
];
Oops, something went wrong.

0 comments on commit 0a54047

Please sign in to comment.
You can’t perform that action at this time.