Skip to content
Permalink
Browse files

[DDW-646] Update delegation module

Rename component name

Move messages to used component

Update storybook config and restore staking stories back

Translate timestamp using locale
  • Loading branch information...
yakovkaravelov committed May 16, 2019
1 parent 8e01208 commit 6cc7ef37e2f7c515dc9f24af3164c6fadf225874
@@ -11,6 +11,7 @@ Changelog
- Implemented "In progress" download logs notification ([PR 1341](https://github.com/input-output-hk/daedalus/pull/1341))
- Implemented status icons on the "Loading" screens ([PR 1325](https://github.com/input-output-hk/daedalus/pull/1325), [PR 1365](https://github.com/input-output-hk/daedalus/pull/1365))
- Implemented detection for system locale on Daedalus start when user hasn't yet selected language preference so that locale defaults to Japanese if system locale is Japan/Japanese, otherwise defaults to English ([PR 1348](https://github.com/input-output-hk/daedalus/pull/1348))
- Implemented "Start of decentralisation notification" UI ([PR 1390](https://github.com/input-output-hk/daedalus/pull/1390))

### Fixes

@@ -0,0 +1,22 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import DelegationInfo from './DelegationInfo';
import styles from './Delegation.scss';

type Props = { currentLocale: string, timeLeft: number };

@observer
export default class Delegation extends Component<Props> {
render() {
const { currentLocale, timeLeft } = this.props;

return (
<div className={styles.component}>
<div className={styles.mainContent}>
<DelegationInfo currentLocale={currentLocale} timeLeft={timeLeft} />
</div>
</div>
);
}
}
@@ -1,28 +1,87 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { defineMessages, intlShape } from 'react-intl';
import { Button } from 'react-polymorph/lib/components/Button';
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
import moment from 'moment';
import humanizeDuration from 'humanize-duration';
import styles from './DelegationInfo.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.',
},
});

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

@observer
export default class DelegationInfo extends Component<Props> {
static defaultProps = {
timeLeft: 0,
};

static contextTypes = {
intl: intlShape.isRequired,
};

translateTimeLeft = () => {
const { currentLocale, timeLeft } = this.props;

let humanizedDurationLanguage = null;
switch (currentLocale) {
case 'ja-JP':
humanizedDurationLanguage = 'ja';
break;
case 'zh-CN':
humanizedDurationLanguage = 'zh_CN';
break;
case 'ko-KR':
humanizedDurationLanguage = 'ko';
break;
case 'de-DE':
humanizedDurationLanguage = 'de';
break;
default:
humanizedDurationLanguage = 'en';
}

const duration = humanizeDuration(timeLeft, {
round: true, // round seconds to prevent e.g. 1 day 3 hours *11,56 seconds*
language: humanizedDurationLanguage,
}).replace(/,/g, ''); // clean period without comma

return duration;
};

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`;
const { intl } = this.context;
const heading = intl.formatMessage(messages.heading);
const info = intl.formatMessage(messages.info);
const timeLeftDesc = intl.formatMessage(messages.timeLeftDesc);
const buttonLabel = intl.formatMessage(messages.buttonLabel);
const timeLeftString = this.translateTimeLeft();

return (
<div className={styles.component}>
@@ -14,8 +14,8 @@

.info {
@extend %regularText;
margin-bottom: 24px;
color: #5e6066;
margin-bottom: 24px;
}

.timeLeftDesc {

This file was deleted.

Oops, something went wrong.
@@ -0,0 +1,26 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import BlockGenerationInfo from './BlockGenerationInfo';
import StakingSwitch from './StakingSwitch';
import StakingSystemState from './StakingSystemState';
import styles from './Staking.scss';

@observer
export default class Settings extends Component<any> {
render() {
return (
<div className={styles.component}>
<div className={styles.leftSide}>
<div className={styles.mainContent}>
<BlockGenerationInfo />
</div>
</div>
<div className={styles.rightSide}>
<StakingSwitch active />
<StakingSystemState />
</div>
</div>
);
}
}
@@ -0,0 +1,21 @@
@import './stakingConfig';

.component {
height: 100%;
display: flex;
padding: 20px;
background-color: var(--theme-staking-background-color);
}

.leftSide {
flex: 1;
margin-right: 20px;

.mainContent {
@extend %contentBorderAndBackground;
}
}

.rightSide {
width: 240px;
}
@@ -34,10 +34,4 @@ export const CATEGORIES = [
CATEGORIES_BY_NAME.SETTINGS,
];

export const CATEGORIES_FOR_STORYBOARD = [
CATEGORIES_BY_NAME.WALLETS,
CATEGORIES_BY_NAME.DELEGATION,
CATEGORIES_BY_NAME.SETTINGS,
];

export const sidebarConfig = { CATEGORIES_BY_NAME, CATEGORIES };
@@ -27,8 +27,9 @@ export default class Root extends Component<Props> {

const isPageThatDoesntNeedWallets =
isBlockConsolidationStatusDialog ||
isDelegationPage ||
((isAdaRedemptionPage || isSettingsPage) && hasLoadedWallets && isSynced);
((isAdaRedemptionPage || isDelegationPage || isSettingsPage) &&
hasLoadedWallets &&
isSynced);

// In case node is in stopping sequence we must show the "Connecting" screen
// with the "Stopping Cardano node..." and "Cardano node stopped" messages
@@ -1,16 +1,21 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import Staking from '../../components/staking/Staking';
import { observer, inject } from 'mobx-react';
import type { InjectedProps } from '../types/injectedPropsType';
import Delegation from '../../components/staking/Delegation';
import Layout from '../MainLayout';

@inject('stores')
@observer
export default class DelegationPage extends Component<any> {
export default class DelegationPage extends Component<InjectedProps> {
render() {
const { stores } = this.props;
const { currentLocale } = stores.profile;

return (
<Layout>
<div style={{ height: '100%' }}>
<Staking />
<Delegation currentLocale={currentLocale} />
</div>
</Layout>
);
@@ -1549,7 +1549,7 @@
"column": 3,
"line": 13
},
"file": "source/renderer/app/components/staking/Staking.js",
"file": "source/renderer/app/components/staking/Delegation.js",
"id": "paper.delegation.notification.heading",
"start": {
"column": 11,
@@ -1563,7 +1563,7 @@
"column": 3,
"line": 19
},
"file": "source/renderer/app/components/staking/Staking.js",
"file": "source/renderer/app/components/staking/Delegation.js",
"id": "paper.delegation.notification.info",
"start": {
"column": 8,
@@ -1577,7 +1577,7 @@
"column": 3,
"line": 24
},
"file": "source/renderer/app/components/staking/Staking.js",
"file": "source/renderer/app/components/staking/Delegation.js",
"id": "paper.delegation.notification.timeLeftDesc",
"start": {
"column": 16,
@@ -1591,15 +1591,15 @@
"column": 3,
"line": 29
},
"file": "source/renderer/app/components/staking/Staking.js",
"file": "source/renderer/app/components/staking/Delegation.js",
"id": "paper.delegation.notification.buttonLabel",
"start": {
"column": 15,
"line": 25
}
}
],
"path": "source/renderer/app/components/staking/Staking.json"
"path": "source/renderer/app/components/staking/Delegation.json"
},
{
"descriptors": [
@@ -6307,4 +6307,4 @@
],
"path": "source/renderer/app/utils/paperWalletPdfGenerator.json"
}
]
]
Oops, something went wrong.

0 comments on commit 6cc7ef3

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