[DDW-197] Merges-in latest develop branch and fix conflicts. Fit Wall…

…ets Dropdown syncing logic with new HW list item indicator

CHANGELOG.md

@@ -7,9 +7,11 @@ Changelog
 
 - 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
 
+- Fixed animation on wallet dropdown option during redemption process ([PR 2191](https://github.com/input-output-hk/daedalus/pull/2191))
 - Fixed Cardano Explorer URLs ([PR 2198](https://github.com/input-output-hk/daedalus/pull/2198))
 - Fixed Stake pool tooltip height issue ([PR 2203](https://github.com/input-output-hk/daedalus/pull/2203))
 

source/renderer/app/api/api.js

@@ -2105,11 +2105,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);
@@ -2118,6 +2124,7 @@ const _createStakePoolFromServerData = action(
       id,
       relativeStake: relativeStakePercentage,
       producedBlocks: producedBlocksCount,
+      nonMyopicMemberRewards: nonMyopicMemberRewardsQuantity,
       ticker,
       homepage,
       cost: new BigNumber(costQuantity).dividedBy(LOVELACES_PER_ADA),

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,

source/renderer/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

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

@@ -80,6 +80,12 @@ const messages = defineMessages({
     description:
       'Label for continue button on the delegation setup "choose wallet" step dialog.',
   },
+  syncingWallet: {
+    id: 'staking.delegationSetup.chooseWallet.step.dialog.syncingWallet',
+    defaultMessage: '!!!syncing',
+    description:
+      'Syncing wallet label on the delegation setup "choose wallet" step dialog.',
+  },
 });
 
 type Props = {
@@ -228,6 +234,7 @@ export default class DelegationStepsChooseWalletDialog extends Component<
               messages.selectWalletInputPlaceholder
             )}
             value={selectedWalletId}
+            syncingLabel={intl.formatMessage(messages.syncingWallet)}
             getStakePoolById={getStakePoolById}
           />
           {error}

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

@@ -9,6 +9,21 @@
         background: transparent;
       }
     }
+
+    .WalletsDropdownOption_topRow .WalletsDropdownOption_syncing > div .LoadingSpinner_icon svg path {
+      fill: var(--theme-delegation-steps-choose-wallet-custom-value-color) !important;
+      opacity: 0.5;
+    }
+
+    .SimpleOptions_option {
+      display: flex !important;
+      height: 50px !important;
+      padding: 10px 20px !important;
+    }
+
+    .SimpleBubble_bubble {
+      border-radius: 2px !important;
+    }
   }
 
   .content {

source/renderer/app/components/staking/redeem-itn-rewards/NoWalletsDialog.scss

@@ -9,12 +9,15 @@
     stroke: var(--theme-dialog-fullsize-text-highlight-color);
 
     path {
-      fill: transparent;
       stroke: var(--theme-dialog-fullsize-text-highlight-color);
     }
 
+    path:nth-child(4) {
+      fill: var(--theme-dialog-fullsize-text-highlight-color);
+    }
+
     circle {
-      fill: transparent;
+      fill: var(--theme-dialog-fullsize-text-highlight-color);
     }
 
     g {

source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.js

@@ -26,6 +26,7 @@ import globalMessages from '../../../i18n/global-messages';
 import LocalizableError from '../../../i18n/LocalizableError';
 import { ITN_WALLET_RECOVERY_PHRASE_WORD_COUNT } from '../../../config/cryptoConfig';
 import { FORM_VALIDATION_DEBOUNCE_WAIT } from '../../../config/timingConfig';
+import { MIN_DELEGATION_FUNDS } from '../../../config/stakingConfig';
 
 const messages = defineMessages({
   title: {
@@ -127,10 +128,17 @@ const messages = defineMessages({
     description:
       'Error message shown when invalid recovery phrase was entered.',
   },
+  syncingWallet: {
+    id: 'staking.delegationSetup.chooseWallet.step.dialog.syncingWallet',
+    defaultMessage: '!!!syncing',
+    description:
+      'Syncing wallet label on the delegation setup "choose wallet" step dialog.',
+  },
 });
 
 type Props = {
   error?: ?LocalizableError,
+  errorMessage?: ?LocalizableError,
   isSubmitting: boolean,
   mnemonicValidator: Function,
   onClose: Function,
@@ -247,6 +255,7 @@ export default class Step1ConfigurationDialog extends Component<Props> {
       openExternalLink,
       wallets,
       recoveryPhrase,
+      errorMessage,
     } = this.props;
     let { error } = this.props;
     if (
@@ -302,6 +311,17 @@ export default class Step1ConfigurationDialog extends Component<Props> {
 
     const closeButton = <DialogCloseButton onClose={onClose} />;
 
+    const minDelegationFunds = MIN_DELEGATION_FUNDS;
+
+    const dropdownError = errorMessage && (
+      <p className={styles.errorMessage}>
+        <FormattedHTMLMessage
+          {...errorMessage}
+          values={{ minDelegationFunds }}
+        />
+      </p>
+    );
+
     return (
       <Dialog
         title={intl.formatMessage(messages.title)}
@@ -347,11 +367,13 @@ export default class Step1ConfigurationDialog extends Component<Props> {
               placeholder={intl.formatMessage(
                 messages.selectWalletInputPlaceholder
               )}
+              syncingLabel={intl.formatMessage(messages.syncingWallet)}
               value={walletId}
               getStakePoolById={() => {}}
               errorPosition="bottom"
             />
           </div>
+          {dropdownError}
           <Checkbox
             {...checkboxAcceptance1Field.bind()}
             className={styles.checkbox}

source/renderer/app/components/staking/redeem-itn-rewards/Step1ConfigurationDialog.scss

@@ -42,6 +42,20 @@
   }
 }
 
+.errorMessage {
+  color: var(--theme-delegation-steps-choose-wallet-error-message-light-color);
+  font-size: 14px;
+  letter-spacing: normal;
+  margin-bottom: 10px;
+  margin-top: -5px;
+
+  span {
+    color: var(--theme-delegation-steps-choose-wallet-error-message-color);
+    font-family: var(--font-medium);
+    font-weight: 500;
+  }
+}
+
 .error {
   @include error-message;
   margin-bottom: 1rem;
@@ -55,8 +69,19 @@
 
     &:hover {
       background-color: var(
-        --theme-dialog-fullsize-field-background-color
+          --theme-dialog-fullsize-field-background-color
       ) !important;
     }
   }
+
+  .SimpleOptions_option.SimpleOptions_selectedOption
+  .WalletsDropdownOption_component
+  .WalletsDropdownOption_topRow
+  .WalletsDropdownOption_topRowSync {
+    display: none;
+  }
+
+  .WalletsDropdownOption_component {
+    width: 100% !important;
+  }
 }

source/renderer/app/components/staking/redeem-itn-rewards/Step3FailureDialog.scss

@@ -2,18 +2,24 @@
   display: block;
   margin-bottom: 30px;
   text-align: center;
+
   svg {
+    fill: transparent;
     height: 71px;
     stroke: var(--theme-dialog-fullsize-text-highlight-color);
+
     path {
       stroke: var(--theme-dialog-fullsize-text-highlight-color);
+
       &:nth-child(4) {
         fill: var(--theme-dialog-fullsize-text-highlight-color);
       }
     }
+
     circle {
       fill: var(--theme-dialog-fullsize-text-highlight-color);
     }
+
     g {
       ellipse {
         &:nth-child(7),
@@ -34,12 +40,14 @@
     }
   }
 }
+
 .description {
   font-family: var(--font-regular);
   font-size: 16px;
   line-height: 1.38;
   margin-bottom: 30px;
   text-align: center;
+
   b {
     font-family: var(--font-semibold);
   }

source/renderer/app/components/staking/stake-pools/StakePools.js

@@ -12,6 +12,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: {
@@ -111,6 +112,11 @@ export default class StakePools extends Component<Props, State> {
       search
     );
 
+    const numberOfRankedStakePools: number = stakePoolsList.filter(
+      (stakePool) =>
+        IS_RANKING_DATA_AVAILABLE && stakePool.nonMyopicMemberRewards
+    ).length;
+
     const listTitleMessage = search.trim().length
       ? messages.listTitleWithSearch
       : messages.listTitle;
@@ -177,7 +183,7 @@ export default class StakePools extends Component<Props, State> {
                   setListActive={this.handleSetListActive}
                   containerClassName="StakingWithNavigation_page"
                   onSelect={this.onDelegate}
-                  numberOfStakePools={stakePoolsList.length}
+                  numberOfRankedStakePools={numberOfRankedStakePools}
                   showWithSelectButton
                 />
               </Fragment>
@@ -202,7 +208,7 @@ export default class StakePools extends Component<Props, State> {
               setListActive={this.handleSetListActive}
               containerClassName="StakingWithNavigation_page"
               onSelect={this.onDelegate}
-              numberOfStakePools={stakePoolsList.length}
+              numberOfRankedStakePools={numberOfRankedStakePools}
             />
           </Fragment>
         )}

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}
             />
           );