[DDW-703] Undelegate a wallet

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Features
 
+- Added functionality to undelegate a wallet ([PR 2636](https://github.com/input-output-hk/daedalus/pull/2636))
 - Removed "Alonzo tada" icon and "Alonzo countdown" screen ([PR 2708](https://github.com/input-output-hk/daedalus/pull/2708))
 
 ### Fixes

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

@@ -15,7 +15,6 @@ type Props = {
   numberOfStakePools: number,
   numberOfRankedStakePools: number,
   onDelegate: Function,
-  onUndelegate: Function,
   networkTip: ?TipInfo,
   epochLength: ?number,
   nextEpoch: ?NextEpoch,
@@ -40,7 +39,6 @@ export default class DelegationCenter extends Component<Props> {
       numberOfStakePools,
       numberOfRankedStakePools,
       onDelegate,
-      onUndelegate,
       networkTip,
       epochLength,
       nextEpoch,
@@ -73,7 +71,6 @@ export default class DelegationCenter extends Component<Props> {
           numberOfStakePools={numberOfStakePools}
           numberOfRankedStakePools={numberOfRankedStakePools}
           onDelegate={onDelegate}
-          onUndelegate={onUndelegate}
           getStakePoolById={getStakePoolById}
           nextEpoch={nextEpoch}
           futureEpoch={futureEpoch}

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

@@ -34,7 +34,6 @@ type Props = {
   numberOfStakePools: number,
   numberOfRankedStakePools: number,
   onDelegate: Function,
-  onUndelegate: Function,
   getStakePoolById: Function,
   isLoading: boolean,
   nextEpoch: ?NextEpoch,
@@ -62,7 +61,6 @@ export default class DelegationCenterBody extends Component<Props> {
       numberOfStakePools,
       numberOfRankedStakePools,
       onDelegate,
-      onUndelegate,
       getStakePoolById,
       isLoading,
       nextEpoch,
@@ -123,7 +121,6 @@ export default class DelegationCenterBody extends Component<Props> {
                   numberOfStakePools={numberOfStakePools}
                   numberOfRankedStakePools={numberOfRankedStakePools}
                   onDelegate={() => onDelegate(wallet.id)}
-                  onUndelegate={() => onUndelegate(wallet.id)}
                   delegatedStakePool={getStakePoolById(
                     wallet.delegatedStakePoolId
                   )}

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

@@ -84,7 +84,6 @@ type Props = {
   numberOfStakePools: number,
   numberOfRankedStakePools: number,
   onDelegate: Function,
-  onUndelegate: Function,
   getStakePoolById: Function,
   nextEpochNumber: number,
   futureEpochNumber: number,
@@ -220,7 +219,6 @@ export default class WalletRow extends Component<Props, WalletRowState> {
       numberOfRankedStakePools,
       getStakePoolById,
       onDelegate,
-      onUndelegate,
       nextEpochNumber,
       futureEpochNumber,
       currentTheme,
@@ -230,12 +228,8 @@ export default class WalletRow extends Component<Props, WalletRowState> {
     } = this.props;
     const { highlightedPoolId } = this.state;
 
-    // @TODO - remove once quit stake pool delegation is connected with rewards balance
-    const isUndelegateBlocked = true;
-
     const syncingProgress = get(syncState, 'progress.quantity', '');
     const notDelegatedText = intl.formatMessage(messages.notDelegated);
-    const removeDelegationText = intl.formatMessage(messages.removeDelegation);
     const delegateText = intl.formatMessage(messages.delegate);
     const redelegateText = intl.formatMessage(messages.redelegate);
 
@@ -458,16 +452,6 @@ export default class WalletRow extends Component<Props, WalletRowState> {
                     {notDelegatedText}
                   </div>
                 )}
-                {futurePendingDelegatedStakePoolId && !isUndelegateBlocked && (
-                  <div
-                    className={actionButtonStyles}
-                    role="presentation"
-                    onClick={onUndelegate}
-                    key="undelegate"
-                  >
-                    {removeDelegationText}
-                  </div>
-                )}
                 <div
                   className={actionButtonStyles}
                   role="presentation"

source/renderer/app/components/wallet/settings/UndelegateWalletBox.js

@@ -0,0 +1,95 @@
+// @flow
+import type { Node } from 'react';
+import React, { useCallback } from 'react';
+import { injectIntl, intlShape } from 'react-intl';
+import BorderedBox from '../../widgets/BorderedBox';
+import styles from './WalletSettings.scss';
+import UndelegateWalletButton from './UndelegateWalletButton';
+import DelegateWalletButton from './DelegateWalletButton';
+import UndelegateWalletConfirmationDialog from './UndelegateWalletConfirmationDialog';
+import getWalletSettingsMessages from './WalletSettings.messages';
+
+type Props = {
+  intl: intlShape.isRequired,
+  isDelegating: boolean,
+  isDialogOpen: Function,
+  isRestoring: boolean,
+  isSyncing: boolean,
+  onBlockForm: Function,
+  onDelegateClick: Function,
+  openDialogAction: Function,
+  undelegateWalletDialogContainer: Node,
+  updateDataForActiveDialogAction: Function,
+  walletId: string,
+};
+
+const UndelegateWalletBox = ({
+  intl,
+  isDelegating,
+  isRestoring,
+  isSyncing,
+  isDialogOpen,
+  undelegateWalletDialogContainer,
+  walletId,
+  onBlockForm,
+  onDelegateClick,
+  openDialogAction,
+  updateDataForActiveDialogAction,
+}: Props): Node => {
+  const messages = getWalletSettingsMessages();
+
+  const headerMessage = isDelegating
+    ? intl.formatMessage(messages.undelegateWalletHeader)
+    : intl.formatMessage(messages.delegateWalletHeader);
+  let warningMessage = null;
+  if (isDelegating) {
+    warningMessage =
+      isRestoring || isSyncing
+        ? intl.formatMessage(messages.undelegateWalletDisabledWarning)
+        : intl.formatMessage(messages.undelegateWalletWarning);
+  } else {
+    warningMessage =
+      isRestoring || isSyncing
+        ? intl.formatMessage(messages.delegateWalletDisabledWarning)
+        : intl.formatMessage(messages.delegateWalletWarning);
+  }
+
+  const onUndelegateWalletClick = useCallback(async () => {
+    onBlockForm();
+    openDialogAction({
+      dialog: UndelegateWalletConfirmationDialog,
+    });
+    updateDataForActiveDialogAction({
+      data: { walletId },
+    });
+  });
+
+  return (
+    <>
+      <BorderedBox className={styles.undelegateWalletBox}>
+        <span>{headerMessage}</span>
+        <div className={styles.contentBox}>
+          <div>
+            <p>{warningMessage}</p>
+          </div>
+          {isDelegating ? (
+            <UndelegateWalletButton
+              disabled={isRestoring || isSyncing}
+              onUndelegate={onUndelegateWalletClick}
+            />
+          ) : (
+            <DelegateWalletButton
+              disabled={isRestoring || isSyncing}
+              onDelegate={onDelegateClick}
+            />
+          )}
+        </div>
+      </BorderedBox>
+      {isDialogOpen(UndelegateWalletConfirmationDialog)
+        ? undelegateWalletDialogContainer
+        : false}
+    </>
+  );
+};
+
+export default injectIntl(UndelegateWalletBox);

source/renderer/app/components/wallet/settings/UndelegateWalletConfirmationDialog.js

@@ -3,7 +3,7 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { get } from 'lodash';
-import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
+import { intlShape, FormattedHTMLMessage } from 'react-intl';
 import vjf from 'mobx-react-form/lib/validators/VJF';
 import classnames from 'classnames';
 import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
@@ -22,85 +22,9 @@ import styles from './UndelegateWalletConfirmationDialog.scss';
 import globalMessages from '../../../i18n/global-messages';
 import LocalizableError from '../../../i18n/LocalizableError';
 import { submitOnEnter } from '../../../utils/form';
+import getUndelegateWalletConfirmationDialogMessages from './UndelegateWalletConfirmationDialog.messages';
 
-const messages = defineMessages({
-  title: {
-    id: 'wallet.settings.undelegate.dialog.title',
-    defaultMessage: '!!!Undelegate',
-    description: 'Title for the "Undelegate wallet" dialog.',
-  },
-  confirmButtonLabel: {
-    id: 'wallet.settings.undelegate.dialog.confirmButtonLabel',
-    defaultMessage: '!!!Undelegate',
-    description:
-      'Label for the "Undelegate" button in the undelegate wallet dialog.',
-  },
-  descriptionWithTicker: {
-    id: 'wallet.settings.undelegate.dialog.descriptionWithTicker',
-    defaultMessage:
-      '!!!<p>The stake from your wallet <strong>{walletName}</strong> is currently delegated to the <strong>[{stakePoolTicker}] {stakePoolName}</strong> stake pool.</p><p>Do you want to undelegate your stake and stop earning rewards?</p>',
-    description:
-      'Description of current delegation of wallet in the "Undelegate wallet" dialog.',
-  },
-  descriptionWithUnknownTicker: {
-    id: 'wallet.settings.undelegate.dialog.descriptionWithUnknownTicker',
-    defaultMessage:
-      '!!!<p>The stake from your wallet <strong>{walletName}</strong> is currently delegated to the <strong>{stakePoolTicker}</strong> stake pool.</p><p>Do you want to undelegate your stake and stop earning rewards?</p>',
-    description:
-      'Description of current delegation of wallet in the "Undelegate wallet" dialog.',
-  },
-  unknownStakePoolLabel: {
-    id: 'wallet.settings.undelegate.dialog.unknownStakePoolLabel',
-    defaultMessage: '!!!unknown',
-    description: 'unknown stake pool label in the "Undelegate wallet" dialog.',
-  },
-  confirmUnsupportNotice: {
-    id: 'wallet.settings.undelegate.dialog.confirmUnsupportNotice',
-    defaultMessage:
-      '!!!I understand that I am not supporting the Cardano network when my stake is undelegated.',
-    description:
-      'Notice to confirm if the user understands unsupporting Cardano network after undelegation',
-  },
-  confirmIneligibleNotice: {
-    id: 'wallet.settings.undelegate.dialog.confirmIneligibleNotice',
-    defaultMessage:
-      '!!!I understand that I will not be eligible to earn rewards when my stake is undelegated.',
-    description:
-      'Notice to confirm if the user understands non-earning rewards after undelegation',
-  },
-  feesLabel: {
-    id: 'wallet.settings.undelegate.dialog.feesLabel',
-    defaultMessage: '!!!Fees',
-    description: 'Fees label in the "Undelegate wallet" dialog.',
-  },
-  depositLabel: {
-    id: 'wallet.settings.undelegate.dialog.depositLabel',
-    defaultMessage: '!!!Deposits reclaimed',
-    description: 'Deposits reclaimed label in the "Undelegate wallet" dialog.',
-  },
-  spendingPasswordLabel: {
-    id: 'wallet.settings.undelegate.dialog.spendingPasswordLabel',
-    defaultMessage: '!!!Spending password',
-    description: 'Spending password label in the "Undelegate wallet" dialog.',
-  },
-  spendingPasswordPlaceholder: {
-    id: 'wallet.settings.undelegate.dialog.spendingPasswordPlaceholder',
-    defaultMessage: '!!!Type your spending password here',
-    description:
-      'Spending password placeholder in the "Undelegate wallet" dialog.',
-  },
-  passwordErrorMessage: {
-    id: 'wallet.settings.undelegate.dialog.passwordError',
-    defaultMessage: '!!!Incorrect spending password.',
-    description: 'Label for password error in the "Undelegate wallet" dialog.',
-  },
-  calculatingFees: {
-    id: 'wallet.settings.undelegate.dialog.calculatingFees',
-    defaultMessage: '!!!Calculating fees',
-    description:
-      '"Calculating fees" message in the "Undelegate wallet" dialog.',
-  },
-});
+const messages = getUndelegateWalletConfirmationDialogMessages();
 
 messages.fieldIsRequired = globalMessages.fieldIsRequired;
 

source/renderer/app/components/wallet/settings/UndelegateWalletConfirmationDialog.messages.js

@@ -0,0 +1,91 @@
+// @flow
+import { defineMessages } from 'react-intl';
+import type { ReactIntlMessage } from '../../../types/i18nTypes';
+
+const getUndelegateWalletConfirmationDialogMessages = (): {
+  [string]: ReactIntlMessage,
+} =>
+  defineMessages({
+    title: {
+      id: 'wallet.settings.undelegate.dialog.title',
+      defaultMessage: '!!!Undelegate',
+      description: 'Title for the "Undelegate wallet" dialog.',
+    },
+    confirmButtonLabel: {
+      id: 'wallet.settings.undelegate.dialog.confirmButtonLabel',
+      defaultMessage: '!!!Undelegate',
+      description:
+        'Label for the "Undelegate" button in the undelegate wallet dialog.',
+    },
+    descriptionWithTicker: {
+      id: 'wallet.settings.undelegate.dialog.descriptionWithTicker',
+      defaultMessage:
+        '!!!<p>The stake from your wallet <strong>{walletName}</strong> is currently delegated to the <strong>[{stakePoolTicker}] {stakePoolName}</strong> stake pool.</p><p>Do you want to undelegate your stake and stop earning rewards?</p>',
+      description:
+        'Description of current delegation of wallet in the "Undelegate wallet" dialog.',
+    },
+    descriptionWithUnknownTicker: {
+      id: 'wallet.settings.undelegate.dialog.descriptionWithUnknownTicker',
+      defaultMessage:
+        '!!!<p>The stake from your wallet <strong>{walletName}</strong> is currently delegated to the <strong>{stakePoolTicker}</strong> stake pool.</p><p>Do you want to undelegate your stake and stop earning rewards?</p>',
+      description:
+        'Description of current delegation of wallet in the "Undelegate wallet" dialog.',
+    },
+    unknownStakePoolLabel: {
+      id: 'wallet.settings.undelegate.dialog.unknownStakePoolLabel',
+      defaultMessage: '!!!unknown',
+      description:
+        'unknown stake pool label in the "Undelegate wallet" dialog.',
+    },
+    confirmUnsupportNotice: {
+      id: 'wallet.settings.undelegate.dialog.confirmUnsupportNotice',
+      defaultMessage:
+        '!!!I understand that I am not supporting the Cardano network when my stake is undelegated.',
+      description:
+        'Notice to confirm if the user understands unsupporting Cardano network after undelegation',
+    },
+    confirmIneligibleNotice: {
+      id: 'wallet.settings.undelegate.dialog.confirmIneligibleNotice',
+      defaultMessage:
+        '!!!I understand that I will not be eligible to earn rewards when my stake is undelegated.',
+      description:
+        'Notice to confirm if the user understands non-earning rewards after undelegation',
+    },
+    feesLabel: {
+      id: 'wallet.settings.undelegate.dialog.feesLabel',
+      defaultMessage: '!!!Fees',
+      description: 'Fees label in the "Undelegate wallet" dialog.',
+    },
+    depositLabel: {
+      id: 'wallet.settings.undelegate.dialog.depositLabel',
+      defaultMessage: '!!!Deposits reclaimed',
+      description:
+        'Deposits reclaimed label in the "Undelegate wallet" dialog.',
+    },
+    spendingPasswordLabel: {
+      id: 'wallet.settings.undelegate.dialog.spendingPasswordLabel',
+      defaultMessage: '!!!Spending password',
+      description: 'Spending password label in the "Undelegate wallet" dialog.',
+    },
+    spendingPasswordPlaceholder: {
+      id: 'wallet.settings.undelegate.dialog.spendingPasswordPlaceholder',
+      defaultMessage: '!!!Type your spending password here',
+      description:
+        'Spending password placeholder in the "Undelegate wallet" dialog.',
+    },
+
+    passwordErrorMessage: {
+      id: 'wallet.settings.undelegate.dialog.passwordError',
+      defaultMessage: '!!!Incorrect spending password.',
+      description:
+        'Label for password error in the "Undelegate wallet" dialog.',
+    },
+    calculatingFees: {
+      id: 'wallet.settings.undelegate.dialog.calculatingFees',
+      defaultMessage: '!!!Calculating fees',
+      description:
+        '"Calculating fees" message in the "Undelegate wallet" dialog.',
+    },
+  });
+
+export default getUndelegateWalletConfirmationDialogMessages;