Merge branch 'develop' into feature/ddw-16-table-comparison-view-for-…

…stake-pools # Conflicts: # source/renderer/app/components/staking/stake-pools/StakePools.js # source/renderer/app/i18n/locales/defaultMessages.json
input-output-hk · Oct 20, 2020 · 0c1b952 · 0c1b952
2 parents 9ed94e4 + fa4b4ea
commit 0c1b952
Show file tree

Hide file tree

Showing 17 changed files with 529 additions and 144 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ Changelog
 - Added stake pools list view ([PR 2186](https://github.com/input-output-hk/daedalus/pull/2186))
 - Re-enabled stake pool saturation info ([PR 2200](https://github.com/input-output-hk/daedalus/pull/2200))
 - Implemented the wallet migration leftovers handling ([PR 2178](https://github.com/input-output-hk/daedalus/pull/2178))
+- Implemented hiding ranking info for pools without non myopic member rewards on the stake pool tooltip panel ([PR 2209](https://github.com/input-output-hk/daedalus/pull/2209))
 
 ### Fixes
 

diff --git a/source/renderer/app/api/api.js b/source/renderer/app/api/api.js
@@ -1949,11 +1949,17 @@ const _createStakePoolFromServerData = action(
     const {
       relative_stake: relativeStake,
       produced_blocks: producedBlocks,
+      non_myopic_member_rewards: nonMyopicMemberRewards,
       saturation,
     } = metrics; // eslint-disable-line
     const { name, description = '', ticker, homepage } = metadata;
     const relativeStakePercentage = get(relativeStake, 'quantity', 0);
     const producedBlocksCount = get(producedBlocks, 'quantity', 0);
+    const nonMyopicMemberRewardsQuantity = get(
+      nonMyopicMemberRewards,
+      'quantity',
+      0
+    );
     const costQuantity = get(cost, 'quantity', 0).toString();
     const pledgeQuantity = get(pledge, 'quantity', 0).toString();
     const profitMarginPercentage = get(profitMargin, 'quantity', 0);
@@ -1962,6 +1968,7 @@ const _createStakePoolFromServerData = action(
       id,
       relativeStake: relativeStakePercentage,
       producedBlocks: producedBlocksCount,
+      nonMyopicMemberRewards: nonMyopicMemberRewardsQuantity,
       ticker,
       homepage,
       cost: new BigNumber(costQuantity).dividedBy(LOVELACES_PER_ADA),

diff --git a/source/renderer/app/api/staking/types.js b/source/renderer/app/api/staking/types.js
@@ -13,7 +13,7 @@ export type AdaApiStakePool = {
   metrics: {
     non_myopic_member_rewards: {
       quantity: number,
-      unit: 'block',
+      unit: 'lovelace',
     },
     produced_blocks: {
       quantity: number,

diff --git a/...er/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js b/...er/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
@@ -21,7 +21,7 @@ import commonStyles from './DelegationSteps.scss';
 import styles from './DelegationStepsChooseStakePoolDialog.scss';
 import Wallet from '../../../domains/Wallet';
 import ThumbSelectedPool from '../widgets/ThumbSelectedPool';
-
+import { IS_RANKING_DATA_AVAILABLE } from '../../../config/stakingConfig';
 import StakePool from '../../../domains/StakePool';
 
 const messages = defineMessages({
@@ -308,6 +308,11 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
       searchValue
     );
 
+    const numberOfRankedStakePools: number = stakePoolsList.filter(
+      (stakePool) =>
+        IS_RANKING_DATA_AVAILABLE && stakePool.nonMyopicMemberRewards
+    ).length;
+
     return (
       <Dialog
         title={intl.formatMessage(messages.title)}
@@ -343,7 +348,7 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
           <div className={styles.selectStakePoolWrapper}>
             <ThumbSelectedPool
               stakePool={selectedPool}
-              numberOfStakePools={stakePoolsList.length}
+              numberOfRankedStakePools={numberOfRankedStakePools}
               alreadyDelegated={selectedPool && !canSubmit}
             />
 
@@ -368,7 +373,7 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
               containerClassName="Dialog_content"
               onSelect={this.handleSelect}
               selectedPoolId={selectedPoolId}
-              numberOfStakePools={stakePoolsList.length}
+              numberOfRankedStakePools={numberOfRankedStakePools}
               disabledStakePoolId={activeStakePoolId}
               showSelected
               highlightOnHover
@@ -398,7 +403,7 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
               onSelect={this.handleSelect}
               selectedPoolId={selectedPoolId}
               containerClassName="Dialog_content"
-              numberOfStakePools={stakePoolsList.length}
+              numberOfRankedStakePools={numberOfRankedStakePools}
               disabledStakePoolId={activeStakePoolId}
               showSelected
               highlightOnHover

diff --git a/source/renderer/app/components/staking/stake-pools/StakePools.js b/source/renderer/app/components/staking/stake-pools/StakePools.js
@@ -13,6 +13,7 @@ import Wallet from '../../../domains/Wallet';
 import styles from './StakePools.scss';
 import { getFilteredStakePoolsList } from './helpers';
 import StakePool from '../../../domains/StakePool';
+import { IS_RANKING_DATA_AVAILABLE } from '../../../config/stakingConfig';
 
 const messages = defineMessages({
   delegatingListTitle: {
@@ -93,29 +94,47 @@ export default class StakePools extends Component<Props, State> {
     ...initialState,
   };
 
-  handleSearch = (search: string) => this.setState(prevState => ({ search, maintainFixed: prevState.isFixed, isFixed: true }));
+  handleSearch = (search: string) =>
+    this.setState((prevState) => ({
+      search,
+      maintainFixed: prevState.isFixed,
+      isFixed: true,
+    }));
   handleClearSearch = () => this.setState({ search: '', maintainFixed: false });
-  handleGridView = () => this.setState({
-    isGridView: true,
-    isListView: false,
-    isFixed: false,
-    maintainFixed: false,
-    isScrolled: false,
-    isHeaderFixed: false
-  });
-  handleListView = () => this.setState({
-    isGridView: false,
-    isListView: true,
-    isFixed: false,
-    maintainFixed: false,
-    isScrolled: false,
-    isHeaderFixed: false
-  });
-  handleSearchComponentScrollView = (isScrolled: boolean, isHeaderFixed: boolean) =>  {
+  handleGridView = () =>
+    this.setState({
+      isGridView: true,
+      isListView: false,
+      isFixed: false,
+      maintainFixed: false,
+      isScrolled: false,
+      isHeaderFixed: false,
+    });
+  handleListView = () =>
+    this.setState({
+      isGridView: false,
+      isListView: true,
+      isFixed: false,
+      maintainFixed: false,
+      isScrolled: false,
+      isHeaderFixed: false,
+    });
+  handleSearchComponentScrollView = (
+    isScrolled: boolean,
+    isHeaderFixed: boolean
+  ) => {
     if (isHeaderFixed) {
-      this.setState(prevState => ({ isFixed: !prevState.isFixed, isScrolled, isHeaderFixed }));
+      this.setState((prevState) => ({
+        isFixed: !prevState.isFixed,
+        isScrolled,
+        isHeaderFixed,
+      }));
     } else {
-      this.setState(() => ({ isFixed: !(!isScrolled && !isHeaderFixed), isScrolled, isHeaderFixed: false }));
+      this.setState(() => ({
+        isFixed: !(!isScrolled && !isHeaderFixed),
+        isScrolled,
+        isHeaderFixed: false,
+      }));
     }
   };
 
@@ -144,13 +163,27 @@ export default class StakePools extends Component<Props, State> {
       stakePoolsDelegatingList,
       getStakePoolById,
     } = this.props;
-    const { search, selectedList, isListView, isGridView, isFixed, isHeaderFixed, maintainFixed, isScrolled } = this.state;
+    const {
+      search,
+      selectedList,
+      isListView,
+      isGridView,
+      isFixed,
+      isHeaderFixed,
+      maintainFixed,
+      isScrolled,
+    } = this.state;
 
     const filteredStakePoolsList: Array<StakePool> = getFilteredStakePoolsList(
       stakePoolsList,
       search
     );
 
+    const numberOfRankedStakePools: number = stakePoolsList.filter(
+      (stakePool) =>
+        IS_RANKING_DATA_AVAILABLE && stakePool.nonMyopicMemberRewards
+    ).length;
+
     const listTitleMessage = search.trim().length
       ? messages.listTitleWithSearch
       : messages.listTitle;
@@ -209,7 +242,9 @@ export default class StakePools extends Component<Props, State> {
               onListView={this.handleListView}
               isListView={isListView}
               isGridView={isGridView}
-              isFixed={(isFixed || maintainFixed) && !!filteredStakePoolsList.length}
+              isFixed={
+                (isFixed || maintainFixed) && !!filteredStakePoolsList.length
+              }
               isClearTooltipOpeningDownward
               isScrolled={isScrolled}
             />
@@ -235,7 +270,9 @@ export default class StakePools extends Component<Props, State> {
                   numberOfStakePools={stakePoolsList.length}
                   showWithSelectButton
                   onScrollView={this.handleSearchComponentScrollView}
-                  maintainFixed={maintainFixed && !!filteredStakePoolsList.length}
+                  maintainFixed={
+                    maintainFixed && !!filteredStakePoolsList.length
+                  }
                   isScrolled={isScrolled}
                 />
               </Fragment>
@@ -252,7 +289,9 @@ export default class StakePools extends Component<Props, State> {
                       stakePoolsList={stakePoolsDelegatingList}
                       onOpenExternalLink={onOpenExternalLink}
                       currentTheme={currentTheme}
-                      isListActive={selectedList === STAKE_POOLS_DELEGATING_LIST}
+                      isListActive={
+                        selectedList === STAKE_POOLS_DELEGATING_LIST
+                      }
                       setListActive={this.handleSetListActive}
                       containerClassName="StakingWithNavigation_page"
                       onSelect={this.onDelegate}

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsList.js b/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
@@ -20,7 +20,7 @@ type Props = {
   showWithSelectButton?: boolean,
   showSelected?: boolean,
   containerClassName: string,
-  numberOfStakePools: number,
+  numberOfRankedStakePools: number,
   selectedPoolId?: ?number,
   disabledStakePoolId?: ?string,
   /**
@@ -120,7 +120,7 @@ export class StakePoolsList extends Component<Props, State> {
       stakePoolsList,
       selectedPoolId,
       containerClassName,
-      numberOfStakePools,
+      numberOfRankedStakePools,
       disabledStakePoolId,
       listName,
     } = this.props;
@@ -155,7 +155,7 @@ export class StakePoolsList extends Component<Props, State> {
               isSelected={isSelected}
               showSelected={showSelected}
               containerClassName={containerClassName}
-              numberOfStakePools={numberOfStakePools}
+              numberOfRankedStakePools={numberOfRankedStakePools}
               disabledStakePoolId={disabledStakePoolId}
             />
           );

diff --git a/source/renderer/app/components/staking/widgets/ThumbPool.js b/source/renderer/app/components/staking/widgets/ThumbPool.js
@@ -24,7 +24,7 @@ type Props = {
   stakePool: StakePool,
   isSelected?: ?Function,
   containerClassName: string,
-  numberOfStakePools: number,
+  numberOfRankedStakePools: number,
   disabledStakePoolId: ?string,
 };
 
@@ -98,13 +98,13 @@ export class ThumbPool extends Component<Props, State> {
       showSelected,
       stakePool,
       containerClassName,
-      numberOfStakePools,
+      numberOfRankedStakePools,
       disabledStakePoolId,
     } = this.props;
     const { top, left } = this.state;
 
     const { ranking, id } = stakePool;
-    const color = getColorFromRange(ranking, numberOfStakePools);
+    const color = getColorFromRange(ranking, numberOfRankedStakePools);
     const isDisabled = disabledStakePoolId === id;
 
     const contentClassnames = classnames([
@@ -119,12 +119,12 @@ export class ThumbPool extends Component<Props, State> {
       isSelected && showSelected ? (
         <ThumbSelectedPool
           stakePool={stakePool}
-          numberOfStakePools={numberOfStakePools}
+          numberOfRankedStakePools={numberOfRankedStakePools}
         />
       ) : (
         <ThumbPoolContent
           stakePool={stakePool}
-          numberOfStakePools={numberOfStakePools}
+          numberOfRankedStakePools={numberOfRankedStakePools}
         />
       );
 
@@ -152,7 +152,7 @@ export class ThumbPool extends Component<Props, State> {
             onSelect={this.handleSelect}
             showWithSelectButton={showWithSelectButton}
             containerClassName={containerClassName}
-            numberOfStakePools={numberOfStakePools}
+            numberOfRankedStakePools={numberOfRankedStakePools}
           />
         )}
       </div>

diff --git a/source/renderer/app/components/staking/widgets/ThumbPoolContent.js b/source/renderer/app/components/staking/widgets/ThumbPoolContent.js
@@ -15,15 +15,21 @@ import {
 
 type Props = {
   stakePool: StakePool,
-  numberOfStakePools: number,
+  numberOfRankedStakePools: number,
 };
 
 @observer
 export default class ThumbPoolContent extends Component<Props> {
   render() {
-    const { stakePool, numberOfStakePools } = this.props;
-    const { ranking, ticker, retiring, saturation } = stakePool;
-    const color = getColorFromRange(ranking, numberOfStakePools);
+    const { stakePool, numberOfRankedStakePools } = this.props;
+    const {
+      ranking,
+      nonMyopicMemberRewards,
+      ticker,
+      retiring,
+      saturation,
+    } = stakePool;
+    const color = getColorFromRange(ranking, numberOfRankedStakePools);
 
     const componentClassnames = classnames([
       styles.component,
@@ -38,20 +44,26 @@ export default class ThumbPoolContent extends Component<Props> {
     return (
       <div className={componentClassnames}>
         <div className={styles.ticker}>{ticker}</div>
-        {IS_RANKING_DATA_AVAILABLE ? (
+        {IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
+          <div className={styles.ranking} style={{ color }}>
+            {ranking}
+          </div>
+        ) : (
+          <div className={styles.noDataDash}>
+            <SVGInline svg={noDataDashBigImage} />
+          </div>
+        )}
+        {IS_SATURATION_DATA_AVAILABLE && (
+          <div className={saturationClassnames}>
+            <span
+              style={{
+                width: `${parseFloat(saturation.toFixed(2))}%`,
+              }}
+            />
+          </div>
+        )}
+        {IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
           <>
-            <div className={styles.ranking} style={{ color }}>
-              {ranking}
-            </div>
-            {IS_SATURATION_DATA_AVAILABLE && (
-              <div className={saturationClassnames}>
-                <span
-                  style={{
-                    width: `${parseFloat(saturation.toFixed(2))}%`,
-                  }}
-                />
-              </div>
-            )}
             {retiring && (
               <div className={styles.clock}>
                 <SVGInline svg={clockIcon} className={styles.clockIcon} />
@@ -65,12 +77,7 @@ export default class ThumbPoolContent extends Component<Props> {
             />
           </>
         ) : (
-          <>
-            <div className={styles.noDataDash}>
-              <SVGInline svg={noDataDashBigImage} />
-            </div>
-            <div className={styles.greyColorBand} />
-          </>
+          <div className={styles.greyColorBand} />
         )}
       </div>
     );

diff --git a/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss b/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss
@@ -32,9 +32,14 @@
     align-items: center;
     display: flex;
     justify-content: center;
+    height: 27px;
 
     :global {
       .SVGInline {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+
         svg {
           height: 3px;
           width: 12px;