[DDW-759] Over-saturation warning (#2733)

* [DDW-759] Added translations, new component for warning

* [DDW-759] Fixed flow Issues

* [DDW-759] Converted in functional component. Refactoring

* [DDW-759] Simplify code, created function to calculate the oversaturation

* [DDW-759] Updated oversaturation calculation and component

* [DDW-759] Updated storybook components

* [DDW-759] Removed logging

* [DDW-759] Amended oversaturation component css class for centering text

* [DDW-759] Updated CHANGELOG

* [DDW-759] Fixed flow types

* [DDW-759] Adjusted line-height of over-saturation warning

* [DDW-759] Updated over-saturation check to ignore already delegating pool

* [DDW-759] Removed unused import

* [DDW-759] Updated css properties for over-saturation component

* [DDW-759] Handle pre-selected pool with fee calculation

* [DDW-759] Prevent modal overlay scroll

* [DDW-759] Prevent any modal body overflow

* [DDW-759] Adjusted CSS of over-saturation messages to match updated designs

* [DDW-759] Use updated circulating supply figure, fast exit over-saturation calculations

* [DDW-759] Updated condition for checking over-saturation

* [DDW-759] Formatted over-saturation warning with 2 decimal places

Co-authored-by: Daniel Main <[email protected]>
Co-authored-by: Daniel Main <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Features
 
+- Added Over-saturation warning in delegation wizard ([PR 2733](https://github.com/input-output-hk/daedalus/pull/2733))
 - 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))

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

@@ -11,7 +11,6 @@ import DelegationStepsChooseStakePoolDialog from './DelegationStepsChooseStakePo
 import LocalizableError from '../../../i18n/LocalizableError';
 import StakePool from '../../../domains/StakePool';
 import Wallet from '../../../domains/Wallet';
-
 import type { DelegationCalculateFeeResponse } from '../../../api/staking/types';
 import type { HwDeviceStatus } from '../../../domains/Wallet';
 
@@ -26,6 +25,7 @@ type Props = {
   onSelectWallet: Function,
   onSelectPool: Function,
   isWalletAcceptable: Function,
+  maxDelegationFunds: number,
   stepsList: Array<string>,
   wallets: Array<Wallet>,
   minDelegationFunds: number,
@@ -45,6 +45,25 @@ type Props = {
   isTrezor: boolean,
 };
 
+const getOversaturationPercentage = (
+  selectedWallet: ?Wallet,
+  selectedPool: ?StakePool,
+  maxDelegationFunds: number
+): number => {
+  if (
+    !selectedPool ||
+    !selectedWallet ||
+    (selectedWallet.lastDelegatedStakePoolId ||
+      selectedWallet.delegatedStakePoolId) === selectedPool.id
+  )
+    return 0;
+
+  const percentageIncrease = Number(
+    (100 / maxDelegationFunds) * selectedWallet.availableAmount
+  );
+  return selectedPool.saturation + percentageIncrease - 100;
+};
+
 @observer
 export default class DelegationSetupWizardDialog extends Component<Props> {
   componentDidUpdate(prevProps: Props) {
@@ -88,9 +107,15 @@ export default class DelegationSetupWizardDialog extends Component<Props> {
       getStakePoolById,
       hwDeviceStatus,
       isTrezor,
+      maxDelegationFunds,
     } = this.props;
 
     const selectedWalletId = get(selectedWallet, 'id', null);
+    const oversaturationPercentage = getOversaturationPercentage(
+      selectedWallet,
+      selectedPool,
+      maxDelegationFunds
+    );
 
     if (isDisabled) {
       return (
@@ -132,6 +157,8 @@ export default class DelegationSetupWizardDialog extends Component<Props> {
             onClose={onClose}
             onBack={onBack}
             onSelectPool={onSelectPool}
+            onContinue={onContinue}
+            oversaturationPercentage={oversaturationPercentage}
           />
         );
         break;
@@ -150,6 +177,7 @@ export default class DelegationSetupWizardDialog extends Component<Props> {
             hwDeviceStatus={hwDeviceStatus}
             onExternalLinkClick={onOpenExternalLink}
             isTrezor={isTrezor}
+            oversaturationPercentage={oversaturationPercentage}
           />
         );
         break;