Skip to content

Commit

Permalink
[DDW-1184] Implement stake pool saturation and desirability attributes (
Browse files Browse the repository at this point in the history
#1826)

* [DDW-1184] Adds saturation to stake pools Tooltip

* [DDW-1184] Implement saturation UI

* [DDW-1184] Handle no saturation

* [DDW-1184] Update dummy stake data

* [DDW-1184] Hide saturation bar on selected state
  • Loading branch information
nikolaglumac authored Jan 21, 2020
1 parent 067fc44 commit c6059c5
Show file tree
Hide file tree
Showing 27 changed files with 4,587 additions and 4,063 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ Changelog

### Features

- Added stake pools saturation info and ordering based on desirability ([PR 1826](https://github.com/input-output-hk/daedalus/pull/1826))
- Implemented "Resync wallet" feature ([PR 1822](https://github.com/input-output-hk/daedalus/pull/1822))
- Improved the paper wallet recovery phrase validation ([PR 1818](https://github.com/input-output-hk/daedalus/pull/1818))
- Implemented React-Polymorph "Link" component ([PR 1799](https://github.com/input-output-hk/daedalus/pull/1799))
Expand All @@ -23,6 +24,7 @@ Changelog

### Chores

- Updated `cardano-wallet` to revision `e6316404` ([PR 1826](https://github.com/input-output-hk/daedalus/pull/1826))
- Updated `cardano-wallet` to revision `254575e4` which includes Jormungandr 0.8.6 ([PR 1821](https://github.com/input-output-hk/daedalus/pull/1821))
- Improved delete wallet text copy ([PR 1819](https://github.com/input-output-hk/daedalus/pull/1819))
- Updated checkboxes, radio buttons and switchers sizes and borders ([PR 1793](https://github.com/input-output-hk/daedalus/pull/1793))
Expand Down
6 changes: 3 additions & 3 deletions nix/sources.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@
"homepage": null,
"owner": "input-output-hk",
"repo": "cardano-wallet",
"rev": "254575e4d360780ecf53eb4ed63b72176faaa800",
"sha256": "0jh1370pbpgi7rldkyriw1xp9ambzy35p6b1m088vfsdy6ddinwh",
"rev": "e631640443eee06f02f02ada2db2b97efb0397b3",
"sha256": "0w1gxbcga9a43yn2805hbs24dmr6ah03wcsz12c87nlpsgnamiiq",
"type": "tarball",
"url": "https://github.com/input-output-hk/cardano-wallet/archive/254575e4d360780ecf53eb4ed63b72176faaa800.tar.gz",
"url": "https://github.com/input-output-hk/cardano-wallet/archive/e631640443eee06f02f02ada2db2b97efb0397b3.tar.gz",
"url_template": "https://github.com/<owner>/<repo>/archive/<rev>.tar.gz",
"version": "v2019-12-16"
},
Expand Down
2 changes: 2 additions & 0 deletions source/renderer/app/api/api.js
Original file line number Diff line number Diff line change
Expand Up @@ -1706,6 +1706,7 @@ const _createStakePoolFromServerData = action(
cost,
margin: profitMargin,
metadata,
saturation,
} = stakePool;
const {
controlled_stake: controlledStake,
Expand Down Expand Up @@ -1740,6 +1741,7 @@ const _createStakePoolFromServerData = action(
profitMargin: profitMarginPercentage,
ranking: index + 1,
retiring: null,
saturation: saturation * 100,
});
}
);
Expand Down
2 changes: 2 additions & 0 deletions source/renderer/app/api/staking/types.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ export type AdaApiStakePool = {
homepage: string,
pledge_address: string,
},
saturation: number,
desirability: number,
};
export type AdaApiStakePools = Array<AdaApiStakePool>;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import SVGInline from 'react-svg-inline';
import classnames from 'classnames';
import clockIcon from '../../../assets/images/clock.inline.svg';
import styles from './StakePoolThumbnail.scss';
import { getColorFromRange } from '../../../utils/colors';
import { getColorFromRange, getSaturationColor } from '../../../utils/colors';
import StakePoolTooltip from './StakePoolTooltip';
import checkmarkImage from '../../../assets/images/check-w.inline.svg';
import StakePool from '../../../domains/StakePool';
Expand Down Expand Up @@ -106,7 +106,7 @@ export class StakePoolThumbnail extends Component<Props, State> {
} = this.props;
const { top, left } = this.state;

const { ranking, ticker, retiring, id } = stakePool;
const { ranking, ticker, retiring, id, saturation } = stakePool;
const color = getColorFromRange(ranking, numberOfStakePools);
const isDisabled = disabledStakePoolId === id;

Expand All @@ -122,6 +122,11 @@ export class StakePoolThumbnail extends Component<Props, State> {
isDisabled ? styles.disabled : null,
]);

const saturationClassnames = classnames([
styles.saturationBar,
styles[getSaturationColor(saturation)],
]);

return (
<div
className={componentClassnames}
Expand All @@ -147,9 +152,18 @@ export class StakePoolThumbnail extends Component<Props, State> {
/>
</div>
) : (
<div className={styles.ranking} style={{ color }}>
{ranking}
</div>
<>
<div className={styles.ranking} style={{ color }}>
{ranking}
</div>
<div className={saturationClassnames}>
<span
style={{
width: `${parseFloat(saturation.toFixed(2))}%`,
}}
/>
</div>
</>
)}

{retiring && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
border-radius: 4px;
cursor: pointer;
height: 71px;
padding: 12px 0 0;
padding: 9px 0 0;
width: 80px;

&.disabled {
Expand All @@ -39,7 +39,7 @@
font-size: 14px;
letter-spacing: -0.5px;
line-height: 1;
margin: 0 0 4px;
margin: 0 0 1px;
text-align: center;
}

Expand All @@ -49,6 +49,41 @@
text-align: center;
}

.saturationBar {
background: var(--theme-staking-stake-pool-saturation-background-color);
border-radius: 2px;
height: 5px;
margin: 2px auto 0;
overflow: hidden;
position: relative;
width: 40px;

span {
border-radius: 2px;
bottom: 0;
height: inherit;
left: 0;
position: absolute;
top: 0;
}

&.green span {
background: var(--theme-staking-stake-pool-saturation-green-color);
}

&.orange span {
background: var(--theme-staking-stake-pool-saturation-orange-color);
}

&.red span {
background: var(--theme-staking-stake-pool-saturation-red-color);
}

&.yellow span {
background: var(--theme-staking-stake-pool-saturation-yellow-color);
}
}

.checkmarkWrapper {
margin-top: 10px;
text-align: center;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { LinkSkin } from 'react-polymorph/lib/skins/simple/LinkSkin';
import styles from './StakePoolTooltip.scss';
import StakePool from '../../../domains/StakePool';
import closeCross from '../../../assets/images/close-cross.inline.svg';
import { getColorFromRange } from '../../../utils/colors';
import { getColorFromRange, getSaturationColor } from '../../../utils/colors';
import { formattedWalletAmount, shortNumber } from '../../../utils/formatters';
import { rangeMap } from '../../../utils/rangeMap';
import {
Expand Down Expand Up @@ -63,6 +63,11 @@ const messages = defineMessages({
defaultMessage: '!!!Retirement in {retirementFromNow}',
description: '"Retirement" for the Stake Pools Tooltip page.',
},
saturation: {
id: 'staking.stakePools.tooltip.saturation',
defaultMessage: '!!!Saturation:',
description: '"Saturation" for the Stake Pools Tooltip page.',
},
// cost: {
// id: 'staking.stakePools.tooltip.cost',
// defaultMessage: '!!!Operating Costs:',
Expand Down Expand Up @@ -390,6 +395,7 @@ export default class StakePoolTooltip extends Component<Props, State> {
pledgeAddress,
cost,
profitMargin,
saturation,
} = stakePool;

const componentClassnames = classnames([
Expand All @@ -407,6 +413,11 @@ export default class StakePoolTooltip extends Component<Props, State> {
const reverse = true;
const retirementFromNow = retiring ? moment(retiring).fromNow(true) : '';

const saturationBarClassnames = classnames([
styles.saturationBar,
styles[getSaturationColor(saturation)],
]);

return (
<div
className={componentClassnames}
Expand Down Expand Up @@ -440,6 +451,21 @@ export default class StakePoolTooltip extends Component<Props, State> {
/>

<dl className={styles.table}>
<dt className={styles.saturationLabel}>
{intl.formatMessage(messages.saturation)}
</dt>
<dd className={styles.saturationValue}>
<span>
<span className={saturationBarClassnames}>
<span
style={{
width: `${parseFloat(saturation.toFixed(2))}%`,
}}
/>
</span>
{`${parseFloat(saturation.toFixed(2))}%`}
</span>
</dd>
<dt>{intl.formatMessage(messages.ranking)}</dt>
<dd className={styles.ranking}>
<span
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -248,3 +248,55 @@
color: var(--theme-staking-stake-pool-tooltip-neutral-text-color);
}
}

.saturationLabel {
width: 50% !important;
}

.saturationValue {
width: 50% !important;

& > span {
background: var(
--theme-staking-stake-pool-tooltip-neutral-background-color
);
white-space: nowrap;
}

.saturationBar {
background: var(--theme-staking-stake-pool-saturation-background-color);
border-radius: 2px;
height: 5px;
margin: 0 6px 0 0;
overflow: hidden;
padding: 0;
position: relative;
width: 40px;

span {
border-radius: 2px;
bottom: 0;
height: inherit;
left: 0;
padding: 0;
position: absolute;
top: 0;
}

&.green span {
background: var(--theme-staking-stake-pool-saturation-green-color);
}

&.orange span {
background: var(--theme-staking-stake-pool-saturation-orange-color);
}

&.red span {
background: var(--theme-staking-stake-pool-saturation-red-color);
}

&.yellow span {
background: var(--theme-staking-stake-pool-saturation-yellow-color);
}
}
}
6 changes: 6 additions & 0 deletions source/renderer/app/config/generateStakePoolFakeData.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@ function generatStakePoolsFakeData() {
const profitMargin = faker.random.number(100);
const ranking = i;
const retiring = null;
const saturation = faker.random.number({
min: 0,
max: 120,
precision: 0.01,
});
const ticker = faker.helpers.replaceSymbols('????');
stakePools.push({
controlledStake,
Expand All @@ -43,6 +48,7 @@ function generatStakePoolsFakeData() {
profitMargin,
ranking,
retiring,
saturation,
ticker,
});
}
Expand Down
Loading

0 comments on commit c6059c5

Please sign in to comment.