[DDW-1114] Message for current stake pool being selected again (#1758)

* [DDW-1114] Improve delegation wizard start step logic and new message for current stake pool being selected again * [DDW-1114] CHANGELOG update
input-output-hk · Dec 11, 2019 · 388e086 · 388e086
1 parent f015de3
commit 388e086
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 67 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,7 @@ Changelog
 
 ### Chores
 
+- Updated message for current stake pool being selected ([PR 1758](https://github.com/input-output-hk/daedalus/pull/1758))
 - Updated "Delegation" UI Support portal article URLs ([PR 1759](https://github.com/input-output-hk/daedalus/pull/1759))
 - Updated `serialize-javascript` package dependency ([PR 1756](https://github.com/input-output-hk/daedalus/pull/1756))
 - Updated minimum amount of ada for delegation to be available ([PR 1753](https://github.com/input-output-hk/daedalus/pull/1753))

diff --git a/...er/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js b/...er/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
@@ -56,6 +56,14 @@ const messages = defineMessages({
     description:
       '"Selected Pools" Selected pool label on the delegation setup "choose stake pool" dialog.',
   },
+  delegatedStakePoolLabel: {
+    id:
+      'staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolLabel',
+    defaultMessage:
+      '!!!You are already delegating <span>{selectedWalletName}</span> wallet to <span>[{selectedPoolTicker}]</span> stake pool. <span>If you wish to re-delegate your stake, please select a different pool.</span>',
+    description:
+      '"You are already delegating to stake pool" label on the delegation setup "choose stake pool" dialog.',
+  },
   recentPoolsLabel: {
     id: 'staking.delegationSetup.chooseStakePool.step.dialog.recentPoolsLabel',
     defaultMessage: '!!!Pick one of your recent stake pool choices:',
@@ -137,10 +145,6 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
     this.setState({ selectedList });
   };
 
-  handleDeselectStakePool = () => {
-    this.setState({ selectedPoolId: null });
-  };
-
   onAcceptPool = () => {
     const { selectedPoolId } = this.state;
     this.props.onSelectPool(selectedPoolId);
@@ -195,6 +199,7 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
         selectedPool
           ? styles.selectedPoolBlock
           : styles.selectPoolBlockPlaceholder,
+        selectedPool && !canSubmit ? styles.alreadyDelegated : null,
       ]);
 
       const selectedPoolImageClasses = classNames([
@@ -213,7 +218,6 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
         <div
           role="presentation"
           className={selectedPoolBlockClasses}
-          onClick={this.handleDeselectStakePool}
           style={{
             background: rankColor,
           }}
@@ -231,6 +235,44 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
       );
     };
 
+    const selectionPoolLabel = () => {
+      let label = '';
+      // Label when selected wallet already delegating to selected stake pool
+      if (selectedPoolId && delegatedStakePoolId === selectedPoolId) {
+        label = (
+          <FormattedHTMLMessage
+            {...messages.delegatedStakePoolLabel}
+            values={{
+              selectedWalletName,
+              selectedPoolTicker,
+            }}
+          />
+        );
+      } else if (selectedPoolId) {
+        // Stake pool selected and selected wallet are not delegated to it
+        label = (
+          <FormattedHTMLMessage
+            {...messages.selectedStakePoolLabel}
+            values={{
+              selectedWalletName,
+              selectedPoolTicker,
+            }}
+          />
+        );
+      } else {
+        // Stake pool not selected.
+        label = (
+          <FormattedHTMLMessage
+            {...messages.selectStakePoolLabel}
+            values={{
+              selectedWalletName,
+            }}
+          />
+        );
+      }
+      return label;
+    };
+
     const stepsIndicatorLabel = (
       <FormattedMessage
         {...messages.stepIndicatorLabel}
@@ -281,22 +323,7 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
             {selectedPoolBlock()}
 
             <p className={styles.selectStakePoolLabel}>
-              {selectedPoolTicker ? (
-                <FormattedHTMLMessage
-                  {...messages.selectedStakePoolLabel}
-                  values={{
-                    selectedWalletName,
-                    selectedPoolTicker,
-                  }}
-                />
-              ) : (
-                <FormattedHTMLMessage
-                  {...messages.selectStakePoolLabel}
-                  values={{
-                    selectedWalletName,
-                  }}
-                />
-              )}
+              {selectionPoolLabel()}
             </p>
           </div>
 

diff --git a/.../app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.scss b/.../app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.scss
@@ -38,6 +38,10 @@
         border-radius: 5.8px;
         height: 71px;
         width: 80px;
+
+        &.alreadyDelegated {
+          opacity: 0.3;
+        }
       }
 
       .selectPoolBlockPlaceholder {

diff --git a/source/renderer/app/containers/staking/DelegationCenterPage.js b/source/renderer/app/containers/staking/DelegationCenterPage.js
@@ -2,7 +2,6 @@
 import React, { Component } from 'react';
 import { observer, inject } from 'mobx-react';
 import BigNumber from 'bignumber.js';
-import { get } from 'lodash';
 import DelegationCenter from '../../components/staking/delegation-center/DelegationCenter';
 import DelegationSetupWizardDialogContainer from './dialogs/DelegationSetupWizardDialogContainer';
 import UndelegateDialogContainer from './dialogs/UndelegateDialogContainer';
@@ -20,15 +19,12 @@ export default class DelegationCenterPage extends Component<Props> {
   static defaultProps = { stores: null };
 
   handleDelegate = (walletId: string) => {
-    const { actions, stores } = this.props;
+    const { actions } = this.props;
     const { updateDataForActiveDialog } = actions.dialogs;
-    const { wallets } = stores;
-    const wallet = wallets.getWalletById(walletId);
-    const delegatedStakePoolId = get(wallet, 'delegatedStakePoolId', null);
 
     actions.dialogs.open.trigger({ dialog: DelegationSetupWizardDialog });
     updateDataForActiveDialog.trigger({
-      data: { walletId, poolId: delegatedStakePoolId },
+      data: { walletId },
     });
   };
 

diff --git a/source/renderer/app/containers/staking/dialogs/DelegationSetupWizardDialogContainer.js b/source/renderer/app/containers/staking/dialogs/DelegationSetupWizardDialogContainer.js
@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { observer, inject } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
-import { find, get, includes } from 'lodash';
+import { find, get } from 'lodash';
 import BigNumber from 'bignumber.js';
 import DelegationSetupWizardDialog from '../../../components/staking/delegation-setup-wizard/DelegationSetupWizardDialog';
 import { MIN_DELEGATION_FUNDS } from '../../../config/stakingConfig';
@@ -70,27 +70,18 @@ export default class DelegationSetupWizardDialogContainer extends Component<
     );
   }
 
-  get getActiveStep() {
-    const { selectedWalletId } = this;
-    if (selectedWalletId) {
-      const { wallets } = this.props.stores;
-      const wallet = wallets.getWalletById(selectedWalletId);
-      if (!wallet) return 0; // Intro step
-      const isWalletAcceptable = this.handleIsWalletAcceptable(wallet.amount);
-      if (!isWalletAcceptable) return 1; // Choose wallet step
-      return 2; // Choose stake pool step
-    }
-    return 0; // Intro step
+  get selectedPoolId() {
+    return get(
+      this.props,
+      ['stores', 'uiDialogs', 'dataForActiveDialog', 'poolId'],
+      null
+    );
   }
 
   state = {
+    activeStep: 0,
     selectedWalletId: this.selectedWalletId,
-    activeStep: this.getActiveStep,
-    selectedPoolId: get(
-      this.props,
-      ['stores', 'uiDialogs', 'dataForActiveDialog', 'poolId'],
-      null
-    ),
+    selectedPoolId: this.selectedPoolId,
     stakePoolJoinFee: new BigNumber(0),
   };
 
@@ -134,16 +125,7 @@ export default class DelegationSetupWizardDialogContainer extends Component<
   };
 
   handleSelectWallet = (walletId: string) => {
-    const { selectedPoolId } = this.state;
-    const { wallets } = this.props.stores;
-    const selectedWallet = find(
-      wallets.allWallets,
-      wallet => wallet.id === walletId
-    );
-    this.setState({
-      selectedWalletId: walletId,
-      selectedPoolId: selectedPoolId || selectedWallet.delegatedStakePoolId,
-    });
+    this.setState({ selectedWalletId: walletId });
     this.handleContinue();
   };
 
@@ -197,7 +179,7 @@ export default class DelegationSetupWizardDialogContainer extends Component<
         stepsList={this.STEPS_LIST}
         activeStep={activeStep}
         minDelegationFunds={MIN_DELEGATION_FUNDS}
-        isDisabled={includes([1, 2], activeStep) && !acceptableWallets}
+        isDisabled={activeStep === 1 && !acceptableWallets}
         isWalletAcceptable={this.handleIsWalletAcceptable}
         selectedWallet={selectedWallet}
         selectedPool={selectedPool || null}

diff --git a/source/renderer/app/i18n/locales/de-DE.json b/source/renderer/app/i18n/locales/de-DE.json
@@ -301,6 +301,7 @@
   "staking.delegationCountdown.heading": "!!!Cardano decentralization",
   "staking.delegationCountdown.timeLeftDesc": "!!!Rewards begin in",
   "staking.delegationSetup.chooseStakePool.step.dialog.continueButtonLabel": "!!!Continue",
+  "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolLabel": "!!!You are already delegating <span>{selectedWalletName}</span> wallet to <span>[{selectedPoolTicker}]</span> stake pool. <span>If you wish to re-delegate your stake, please select a different pool.</span>",
   "staking.delegationSetup.chooseStakePool.step.dialog.description": "!!!Choose a stake pool to which you would like to delegate.",
   "staking.delegationSetup.chooseStakePool.step.dialog.recentPoolsLabel": "!!!Pick one of your recent stake pool choices:",
   "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.label": "!!!Or search for a stake pool:",

diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -2699,74 +2699,88 @@
           "line": 51
         }
       },
+      {
+        "defaultMessage": "!!!You are already delegating <span>{selectedWalletName}</span> wallet to <span>[{selectedPoolTicker}]</span> stake pool. <span>If you wish to re-delegate your stake, please select a different pool.</span>",
+        "description": "\"You are already delegating to stake pool\" label on the delegation setup \"choose stake pool\" dialog.",
+        "end": {
+          "column": 3,
+          "line": 66
+        },
+        "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
+        "id": "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolLabel",
+        "start": {
+          "column": 27,
+          "line": 59
+        }
+      },
       {
         "defaultMessage": "!!!Pick one of your recent stake pool choices:",
         "description": "Recent \"Pool\" choice section label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 64
+          "line": 72
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.recentPoolsLabel",
         "start": {
           "column": 20,
-          "line": 59
+          "line": 67
         }
       },
       {
         "defaultMessage": "!!!Or select a stake pool from the list of all available stake pools:",
         "description": "Search \"Pools\" input label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 71
+          "line": 79
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.label",
         "start": {
           "column": 20,
-          "line": 65
+          "line": 73
         }
       },
       {
         "defaultMessage": "!!!Search stake pools",
         "description": "Search \"Pools\" input placeholder on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 78
+          "line": 86
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.placeholder",
         "start": {
           "column": 26,
-          "line": 72
+          "line": 80
         }
       },
       {
         "defaultMessage": "!!!Continue",
         "description": "Label for continue button on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 85
+          "line": 93
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.continueButtonLabel",
         "start": {
           "column": 23,
-          "line": 79
+          "line": 87
         }
       },
       {
         "defaultMessage": "!!!STEP {currentStep} OF {totalSteps}",
         "description": "Step indicator labe on the delegation setup \"choose wallet\" step dialog.",
         "end": {
           "column": 3,
-          "line": 92
+          "line": 100
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.stepIndicatorLabel",
         "start": {
           "column": 22,
-          "line": 86
+          "line": 94
         }
       }
     ],

diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
@@ -301,6 +301,7 @@
   "staking.delegationCountdown.heading": "Cardano decentralization",
   "staking.delegationCountdown.timeLeftDesc": "Rewards begin in",
   "staking.delegationSetup.chooseStakePool.step.dialog.continueButtonLabel": "Continue",
+  "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolLabel": "You are already delegating <span>{selectedWalletName}</span> wallet to <span>[{selectedPoolTicker}]</span> stake pool. <span>If you wish to re-delegate your stake, please select a different pool.</span>",
   "staking.delegationSetup.chooseStakePool.step.dialog.description": "Currently selected stake pool:",
   "staking.delegationSetup.chooseStakePool.step.dialog.recentPoolsLabel": "Pick one of your recent stake pool choices:",
   "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.label": "Or select a stake pool from the list of all available stake pools:",

diff --git a/source/renderer/app/i18n/locales/hr-HR.json b/source/renderer/app/i18n/locales/hr-HR.json
@@ -301,6 +301,7 @@
   "staking.delegationCountdown.heading": "!!!Cardano decentralization",
   "staking.delegationCountdown.timeLeftDesc": "!!!Rewards begin in",
   "staking.delegationSetup.chooseStakePool.step.dialog.continueButtonLabel": "!!!Continue",
+  "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolLabel": "!!!You are already delegating <span>{selectedWalletName}</span> wallet to <span>[{selectedPoolTicker}]</span> stake pool. <span>If you wish to re-delegate your stake, please select a different pool.</span>",
   "staking.delegationSetup.chooseStakePool.step.dialog.description": "!!!Choose a stake pool to which you would like to delegate.",
   "staking.delegationSetup.chooseStakePool.step.dialog.recentPoolsLabel": "!!!Pick one of your recent stake pool choices:",
   "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.label": "!!!Or search for a stake pool:",

diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
@@ -301,6 +301,7 @@
   "staking.delegationCountdown.heading": "Cardano分散化",
   "staking.delegationCountdown.timeLeftDesc": "報酬制開始まであと",
   "staking.delegationSetup.chooseStakePool.step.dialog.continueButtonLabel": "続ける",
+  "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolLabel": "<span>{selectedWalletName}</span>ウォレットは既に<span>「{selectedPoolTicker}」</span>ステークプールに委任されています。<span>ステークの委任先を変更する場合は、異なるプールを選択してください。</span>",
   "staking.delegationSetup.chooseStakePool.step.dialog.description": "現在選択されているステークプール：",
   "staking.delegationSetup.chooseStakePool.step.dialog.recentPoolsLabel": "最近選択したステークプールから選択する：",
   "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.label": "または利用可能な全ステークプールのリストから選択する：",

diff --git a/source/renderer/app/i18n/locales/ko-KR.json b/source/renderer/app/i18n/locales/ko-KR.json
@@ -301,6 +301,7 @@
   "staking.delegationCountdown.heading": "!!!Cardano decentralization",
   "staking.delegationCountdown.timeLeftDesc": "!!!Rewards begin in",
   "staking.delegationSetup.chooseStakePool.step.dialog.continueButtonLabel": "!!!Continue",
+  "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolLabel": "!!!You are already delegating <span>{selectedWalletName}</span> wallet to <span>[{selectedPoolTicker}]</span> stake pool. <span>If you wish to re-delegate your stake, please select a different pool.</span>",
   "staking.delegationSetup.chooseStakePool.step.dialog.description": "!!!Choose a stake pool to which you would like to delegate.",
   "staking.delegationSetup.chooseStakePool.step.dialog.recentPoolsLabel": "!!!Pick one of your recent stake pool choices:",
   "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.label": "!!!Or search for a stake pool:",

diff --git a/source/renderer/app/i18n/locales/zh-CN.json b/source/renderer/app/i18n/locales/zh-CN.json
@@ -301,6 +301,7 @@
   "staking.delegationCountdown.heading": "!!!Cardano decentralization",
   "staking.delegationCountdown.timeLeftDesc": "!!!Rewards begin in",
   "staking.delegationSetup.chooseStakePool.step.dialog.continueButtonLabel": "!!!Continue",
+  "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolLabel": "!!!You are already delegating <span>{selectedWalletName}</span> wallet to <span>[{selectedPoolTicker}]</span> stake pool. <span>If you wish to re-delegate your stake, please select a different pool.</span>",
   "staking.delegationSetup.chooseStakePool.step.dialog.description": "!!!Choose a stake pool to which you would like to delegate.",
   "staking.delegationSetup.chooseStakePool.step.dialog.recentPoolsLabel": "!!!Pick one of your recent stake pool choices:",
   "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.label": "!!!Or search for a stake pool:",

diff --git a/storybook/stories/staking/DelegationSteps.stories.js b/storybook/stories/staking/DelegationSteps.stories.js
@@ -100,7 +100,7 @@ export class StakingDelegationSteps extends Component<Props, State> {
         onClose={action('onClose')}
         onBack={action('onBack')}
         onSelectPool={this.onContinue}
-        selectedPool={STAKE_POOLS[0]}
+        selectedPool={null}
         selectedWallet={WALLETS[0]}
       />,
       <DelegationStepsConfirmationDialog