[DDW-435] Filtering stake pools through checkboxes - Private, Retiring and Pools without off-chain data

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Features
 
+- Implemented stake pools filter pop over ([PR 2461](https://github.com/input-output-hk/daedalus/pull/2461))
 - Added Catalyst footer links ([PR 2721](https://github.com/input-output-hk/daedalus/pull/2721))
 - Fixed the Delegation popover timeout ([PR 2722](https://github.com/input-output-hk/daedalus/pull/2722))
 - Removed "Alonzo tada" icon and "Alonzo countdown" screen ([PR 2708](https://github.com/input-output-hk/daedalus/pull/2708))
@@ -201,7 +202,7 @@
 
 - Added absolute slot number to Catalyst voting registration transaction metadata ([PR 2476](https://github.com/input-output-hk/daedalus/pull/2476))
 - Improved the transactions and rewards CSV export contents ([PR 2451](https://github.com/input-output-hk/daedalus/pull/2451))
-- Implement Trezor passphrase handling ([PR 2284](https://github.com/input-output-hk/daedalus/pull/2284))
+- Implemented Trezor passphrase handling ([PR 2284](https://github.com/input-output-hk/daedalus/pull/2284))
 
 ### Fixes
 

source/renderer/app/actions/staking-actions.js

@@ -5,6 +5,7 @@ import type {
   QuitStakePoolRequest,
 } from '../api/staking/types';
 import type { CsvFileContent } from '../../../common/types/csv-request.types';
+import type { StakePoolFilterOptionsType } from '../stores/StakingStore';
 // ======= STAKING ACTIONS =======
 
 export default class StakingActions {
@@ -33,5 +34,6 @@ export default class StakingActions {
   onConfirmationContinue: Action<{ spendingPassword: string }> = new Action();
   onResultContinue: Action<any> = new Action();
   closeRedeemDialog: Action<any> = new Action();
+  filterStakePools: Action<StakePoolFilterOptionsType> = new Action();
   setStakingInfoWasOpen: Action<any> = new Action();
 }

source/renderer/app/api/api.js

@@ -2227,16 +2227,10 @@ export default class AdaApi {
         stake
       );
       const stakePools = response
-        .filter(({ metadata }: AdaApiStakePool) => metadata !== undefined)
         .filter(({ flags }: AdaApiStakePool) => !flags.includes('delisted'))
-        .filter(
-          ({ margin }: AdaApiStakePool) =>
-            margin !== undefined && margin.quantity < 100
-        )
         .map(_createStakePoolFromServerData);
       logger.debug('AdaApi::getStakePools success', {
         stakePoolsTotal: response.length,
-        stakePoolsWithMetadata: stakePools.length,
         unfilteredStakePools: response,
       });
       return stakePools;
@@ -2974,7 +2968,8 @@ const _createStakePoolFromServerData = action(
       non_myopic_member_rewards: nonMyopicMemberRewards,
       saturation,
     } = metrics; // eslint-disable-line
-    const { name, description = '', ticker, homepage } = metadata;
+    const { name = '', description = '', ticker = '', homepage = '' } =
+      metadata || {};
     const relativeStakePercentage = get(relativeStake, 'quantity', 0);
     const producedBlocksCount = get(producedBlocks, 'quantity', 0);
     const nonMyopicMemberRewardsQuantity = get(
@@ -3007,6 +3002,9 @@ const _createStakePoolFromServerData = action(
       ranking: index + 1,
       retiring: retiringAt ? new Date(retiringAt) : null,
       saturation: saturation * 100,
+      isRetiring: !!retiringAt,
+      isPrivate: profitMarginPercentage === 100,
+      hasNoOffChainData: !metadata,
     });
   }
 );

source/renderer/app/components/layout/SidebarLayout.scss

@@ -12,8 +12,6 @@
   overflow: hidden;
   position: relative;
   width: 100%;
-  // Show elements that overflow the main above the sidebar area
-  z-index: 20;
 }
 
 .sidebar {
@@ -25,7 +23,7 @@
   box-shadow: 0 5px 20px 0 var(--theme-sidebar-layout-topbar-shadow-color);
   flex-shrink: 0;
   // Show elements that overflow the topbar above the content area
-  z-index: 20;
+  z-index: 10000;
 }
 
 .contentWrapper {

source/renderer/app/components/staking/delegation-center/WalletRow.js

@@ -405,6 +405,7 @@ export default class WalletRow extends Component<Props, WalletRowState> {
                         onOpenExternalLink={onOpenExternalLink}
                         openWithDelay={false}
                         stakePool={futurePendingDelegatedStakePool}
+                        ranking={futurePendingDelegatedStakePool.ranking}
                         containerClassName={containerClassName}
                         numberOfRankedStakePools={numberOfRankedStakePools}
                         showWithSelectButton={showWithSelectButton}

source/renderer/app/components/staking/delegation-setup-wizard/DelegationSetupWizardDialog.js

@@ -10,8 +10,8 @@ import DelegationStepsNotAvailableDialog from './DelegationStepsNotAvailableDial
 import DelegationStepsChooseStakePoolDialog from './DelegationStepsChooseStakePoolDialog';
 import LocalizableError from '../../../i18n/LocalizableError';
 import StakePool from '../../../domains/StakePool';
+import type { StakePoolFilterOptionsType } from '../../../stores/StakingStore';
 import Wallet from '../../../domains/Wallet';
-
 import type { DelegationCalculateFeeResponse } from '../../../api/staking/types';
 import type { HwDeviceStatus } from '../../../domains/Wallet';
 
@@ -42,6 +42,9 @@ type Props = {
   currentLocale: string,
   getStakePoolById: Function,
   hwDeviceStatus: HwDeviceStatus,
+  filterOptions: StakePoolFilterOptionsType,
+  onFilter: Function,
+  populatedFilterOptions: StakePoolFilterOptionsType,
   isTrezor: boolean,
 };
 
@@ -87,6 +90,9 @@ export default class DelegationSetupWizardDialog extends Component<Props> {
       error,
       getStakePoolById,
       hwDeviceStatus,
+      filterOptions,
+      onFilter,
+      populatedFilterOptions,
       isTrezor,
     } = this.props;
 
@@ -132,6 +138,9 @@ export default class DelegationSetupWizardDialog extends Component<Props> {
             onClose={onClose}
             onBack={onBack}
             onSelectPool={onSelectPool}
+            filterOptions={filterOptions}
+            onFilter={onFilter}
+            populatedFilterOptions={populatedFilterOptions}
           />
         );
         break;

source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js

@@ -22,6 +22,11 @@ import styles from './DelegationStepsChooseStakePoolDialog.scss';
 import Wallet from '../../../domains/Wallet';
 import ThumbSelectedPool from '../widgets/ThumbSelectedPool';
 import { IS_RANKING_DATA_AVAILABLE } from '../../../config/stakingConfig';
+import type { StakePoolFilterOptionsType } from '../../../stores/StakingStore';
+import {
+  getNumberOfFilterDimensionsApplied,
+  hasStakePoolHighProfitMargin,
+} from '../../../utils/staking';
 import StakePool from '../../../domains/StakePool';
 
 const messages = defineMessages({
@@ -115,10 +120,25 @@ const messages = defineMessages({
     id:
       'staking.delegationSetup.chooseStakePool.step.dialog.retiringPoolFooter',
     defaultMessage:
-      '!!!The stake pool you have selected is about to be retired. If you continue the delegation process, you will need to delegate your stake to another pool at least one complete epoch before the current pool’s retirement date to avoid losing rewards.',
+      '!!!The stake pool you have selected is about to be retired. If you delegate to this pool, you will need to redelegate your wallet to a different pool at least one entire epoch before the current pool’s retirement date to avoid losing rewards.',
     description:
       'Retiring Pool Footer label on the delegation setup "choose wallet" step dialog.',
   },
+  privatePoolFooter: {
+    id: 'staking.delegationSetup.chooseStakePool.step.dialog.privatePoolFooter',
+    defaultMessage:
+      '!!!The stake pool you have selected is private as its margin is 100%. If you delegate to this pool, all rewards will go to the stake pool, and you will not earn delegation rewards.',
+    description:
+      'Private Pool Footer label on the delegation setup "choose wallet" step dialog.',
+  },
+  highProfitMarginPoolFooter: {
+    id:
+      'staking.delegationSetup.chooseStakePool.step.dialog.highProfitMarginPoolFooter',
+    defaultMessage:
+      '!!!The stake pool you have selected has a high margin of {profitMarginPercentage}%. You could earn more  rewards by delegating to a different pool. Delegating to pools with high margins is not a concern if they are charity pools or if you are supporting a pool for different reasons.',
+    description:
+      'High Profit Margin Pool Footer label on the delegation setup "choose wallet" step dialog.',
+  },
 });
 
 type Props = {
@@ -132,6 +152,9 @@ type Props = {
   onClose: Function,
   onBack: Function,
   onSelectPool: Function,
+  filterOptions: StakePoolFilterOptionsType,
+  onFilter: Function,
+  populatedFilterOptions: StakePoolFilterOptionsType,
 };
 
 type State = {
@@ -177,6 +200,9 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
       selectedWallet,
       onClose,
       onBack,
+      filterOptions,
+      onFilter,
+      populatedFilterOptions,
     } = this.props;
     const { searchValue, selectedPoolId } = this.state;
     const selectedWalletName = get(selectedWallet, 'name');
@@ -217,12 +243,38 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
       },
     ];
 
-    const footer =
-      selectedPool && selectedPool.retiring ? (
-        <div className={styles.retiringPoolFooter}>
+    const retiringFooter =
+      selectedPool && selectedPool.isRetiring ? (
+        <div className={styles.poolFooterContent}>
           {intl.formatMessage(messages.retiringPoolFooter)}
         </div>
       ) : null;
+    const privateFooter =
+      selectedPool && selectedPool.isPrivate ? (
+        <div className={styles.poolFooterContent}>
+          {intl.formatMessage(messages.privatePoolFooter)}
+        </div>
+      ) : null;
+    const highProfitMarginFooter =
+      selectedPool &&
+      !selectedPool.isPrivate &&
+      hasStakePoolHighProfitMargin(selectedPool) ? (
+        <div className={styles.poolFooterContent}>
+          <FormattedHTMLMessage
+            {...messages.highProfitMarginPoolFooter}
+            values={{
+              profitMarginPercentage: selectedPool.profitMargin,
+            }}
+          />
+        </div>
+      ) : null;
+    const footer = (
+      <div className={styles.poolFooter}>
+        {retiringFooter}
+        {privateFooter}
+        {highProfitMarginFooter}
+      </div>
+    );
 
     const dialogClassName = classNames([
       commonStyles.delegationSteps,
@@ -299,11 +351,18 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
       />
     );
 
+    const numberOfFilterDimensionsApplied = getNumberOfFilterDimensionsApplied(
+      filterOptions
+    );
+
     const filteredStakePoolsList: Array<StakePool> = getFilteredStakePoolsList(
       stakePoolsList,
       searchValue
     );
 
+    const isFilterDisabled =
+      !filteredStakePoolsList.length && !numberOfFilterDimensionsApplied;
+
     const numberOfRankedStakePools: number = stakePoolsList.filter(
       (stakePool) =>
         IS_RANKING_DATA_AVAILABLE && stakePool.nonMyopicMemberRewards
@@ -345,6 +404,7 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
           <div className={styles.selectStakePoolWrapper}>
             <ThumbSelectedPool
               stakePool={selectedPool}
+              ranking={selectedPool.ranking}
               numberOfRankedStakePools={numberOfRankedStakePools}
               alreadyDelegated={selectedPool && !canSubmit}
             />
@@ -386,6 +446,12 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
               onClearSearch={this.handleClearSearch}
               scrollableElementClassName="Dialog_content"
               disabledStakePoolId={activeStakePoolId}
+              filterPopOverProps={{
+                populatedFilterOptions,
+                onFilter,
+                isFilterDisabled,
+                numberOfFilterDimensionsApplied,
+              }}
             />
           </div>
 

source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.scss

@@ -161,12 +161,20 @@
     }
   }
 
-  .retiringPoolFooter {
+  .poolFooter {
     color: var(--theme-staking-stake-pool-retirement-background-color);
     font-family: var(--font-medium);
     font-size: 16px;
     line-height: 1.38;
     margin: 20px 0;
-    text-align: center;
+    text-align: left;
+
+    .poolFooterContent {
+      margin-bottom: 10px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 }

source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js

@@ -22,6 +22,7 @@ import Dialog from '../../widgets/Dialog';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import { formattedWalletAmount } from '../../../utils/formatters';
 import { submitOnEnter } from '../../../utils/form';
+import { hasStakePoolHighProfitMargin } from '../../../utils/staking';
 import globalMessages from '../../../i18n/global-messages';
 import LocalizableError from '../../../i18n/LocalizableError';
 import { FORM_VALIDATION_DEBOUNCE_WAIT } from '../../../config/timingConfig';
@@ -105,6 +106,29 @@ const messages = defineMessages({
     defaultMessage: '!!!Calculating deposit',
     description: '"Calculating deposit" message in the "confirmation" dialog.',
   },
+  retiringPoolFooter: {
+    id:
+      'staking.delegationSetup.chooseStakePool.step.dialog.retiringPoolFooter',
+    defaultMessage:
+      '!!!The stake pool you have selected is about to be retired. If you delegate to this pool, you will need to redelegate your wallet to a different pool at least one entire epoch before the current pool’s retirement date to avoid losing rewards.',
+    description:
+      'Retiring Pool Footer label on the delegation setup "confirmation" step dialog.',
+  },
+  privatePoolFooter: {
+    id: 'staking.delegationSetup.chooseStakePool.step.dialog.privatePoolFooter',
+    defaultMessage:
+      '!!!The stake pool you have selected is private as its margin is 100%. If you delegate to this pool, all rewards will go to the stake pool, and you will not earn delegation rewards.',
+    description:
+      'Private Pool Footer label on the delegation setup "confirmation" step dialog.',
+  },
+  highProfitMarginPoolFooter: {
+    id:
+      'staking.delegationSetup.chooseStakePool.step.dialog.highProfitMarginPoolFooter',
+    defaultMessage:
+      '!!!The stake pool you have selected has a high margin of {profitMarginPercentage}%. You could earn more  rewards by delegating to a different pool. Delegating to pools with high margins is not a concern if they are charity pools or if you are supporting a pool for different reasons.',
+    description:
+      'High Profit Margin Pool Footer label on the delegation setup "confirmation" step dialog.',
+  },
 });
 
 messages.fieldIsRequired = globalMessages.fieldIsRequired;
@@ -251,11 +275,45 @@ export default class DelegationStepsConfirmationDialog extends Component<Props>
       />
     );
 
+    const retiringFooter =
+      selectedPool && selectedPool.isRetiring ? (
+        <div className={styles.poolFooterContent}>
+          {intl.formatMessage(messages.retiringPoolFooter)}
+        </div>
+      ) : null;
+    const privateFooter =
+      selectedPool && selectedPool.isPrivate ? (
+        <div className={styles.poolFooterContent}>
+          {intl.formatMessage(messages.privatePoolFooter)}
+        </div>
+      ) : null;
+    const highProfitMarginFooter =
+      selectedPool &&
+      !selectedPool.isPrivate &&
+      hasStakePoolHighProfitMargin(selectedPool) ? (
+        <div className={styles.poolFooterContent}>
+          <FormattedHTMLMessage
+            {...messages.highProfitMarginPoolFooter}
+            values={{
+              profitMarginPercentage: selectedPool.profitMargin,
+            }}
+          />
+        </div>
+      ) : null;
+    const footer = (
+      <div className={styles.poolFooter}>
+        {retiringFooter}
+        {privateFooter}
+        {highProfitMarginFooter}
+      </div>
+    );
+
     return (
       <Dialog
         title={intl.formatMessage(messages.title)}
         subtitle={stepsIndicatorLabel}
         actions={actions}
+        footer={footer}
         closeOnOverlayClick
         onClose={!isSubmitting ? onClose : () => {}}
         className={dialogClassName}