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 add5ef39efcfebf0a9b3c07b1661644826b33c04
@@ -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,
];
@@ -91,6 +91,10 @@
"loading.screen.updatingCardanoMessage": "!!!Updating Cardano node",
"noDiskSpace.error.overlayContent": "!!!<b>There is not enough disk space left on your device.</b><br />Daedalus requires at least {diskSpaceRequired} to operate. Please free up some disk space to continue.",
"noDiskSpace.error.overlayTitle": "!!!Not enough disk space",
"paper.delegation.notification.buttonLabel": "!!!Learn more",
"paper.delegation.notification.heading": "!!!Cardano decentralisation",
"paper.delegation.notification.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.",
"paper.delegation.notification.timeLeftDesc": "!!!Reward era begins in",
"paper.wallet.create.certificate.completion.dialog.addressCopiedLabel": "!!!copied",
"paper.wallet.create.certificate.completion.dialog.addressInstructions": "!!!To receive funds to your paper wallet simply share your wallet address with others.",
"paper.wallet.create.certificate.completion.dialog.addressLabel": "!!!Wallet address",
@@ -1540,6 +1540,67 @@
],
"path": "source/renderer/app/components/sidebar/wallets/SidebarWalletsMenu.json"
},
{
"descriptors": [
{
"defaultMessage": "!!!Cardano decentralisation",
"description": "Headline for the Decentralisation notification.",
"end": {
"column": 3,
"line": 13
},
"file": "source/renderer/app/components/staking/Staking.js",
"id": "paper.delegation.notification.heading",
"start": {
"column": 11,
"line": 9
}
},
{
"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.",
"end": {
"column": 3,
"line": 19
},
"file": "source/renderer/app/components/staking/Staking.js",
"id": "paper.delegation.notification.info",
"start": {
"column": 8,
"line": 14
}
},
{
"defaultMessage": "!!!Reward era begins in",
"description": "Description for the Decentralisation notification.",
"end": {
"column": 3,
"line": 24
},
"file": "source/renderer/app/components/staking/Staking.js",
"id": "paper.delegation.notification.timeLeftDesc",
"start": {
"column": 16,
"line": 20
}
},
{
"defaultMessage": "!!!Learn more",
"description": "Button Label for the Decentralisation notification.",
"end": {
"column": 3,
"line": 29
},
"file": "source/renderer/app/components/staking/Staking.js",
"id": "paper.delegation.notification.buttonLabel",
"start": {
"column": 15,
"line": 25
}
}
],
"path": "source/renderer/app/components/staking/Staking.json"
},
{
"descriptors": [
{
@@ -91,6 +91,10 @@
"loading.screen.updatingCardanoMessage": "Updating Cardano node",
"noDiskSpace.error.overlayContent": "<b>Daedalus requires at least {diskSpaceRequired} of hard drive space to operate. Your computer is missing {diskSpaceMissing} of available space. Please delete some files to increase available hard drive space to continue using Daedalus. </b><br /><br />It is recommended to have at least 15% of hard drive space available ({diskSpaceRecommended} in your case) for normal and stable operation of the operating system and installed programs. We strongly recommend that you free up at least that amount of space from your hard drive.",
"noDiskSpace.error.overlayTitle": "Daedalus requires more hard drive space",
"paper.delegation.notification.buttonLabel": "Learn more",
"paper.delegation.notification.heading": "Cardano decentralisation",
"paper.delegation.notification.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.",
"paper.delegation.notification.timeLeftDesc": "Reward era begins in",
"paper.wallet.create.certificate.completion.dialog.addressCopiedLabel": "copied",
"paper.wallet.create.certificate.completion.dialog.addressInstructions": "To receive funds to your paper wallet simply share your wallet address with others.",
"paper.wallet.create.certificate.completion.dialog.addressLabel": "Wallet address",
@@ -91,6 +91,10 @@
"loading.screen.updatingCardanoMessage": "!!!Updating Cardano node",
"noDiskSpace.error.overlayContent": "!!!<b>There is not enough disk space left on your device.</b><br />Daedalus requires at least {diskSpaceRequired} to operate. Please free up some disk space to continue.",
"noDiskSpace.error.overlayTitle": "!!!Not enough disk space",
"paper.delegation.notification.buttonLabel": "!!!Learn more",
"paper.delegation.notification.heading": "!!!Cardano decentralisation",
"paper.delegation.notification.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.",
"paper.delegation.notification.timeLeftDesc": "!!!Reward era begins in",
"paper.wallet.create.certificate.completion.dialog.addressCopiedLabel": "!!!copied",
"paper.wallet.create.certificate.completion.dialog.addressInstructions": "!!!To receive funds to your paper wallet simply share your wallet address with others.",
"paper.wallet.create.certificate.completion.dialog.addressLabel": "!!!Wallet address",
@@ -91,6 +91,10 @@
"loading.screen.updatingCardanoMessage": "カルダノ・ノードをアップデート中",
"noDiskSpace.error.overlayContent": "<b>ダイダロスを動作させるには、ハードディスクに少なくとも{diskSpaceRequired}の空き容量が必要です。お使いのコンピュータは、空き容量が{diskSpaceMissing}不足しています。ダイダロスのご利用を続けるためには、ファイルをいくつか削除して空き容量を増やしてください。 </b><br /><br />オペレーティングシステムとインストール済みプログラムを正常かつ安定した状態で動作させるには、ハードディスクに少なくとも15%(お使いのコンピュータの場合は{diskSpaceRecommended})の空き容量が必要です。ハードディスクに少なくともこの程度の空き容量を確保することを強くお勧めします。",
"noDiskSpace.error.overlayTitle": "ダイダロスを動作させるには、ハードディスクの空き容量が足りません",
"paper.delegation.notification.buttonLabel": "!!!Learn more",
"paper.delegation.notification.heading": "!!!Cardano decentralisation",
"paper.delegation.notification.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.",
"paper.delegation.notification.timeLeftDesc": "!!!Reward era begins in",
"paper.wallet.create.certificate.completion.dialog.addressCopiedLabel": "コピーされました",
"paper.wallet.create.certificate.completion.dialog.addressInstructions": "ペーパーウォレットを用いて資金を受け取る際は、下記のウォレットアドレスを共有してください。",
"paper.wallet.create.certificate.completion.dialog.addressLabel": "ウォレットアドレス",
@@ -91,6 +91,10 @@
"loading.screen.updatingCardanoMessage": "!!!Updating Cardano node",
"noDiskSpace.error.overlayContent": "!!!<b>There is not enough disk space left on your device.</b><br />Daedalus requires at least {diskSpaceRequired} to operate. Please free up some disk space to continue.",
"noDiskSpace.error.overlayTitle": "!!!Not enough disk space",
"paper.delegation.notification.buttonLabel": "!!!Learn more",
"paper.delegation.notification.heading": "!!!Cardano decentralisation",
"paper.delegation.notification.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.",
"paper.delegation.notification.timeLeftDesc": "!!!Reward era begins in",
"paper.wallet.create.certificate.completion.dialog.addressCopiedLabel": "!!!copied",
"paper.wallet.create.certificate.completion.dialog.addressInstructions": "!!!To receive funds to your paper wallet simply share your wallet address with others.",
"paper.wallet.create.certificate.completion.dialog.addressLabel": "!!!Wallet address",
@@ -91,6 +91,10 @@
"loading.screen.updatingCardanoMessage": "!!!Updating Cardano node",
"noDiskSpace.error.overlayContent": "!!!<b>There is not enough disk space left on your device.</b><br />Daedalus requires at least {diskSpaceRequired} to operate. Please free up some disk space to continue.",
"noDiskSpace.error.overlayTitle": "!!!Not enough disk space",
"paper.delegation.notification.buttonLabel": "!!!Learn more",
"paper.delegation.notification.heading": "!!!Cardano decentralisation",
"paper.delegation.notification.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.",
"paper.delegation.notification.timeLeftDesc": "!!!Reward era begins in",
"paper.wallet.create.certificate.completion.dialog.addressCopiedLabel": "!!!copied",
"paper.wallet.create.certificate.completion.dialog.addressInstructions": "!!!To receive funds to your paper wallet simply share your wallet address with others.",
"paper.wallet.create.certificate.completion.dialog.addressLabel": "!!!Wallet address",
@@ -0,0 +1,15 @@
// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import StoryDecorator from './support/StoryDecorator';
import Staking from '../../source/renderer/app/components/staking/Staking';

storiesOf('DecentralisationNotification', module)
.addDecorator(story => <StoryDecorator>{story()}</StoryDecorator>)
// ====== Stories ======

.add('Start', () => (
<div>
<Staking />
</div>
));
@@ -5,27 +5,7 @@ import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import StoryDecorator from './support/StoryDecorator';
import Sidebar from '../../source/renderer/app/components/sidebar/Sidebar';
import walletsIcon from '../../source/renderer/app/assets/images/sidebar/wallet-ic.inline.svg';
import decentralisationNotificationIcon from '../../source/renderer/app/assets/images/sidebar/decentralisation-ic.inline.svg';
import settingsIcon from '../../source/renderer/app/assets/images/sidebar/settings-ic.inline.svg';

const SIDEBAR_CATEGORIES = [
{
name: 'WALLETS',
route: '/wallets',
icon: walletsIcon,
},
{
name: 'CARDANO_DECENTRALISATION_NOTIFICATION',
route: '/cardano-decentralisation-notification',
icon: decentralisationNotificationIcon,
},
{
name: 'SETTINGS',
route: '/settings',
icon: settingsIcon,
},
];
import { CATEGORIES_FOR_STORYBOARD } from '../../source/renderer/app/config/sidebarConfig';

const sidebarMenus = observable({
wallets: {
@@ -55,7 +35,7 @@ storiesOf('Sidebar', module)
.add('no category', () => (
<Sidebar
menus={emptyMenus}
categories={SIDEBAR_CATEGORIES}
categories={CATEGORIES_FOR_STORYBOARD}
activeSidebarCategory=""
onCategoryClicked={action('onCategoryClicked')}
isDialogOpen={() => false}
@@ -68,8 +48,8 @@ storiesOf('Sidebar', module)
.add('wallets category', () => (
<Sidebar
menus={emptyMenus}
categories={SIDEBAR_CATEGORIES}
activeSidebarCategory={SIDEBAR_CATEGORIES[0].route}
categories={CATEGORIES_FOR_STORYBOARD}
activeSidebarCategory={CATEGORIES_FOR_STORYBOARD[0].route}
onCategoryClicked={action('onCategoryClicked')}
isDialogOpen={() => false}
onAddWallet={action('onAddWallet')}
@@ -80,8 +60,8 @@ storiesOf('Sidebar', module)
))
.add('wallets / sub', () => (
<Sidebar
categories={SIDEBAR_CATEGORIES}
activeSidebarCategory={SIDEBAR_CATEGORIES[0].route}
categories={CATEGORIES_FOR_STORYBOARD}
activeSidebarCategory={CATEGORIES_FOR_STORYBOARD[0].route}
menus={sidebarMenus}
onCategoryClicked={action('onCategoryClicked')}
isShowingSubMenus
@@ -91,4 +71,17 @@ storiesOf('Sidebar', module)
onSubmitSupportRequest={() => {}}
pathname="/"
/>
))
.add('decentralisation category', () => (
<Sidebar
menus={emptyMenus}
categories={CATEGORIES_FOR_STORYBOARD}
activeSidebarCategory={CATEGORIES_FOR_STORYBOARD[1].route}
onCategoryClicked={action('onCategoryClicked')}
isDialogOpen={() => false}
onAddWallet={action('onAddWallet')}
openDialogAction={action('openDialog')}
onSubmitSupportRequest={() => {}}
pathname="/"
/>
));
@@ -4,6 +4,7 @@ import './support/environment';
import './Sidebar.stories';
import './SidebarCategory.stories';
import './SidebarWalletsMenu.stories';
import './DecentralisationNotification.stories';
// import './StakingChart.stories';
// import './Staking.stories';
import './Widgets.stories';

0 comments on commit add5ef3

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