[DDW-646] Update decentralisation notification

Update text internationalization Make stories of storyboard Use different configs for screens and storyboard
input-output-hk · May 14, 2019 · 7230eec · 7230eec
1 parent 8f1fe4c
commit 7230eec
Show file tree

Hide file tree

Showing 14 changed files with 187 additions and 40 deletions.
diff --git a/source/renderer/app/components/staking/BlockGenerationInfo.js b/source/renderer/app/components/staking/BlockGenerationInfo.js
@@ -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>
     );
   }

diff --git a/source/renderer/app/components/staking/BlockGenerationInfo.scss b/source/renderer/app/components/staking/BlockGenerationInfo.scss
@@ -1,8 +1,9 @@
 @import './stakingConfig';
 
 .component {
-  margin: 20px;
+  margin: 20px auto;
   text-align: center;
+  width: 800px;
 }
 
 .heading {

diff --git a/source/renderer/app/components/staking/Staking.js b/source/renderer/app/components/staking/Staking.js
@@ -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>
     );

diff --git a/source/renderer/app/config/sidebarConfig.js b/source/renderer/app/config/sidebarConfig.js
@@ -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,
 ];

diff --git a/source/renderer/app/i18n/locales/de-DE.json b/source/renderer/app/i18n/locales/de-DE.json
@@ -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",

diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -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": [
       {

diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
@@ -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",

diff --git a/source/renderer/app/i18n/locales/hr-HR.json b/source/renderer/app/i18n/locales/hr-HR.json
@@ -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",

diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
@@ -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": "ウォレットアドレス",

diff --git a/source/renderer/app/i18n/locales/ko-KR.json b/source/renderer/app/i18n/locales/ko-KR.json
@@ -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",

diff --git a/source/renderer/app/i18n/locales/zh-CN.json b/source/renderer/app/i18n/locales/zh-CN.json
@@ -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",

diff --git a/storybook/stories/DecentralisationNotification.stories.js b/storybook/stories/DecentralisationNotification.stories.js
@@ -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>
+  ));
diff --git a/storybook/stories/Sidebar.stories.js b/storybook/stories/Sidebar.stories.js
@@ -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="/"
+    />
   ));
diff --git a/storybook/stories/index.js b/storybook/stories/index.js
@@ -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';