Skip to content
Permalink
Browse files

[DDW-747] Introduce no-wallets case on the Delegation center screen

  • Loading branch information...
tomothespian committed Jul 11, 2019
1 parent 06c7b3a commit ed5e5ff40e0a67c792594ed469397bbac77509a8
@@ -0,0 +1,59 @@
// @flow
import React, { Component } from 'react';
import { defineMessages, intlShape } from 'react-intl';
import SVGInline from 'react-svg-inline';
import { Button } from 'react-polymorph/lib/components/Button';
import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';

import styles from './DelegationCenterNoWallets.scss';
import icon from '../../../assets/images/attention-big-thin.inline.svg';

const messages = defineMessages({
headLine: {
id: 'staking.delegationCenter.noWallets.headLine',
defaultMessage:
"!!!Delegation center is not available because you don't have any wallets.",
description: '"No wallets" headLine on the Delegation centre Page.',
},
instructions: {
id: 'staking.delegationCenter.noWallets.instructions',
defaultMessage:
'!!!Create a new wallet (or restore an existing one), and come back here to delegate your stake.',
description: '"No wallets" instructions on the Delegation centre Page.',
},
createWalletButtonLabel: {
id: 'staking.delegationCenter.noWallets.createWalletButtonLabel',
defaultMessage: '!!!Create your first wallet',
description:
'Label for "Create New Wallet" button on the Delegation centre Page.',
},
});

type Props = {
onGoToCreateWalletClick: Function,
};

export default class DelegationCenterNoWallets extends Component<Props> {
static contextTypes = {
intl: intlShape.isRequired,
};

render() {
const { intl } = this.context;
const { onGoToCreateWalletClick } = this.props;

return (
<div className={styles.component}>
<SVGInline svg={icon} className={styles.icon} />
<h1>{intl.formatMessage(messages.headLine)}</h1>
<p>{intl.formatMessage(messages.instructions)}</p>
<Button
className="primary"
onClick={onGoToCreateWalletClick}
label={intl.formatMessage(messages.createWalletButtonLabel)}
skin={ButtonSkin}
/>
</div>
);
}
}
@@ -0,0 +1,38 @@
.component {
align-items: center;
color: var(--theme-staking-delegation-center-no-wallets-instructions-color);
display: flex;
flex-direction: column;
font-family: var(--font-medium);
justify-content: center;
line-height: 1.38;
padding: 0 40px;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-130px);
width: 100%;

h1 {
font-weight: 500;
margin-bottom: 11px;
}

p {
font-family: var(--font-light);
}

button {
margin-top: 40px;
}
}

.icon {
margin-bottom: 30px;
& > svg {
width: 66px;
path {
fill: var(--theme-icon-delegation-center-no-wallets);
}
}
}
@@ -4,6 +4,8 @@ import { observer, inject } from 'mobx-react';
import DelegationCenter from '../../components/staking/delegation-center/DelegationCenter';
import DelegationSetupWizardDialogContainer from './dialogs/DelegationSetupWizardDialogContainer';
import DelegationSetupWizardDialog from '../../components/staking/delegation-setup-wizard/DelegationSetupWizardDialog';
import DelegationCenterNoWallets from '../../components/staking/delegation-center/DelegationCenterNoWallets';
import { ROUTES } from '../../routes-config';
import type { InjectedProps } from '../../types/injectedPropsType';

type Props = InjectedProps;
@@ -18,9 +20,21 @@ export default class DelegationCenterPage extends Component<Props> {
actions.dialogs.open.trigger({ dialog: DelegationSetupWizardDialog });
};

handleGoToCreateWalletClick = () => {
this.props.actions.router.goToRoute.trigger({ route: ROUTES.WALLETS.ADD });
};

render() {
const { uiDialogs, staking, wallets } = this.props.stores;

if (!wallets.all.length) {
return (
<DelegationCenterNoWallets
onGoToCreateWalletClick={this.handleGoToCreateWalletClick}
/>
);
}

return (
<DelegationCenter
adaValue={staking.adaValue}
@@ -252,6 +252,9 @@
"staking.delegationCenter.descriptionThirdPart": "!!!this article",
"staking.delegationCenter.heading": "!!!Delegation center",
"staking.delegationCenter.inactiveStakePercentageActivate": "!!!<b>activate {inactiveStakePercentage}% of inactive stake</b>",
"staking.delegationCenter.noWallets.createWalletButtonLabel": "!!!Create your first wallet",
"staking.delegationCenter.noWallets.headLine": "!!!Delegation center is not available because you don't have any wallets.",
"staking.delegationCenter.noWallets.instructions": "!!!Create a new wallet (or restore an existing one), and come back here to delegate your stake.",
"staking.delegationCenter.notDelegated": "!!!Not-delegated",
"staking.delegationCenter.removeDelegation": "!!!Remove delegation",
"staking.delegationCenter.toStakePoolSlug": "!!!To <b>[{delegatedStakePoolSlug}]</b> stake pool",
@@ -1925,6 +1925,53 @@
],
"path": "source/renderer/app/components/staking/delegation-center/DelegationCenterHeader.json"
},
{
"descriptors": [
{
"defaultMessage": "!!!Delegation center is not available because you don't have any wallets.",
"description": "\"No wallets\" headLine on the Delegation centre Page.",
"end": {
"column": 3,
"line": 17
},
"file": "source/renderer/app/components/staking/delegation-center/DelegationCenterNoWallets.js",
"id": "staking.delegationCenter.noWallets.headLine",
"start": {
"column": 12,
"line": 12
}
},
{
"defaultMessage": "!!!Create a new wallet (or restore an existing one), and come back here to delegate your stake.",
"description": "\"No wallets\" instructions on the Delegation centre Page.",
"end": {
"column": 3,
"line": 23
},
"file": "source/renderer/app/components/staking/delegation-center/DelegationCenterNoWallets.js",
"id": "staking.delegationCenter.noWallets.instructions",
"start": {
"column": 16,
"line": 18
}
},
{
"defaultMessage": "!!!Create your first wallet",
"description": "Label for \"Create New Wallet\" button on the Delegation centre Page.",
"end": {
"column": 3,
"line": 29
},
"file": "source/renderer/app/components/staking/delegation-center/DelegationCenterNoWallets.js",
"id": "staking.delegationCenter.noWallets.createWalletButtonLabel",
"start": {
"column": 27,
"line": 24
}
}
],
"path": "source/renderer/app/components/staking/delegation-center/DelegationCenterNoWallets.json"
},
{
"descriptors": [
{
@@ -252,6 +252,9 @@
"staking.delegationCenter.descriptionThirdPart": "this article",
"staking.delegationCenter.heading": "Delegation center",
"staking.delegationCenter.inactiveStakePercentageActivate": "<b>activate {inactiveStakePercentage}% of inactive stake</b>",
"staking.delegationCenter.noWallets.createWalletButtonLabel": "Create your first wallet",
"staking.delegationCenter.noWallets.headLine": "Delegation center is not available because you don't have any wallets.",
"staking.delegationCenter.noWallets.instructions": "Create a new wallet (or restore an existing one), and come back here to delegate your stake.",
"staking.delegationCenter.notDelegated": "Not-delegated",
"staking.delegationCenter.removeDelegation": "Remove delegation",
"staking.delegationCenter.toStakePoolSlug": "To <b>[{delegatedStakePoolSlug}]</b> stake pool",
@@ -252,6 +252,9 @@
"staking.delegationCenter.descriptionThirdPart": "!!!this article",
"staking.delegationCenter.heading": "!!!Delegation center",
"staking.delegationCenter.inactiveStakePercentageActivate": "!!!<b>activate {inactiveStakePercentage}% of inactive stake</b>",
"staking.delegationCenter.noWallets.createWalletButtonLabel": "!!!Create your first wallet",
"staking.delegationCenter.noWallets.headLine": "!!!Delegation center is not available because you don't have any wallets.",
"staking.delegationCenter.noWallets.instructions": "!!!Create a new wallet (or restore an existing one), and come back here to delegate your stake.",
"staking.delegationCenter.notDelegated": "!!!Not-delegated",
"staking.delegationCenter.removeDelegation": "!!!Remove delegation",
"staking.delegationCenter.toStakePoolSlug": "!!!To <b>[{delegatedStakePoolSlug}]</b> stake pool",
@@ -252,6 +252,9 @@
"staking.delegationCenter.descriptionThirdPart": "こちらの記事",
"staking.delegationCenter.heading": "委任センタ=",
"staking.delegationCenter.inactiveStakePercentageActivate": "<b>無効なステークの{inactiveStakePercentage}%を有効化</b>",
"staking.delegationCenter.noWallets.createWalletButtonLabel": "!!!Create your first wallet",
"staking.delegationCenter.noWallets.headLine": "!!!Delegation center is not available because you don't have any wallets.",
"staking.delegationCenter.noWallets.instructions": "!!!Create a new wallet (or restore an existing one), and come back here to delegate your stake.",
"staking.delegationCenter.notDelegated": "委任なし",
"staking.delegationCenter.removeDelegation": "委任を削除する",
"staking.delegationCenter.toStakePoolSlug": "委任先:<b>[{delegatedStakePoolSlug}]</b>ステークプール",
@@ -252,6 +252,9 @@
"staking.delegationCenter.descriptionThirdPart": "!!!this article",
"staking.delegationCenter.heading": "!!!Delegation center",
"staking.delegationCenter.inactiveStakePercentageActivate": "!!!<b>activate {inactiveStakePercentage}% of inactive stake</b>",
"staking.delegationCenter.noWallets.createWalletButtonLabel": "!!!Create your first wallet",
"staking.delegationCenter.noWallets.headLine": "!!!Delegation center is not available because you don't have any wallets.",
"staking.delegationCenter.noWallets.instructions": "!!!Create a new wallet (or restore an existing one), and come back here to delegate your stake.",
"staking.delegationCenter.notDelegated": "!!!Not-delegated",
"staking.delegationCenter.removeDelegation": "!!!Remove delegation",
"staking.delegationCenter.toStakePoolSlug": "!!!To <b>[{delegatedStakePoolSlug}]</b> stake pool",
@@ -252,6 +252,9 @@
"staking.delegationCenter.descriptionThirdPart": "!!!this article",
"staking.delegationCenter.heading": "!!!Delegation center",
"staking.delegationCenter.inactiveStakePercentageActivate": "!!!<b>activate {inactiveStakePercentage}% of inactive stake</b>",
"staking.delegationCenter.noWallets.createWalletButtonLabel": "!!!Create your first wallet",
"staking.delegationCenter.noWallets.headLine": "!!!Delegation center is not available because you don't have any wallets.",
"staking.delegationCenter.noWallets.instructions": "!!!Create a new wallet (or restore an existing one), and come back here to delegate your stake.",
"staking.delegationCenter.notDelegated": "!!!Not-delegated",
"staking.delegationCenter.removeDelegation": "!!!Remove delegation",
"staking.delegationCenter.toStakePoolSlug": "!!!To <b>[{delegatedStakePoolSlug}]</b> stake pool",
@@ -377,13 +377,14 @@ export const CARDANO_THEME_CONFIG = {
'--theme-icon-ada-summary-wallet-pending-confirmation-symbol-color':
'#5e6066',
'--theme-icon-add-wallet-dialog-big-button-color': '#ababab',
'--theme-icon-copy-address-color': '#5e6066',
'--theme-icon-back-button-color': '#5e6066',
'--theme-icon-close-button-color': '#5e6066',
'--theme-icon-connecting-logo-color': '#fafbfc',
'--theme-icon-copy-address-color': '#5e6066',
'--theme-icon-delegation-center-no-wallets': '#5e6066',
'--theme-icon-file-upload-color': '#5e6066',
'--theme-icon-transactions-ada-symbol-color': '#5e6066',
'--theme-icon-syncing-logo-color': '#5e6066',
'--theme-icon-connecting-logo-color': '#fafbfc',
'--theme-icon-transactions-ada-symbol-color': '#5e6066',
'--theme-icon-transaction-type-color': '#fafbfc',
},
input: {
@@ -626,6 +627,8 @@ export const CARDANO_THEME_CONFIG = {
'--theme-staking-delegation-center-gear-icon-fill-color':
'rgba(94, 96, 102, 0.5)',
'--theme-staking-delegation-center-gear-icon-fill-color-active': '#5e6066',
'--theme-staking-delegation-center-no-wallets-instructions-color':
'#5e6066',
'--theme-staking-info-learn-more-button-color': '#fafbfc',
'--theme-staking-info-learn-more-icon-color': 'rgba(250, 251, 252, 1)',
'--theme-staking-learn-more-button-color': '#fafbfc',
@@ -378,13 +378,14 @@ export const DARK_BLUE_THEME_CONFIG = {
'#e9f4fe',
'--theme-icon-add-wallet-dialog-big-button-color':
'rgba(233, 244, 254, 0.8)',
'--theme-icon-copy-address-color': '#8793a1',
'--theme-icon-back-button-color': '#e9f4fe',
'--theme-icon-close-button-color': '#e9f4fe',
'--theme-icon-connecting-logo-color': '#fafbfc',
'--theme-icon-copy-address-color': '#8793a1',
'--theme-icon-file-upload-color': '#8793a1',
'--theme-icon-transactions-ada-symbol-color': '#e9f4fe',
'--theme-icon-delegation-center-no-wallets': '#e9f4fe',
'--theme-icon-syncing-logo-color': '#e9f4fe',
'--theme-icon-connecting-logo-color': '#fafbfc',
'--theme-icon-transactions-ada-symbol-color': '#e9f4fe',
'--theme-icon-transaction-type-color': '#fafbfc',
},
input: {
@@ -627,6 +628,8 @@ export const DARK_BLUE_THEME_CONFIG = {
'--theme-staking-delegation-center-gear-icon-fill-color':
'rgba(233, 244, 254, 0.5)',
'--theme-staking-delegation-center-gear-icon-fill-color-active': '#e9f4fe',
'--theme-staking-delegation-center-no-wallets-instructions-color':
'#e9f4fe',
'--theme-staking-info-learn-more-button-color': '#fafbfc',
'--theme-staking-info-learn-more-icon-color': 'rgba(250, 251, 252, 1)',
'--theme-staking-learn-more-button-color': '#fafbfc',
@@ -375,13 +375,14 @@ export const LIGHT_BLUE_THEME_CONFIG = {
'--theme-icon-ada-summary-wallet-pending-confirmation-symbol-color':
'#5e6066',
'--theme-icon-add-wallet-dialog-big-button-color': '#8a98ab',
'--theme-icon-copy-address-color': '#5e6066',
'--theme-icon-back-button-color': '#5e6066',
'--theme-icon-close-button-color': '#5e6066',
'--theme-icon-connecting-logo-color': '#fafbfc',
'--theme-icon-copy-address-color': '#5e6066',
'--theme-icon-delegation-center-no-wallets': '#5e6066',
'--theme-icon-file-upload-color': '#5e6066',
'--theme-icon-transactions-ada-symbol-color': '#5e6066',
'--theme-icon-syncing-logo-color': '#5e6066',
'--theme-icon-connecting-logo-color': '#fafbfc',
'--theme-icon-transactions-ada-symbol-color': '#5e6066',
'--theme-icon-transaction-type-color': '#fafbfc',
},
input: {
@@ -622,6 +623,8 @@ export const LIGHT_BLUE_THEME_CONFIG = {
'--theme-staking-delegation-center-gear-icon-fill-color':
'rgba(94, 96, 102, 0.5)',
'--theme-staking-delegation-center-gear-icon-fill-color-active': '#5e6066',
'--theme-staking-delegation-center-no-wallets-instructions-color':
'#5e6066',
'--theme-staking-info-learn-more-button-color': '#fafbfc',
'--theme-staking-info-learn-more-icon-color': 'rgba(250, 251, 252, 1)',
'--theme-staking-learn-more-button-color': '#fafbfc',
@@ -532,13 +532,14 @@ export const createDaedalusComponentsTheme = (
'--theme-icon-add-wallet-dialog-big-button-color': `${
background.primary.darker
}`,
'--theme-icon-copy-address-color': `${text.primary}`,
'--theme-icon-back-button-color': `${text.primary}`,
'--theme-icon-close-button-color': `${text.primary}`,
'--theme-icon-connecting-logo-color': `${text.secondary}`,
'--theme-icon-copy-address-color': `${text.primary}`,
'--theme-icon-delegation-center-no-wallets': `${text.primary}`,
'--theme-icon-file-upload-color': `${text.primary}`,
'--theme-icon-transactions-ada-symbol-color': `${text.primary}`,
'--theme-icon-syncing-logo-color': `${text.primary}`,
'--theme-icon-connecting-logo-color': `${text.secondary}`,
'--theme-icon-transactions-ada-symbol-color': `${text.primary}`,
'--theme-icon-transaction-type-color': '#fafbfc',
},
input: {
@@ -923,6 +924,9 @@ export const createDaedalusComponentsTheme = (
'--theme-staking-delegation-center-gear-icon-fill-color-active': `${
text.primary
}`,
'--theme-staking-delegation-center-no-wallets-instructions-color': `${
text.primary
}`,
},
support: {
'--theme-support-settings-item-color': `${text.primary}`,
@@ -19,6 +19,7 @@ import DelegationStepsChooseStakePoolDialog from '../../source/renderer/app/comp
import DelegationStepsNotAvailableDialog from '../../source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsNotAvailableDialog';
import DelegationStepsConfirmationDialog from '../../source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog';
import DelegationStepsActivationDialog from '../../source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsActivationDialog';
import DelegationCenterNoWallets from '../../source/renderer/app/components/staking/delegation-center/DelegationCenterNoWallets';

import { StakePoolsStory } from './Staking-StakePools.stories';
import { StakingRewardsStory } from './Staking-Rewards.stories';
@@ -154,6 +155,12 @@ storiesOf('Staking', module)
id: 'delegation-center',
})

.add('Delegation Center - No Wallets', () => (
<DelegationCenterNoWallets
onGoToCreateWalletClick={action('onGoToCreateWalletClick')}
/>
))

.add(pageNames['stake-pools'], StakePoolsStory, { id: 'stake-pools' })

.add(pageNames.rewards, StakingRewardsStory, { id: 'rewards' })

0 comments on commit ed5e5ff

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