Skip to content
Permalink
Browse files

[DDW-745] Staking screen improvements (#1461)

* [DDW-745] Add missing paper wallets menu item

* [DDW-745] Remove unused translations key for state directory copy path button

* [DDW-745] Improve stake pool search icon position

* [DDW-745] Add dummy data for staking rewards

* [DDW-745] Add untracked json file

* [DDW-745] Epochs dummy data, type ANY to proper flow type and small style improvement

* [DDW-745] Imprve button loading spinner theme colors

* [DDW-745] Fix missing active navigation item in the Staking screen navigation

* [DDW-745] Introduce delegation wizard on Stake Pools screen and passing preselected wallet/stake-pool based on the wizard starting point

* [DDW-745] Select box arrow z-index position fix

* [DDW-745] Fix Paper Wallet abort roken dialog

* [DDW-745] Remove buttons external link icon transparency

* [DDW-745] Sidebar Storybook stories improvement

* [DDW-745] CHANGELOG update

* [DDW-745] Run translation manager
  • Loading branch information...
tomothespian authored and nikolaglumac committed Jul 11, 2019
1 parent 774b40f commit ff9816c5c9e2b1accd96bdeac428749a81aa6d83
Showing with 684 additions and 431 deletions.
  1. +1 −0 CHANGELOG.md
  2. +22 −0 source/renderer/app/api/staking/types.js
  3. +1 −4 source/renderer/app/components/staking/delegation-center/DelegationCenter.js
  4. +6 −2 source/renderer/app/components/staking/delegation-center/WalletRow.js
  5. +6 −1 source/renderer/app/components/staking/delegation-setup-wizard/DelegationSetupWizardDialog.js
  6. +11 −10 ...e/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
  7. +3 −2 source/renderer/app/components/staking/epochs/StakingEpochs.js
  8. +1 −0 source/renderer/app/components/staking/epochs/StakingEpochs.scss
  9. +6 −5 source/renderer/app/components/staking/epochs/StakingEpochsCurrentEpochData.js
  10. +8 −2 source/renderer/app/components/staking/epochs/StakingEpochsDataTable.js
  11. +6 −5 source/renderer/app/components/staking/epochs/StakingEpochsPreviousEpochData.js
  12. +1 −1 source/renderer/app/components/staking/epochs/helpers.js
  13. +9 −1 source/renderer/app/components/staking/layouts/StakingWithNavigation.js
  14. +4 −1 source/renderer/app/components/staking/navigation/StakingNavigation.js
  15. +7 −10 source/renderer/app/components/staking/rewards/StakingRewards.js
  16. +1 −0 source/renderer/app/components/staking/rewards/StakingRewards.scss
  17. +8 −2 source/renderer/app/components/staking/stake-pools/StakePools.js
  18. +1 −1 source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss
  19. +0 −5 source/renderer/app/components/status/DaedalusDiagnostics.js
  20. +1 −0 source/renderer/app/components/wallet/ada-redemption/AdaRedemptionDisclaimer.scss
  21. +7 −6 source/renderer/app/components/wallet/ada-redemption/AdaRedemptionSuccessOverlay.scss
  22. +1 −0 source/renderer/app/components/widgets/Dialog.scss
  23. +1 −0 source/renderer/app/config/sidebarConfig.js
  24. +98 −0 source/renderer/app/config/stakingCurrentEpoch.dummy.json
  25. +108 −0 source/renderer/app/config/stakingPreviousEpoch.dummy.json
  26. +104 −0 source/renderer/app/config/stakingRewards.dummy.json
  27. +14 −8 source/renderer/app/containers/staking/DelegationCenterPage.js
  28. +25 −7 source/renderer/app/containers/staking/StakePoolsListPage.js
  29. +22 −0 source/renderer/app/containers/staking/Staking.js
  30. +9 −6 source/renderer/app/containers/staking/StakingEpochsPage.js
  31. +3 −1 source/renderer/app/containers/staking/StakingRewardsPage.js
  32. +23 −9 source/renderer/app/containers/staking/dialogs/DelegationSetupWizardDialogContainer.js
  33. +0 −1 source/renderer/app/i18n/locales/de-DE.json
  34. +118 −132 source/renderer/app/i18n/locales/defaultMessages.json
  35. +0 −1 source/renderer/app/i18n/locales/en-US.json
  36. +0 −1 source/renderer/app/i18n/locales/hr-HR.json
  37. +0 −1 source/renderer/app/i18n/locales/ja-JP.json
  38. +0 −1 source/renderer/app/i18n/locales/ko-KR.json
  39. +0 −1 source/renderer/app/i18n/locales/zh-CN.json
  40. +7 −1 source/renderer/app/stores/StakingStore.js
  41. +3 −3 source/renderer/app/themes/daedalus/cardano.js
  42. +3 −3 source/renderer/app/themes/daedalus/dark-blue.js
  43. +3 −3 source/renderer/app/themes/daedalus/light-blue.js
  44. +6 −0 source/renderer/app/themes/overrides/ButtonOverrides.scss
  45. +1 −1 source/renderer/app/themes/overrides/ModalOverrides.scss
  46. +1 −0 source/renderer/app/themes/overrides/SelectOverrides.scss
  47. +4 −5 source/renderer/app/themes/utils/createTheme.js
  48. +4 −13 storybook/stories/Sidebar.stories.js
  49. +9 −112 storybook/stories/Staking-Epochs.stories.js
  50. +2 −62 storybook/stories/Staking-Rewards.stories.js
  51. +2 −0 storybook/stories/Staking-StakePools.stories.js
  52. +3 −1 storybook/stories/Staking.stories.js
@@ -34,6 +34,7 @@ Changelog

### Fixes

- Fixed Staking screen ([PR 1461](https://github.com/input-output-hk/daedalus/pull/1461))
- Improved small UI and copy elements ([PR 1459](https://github.com/input-output-hk/daedalus/pull/1459))
- Fixed shutting down screen top priority ([PR 1428](https://github.com/input-output-hk/daedalus/pull/1428))
- Fixed screen flashes during Daedalus loading ([PR 1444](https://github.com/input-output-hk/daedalus/pull/1444))
@@ -12,3 +12,25 @@ export type StakePool = {
retiring?: Date,
url: string,
};

export type Reward = {
date: string,
wallet: string,
amount: number,
pool: StakePool,
};

export type EpochData = {
pool: StakePool,
slotsElected: Array<number>,
performance?: Array<number>,
sharedRewards?: Array<number>,
};

export type Epoch = {
id: number,
name: string,
progress?: number,
endsAt?: string,
data: Array<EpochData>,
};
@@ -1,6 +1,5 @@
// @flow
import React, { Component, Fragment } from 'react';
import type { Node } from 'react';
import { observer } from 'mobx-react';
import BigNumber from 'bignumber.js';
import DelegationCenterHeader from './DelegationCenterHeader';
@@ -11,20 +10,18 @@ type Props = {
adaValue: BigNumber,
percentage: number,
wallets: Array<Wallet>,
children?: Node,
onDelegate: Function,
};

@observer
export default class DelegationCenter extends Component<Props> {
render() {
const { adaValue, percentage, wallets, children, onDelegate } = this.props;
const { adaValue, percentage, wallets, onDelegate } = this.props;

return (
<Fragment>
<DelegationCenterHeader adaValue={adaValue} percentage={percentage} />
<DelegationCenterBody wallets={wallets} onDelegate={onDelegate} />
{children}
</Fragment>
);
}
@@ -89,6 +89,11 @@ export default class WalletRow extends Component<Props> {
intl: intlShape.isRequired,
};

onDelegate = () => {
const { wallet } = this.props;
this.props.onDelegate(wallet.id);
};

render() {
const { intl } = this.context;
const {
@@ -100,7 +105,6 @@ export default class WalletRow extends Component<Props> {
delegatedStakePool,
},
index,
onDelegate,
} = this.props;

const inactiveStakePercentageValue = inactiveStakePercentage || 0;
@@ -184,7 +188,7 @@ export default class WalletRow extends Component<Props> {
<span
className={styles.actionLink}
role="presentation"
onClick={onDelegate}
onClick={this.onDelegate}
>
{delegate}
</span>
@@ -28,6 +28,7 @@ type Props = {
onContinue: Function,
onLearnMoreClick: Function,
onSelectWallet: Function,
onSelectPool: Function,
stepsList: Array<string>,
wallets: Array<DelegationWalletData>,
minDelegationFunds: number,
@@ -36,6 +37,7 @@ type Props = {
onOpenExternalLink: Function,
currentTheme: string,
selectedWallet: ?DelegationWalletData,
selectedPool: ?StakePool,
};

@observer
@@ -51,6 +53,7 @@ export default class DelegationSetupWizardDialog extends Component<Props> {
onContinue,
onLearnMoreClick,
onSelectWallet,
onSelectPool,
stepsList,
wallets,
minDelegationFunds,
@@ -59,6 +62,7 @@ export default class DelegationSetupWizardDialog extends Component<Props> {
onOpenExternalLink,
currentTheme,
selectedWallet,
selectedPool,
} = this.props;

const selectedWalletHasPassword = get(selectedWallet, 'hasPassword', false);
@@ -95,9 +99,10 @@ export default class DelegationSetupWizardDialog extends Component<Props> {
stakePoolsList={stakePoolsList}
onOpenExternalLink={onOpenExternalLink}
currentTheme={currentTheme}
selectedPool={selectedPool}
onClose={onClose}
onContinue={onContinue}
onBack={onBack}
onSelectPool={onSelectPool}
/>
);
break;
@@ -80,9 +80,10 @@ type Props = {
stakePoolsList: Array<StakePool>,
onOpenExternalLink: Function,
currentTheme: string,
selectedPool: ?StakePool,
onClose: Function,
onContinue: Function,
onBack: Function,
onSelectPool: Function,
};

type State = {
@@ -91,12 +92,6 @@ type State = {
selectedPoolId: ?number,
};

const initialState = {
searchValue: '',
selectedList: null,
selectedPoolId: null,
};

export default class DelegationStepsChooseStakePoolDialog extends Component<
Props,
State
@@ -106,7 +101,9 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
};

state = {
...initialState,
searchValue: '',
selectedList: null,
selectedPoolId: get(this.props, ['selectedPool', 'id'], null),
};

searchInput: ?HTMLElement = null;
@@ -125,6 +122,11 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
this.setState({ selectedPoolId: null });
};

onAcceptPool = () => {
const { selectedPoolId } = this.state;
this.props.onSelectPool(selectedPoolId);
};

render() {
const { intl } = this.context;
const {
@@ -134,7 +136,6 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
onOpenExternalLink,
currentTheme,
onClose,
onContinue,
onBack,
} = this.props;
const { searchValue, selectedList, selectedPoolId } = this.state;
@@ -143,7 +144,7 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
{
className: 'continueButton',
label: intl.formatMessage(messages.continueButtonLabel),
onClick: onContinue,
onClick: this.onAcceptPool,
primary: true,
disabled: !selectedPoolId,
},
@@ -9,6 +9,7 @@ import LoadingSpinner from '../../widgets/LoadingSpinner';
import StakingEpochsCurrentEpochData from './StakingEpochsCurrentEpochData';
import StakingEpochsPreviousEpochData from './StakingEpochsPreviousEpochData';
import { SELECTED_EPOCH_OPTIONS, humanizeDurationToShort } from './helpers.js';
import type { EpochData } from '../../../api/staking/types';
import styles from './StakingEpochs.scss';

const messages = defineMessages({
@@ -26,11 +27,11 @@ const messages = defineMessages({

type Props = {
currentEpochName: string,
currentEpochData: any,
currentEpochData: EpochData,
currentEpochEndDateTime: string,
currentEpochProgress: number,
previousEpochName: string,
previousEpochData: any,
previousEpochData: EpochData,
isLoading: boolean,
};

@@ -172,6 +172,7 @@
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;

.stakePoolReference {
color: var(--theme-staking-table-body-highlighted-text-color);
@@ -11,6 +11,7 @@ import {
hasDataExisting,
sortData,
} from './helpers.js';
import type { EpochData } from '../../../api/staking/types';
import styles from './StakingEpochs.scss';

const messages = defineMessages({
@@ -27,7 +28,7 @@ const messages = defineMessages({
});

type Props = {
currentEpochData: any,
currentEpochData: EpochData,
isLoading: boolean,
};

@@ -96,18 +97,18 @@ export default class StakingEpochsCurrentEpochData extends Component<
const tableBody = (
<tbody>
{map(sortedData, (row, key) => {
const poolCategory = get(row, ['pool', 'category'], '');
const poolTitle = get(row, ['pool', 'title'], '');
const poolSlug = get(row, ['pool', 'slug'], '');
const poolName = get(row, ['pool', 'name'], '');
const slotsElected = get(row, 'slotsElected', [0]);

return (
<tr key={key}>
<td>
<p>
<span className={styles.stakePoolReference}>
[{poolCategory}]
[{poolSlug}]
</span>{' '}
{poolTitle}
{poolName}
</p>
</td>
<td>
@@ -1,15 +1,21 @@
// @flow
import React, { Component } from 'react';
import type { Node } from 'react';
import { observer } from 'mobx-react';
import SVGInline from 'react-svg-inline';
import { map } from 'lodash';
import classNames from 'classnames';
import sortIcon from '../../../assets/images/ascending.inline.svg';
import styles from './StakingEpochs.scss';

type TableHeaders = {
name: string,
title: string,
};

type Props = {
tableHeaders: any,
tableBody: any,
tableHeaders: TableHeaders,
tableBody: Node,
order: string,
sortBy: string,
handleDataSort: Function,
@@ -11,6 +11,7 @@ import {
hasDataExisting,
sortData,
} from './helpers.js';
import type { EpochData } from '../../../api/staking/types';
import styles from './StakingEpochs.scss';
import globalMessages from '../../../i18n/global-messages';

@@ -48,7 +49,7 @@ const messages = defineMessages({
});

type Props = {
previousEpochData: any,
previousEpochData: EpochData,
isLoading: boolean,
};

@@ -117,8 +118,8 @@ export default class StakingEpochsPreviousEpochData extends Component<
const tableBody = (
<tbody>
{map(sortedData, (row, key) => {
const poolCategory = get(row, ['pool', 'category'], '');
const poolTitle = get(row, ['pool', 'title'], '');
const poolSlug = get(row, ['pool', 'slug'], '');
const poolName = get(row, ['pool', 'name'], '');
const slotsElected = get(row, 'slotsElected', [0, 0]);
const performance = get(row, 'performance', [0, 0, 0]);
const sharedRewards = get(row, 'sharedRewards', [0, 0]);
@@ -128,9 +129,9 @@ export default class StakingEpochsPreviousEpochData extends Component<
<td>
<p>
<span className={styles.stakePoolReference}>
[{poolCategory}]
[{poolSlug}]
</span>{' '}
{poolTitle}
{poolName}
</p>
</td>
<td>
@@ -46,7 +46,7 @@ export const sortData = (data, order, sortBy) => {
let realSortBy = '';

if (sortBy === 'pool') {
realSortBy = 'pool.title';
realSortBy = 'pool.name';
} else if (sortBy === 'slotsElected') {
realSortBy = 'slotsElected[0]';
} else if (sortBy === 'sharedRewards') {
@@ -9,16 +9,24 @@ type Props = {
children?: Node,
activeItem: string,
onNavItemClick: Function,
isActiveNavItem: Function,
};

@observer
export default class StakingWithNavigation extends Component<Props> {
render() {
const { children, onNavItemClick, activeItem } = this.props;
const {
children,
onNavItemClick,
activeItem,
isActiveNavItem,
} = this.props;

return (
<div className={styles.component}>
<div className={styles.navigation}>
<StakingNavigation
isActiveNavItem={isActiveNavItem}
onNavItemClick={onNavItemClick}
activeItem={activeItem}
/>
@@ -37,6 +37,7 @@ const messages = defineMessages({
type Props = {
activeItem: string,
onNavItemClick: Function,
isActiveNavItem: Function,
};

@observer
@@ -46,11 +47,13 @@ export default class StakingNavigation extends Component<Props> {
};

render() {
const { onNavItemClick, activeItem } = this.props;
const { onNavItemClick, activeItem, isActiveNavItem } = this.props;
const { intl } = this.context;

return (
<Navigation
activeItem={activeItem}
isActiveNavItem={isActiveNavItem}
onNavItemClick={onNavItemClick}
items={[
{

0 comments on commit ff9816c

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