Skip to content
Permalink
Browse files

[DDW-647] Implement decentralisation progress storybook

  • Loading branch information...
yakovkaravelov committed May 16, 2019
1 parent d3c86f7 commit aaeaa6b4998575422ac9fb003786ef671950215b
@@ -18,6 +18,7 @@ import DataLayerMigrationPage from './containers/profile/DataLayerMigrationPage'
import DisplaySettingsPage from './containers/settings/categories/DisplaySettingsPage';
import PaperWalletCreateCertificatePage from './containers/wallet/PaperWalletCreateCertificatePage';
import DelegationPage from './containers/staking/DelegationPage';
import DelegationProgressPage from './containers/staking/DelegationProgressPage';
import Wallet from './containers/wallet/Wallet';
import WalletSummaryPage from './containers/wallet/WalletSummaryPage';
import WalletSendPage from './containers/wallet/WalletSendPage';
@@ -70,5 +71,9 @@ export const Routes = (
component={PaperWalletCreateCertificatePage}
/>
<Route path={ROUTES.DELEGATION} component={DelegationPage} />
<Route
path={ROUTES.DELEGATION_PROGRESS}
component={DelegationProgressPage}
/>
</Route>
);
@@ -0,0 +1,27 @@
<svg xmlns="http://www.w3.org/2000/svg" width="112" height="110" viewBox="0 0 112 110">
<g fill="none" fill-rule="evenodd">
<circle cx="55" cy="56" r="44"/>
<circle cx="30" cy="44" r="6" fill="#FAFBFC"/>
<circle cx="85" cy="42" r="5" fill="#FAFBFC"/>
<circle cx="61" cy="78" r="5" fill="#FAFBFC"/>
<g opacity=".2">
<path stroke="#FAFBFC" stroke-width="2" d="M30 71l23.492-11.746M30 71V44l26.859-14M62.497 59.332L85 71V42M58.693 61.853L61 78 44 91" opacity=".8"/>
<circle cx="85" cy="71" r="5" fill="#FAFBFC"/>
<circle cx="57" cy="30" r="5" fill="#FAFBFC"/>
<circle cx="30" cy="71" r="3" fill="#FAFBFC"/>
<circle cx="44" cy="91" r="3" fill="#FAFBFC"/>
<g opacity=".4">
<path stroke="#FAFBFC" stroke-width="2" d="M56.859 30L30 17 58 4M85 17L56.859 30M85 17l24 13-24 12M108 66L85 42 56.859 30M3 58l27-14V17M61 78l24-7M30 71l14 20-32-1M77 106l8-35" opacity=".3"/>
<circle cx="58" cy="4" r="4" fill="#FAFBFC"/>
<circle cx="108" cy="66" r="4" fill="#FAFBFC"/>
<circle cx="85" cy="17" r="3" fill="#FAFBFC"/>
<circle cx="109" cy="30" r="2" fill="#FAFBFC"/>
<circle cx="30" cy="17" r="3" fill="#FAFBFC"/>
<circle cx="3" cy="58" r="3" fill="#FAFBFC"/>
<circle cx="77" cy="106" r="4" fill="#FAFBFC"/>
<circle cx="12" cy="90" r="4" fill="#FAFBFC"/>
</g>
</g>
<circle cx="58" cy="57" r="5" stroke="#FAFBFC" stroke-width="2"/>
</g>
</svg>
@@ -0,0 +1,22 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import DelegationProgressInfo from './DelegationProgressInfo';
import styles from './DelegationProgress.scss';

type Props = { percentage: number };

@observer
export default class DelegationProgress extends Component<Props> {
render() {
const { percentage } = this.props;

return (
<div className={styles.component}>
<div className={styles.mainContent}>
<DelegationProgressInfo percentage={percentage} />
</div>
</div>
);
}
}
@@ -0,0 +1,11 @@
@import './stakingConfig';

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

.mainContent {
@extend %contentBorderAndBackground;
}
@@ -0,0 +1,91 @@
// @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 styles from './DelegationProgressInfo.scss';

const messages = defineMessages({
heading: {
id: 'paper.delegation.progress.notification.heading',
defaultMessage: '!!!Cardano is transitioning to a decentralized system',
description: 'Headline for the Decentralisation progress notification.',
},
infoDesc: {
id: 'paper.delegation.progress.notification.infoDesc',
defaultMessage:
'!!!Cardano is transitioning from a federated to a decentralized system. During this transition, some new blocks will be produced by nodes operated in a federated way and some by nodes run by ada stakeholders. All rewards will be distributed to ada stakeholders and none to operators of federated nodes.',
description:
'Info description for the Decentralisation progress notification.',
},
infoPercentageStart: {
id: 'paper.delegation.progress.notification.infoPercentageStart',
defaultMessage: '!!!Currently,',
description:
'Percentage info start word for the Decentralisation progress notification.',
},
infoPercentageDesc: {
id: 'paper.delegation.progress.notification.infoPercentageDesc',
defaultMessage:
'!!!of the system is decentralized and operated by stake pools.',
description:
'Percentage info description for the Decentralisation progress notification.',
},
buttonLabel: {
id: 'paper.delegation.progress.notification.buttonLabel',
defaultMessage: '!!!Learn more',
description: 'Button Label for the Decentralisation progress notification.',
},
});

type Props = { percentage: number };

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

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

render() {
const { intl } = this.context;
const { percentage } = this.props;
const heading = intl.formatMessage(messages.heading);
const infoDesc = intl.formatMessage(messages.infoDesc);
const infoPercentageStart = intl.formatMessage(
messages.infoPercentageStart
);
const infoPercentageDesc = intl.formatMessage(messages.infoPercentageDesc);
const progressLabelLeftPosition = Math.max(percentage / 2, 5);
const buttonLabel = intl.formatMessage(messages.buttonLabel);

return (
<div className={styles.component}>
<div className={styles.heading}>{heading}</div>
<div className={styles.info}>{infoDesc}</div>
<div className={styles.info}>
{infoPercentageStart} {percentage}% {infoPercentageDesc}
</div>
<div className={styles.progressBar}>
<div className={styles.progressBarContainer}>
<div
className={styles.progress}
style={{ width: `${percentage}%` }}
/>
<div
className={styles.progressLabel}
style={{ left: `calc(${progressLabelLeftPosition}% - 10px)` }}
>
{percentage}%
</div>
</div>
</div>
<Button label={buttonLabel} skin={ButtonSkin} />
</div>
);
}
}
@@ -0,0 +1,54 @@
@import './stakingConfig';

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

.heading {
@extend %accentText;
font-size: 19px;
margin-bottom: 14px;
}

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

.progressBar {
width: 80%;
margin: 0 auto;
height: 24px;
border-radius: 5px;
margin-bottom: 24px;
}

.progressBarContainer {
position: relative;
width: 100%;
height: 100%;
background-color: var(--theme-staking-background-color);
}

.progress {
background: repeating-linear-gradient(
-63deg,
var(--theme-block-delegation-progress-stripe-dark-1-background-color),
var(--theme-block-delegation-progress-stripe-dark-1-background-color) 10px,
var(--theme-block-delegation-progress-stripe-dark-2-background-color) 10px,
var(--theme-block-delegation-progress-stripe-dark-2-background-color) 20px
);
border-radius: 5px;
height: 100%;
}

.progressLabel {
@extend %regularText;
position: absolute;
top: 50%;
transform: translate(0, -50%);
color: #fff;
}
@@ -4,6 +4,7 @@ import walletsIcon from '../assets/images/sidebar/wallet-ic.inline.svg';
import settingsIcon from '../assets/images/sidebar/settings-ic.inline.svg';
import paperWalletCertificateIcon from '../assets/images/sidebar/paper-certificate-ic.inline.svg';
import delegationIcon from '../assets/images/sidebar/delegation-ic.inline.svg';
import delegationProgressIcon from '../assets/images/sidebar/delegation-progress-ic.inline.svg';

export const CATEGORIES_BY_NAME = {
WALLETS: {
@@ -21,6 +22,11 @@ export const CATEGORIES_BY_NAME = {
route: ROUTES.DELEGATION,
icon: delegationIcon,
},
DELEGATION_PROGRESS: {
name: 'DELEGATION_PROGRESS',
route: ROUTES.DELEGATION_PROGRESS,
icon: delegationProgressIcon,
},
SETTINGS: {
name: 'SETTINGS',
route: ROUTES.SETTINGS.ROOT,
@@ -13,7 +13,11 @@ export default class Root extends Component<Props> {
render() {
const { stores, actions, children } = this.props;
const { networkStatus, profile, adaRedemption, app, wallets } = stores;
const { isBlockConsolidationStatusDialog, isDelegationPage } = app;
const {
isBlockConsolidationStatusDialog,
isDelegationPage,
isDelegationProgressPage,
} = app;
const { isProfilePage, isSettingsPage } = profile;
const { isAdaRedemptionPage } = adaRedemption;
const { hasLoadedWallets } = wallets;
@@ -27,7 +31,10 @@ export default class Root extends Component<Props> {

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

@@ -0,0 +1,18 @@
// @flow
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import DelegationProgress from '../../components/staking/DelegationProgress';
import Layout from '../MainLayout';

@observer
export default class DelegationProgressPage extends Component<any> {
render() {
return (
<Layout>
<div style={{ height: '100%' }}>
<DelegationProgress percentage={10} />
</div>
</Layout>
);
}
}
@@ -95,6 +95,11 @@
"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.delegation.progress.notification.buttonLabel": "!!!Learn more",
"paper.delegation.progress.notification.heading": "!!!Cardano is transitioning to a decentralized system",
"paper.delegation.progress.notification.infoDesc": "!!!Cardano is transitioning from a federated to a decentralized system. During this transition, some new blocks will be produced by nodes operated in a federated way and some by nodes run by ada stakeholders. All rewards will be distributed to ada stakeholders and none to operators of federated nodes.",
"paper.delegation.progress.notification.infoPercentageDesc": "!!!of the system is decentralized and operated by stake pools.",
"paper.delegation.progress.notification.infoPercentageStart": "!!!Currently,",
"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",
@@ -1601,6 +1601,81 @@
],
"path": "source/renderer/app/components/staking/DelegationInfo.json"
},
{
"descriptors": [
{
"defaultMessage": "!!!Cardano is transitioning to a decentralized system",
"description": "Headline for the Decentralisation progress notification.",
"end": {
"column": 3,
"line": 14
},
"file": "source/renderer/app/components/staking/DelegationProgressInfo.js",
"id": "paper.delegation.progress.notification.heading",
"start": {
"column": 11,
"line": 10
}
},
{
"defaultMessage": "!!!Cardano is transitioning from a federated to a decentralized system. During this transition, some new blocks will be produced by nodes operated in a federated way and some by nodes run by ada stakeholders. All rewards will be distributed to ada stakeholders and none to operators of federated nodes.",
"description": "Info description for the Decentralisation progress notification.",
"end": {
"column": 3,
"line": 21
},
"file": "source/renderer/app/components/staking/DelegationProgressInfo.js",
"id": "paper.delegation.progress.notification.infoDesc",
"start": {
"column": 12,
"line": 15
}
},
{
"defaultMessage": "!!!Currently,",
"description": "Percentage info start word for the Decentralisation progress notification.",
"end": {
"column": 3,
"line": 27
},
"file": "source/renderer/app/components/staking/DelegationProgressInfo.js",
"id": "paper.delegation.progress.notification.infoPercentageStart",
"start": {
"column": 23,
"line": 22
}
},
{
"defaultMessage": "!!!of the system is decentralized and operated by stake pools.",
"description": "Percentage info description for the Decentralisation progress notification.",
"end": {
"column": 3,
"line": 34
},
"file": "source/renderer/app/components/staking/DelegationProgressInfo.js",
"id": "paper.delegation.progress.notification.infoPercentageDesc",
"start": {
"column": 22,
"line": 28
}
},
{
"defaultMessage": "!!!Learn more",
"description": "Button Label for the Decentralisation progress notification.",
"end": {
"column": 3,
"line": 39
},
"file": "source/renderer/app/components/staking/DelegationProgressInfo.js",
"id": "paper.delegation.progress.notification.buttonLabel",
"start": {
"column": 15,
"line": 35
}
}
],
"path": "source/renderer/app/components/staking/DelegationProgressInfo.json"
},
{
"descriptors": [
{
@@ -95,6 +95,11 @@
"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.delegation.progress.notification.buttonLabel": "Learn more",
"paper.delegation.progress.notification.heading": "Cardano is transitioning to a decentralized system",
"paper.delegation.progress.notification.infoDesc": "Cardano is transitioning from a federated to a decentralized system. During this transition, some new blocks will be produced by nodes operated in a federated way and some by nodes run by ada stakeholders. All rewards will be distributed to ada stakeholders and none to operators of federated nodes.",
"paper.delegation.progress.notification.infoPercentageDesc": "of the system is decentralized and operated by stake pools.",
"paper.delegation.progress.notification.infoPercentageStart": "Currently,",
"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",
Oops, something went wrong.

0 comments on commit aaeaa6b

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