[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

CHANGELOG.md

@@ -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
 

source/renderer/app/components/staking/Delegation.js

@@ -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>
+    );
+  }
+}

source/renderer/app/components/staking/DelegationInfo.js

@@ -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}>

source/renderer/app/components/staking/DelegationInfo.scss

@@ -14,8 +14,8 @@
 
 .info {
   @extend %regularText;
-  margin-bottom: 24px;
   color: #5e6066;
+  margin-bottom: 24px;
 }
 
 .timeLeftDesc {

source/renderer/app/components/staking/legacy/Staking.js

@@ -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>
+    );
+  }
+}

source/renderer/app/components/staking/legacy/Staking.scss

@@ -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;
+}

source/renderer/app/config/sidebarConfig.js

@@ -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 };

source/renderer/app/containers/Root.js

@@ -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

source/renderer/app/containers/staking/DelegationPage.js

@@ -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>
     );

source/renderer/app/i18n/locales/defaultMessages.json

@@ -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"
   }
-]
+]