From b245537aa49c972109fef4e6140b82aaade9fa8e Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 16 Mar 2021 04:55:19 -0400
Subject: [PATCH 01/38] [DDW-435] Stake pool filter dialog draft

---
 .../staking/stake-pools/FilterDialog.js       | 497 ++++++++++++++++++
 .../staking/stake-pools/FilterDialog.scss     | 336 ++++++++++++
 2 files changed, 833 insertions(+)
 create mode 100644 source/renderer/app/components/staking/stake-pools/FilterDialog.js
 create mode 100644 source/renderer/app/components/staking/stake-pools/FilterDialog.scss

diff --git a/source/renderer/app/components/staking/stake-pools/FilterDialog.js b/source/renderer/app/components/staking/stake-pools/FilterDialog.js
new file mode 100644
index 0000000000..439a4e3a74
--- /dev/null
+++ b/source/renderer/app/components/staking/stake-pools/FilterDialog.js
@@ -0,0 +1,497 @@
+// @flow
+/* eslint-disable jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
+import React, { Component, createRef } from 'react';
+import type { Element, ElementRef } from 'react';
+import { observer } from 'mobx-react';
+import { isEqual, pick } from 'lodash';
+import { defineMessages, intlShape } from 'react-intl';
+import { PopOver } from 'react-polymorph/lib/components/PopOver';
+import classNames from 'classnames';
+import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
+import type { StakePoolFilterOptionsType } from '../../../stores/StakingStore';
+import { emptyStakePoolFilterOptions } from '../../../stores/StakingStore';
+import TinyCheckbox from '../../widgets/forms/TinyCheckbox';
+import TinyButton from '../../widgets/forms/TinyButton';
+import globalMessages from '../../../i18n/global-messages';
+import styles from './FilterDialog.scss';
+
+const messages = defineMessages({
+  resetFilter: {
+    id: 'staking.stakePools.filter.resetFilter',
+    defaultMessage: '!!!Reset Filter',
+    description: 'Reset Filter button label.',
+  },
+  retiringPools: {
+    id: 'staking.stakePools.filter.retiringPools',
+    defaultMessage: '!!!Retiring pools',
+    description: 'Retiring pools filter type.',
+  },
+  privatePools: {
+    id: 'staking.stakePools.filter.privatePools',
+    defaultMessage: '!!!Private pools',
+    description: 'Private pools filter type.',
+  },
+  poolsWithoutOffChainData: {
+    id: 'staking.stakePools.filter.poolsWithoutOffChainData',
+    defaultMessage: '!!!Pools without off-chain data',
+    description: 'Pools without off-chain data filter type.',
+  },
+  apply: {
+    id: 'staking.stakePools.filter.apply',
+    defaultMessage: '!!!Apply',
+    description: 'Filter button label.',
+  },
+});
+
+export type FilterDialogProps = {
+  locale: string,
+  dateFormat: string,
+  numberFormat: string,
+  defaultFilterOptions: TransactionFilterOptionsType,
+  populatedFilterOptions: TransactionFilterOptionsType,
+  onFilter: Function,
+  triggerElement?: Element<*>,
+};
+
+@observer
+export default class FilterDialog extends Component<FilterDialogProps> {
+  static contextTypes = {
+    intl: intlShape.isRequired,
+  };
+
+  dateRangeOptions: Array<{ label: string, value: string }>;
+  form: ReactToolboxMobxForm;
+  popoverTippyInstance: ElementRef<*> = createRef();
+
+  constructor(props: FilterDialogProps, context: Object) {
+    super(props);
+
+    const {
+      populatedFilterOptions: {
+        incomingChecked,
+        outgoingChecked,
+        dateRange,
+        fromDate,
+        toDate,
+        fromAmount,
+        toAmount,
+      },
+    } = props;
+
+    const { intl } = context;
+
+    this.dateRangeOptions = [
+      {
+        label: intl.formatMessage(messages.last7Days),
+        value: DateRangeTypes.LAST_7_DAYS,
+      },
+      {
+        label: intl.formatMessage(messages.last30Days),
+        value: DateRangeTypes.LAST_30_DAYS,
+      },
+      {
+        label: intl.formatMessage(messages.last90Days),
+        value: DateRangeTypes.LAST_90_DAYS,
+      },
+      {
+        label: intl.formatMessage(messages.thisYear),
+        value: DateRangeTypes.THIS_YEAR,
+      },
+      {
+        label: intl.formatMessage(messages.custom),
+        value: DateRangeTypes.CUSTOM,
+      },
+    ];
+    this.form = new ReactToolboxMobxForm({
+      fields: {
+        incomingChecked: {
+          type: 'checkbox',
+          label: intl.formatMessage(messages.incoming),
+          value: incomingChecked,
+        },
+        outgoingChecked: {
+          type: 'checkbox',
+          label: intl.formatMessage(messages.outgoing),
+          value: outgoingChecked,
+        },
+        dateRange: {
+          label: intl.formatMessage(messages.dateRange),
+          value: dateRange,
+        },
+        fromDate: {
+          label: '',
+          value: fromDate,
+        },
+        toDate: {
+          label: '',
+          value: toDate,
+        },
+        fromAmount: {
+          type: 'number',
+          label: '',
+          value: fromAmount,
+        },
+        toAmount: {
+          type: 'number',
+          label: '',
+          value: toAmount,
+        },
+      },
+    });
+  }
+
+  setFilterType = (
+    field: 'incomingChecked' | 'outgoingChecked',
+    value: boolean
+  ) => {
+    this.form.select(field).set(value);
+    if (value === false) {
+      const otherFieldName =
+        field === 'incomingChecked' ? 'outgoingChecked' : 'incomingChecked';
+      const otherField = this.form.select(otherFieldName);
+      if (otherField.value === false) {
+        otherField.set(true);
+      }
+    }
+  };
+
+  fillFormFields = (filterOptions: TransactionFilterOptionsType) => {
+    const {
+      dateRange,
+      fromDate,
+      toDate,
+      fromAmount,
+      toAmount,
+      incomingChecked,
+      outgoingChecked,
+    } = filterOptions;
+
+    this.form.select('dateRange').set(dateRange);
+    this.form.select('fromDate').set(fromDate);
+    this.form.select('toDate').set(toDate);
+    this.form.select('fromAmount').set(fromAmount);
+    this.form.select('toAmount').set(toAmount);
+    this.form.select('incomingChecked').set(incomingChecked);
+    this.form.select('outgoingChecked').set(outgoingChecked);
+  };
+
+  resetForm = () => this.fillFormFields(emptyTransactionFilterOptions);
+
+  generateDefaultFilterOptions = () =>
+    this.fillFormFields(this.props.defaultFilterOptions);
+
+  isFormValuesEqualTo = (
+    comparedFilterOptions: TransactionFilterOptionsType
+  ) => {
+    const formFieldNames = Object.keys(this.form.fields.toJSON());
+    return isEqual(
+      this.getComposedFormValues(),
+      pick(comparedFilterOptions, formFieldNames)
+    );
+  };
+
+  getComposedFormValues = () => {
+    const formValues = this.form.values();
+    return {
+      ...formValues,
+      fromAmount: formValues.fromAmount.toString(),
+      toAmount: formValues.toAmount.toString(),
+    };
+  };
+
+  handleSubmit = () => {
+    this.form.submit({
+      onSuccess: () => {
+        const { onFilter } = this.props;
+        const formValues = this.getComposedFormValues();
+        if (validateFilterForm(formValues).isValid) {
+          onFilter(formValues);
+        }
+      },
+      onError: () => null,
+    });
+    if (this.popoverTippyInstance.current) {
+      this.popoverTippyInstance.current.hide();
+    }
+  };
+
+  isValidFromDate = (date: Object) => {
+    return date.isSameOrBefore(moment().endOf('day'));
+  };
+
+  isValidToDate = (date: Object) => {
+    const { fromDate } = this.form.values();
+    return (
+      date.isSameOrBefore(moment().endOf('day')) &&
+      date.isSameOrAfter(moment(fromDate).startOf('day'))
+    );
+  };
+
+  renderTypeField = () => {
+    const { form } = this;
+    const incomingCheckboxField = form.$('incomingChecked');
+    const outgoingCheckboxField = form.$('outgoingChecked');
+
+    return (
+      <div className={styles.type}>
+        <div className={styles.body}>
+          <div className={styles.typeCheckbox}>
+            <TinyCheckbox
+              {...incomingCheckboxField.bind()}
+              onChange={(isSelected) =>
+                this.setFilterType('incomingChecked', isSelected)
+              }
+            />
+          </div>
+          <div className={styles.typeCheckbox}>
+            <TinyCheckbox
+              {...outgoingCheckboxField.bind()}
+              onChange={(isSelected) =>
+                this.setFilterType('outgoingChecked', isSelected)
+              }
+            />
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  renderDateRangeField = () => {
+    const { intl } = this.context;
+    const dateRangeFieldBindProps = this.form.$('dateRange').bind();
+    const { fromDate, toDate } = this.form.values();
+
+    return (
+      <div className={styles.dateRange}>
+        <TinySelect
+          {...dateRangeFieldBindProps}
+          onChange={(...args) => {
+            dateRangeFieldBindProps.onChange(...args);
+            const calculatedDateRange = calculateDateRange(args[0], {
+              fromDate,
+              toDate,
+            });
+            this.form.select('fromDate').set(calculatedDateRange.fromDate);
+            this.form.select('toDate').set(calculatedDateRange.toDate);
+          }}
+          placeholder={intl.formatMessage(messages.selectTimeRange)}
+          options={this.dateRangeOptions}
+        />
+      </div>
+    );
+  };
+
+  renderDateRangeFromToField = () => {
+    const { form } = this;
+    const { intl } = this.context;
+    const { locale, dateFormat } = this.props;
+    const { invalidFields } = validateFilterForm(this.getComposedFormValues());
+    const fromDateFieldBindProps = form.$('fromDate').bind();
+    const toDateFieldBindProps = form.$('toDate').bind();
+    const fromDateLocaleClassName =
+      locale === 'ja-JP' ? styles.japaneseFromDateInput : null;
+    const toDateLocaleClassName =
+      locale === 'ja-JP' ? styles.japaneseToDateInput : null;
+    const fromDateClassNames = classNames([
+      styles.dateRangeInput,
+      styles.fromDateInput,
+      fromDateLocaleClassName,
+    ]);
+    const toDateClassNames = classNames([
+      styles.dateRangeInput,
+      styles.toDateInput,
+      toDateLocaleClassName,
+    ]);
+
+    return (
+      <div className={styles.dateRangeFromTo}>
+        <div className={styles.body}>
+          <div className={fromDateClassNames}>
+            <TinyDatePicker
+              {...fromDateFieldBindProps}
+              onChange={(...args) => {
+                fromDateFieldBindProps.onChange(...args);
+                this.form.select('dateRange').set(DateRangeTypes.CUSTOM);
+              }}
+              label={intl.formatMessage(globalMessages.rangeFrom)}
+              pickerPanelPosition="left"
+              closeOnSelect
+              onReset={() => form.select('fromDate').set('')}
+              isValidDate={this.isValidFromDate}
+              locale={locale}
+              dateFormat={dateFormat}
+            />
+          </div>
+          <div className={toDateClassNames}>
+            <TinyDatePicker
+              {...toDateFieldBindProps}
+              onChange={(...args) => {
+                toDateFieldBindProps.onChange(...args);
+                this.form.select('dateRange').set(DateRangeTypes.CUSTOM);
+              }}
+              label={intl.formatMessage(globalMessages.rangeTo)}
+              pickerPanelPosition="right"
+              closeOnSelect
+              onReset={() => form.select('toDate').set('')}
+              isValidDate={this.isValidToDate}
+              locale={locale}
+              dateFormat={dateFormat}
+              error={invalidFields.toDate}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  renderAmountRangeField = () => {
+    const { form } = this;
+    const { intl } = this.context;
+    const { locale, numberFormat } = this.props;
+    const { invalidFields } = validateFilterForm(this.getComposedFormValues());
+    const fromAmountField = form.$('fromAmount');
+    const toAmountField = form.$('toAmount');
+    const fromAmountLocaleClassName =
+      locale === 'ja-JP' ? styles.japaneseFromAmountInput : null;
+    const toAmountLocaleClassName =
+      locale === 'ja-JP' ? styles.japaneseToAmountInput : null;
+    const fromAmountClassNames = classNames([
+      styles.amountRangeInput,
+      styles.fromAmountInput,
+      fromAmountLocaleClassName,
+    ]);
+    const toAmountClassNames = classNames([
+      styles.amountRangeInput,
+      styles.toAmountInput,
+      toAmountLocaleClassName,
+    ]);
+
+    return (
+      <div className={styles.amountRange}>
+        <div className={styles.header}>
+          <label>{intl.formatMessage(messages.amountRange)}</label>
+        </div>
+        <div className={styles.body}>
+          <div className={fromAmountClassNames}>
+            <TinyInput
+              {...fromAmountField.bind()}
+              value={fromAmountField.value}
+              onSubmit={this.handleSubmit}
+              label={intl.formatMessage(globalMessages.rangeFrom)}
+              bigNumberFormat={NUMBER_FORMATS[numberFormat]}
+              decimalPlaces={DECIMAL_PLACES_IN_ADA}
+              allowSigns={false}
+            />
+          </div>
+          <div className={toAmountClassNames}>
+            <TinyInput
+              {...toAmountField.bind()}
+              value={toAmountField.value}
+              onSubmit={this.handleSubmit}
+              label={intl.formatMessage(globalMessages.rangeTo)}
+              bigNumberFormat={NUMBER_FORMATS[numberFormat]}
+              decimalPlaces={DECIMAL_PLACES_IN_ADA}
+              allowSigns={false}
+              error={invalidFields.toAmount}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  renderActionButton = () => {
+    const { intl } = this.context;
+    const { populatedFilterOptions } = this.props;
+    const { isValid } = validateFilterForm(this.getComposedFormValues());
+
+    return (
+      <div className={styles.action}>
+        <TinyButton
+          label={intl.formatMessage(messages.apply)}
+          loading={false}
+          disabled={
+            this.isFormValuesEqualTo(populatedFilterOptions) || !isValid
+          }
+          onClick={this.handleSubmit}
+        />
+      </div>
+    );
+  };
+
+  render() {
+    const { intl } = this.context;
+    const { defaultFilterOptions, triggerElement } = this.props;
+
+    return (
+      <PopOver
+        arrow={false}
+        interactive
+        trigger="click"
+        appendTo={document.body}
+        onShow={(instance) => {
+          this.popoverTippyInstance.current = instance;
+        }}
+        duration={0}
+        offset={[0, 10]}
+        maxWidth={640}
+        placement="bottom"
+        themeVariables={{
+          '--rp-pop-over-bg-color':
+            'var(--theme-transactions-filter-modal-bg-color)',
+          '--rp-pop-over-box-shadow': '0 5px 20px 0 rgba(0, 0, 0, 0.25)',
+          '--rp-pop-over-border-radius': '4px',
+          '--rp-pop-over-border-style': 'solid',
+          '--rp-pop-over-padding': 0,
+        }}
+        popperOptions={{
+          modifiers: [
+            {
+              // This keeps the popover always 20px away from the screen edge
+              name: 'preventOverflow',
+              options: {
+                padding: 20,
+              },
+            },
+          ],
+        }}
+        content={
+          <div className={styles.component}>
+            <div className={styles.title}>
+              <h4 className={styles.titleText}>
+                {intl.formatMessage(globalMessages.filter)}
+              </h4>
+              <div>
+                <button
+                  className={styles.titleLink}
+                  onClick={this.generateDefaultFilterOptions}
+                  disabled={this.isFormValuesEqualTo(defaultFilterOptions)}
+                >
+                  {intl.formatMessage(messages.allTransactions)}
+                </button>
+                <button
+                  className={styles.titleLink}
+                  onClick={this.resetForm}
+                  disabled={this.isFormValuesEqualTo(
+                    emptyTransactionFilterOptions
+                  )}
+                >
+                  {intl.formatMessage(messages.resetFilter)}
+                </button>
+              </div>
+            </div>
+            <div className={styles.content}>
+              {this.renderTypeField()}
+              {this.renderDateRangeField()}
+              {this.renderDateRangeFromToField()}
+              {this.renderAmountRangeField()}
+              {this.renderActionButton()}
+            </div>
+          </div>
+        }
+      >
+        {triggerElement}
+      </PopOver>
+    );
+  }
+}
diff --git a/source/renderer/app/components/staking/stake-pools/FilterDialog.scss b/source/renderer/app/components/staking/stake-pools/FilterDialog.scss
new file mode 100644
index 0000000000..29ed903143
--- /dev/null
+++ b/source/renderer/app/components/staking/stake-pools/FilterDialog.scss
@@ -0,0 +1,336 @@
+.component {
+  background-color: var(--theme-transactions-filter-modal-bg-color);
+  flex: initial;
+  font-family: var(--font-regular);
+  padding: 20px 10px 10px 10px;
+  position: relative;
+  width: 420px;
+
+  :global {
+    .TinySelect_component {
+      .SimpleBubble_root {
+        .SimpleBubble_bubble {
+          background-color: var(--theme-transactions-filter-modal-bg-color);
+        }
+      }
+      .SimpleOptions_option:not(.SimpleOptions_highlightedOption) {
+        background-color: var(--theme-transactions-filter-modal-bg-color);
+      }
+    }
+
+    .TinyInput_component {
+      .TinyInput_contentInReadMode,
+      .SimpleInput_input {
+        background-color: transparent;
+      }
+    }
+
+    .TinyDatePicker_component {
+      .rdtPicker {
+        background-color: var(--theme-transactions-filter-modal-bg-color);
+        box-shadow: var(--theme-transactions-filter-date-picker-shadow);
+
+        .rdtMonths .rdtSwitch {
+          background-color: var(
+            --theme-transactions-date-picker-button-background-color
+          );
+          pointer-events: none;
+        }
+
+        thead tr:first-child th:hover {
+          background-color: var(
+            --theme-transactions-date-picker-button-background-color-hover
+          );
+        }
+
+        tr {
+          td.rdtActive,
+          td.rdtActive:hover {
+            background-color: var(
+              --theme-transactions-date-picker-button-background-color
+            );
+            border-radius: 2px;
+            color: var(--theme-transactions-date-picker-button-color);
+            font-family: var(--font-semibold);
+            text-shadow: none;
+          }
+        }
+
+        td.rdtYear:hover,
+        td.rdtMonth:hover,
+        td.rdtDay:hover,
+        td.rdtHour:hover,
+        td.rdtMinute:hover,
+        td.rdtSecond:hover,
+        .rdtTimeToggle:hover {
+          background-color: var(
+            --theme-transactions-date-picker-button-background-color-hover
+          );
+        }
+
+        td.rdtToday:before {
+          border-bottom-color: var(
+            --theme-transactions-date-picker-button-background-color
+          );
+        }
+
+        td.rdtActive.rdtToday:before {
+          border-bottom-color: var(--theme-transactions-filter-modal-bg-color);
+        }
+      }
+    }
+  }
+
+  .title {
+    align-items: center;
+    color: var(--theme-dialog-text-color);
+    display: flex;
+    justify-content: space-between;
+    margin: 0 10px;
+
+    .titleText {
+      font-size: 16px;
+      font-weight: 600;
+      letter-spacing: 0.5px;
+      line-height: 1.38;
+    }
+
+    .titleLink {
+      background: var(
+        --theme-transactions-filter-title-button-background-color
+      );
+      border-radius: 4px;
+      color: var(--theme-transactions-filter-title-button-text-color);
+      cursor: pointer;
+      font-size: 10px;
+      font-weight: 500;
+      height: 20px;
+      line-height: 1.5;
+      margin-left: 10px;
+      padding: 0 8px;
+      position: relative;
+      text-transform: uppercase;
+      user-select: none;
+
+      &:disabled {
+        cursor: default;
+        opacity: 0.5;
+
+        &:after {
+          display: none;
+        }
+      }
+
+      &:disabled:hover {
+        background: var(
+          --theme-transactions-filter-title-button-background-color
+        );
+      }
+
+      &:hover {
+        background: var(
+          --theme-transactions-filter-title-button-background-color-hover
+        );
+      }
+
+      &:active {
+        background: var(
+          --theme-transactions-filter-title-button-background-color-active
+        );
+      }
+    }
+  }
+
+  .content {
+    .header {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 14px;
+      position: relative;
+
+      label {
+        color: var(--theme-dialog-text-color);
+        font-family: var(--font-regular);
+        font-size: 14px;
+        line-height: 1.36;
+      }
+    }
+
+    .body {
+      color: var(--theme-dialog-text-color);
+      display: flex;
+      margin-top: 6px;
+    }
+
+    .type {
+      margin: 14px 10px 0;
+
+      .body {
+        margin-top: 10px;
+
+        .typeCheckbox {
+          margin-right: 20px;
+        }
+      }
+    }
+
+    .dateRange {
+      margin: 14px 10px 0;
+
+      :global {
+        .SimpleFormField_label {
+          font-size: 14px;
+          margin-bottom: 6px;
+        }
+      }
+    }
+
+    .dateRangeFromTo {
+      margin: 0 10px;
+
+      .header {
+        :global {
+          .DialogCloseButton_component {
+            bottom: 6.5px;
+            right: 10px;
+            top: auto;
+
+            svg {
+              height: 6px;
+              width: 6px;
+            }
+          }
+          .DialogCloseButton_disabled {
+            svg {
+              height: 6px;
+              width: 6px;
+            }
+          }
+        }
+      }
+      .body {
+        justify-content: space-between;
+        :global {
+          .TinyInput_component .SimpleFormField_label {
+            color: var(--rp-input-placeholder-color);
+            font-size: 14px;
+            left: 10px;
+            position: absolute;
+            top: 7px;
+          }
+        }
+        .fromDateInput {
+          :global {
+            .TinyInput_component .SimpleInput_input {
+              padding-left: 46px;
+            }
+          }
+
+          &.japaneseFromDateInput {
+            :global {
+              .TinyInput_component .SimpleInput_input {
+                padding-left: 56px;
+              }
+            }
+          }
+        }
+
+        .toDateInput {
+          :global {
+            .TinyInput_component .SimpleInput_input {
+              padding-left: 28px;
+            }
+          }
+
+          &.japaneseToDateInput {
+            :global {
+              .TinyInput_component .SimpleInput_input {
+                padding-left: 56px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .amountRange {
+      margin: 0 10px;
+
+      .body {
+        align-items: stretch;
+        flex-direction: column;
+
+        :global {
+          .TinyInput_component .SimpleFormField_label {
+            color: var(--rp-input-placeholder-color);
+            font-size: 14px;
+            left: 10px;
+            position: absolute;
+            top: 7px;
+          }
+        }
+        .amountRangeInput {
+          margin-bottom: 6px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          :global {
+            .TinyInput_component .TinyInput_contentInReadMode,
+            .TinyInput_component .SimpleInput_input {
+              width: 100%;
+            }
+          }
+        }
+        .fromAmountInput {
+          :global {
+            .TinyInput_component .SimpleInput_input {
+              padding-left: 46px;
+            }
+          }
+
+          &.japaneseFromAmountInput {
+            :global {
+              .TinyInput_component .SimpleInput_input {
+                padding-left: 56px;
+              }
+            }
+          }
+        }
+        .toAmountInput {
+          :global {
+            .TinyInput_component .SimpleInput_input {
+              padding-left: 28px;
+            }
+          }
+
+          &.japaneseToAmountInput {
+            :global {
+              .TinyInput_component .SimpleInput_input {
+                padding-left: 56px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .action {
+      margin-top: 24px;
+    }
+  }
+}
+
+:global {
+  .small-height-for-date-picker {
+    &.FilterDialog_component {
+      .rdtPicker {
+        left: -281px;
+        right: auto;
+        top: -178px;
+      }
+    }
+  }
+}

From 61729036c1dcb5a588696dcd7f5fe0cd6e0722a9 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Wed, 17 Mar 2021 06:05:13 -0400
Subject: [PATCH 02/38] [DDW-435] Stake pool filter dialog view and handlers

---
 .../staking/stake-pools/FilterButton.js       |  54 +++
 .../staking/stake-pools/FilterButton.scss     |  28 ++
 .../staking/stake-pools/FilterDialog.js       | 351 +++---------------
 .../staking/stake-pools/FilterDialog.scss     | 266 +------------
 .../staking/stake-pools/StakePoolsSearch.js   |  20 +
 5 files changed, 150 insertions(+), 569 deletions(-)
 create mode 100644 source/renderer/app/components/staking/stake-pools/FilterButton.js
 create mode 100644 source/renderer/app/components/staking/stake-pools/FilterButton.scss

diff --git a/source/renderer/app/components/staking/stake-pools/FilterButton.js b/source/renderer/app/components/staking/stake-pools/FilterButton.js
new file mode 100644
index 0000000000..3647c7f3e8
--- /dev/null
+++ b/source/renderer/app/components/staking/stake-pools/FilterButton.js
@@ -0,0 +1,54 @@
+// @flow
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import { intlShape } from 'react-intl';
+import classNames from 'classnames';
+import SVGInline from 'react-svg-inline';
+import TinyButton from '../../widgets/forms/TinyButton';
+import filterIcon from '../../../assets/images/filter-dis-ic.inline.svg';
+import globalMessages from '../../../i18n/global-messages';
+import styles from './FilterButton.scss';
+
+type Props = {
+  disabled: boolean,
+  numberOfFilterDimensionsApplied: number,
+  onClick?: Function,
+};
+
+@observer
+export default class FilterButton extends Component<Props> {
+  static contextTypes = {
+    intl: intlShape.isRequired,
+  };
+
+  render() {
+    const { intl } = this.context;
+    const { numberOfFilterDimensionsApplied, onClick, disabled } = this.props;
+    const buttonLabel = (
+      <>
+        <div className={styles.actionLabel}>
+          {intl.formatMessage(globalMessages.filter)}
+          {numberOfFilterDimensionsApplied > 0 && (
+            <span className={styles.numberIndicator}>
+              ({numberOfFilterDimensionsApplied})
+            </span>
+          )}
+        </div>
+        <SVGInline svg={filterIcon} className={styles.filterIcon} />
+      </>
+    );
+    const buttonClasses = classNames(['primary', styles.actionButton]);
+
+    return (
+      <div className={styles.component}>
+        <TinyButton
+          className={buttonClasses}
+          label={buttonLabel}
+          loading={false}
+          onClick={onClick}
+          disabled={disabled}
+        />
+      </div>
+    );
+  }
+}
diff --git a/source/renderer/app/components/staking/stake-pools/FilterButton.scss b/source/renderer/app/components/staking/stake-pools/FilterButton.scss
new file mode 100644
index 0000000000..21976170fa
--- /dev/null
+++ b/source/renderer/app/components/staking/stake-pools/FilterButton.scss
@@ -0,0 +1,28 @@
+.component {
+  .actionButton {
+    border-radius: 2px;
+    display: flex;
+    padding: 7px 12px;
+
+    .actionLabel {
+      color: var(--theme-stake-pools-filter-button-color);
+      font-family: var(--font-medium);
+      font-size: 14px;
+      line-height: 1.36;
+      margin-right: 12px;
+
+      .numberIndicator {
+        margin-left: 5px;
+      }
+    }
+
+    .filterIcon {
+      height: 11px;
+      width: 11px;
+
+      g {
+        stroke: var(--theme-stake-pools-filter-button-color);
+      }
+    }
+  }
+}
diff --git a/source/renderer/app/components/staking/stake-pools/FilterDialog.js b/source/renderer/app/components/staking/stake-pools/FilterDialog.js
index 439a4e3a74..5f49f1b4c1 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterDialog.js
+++ b/source/renderer/app/components/staking/stake-pools/FilterDialog.js
@@ -6,7 +6,6 @@ import { observer } from 'mobx-react';
 import { isEqual, pick } from 'lodash';
 import { defineMessages, intlShape } from 'react-intl';
 import { PopOver } from 'react-polymorph/lib/components/PopOver';
-import classNames from 'classnames';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import type { StakePoolFilterOptionsType } from '../../../stores/StakingStore';
 import { emptyStakePoolFilterOptions } from '../../../stores/StakingStore';
@@ -44,11 +43,7 @@ const messages = defineMessages({
 });
 
 export type FilterDialogProps = {
-  locale: string,
-  dateFormat: string,
-  numberFormat: string,
-  defaultFilterOptions: TransactionFilterOptionsType,
-  populatedFilterOptions: TransactionFilterOptionsType,
+  populatedFilterOptions: StakePoolFilterOptionsType,
   onFilter: Function,
   triggerElement?: Element<*>,
 };
@@ -59,7 +54,6 @@ export default class FilterDialog extends Component<FilterDialogProps> {
     intl: intlShape.isRequired,
   };
 
-  dateRangeOptions: Array<{ label: string, value: string }>;
   form: ReactToolboxMobxForm;
   popoverTippyInstance: ElementRef<*> = createRef();
 
@@ -68,145 +62,65 @@ export default class FilterDialog extends Component<FilterDialogProps> {
 
     const {
       populatedFilterOptions: {
-        incomingChecked,
-        outgoingChecked,
-        dateRange,
-        fromDate,
-        toDate,
-        fromAmount,
-        toAmount,
+        retiringPoolsChecked,
+        privatePoolsChecked,
+        poolsWithoutOffChainDataChecked,
       },
     } = props;
 
     const { intl } = context;
 
-    this.dateRangeOptions = [
-      {
-        label: intl.formatMessage(messages.last7Days),
-        value: DateRangeTypes.LAST_7_DAYS,
-      },
-      {
-        label: intl.formatMessage(messages.last30Days),
-        value: DateRangeTypes.LAST_30_DAYS,
-      },
-      {
-        label: intl.formatMessage(messages.last90Days),
-        value: DateRangeTypes.LAST_90_DAYS,
-      },
-      {
-        label: intl.formatMessage(messages.thisYear),
-        value: DateRangeTypes.THIS_YEAR,
-      },
-      {
-        label: intl.formatMessage(messages.custom),
-        value: DateRangeTypes.CUSTOM,
-      },
-    ];
     this.form = new ReactToolboxMobxForm({
       fields: {
-        incomingChecked: {
+        retiringPoolsChecked: {
           type: 'checkbox',
-          label: intl.formatMessage(messages.incoming),
-          value: incomingChecked,
+          label: intl.formatMessage(messages.retiringPools),
+          value: retiringPoolsChecked,
         },
-        outgoingChecked: {
+        privatePoolsChecked: {
           type: 'checkbox',
-          label: intl.formatMessage(messages.outgoing),
-          value: outgoingChecked,
-        },
-        dateRange: {
-          label: intl.formatMessage(messages.dateRange),
-          value: dateRange,
-        },
-        fromDate: {
-          label: '',
-          value: fromDate,
+          label: intl.formatMessage(messages.privatePools),
+          value: privatePoolsChecked,
         },
-        toDate: {
-          label: '',
-          value: toDate,
-        },
-        fromAmount: {
-          type: 'number',
-          label: '',
-          value: fromAmount,
-        },
-        toAmount: {
-          type: 'number',
-          label: '',
-          value: toAmount,
+        poolsWithoutOffChainDataChecked: {
+          type: 'checkbox',
+          label: intl.formatMessage(messages.poolsWithoutOffChainData),
+          value: poolsWithoutOffChainDataChecked,
         },
       },
     });
   }
 
-  setFilterType = (
-    field: 'incomingChecked' | 'outgoingChecked',
-    value: boolean
-  ) => {
-    this.form.select(field).set(value);
-    if (value === false) {
-      const otherFieldName =
-        field === 'incomingChecked' ? 'outgoingChecked' : 'incomingChecked';
-      const otherField = this.form.select(otherFieldName);
-      if (otherField.value === false) {
-        otherField.set(true);
-      }
-    }
-  };
-
-  fillFormFields = (filterOptions: TransactionFilterOptionsType) => {
+  fillFormFields = (filterOptions: StakePoolFilterOptionsType) => {
     const {
-      dateRange,
-      fromDate,
-      toDate,
-      fromAmount,
-      toAmount,
-      incomingChecked,
-      outgoingChecked,
+      retiringPoolsChecked,
+      privatePoolsChecked,
+      poolsWithoutOffChainDataChecked,
     } = filterOptions;
 
-    this.form.select('dateRange').set(dateRange);
-    this.form.select('fromDate').set(fromDate);
-    this.form.select('toDate').set(toDate);
-    this.form.select('fromAmount').set(fromAmount);
-    this.form.select('toAmount').set(toAmount);
-    this.form.select('incomingChecked').set(incomingChecked);
-    this.form.select('outgoingChecked').set(outgoingChecked);
+    this.form.select('retiringPoolsChecked').set(retiringPoolsChecked);
+    this.form.select('privatePoolsChecked').set(privatePoolsChecked);
+    this.form
+      .select('poolsWithoutOffChainDataChecked')
+      .set(poolsWithoutOffChainDataChecked);
   };
 
-  resetForm = () => this.fillFormFields(emptyTransactionFilterOptions);
-
-  generateDefaultFilterOptions = () =>
-    this.fillFormFields(this.props.defaultFilterOptions);
+  resetForm = () => this.fillFormFields(emptyStakePoolFilterOptions);
 
-  isFormValuesEqualTo = (
-    comparedFilterOptions: TransactionFilterOptionsType
-  ) => {
+  isFormValuesEqualTo = (comparedFilterOptions: StakePoolFilterOptionsType) => {
     const formFieldNames = Object.keys(this.form.fields.toJSON());
     return isEqual(
-      this.getComposedFormValues(),
+      this.form.values(),
       pick(comparedFilterOptions, formFieldNames)
     );
   };
 
-  getComposedFormValues = () => {
-    const formValues = this.form.values();
-    return {
-      ...formValues,
-      fromAmount: formValues.fromAmount.toString(),
-      toAmount: formValues.toAmount.toString(),
-    };
-  };
-
   handleSubmit = () => {
     this.form.submit({
       onSuccess: () => {
         const { onFilter } = this.props;
-        const formValues = this.getComposedFormValues();
-        if (validateFilterForm(formValues).isValid) {
-          onFilter(formValues);
-        }
+        const formValues = this.form.values();
+        onFilter(formValues);
       },
       onError: () => null,
     });
@@ -215,187 +129,19 @@ export default class FilterDialog extends Component<FilterDialogProps> {
     }
   };
 
-  isValidFromDate = (date: Object) => {
-    return date.isSameOrBefore(moment().endOf('day'));
-  };
-
-  isValidToDate = (date: Object) => {
-    const { fromDate } = this.form.values();
-    return (
-      date.isSameOrBefore(moment().endOf('day')) &&
-      date.isSameOrAfter(moment(fromDate).startOf('day'))
-    );
-  };
-
-  renderTypeField = () => {
-    const { form } = this;
-    const incomingCheckboxField = form.$('incomingChecked');
-    const outgoingCheckboxField = form.$('outgoingChecked');
-
-    return (
-      <div className={styles.type}>
-        <div className={styles.body}>
-          <div className={styles.typeCheckbox}>
-            <TinyCheckbox
-              {...incomingCheckboxField.bind()}
-              onChange={(isSelected) =>
-                this.setFilterType('incomingChecked', isSelected)
-              }
-            />
-          </div>
-          <div className={styles.typeCheckbox}>
-            <TinyCheckbox
-              {...outgoingCheckboxField.bind()}
-              onChange={(isSelected) =>
-                this.setFilterType('outgoingChecked', isSelected)
-              }
-            />
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  renderDateRangeField = () => {
-    const { intl } = this.context;
-    const dateRangeFieldBindProps = this.form.$('dateRange').bind();
-    const { fromDate, toDate } = this.form.values();
-
-    return (
-      <div className={styles.dateRange}>
-        <TinySelect
-          {...dateRangeFieldBindProps}
-          onChange={(...args) => {
-            dateRangeFieldBindProps.onChange(...args);
-            const calculatedDateRange = calculateDateRange(args[0], {
-              fromDate,
-              toDate,
-            });
-            this.form.select('fromDate').set(calculatedDateRange.fromDate);
-            this.form.select('toDate').set(calculatedDateRange.toDate);
-          }}
-          placeholder={intl.formatMessage(messages.selectTimeRange)}
-          options={this.dateRangeOptions}
-        />
-      </div>
-    );
-  };
-
-  renderDateRangeFromToField = () => {
+  renderFields = () => {
     const { form } = this;
-    const { intl } = this.context;
-    const { locale, dateFormat } = this.props;
-    const { invalidFields } = validateFilterForm(this.getComposedFormValues());
-    const fromDateFieldBindProps = form.$('fromDate').bind();
-    const toDateFieldBindProps = form.$('toDate').bind();
-    const fromDateLocaleClassName =
-      locale === 'ja-JP' ? styles.japaneseFromDateInput : null;
-    const toDateLocaleClassName =
-      locale === 'ja-JP' ? styles.japaneseToDateInput : null;
-    const fromDateClassNames = classNames([
-      styles.dateRangeInput,
-      styles.fromDateInput,
-      fromDateLocaleClassName,
-    ]);
-    const toDateClassNames = classNames([
-      styles.dateRangeInput,
-      styles.toDateInput,
-      toDateLocaleClassName,
-    ]);
-
-    return (
-      <div className={styles.dateRangeFromTo}>
-        <div className={styles.body}>
-          <div className={fromDateClassNames}>
-            <TinyDatePicker
-              {...fromDateFieldBindProps}
-              onChange={(...args) => {
-                fromDateFieldBindProps.onChange(...args);
-                this.form.select('dateRange').set(DateRangeTypes.CUSTOM);
-              }}
-              label={intl.formatMessage(globalMessages.rangeFrom)}
-              pickerPanelPosition="left"
-              closeOnSelect
-              onReset={() => form.select('fromDate').set('')}
-              isValidDate={this.isValidFromDate}
-              locale={locale}
-              dateFormat={dateFormat}
-            />
-          </div>
-          <div className={toDateClassNames}>
-            <TinyDatePicker
-              {...toDateFieldBindProps}
-              onChange={(...args) => {
-                toDateFieldBindProps.onChange(...args);
-                this.form.select('dateRange').set(DateRangeTypes.CUSTOM);
-              }}
-              label={intl.formatMessage(globalMessages.rangeTo)}
-              pickerPanelPosition="right"
-              closeOnSelect
-              onReset={() => form.select('toDate').set('')}
-              isValidDate={this.isValidToDate}
-              locale={locale}
-              dateFormat={dateFormat}
-              error={invalidFields.toDate}
-            />
-          </div>
-        </div>
-      </div>
+    const retiringPoolsCheckboxField = form.$('retiringPoolsChecked');
+    const privatePoolsCheckboxField = form.$('privatePoolsChecked');
+    const poolsWithoutOffChainDataCheckboxField = form.$(
+      'poolsWithoutOffChainDataChecked'
     );
-  };
-
-  renderAmountRangeField = () => {
-    const { form } = this;
-    const { intl } = this.context;
-    const { locale, numberFormat } = this.props;
-    const { invalidFields } = validateFilterForm(this.getComposedFormValues());
-    const fromAmountField = form.$('fromAmount');
-    const toAmountField = form.$('toAmount');
-    const fromAmountLocaleClassName =
-      locale === 'ja-JP' ? styles.japaneseFromAmountInput : null;
-    const toAmountLocaleClassName =
-      locale === 'ja-JP' ? styles.japaneseToAmountInput : null;
-    const fromAmountClassNames = classNames([
-      styles.amountRangeInput,
-      styles.fromAmountInput,
-      fromAmountLocaleClassName,
-    ]);
-    const toAmountClassNames = classNames([
-      styles.amountRangeInput,
-      styles.toAmountInput,
-      toAmountLocaleClassName,
-    ]);
 
     return (
-      <div className={styles.amountRange}>
-        <div className={styles.header}>
-          <label>{intl.formatMessage(messages.amountRange)}</label>
-        </div>
-        <div className={styles.body}>
-          <div className={fromAmountClassNames}>
-            <TinyInput
-              {...fromAmountField.bind()}
-              value={fromAmountField.value}
-              onSubmit={this.handleSubmit}
-              label={intl.formatMessage(globalMessages.rangeFrom)}
-              bigNumberFormat={NUMBER_FORMATS[numberFormat]}
-              decimalPlaces={DECIMAL_PLACES_IN_ADA}
-              allowSigns={false}
-            />
-          </div>
-          <div className={toAmountClassNames}>
-            <TinyInput
-              {...toAmountField.bind()}
-              value={toAmountField.value}
-              onSubmit={this.handleSubmit}
-              label={intl.formatMessage(globalMessages.rangeTo)}
-              bigNumberFormat={NUMBER_FORMATS[numberFormat]}
-              decimalPlaces={DECIMAL_PLACES_IN_ADA}
-              allowSigns={false}
-              error={invalidFields.toAmount}
-            />
-          </div>
-        </div>
+      <div className={styles.fields}>
+        <TinyCheckbox {...retiringPoolsCheckboxField.bind()} />
+        <TinyCheckbox {...privatePoolsCheckboxField.bind()} />
+        <TinyCheckbox {...poolsWithoutOffChainDataCheckboxField.bind()} />
       </div>
     );
   };
@@ -403,16 +149,13 @@ export default class FilterDialog extends Component<FilterDialogProps> {
   renderActionButton = () => {
     const { intl } = this.context;
     const { populatedFilterOptions } = this.props;
-    const { isValid } = validateFilterForm(this.getComposedFormValues());
 
     return (
       <div className={styles.action}>
         <TinyButton
           label={intl.formatMessage(messages.apply)}
           loading={false}
-          disabled={
-            this.isFormValuesEqualTo(populatedFilterOptions) || !isValid
-          }
+          disabled={this.isFormValuesEqualTo(populatedFilterOptions)}
           onClick={this.handleSubmit}
         />
       </div>
@@ -421,7 +164,7 @@ export default class FilterDialog extends Component<FilterDialogProps> {
 
   render() {
     const { intl } = this.context;
-    const { defaultFilterOptions, triggerElement } = this.props;
+    const { triggerElement } = this.props;
 
     return (
       <PopOver
@@ -438,7 +181,7 @@ export default class FilterDialog extends Component<FilterDialogProps> {
         placement="bottom"
         themeVariables={{
           '--rp-pop-over-bg-color':
-            'var(--theme-transactions-filter-modal-bg-color)',
+            'var(--theme-stake-pools-filter-modal-bg-color)',
           '--rp-pop-over-box-shadow': '0 5px 20px 0 rgba(0, 0, 0, 0.25)',
           '--rp-pop-over-border-radius': '4px',
           '--rp-pop-over-border-style': 'solid',
@@ -462,18 +205,11 @@ export default class FilterDialog extends Component<FilterDialogProps> {
                 {intl.formatMessage(globalMessages.filter)}
               </h4>
               <div>
-                <button
-                  className={styles.titleLink}
-                  onClick={this.generateDefaultFilterOptions}
-                  disabled={this.isFormValuesEqualTo(defaultFilterOptions)}
-                >
-                  {intl.formatMessage(messages.allTransactions)}
-                </button>
                 <button
                   className={styles.titleLink}
                   onClick={this.resetForm}
                   disabled={this.isFormValuesEqualTo(
-                    emptyTransactionFilterOptions
+                    emptyStakePoolFilterOptions
                   )}
                 >
                   {intl.formatMessage(messages.resetFilter)}
@@ -481,10 +217,7 @@ export default class FilterDialog extends Component<FilterDialogProps> {
               </div>
             </div>
             <div className={styles.content}>
-              {this.renderTypeField()}
-              {this.renderDateRangeField()}
-              {this.renderDateRangeFromToField()}
-              {this.renderAmountRangeField()}
+              {this.renderFields()}
               {this.renderActionButton()}
             </div>
           </div>
diff --git a/source/renderer/app/components/staking/stake-pools/FilterDialog.scss b/source/renderer/app/components/staking/stake-pools/FilterDialog.scss
index 29ed903143..22dcda823b 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterDialog.scss
+++ b/source/renderer/app/components/staking/stake-pools/FilterDialog.scss
@@ -1,85 +1,10 @@
 .component {
-  background-color: var(--theme-transactions-filter-modal-bg-color);
+  background-color: var(--theme-stake-pools-filter-modal-bg-color);
   flex: initial;
   font-family: var(--font-regular);
   padding: 20px 10px 10px 10px;
   position: relative;
-  width: 420px;
-
-  :global {
-    .TinySelect_component {
-      .SimpleBubble_root {
-        .SimpleBubble_bubble {
-          background-color: var(--theme-transactions-filter-modal-bg-color);
-        }
-      }
-      .SimpleOptions_option:not(.SimpleOptions_highlightedOption) {
-        background-color: var(--theme-transactions-filter-modal-bg-color);
-      }
-    }
-
-    .TinyInput_component {
-      .TinyInput_contentInReadMode,
-      .SimpleInput_input {
-        background-color: transparent;
-      }
-    }
-
-    .TinyDatePicker_component {
-      .rdtPicker {
-        background-color: var(--theme-transactions-filter-modal-bg-color);
-        box-shadow: var(--theme-transactions-filter-date-picker-shadow);
-
-        .rdtMonths .rdtSwitch {
-          background-color: var(
-            --theme-transactions-date-picker-button-background-color
-          );
-          pointer-events: none;
-        }
-
-        thead tr:first-child th:hover {
-          background-color: var(
-            --theme-transactions-date-picker-button-background-color-hover
-          );
-        }
-
-        tr {
-          td.rdtActive,
-          td.rdtActive:hover {
-            background-color: var(
-              --theme-transactions-date-picker-button-background-color
-            );
-            border-radius: 2px;
-            color: var(--theme-transactions-date-picker-button-color);
-            font-family: var(--font-semibold);
-            text-shadow: none;
-          }
-        }
-
-        td.rdtYear:hover,
-        td.rdtMonth:hover,
-        td.rdtDay:hover,
-        td.rdtHour:hover,
-        td.rdtMinute:hover,
-        td.rdtSecond:hover,
-        .rdtTimeToggle:hover {
-          background-color: var(
-            --theme-transactions-date-picker-button-background-color-hover
-          );
-        }
-
-        td.rdtToday:before {
-          border-bottom-color: var(
-            --theme-transactions-date-picker-button-background-color
-          );
-        }
-
-        td.rdtActive.rdtToday:before {
-          border-bottom-color: var(--theme-transactions-filter-modal-bg-color);
-        }
-      }
-    }
-  }
+  width: 320px;
 
   .title {
     align-items: center;
@@ -142,179 +67,12 @@
   }
 
   .content {
-    .header {
-      align-items: center;
-      display: flex;
-      justify-content: space-between;
-      margin-top: 14px;
-      position: relative;
-
-      label {
-        color: var(--theme-dialog-text-color);
-        font-family: var(--font-regular);
-        font-size: 14px;
-        line-height: 1.36;
-      }
-    }
+    color: var(--theme-dialog-text-color);
 
-    .body {
-      color: var(--theme-dialog-text-color);
+    .fields {
       display: flex;
-      margin-top: 6px;
-    }
-
-    .type {
-      margin: 14px 10px 0;
-
-      .body {
-        margin-top: 10px;
-
-        .typeCheckbox {
-          margin-right: 20px;
-        }
-      }
-    }
-
-    .dateRange {
-      margin: 14px 10px 0;
-
-      :global {
-        .SimpleFormField_label {
-          font-size: 14px;
-          margin-bottom: 6px;
-        }
-      }
-    }
-
-    .dateRangeFromTo {
-      margin: 0 10px;
-
-      .header {
-        :global {
-          .DialogCloseButton_component {
-            bottom: 6.5px;
-            right: 10px;
-            top: auto;
-
-            svg {
-              height: 6px;
-              width: 6px;
-            }
-          }
-          .DialogCloseButton_disabled {
-            svg {
-              height: 6px;
-              width: 6px;
-            }
-          }
-        }
-      }
-      .body {
-        justify-content: space-between;
-        :global {
-          .TinyInput_component .SimpleFormField_label {
-            color: var(--rp-input-placeholder-color);
-            font-size: 14px;
-            left: 10px;
-            position: absolute;
-            top: 7px;
-          }
-        }
-        .fromDateInput {
-          :global {
-            .TinyInput_component .SimpleInput_input {
-              padding-left: 46px;
-            }
-          }
-
-          &.japaneseFromDateInput {
-            :global {
-              .TinyInput_component .SimpleInput_input {
-                padding-left: 56px;
-              }
-            }
-          }
-        }
-
-        .toDateInput {
-          :global {
-            .TinyInput_component .SimpleInput_input {
-              padding-left: 28px;
-            }
-          }
-
-          &.japaneseToDateInput {
-            :global {
-              .TinyInput_component .SimpleInput_input {
-                padding-left: 56px;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .amountRange {
-      margin: 0 10px;
-
-      .body {
-        align-items: stretch;
-        flex-direction: column;
-
-        :global {
-          .TinyInput_component .SimpleFormField_label {
-            color: var(--rp-input-placeholder-color);
-            font-size: 14px;
-            left: 10px;
-            position: absolute;
-            top: 7px;
-          }
-        }
-        .amountRangeInput {
-          margin-bottom: 6px;
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-
-          :global {
-            .TinyInput_component .TinyInput_contentInReadMode,
-            .TinyInput_component .SimpleInput_input {
-              width: 100%;
-            }
-          }
-        }
-        .fromAmountInput {
-          :global {
-            .TinyInput_component .SimpleInput_input {
-              padding-left: 46px;
-            }
-          }
-
-          &.japaneseFromAmountInput {
-            :global {
-              .TinyInput_component .SimpleInput_input {
-                padding-left: 56px;
-              }
-            }
-          }
-        }
-        .toAmountInput {
-          :global {
-            .TinyInput_component .SimpleInput_input {
-              padding-left: 28px;
-            }
-          }
-
-          &.japaneseToAmountInput {
-            :global {
-              .TinyInput_component .SimpleInput_input {
-                padding-left: 56px;
-              }
-            }
-          }
-        }
-      }
+      flex-direction: column;
+      margin: 20px 10px 0;
     }
 
     .action {
@@ -322,15 +80,3 @@
     }
   }
 }
-
-:global {
-  .small-height-for-date-picker {
-    &.FilterDialog_component {
-      .rdtPicker {
-        left: -281px;
-        right: auto;
-        top: -178px;
-      }
-    }
-  }
-}
diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
index 2803e5217b..44e497cc7e 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
@@ -7,6 +7,9 @@ import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
 import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import classnames from 'classnames';
 import styles from './StakePoolsSearch.scss';
+import FilterButton from './FilterButton';
+import FilterDialog from './FilterDialog';
+import type { FilterDialogProps } from './FilterDialog';
 import searchIcon from '../../../assets/images/search.inline.svg';
 import closeIcon from '../../../assets/images/close-cross.inline.svg';
 import gridIcon from '../../../assets/images/grid-ic.inline.svg';
@@ -64,6 +67,9 @@ type Props = {
   onGridRewardsView?: Function,
   onListView?: Function,
   search: string,
+  isFilterDisabled: boolean,
+  filterDialogProps: FilterDialogProps,
+  numberOfFilterDimensionsApplied: number,
 };
 
 export class StakePoolsSearch extends Component<Props> {
@@ -100,6 +106,9 @@ export class StakePoolsSearch extends Component<Props> {
       isListView,
       isGridView,
       isGridRewardsView,
+      isFilterDisabled,
+      filterDialogProps,
+      numberOfFilterDimensionsApplied,
     } = this.props;
 
     const gridButtonClasses = classnames([
@@ -193,6 +202,17 @@ export class StakePoolsSearch extends Component<Props> {
               </PopOver>
             </div>
           )}
+          <FilterDialog
+            {...filterDialogProps}
+            triggerElement={
+              <FilterButton
+                disabled={isFilterDisabled}
+                numberOfFilterDimensionsApplied={
+                  numberOfFilterDimensionsApplied
+                }
+              />
+            }
+          />
         </div>
       </div>
     );

From d578ad0277b9482f9a522eb5e378534727057fbb Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Mon, 22 Mar 2021 06:08:09 -0400
Subject: [PATCH 03/38] [DDW-435] Update stakingstore for filtering

---
 .../renderer/app/actions/staking-actions.js   |  2 +
 .../staking/stake-pools/StakePools.js         | 25 +++++++-
 .../staking/stake-pools/StakePoolsSearch.js   |  2 +-
 .../containers/staking/StakePoolsListPage.js  |  9 +++
 source/renderer/app/stores/StakingStore.js    | 57 +++++++++++++++++++
 source/renderer/app/utils/staking.js          | 32 +++++++++++
 6 files changed, 125 insertions(+), 2 deletions(-)

diff --git a/source/renderer/app/actions/staking-actions.js b/source/renderer/app/actions/staking-actions.js
index f31faa723b..3c4f116530 100644
--- a/source/renderer/app/actions/staking-actions.js
+++ b/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,4 +34,5 @@ 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();
 }
diff --git a/source/renderer/app/components/staking/stake-pools/StakePools.js b/source/renderer/app/components/staking/stake-pools/StakePools.js
index 3c72069e13..567c771833 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePools.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePools.js
@@ -14,6 +14,11 @@ import Wallet from '../../../domains/Wallet';
 import styles from './StakePools.scss';
 import { getFilteredStakePoolsList } from './helpers';
 import { formattedNumber } from '../../../utils/formatters';
+import {
+  getNumberOfFilterDimensionsApplied,
+  getSmashServerNameFromUrl,
+} from '../../../utils/staking';
+import type { StakePoolFilterOptionsType } from '../../../stores/StakingStore';
 import StakePool from '../../../domains/StakePool';
 import {
   IS_RANKING_DATA_AVAILABLE,
@@ -21,7 +26,6 @@ import {
 } from '../../../config/stakingConfig';
 import smashSettingsIcon from '../../../assets/images/smash-settings-ic.inline.svg';
 import tinySpinnerIcon from '../../../assets/images/spinner-tiny.inline.svg';
-import { getSmashServerNameFromUrl } from '../../../utils/staking';
 
 const messages = defineMessages({
   delegatingListTitle: {
@@ -90,6 +94,9 @@ type Props = {
   onSmashSettingsClick: Function,
   smashServerUrl: ?string,
   maxDelegationFunds: number,
+  filterOptions: StakePoolFilterOptionsType,
+  onFilter: Function,
+  populatedFilterOptions: StakePoolFilterOptionsType,
 };
 
 type State = {
@@ -180,6 +187,9 @@ export default class StakePools extends Component<Props, State> {
       smashServerUrl,
       onSmashSettingsClick,
       maxDelegationFunds,
+      filterOptions,
+      onFilter,
+      populatedFilterOptions,
     } = this.props;
     const {
       search,
@@ -190,11 +200,18 @@ export default class StakePools extends Component<Props, State> {
       isTableHeaderHovered,
     } = this.state;
 
+    const numberOfFilterDimensionsApplied = getNumberOfFilterDimensionsApplied(
+      filterOptions
+    );
+
     const filteredStakePoolsList: Array<StakePool> = getFilteredStakePoolsList(
       stakePoolsList,
       search
     );
 
+    const isFilterDisabled =
+      !filteredStakePoolsList.length && !numberOfFilterDimensionsApplied;
+
     const numberOfRankedStakePools: number = stakePoolsList.filter(
       (stakePool) =>
         IS_RANKING_DATA_AVAILABLE && stakePool.nonMyopicMemberRewards
@@ -284,6 +301,12 @@ export default class StakePools extends Component<Props, State> {
               isGridView={isGridView}
               isGridRewardsView={isGridRewardsView}
               smashServer={smashServer}
+              isFilterDisabled={isFilterDisabled}
+              numberOfFilterDimensionsApplied={numberOfFilterDimensionsApplied}
+              filterDialogProps={{
+                populatedFilterOptions,
+                onFilter,
+              }}
             />
             {stakePoolsDelegatingList.length > 0 && (
               <Fragment>
diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
index 44e497cc7e..05023ca57d 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
@@ -68,8 +68,8 @@ type Props = {
   onListView?: Function,
   search: string,
   isFilterDisabled: boolean,
-  filterDialogProps: FilterDialogProps,
   numberOfFilterDimensionsApplied: number,
+  filterDialogProps: FilterDialogProps,
 };
 
 export class StakePoolsSearch extends Component<Props> {
diff --git a/source/renderer/app/containers/staking/StakePoolsListPage.js b/source/renderer/app/containers/staking/StakePoolsListPage.js
index 895ab08d4d..6dcf9ca33e 100644
--- a/source/renderer/app/containers/staking/StakePoolsListPage.js
+++ b/source/renderer/app/containers/staking/StakePoolsListPage.js
@@ -46,6 +46,9 @@ export default class StakePoolsListPage extends Component<Props> {
   };
 
   render() {
+    const {
+      actions: { staking: stakingActions },
+    } = this.props;
     const {
       uiDialogs,
       staking,
@@ -67,7 +70,10 @@ export default class StakePoolsListPage extends Component<Props> {
       smashServerUrl,
       maxDelegationFunds,
       isFetchingStakePools,
+      filterOptions,
+      populatedFilterOptions,
     } = staking;
+    const { filterStakePools } = stakingActions;
     const { all } = wallets;
     const isLoading = !isSynced || fetchingStakePoolsFailed;
     const isRanking =
@@ -94,6 +100,9 @@ export default class StakePoolsListPage extends Component<Props> {
           smashServerUrl={smashServerUrl}
           onSmashSettingsClick={this.handleSmashSettingsClick}
           maxDelegationFunds={maxDelegationFunds}
+          filterOptions={filterOptions || {}}
+          populatedFilterOptions={populatedFilterOptions}
+          onFilter={filterStakePools.trigger}
         />
         {isRanking && <StakePoolsRankingLoader />}
         {uiDialogs.isOpen(DelegationSetupWizardDialog) ? (
diff --git a/source/renderer/app/stores/StakingStore.js b/source/renderer/app/stores/StakingStore.js
index 113c4ffe35..504055ddbe 100644
--- a/source/renderer/app/stores/StakingStore.js
+++ b/source/renderer/app/stores/StakingStore.js
@@ -37,9 +37,22 @@ import LocalizableError from '../i18n/LocalizableError';
 import { showSaveDialogChannel } from '../ipc/show-file-dialog-channels';
 import REWARDS from '../config/stakingRewards.dummy.json';
 import { generateFileNameWithTimestamp } from '../../../common/utils/files';
+import { isStakePoolInFilterRange } from '../utils/staking';
 import type { RedeemItnRewardsStep } from '../types/stakingTypes';
 import type { CsvFileContent } from '../../../common/types/csv-request.types';
 
+export type StakePoolFilterOptionsType = {
+  retiringPoolsChecked?: boolean,
+  privatePoolsChecked?: boolean,
+  poolsWithoutOffChainDataChecked?: boolean,
+};
+
+export const emptyStakePoolFilterOptions = {
+  retiringPoolsChecked: true,
+  privatePoolsChecked: true,
+  poolsWithoutOffChainDataChecked: true,
+};
+
 export default class StakingStore extends Store {
   @observable isDelegationTransactionPending = false;
   @observable fetchingStakePoolsFailed = false;
@@ -69,6 +82,9 @@ export default class StakingStore extends Store {
   @observable numberOfStakePoolsFetched: number = 0;
   @observable cyclesWithoutIncreasingStakePools: number = 0;
 
+  /* ----------  Stake Pools Filter  ---------- */
+  @observable _filterOptions = {};
+
   pollingStakePoolsInterval: ?IntervalID = null;
   refreshPolling: ?IntervalID = null;
   delegationCheckTimeInterval: ?IntervalID = null;
@@ -116,7 +132,10 @@ export default class StakingStore extends Store {
       this._setSelectedDelegationWalletId
     );
     stakingActions.requestCSVFile.listen(this._requestCSVFile);
+    stakingActions.filterStakePools.listen(this._updateFilterOptions);
+
     networkStatusActions.isSyncedAndReady.listen(this._getSmashSettingsRequest);
+    networkStatusActions.restartNode.listen(this._clearFilterOptions);
 
     // ========== MOBX REACTIONS =========== //
     this.registerReactions([this._pollOnSync]);
@@ -465,6 +484,16 @@ export default class StakingStore extends Store {
     return this.stakePoolsRequest.result ? this.stakePoolsRequest.result : [];
   }
 
+  @computed get allFiltered(): Array<StakePool> {
+    const { recentFiltered } = this;
+    const allFiltered = this.stakePools.filter((stakePool) =>
+      isStakePoolInFilterRange(this.filterOptions, stakePool)
+    );
+    return !allFiltered.length && recentFiltered.length
+      ? recentFiltered
+      : allFiltered;
+  }
+
   @computed get recentStakePools(): Array<StakePool> {
     const delegatedStakePools = [];
     map(this.stores.wallets.all, (wallet) => {
@@ -494,6 +523,24 @@ export default class StakingStore extends Store {
     return orderedStakePools;
   }
 
+  @computed get recentFiltered(): Array<StakePool> {
+    return this.recentStakePools.filter((stakePool) =>
+      isStakePoolInFilterRange(this.filterOptions, stakePool)
+    );
+  }
+
+  @computed get populatedFilterOptions(): StakePoolFilterOptionsType {
+    return this.filterOptions || emptyStakePoolFilterOptions;
+  }
+
+  @computed get hasAnyFiltered(): boolean {
+    return this.stakePools ? this.stakePools.length > 0 : false;
+  }
+
+  @computed get totalFilteredAvailable(): number {
+    return this.stakePools ? this.stakePools.length : 0;
+  }
+
   @computed get isStakingDelegationCountdown(): boolean {
     return this.currentRoute === ROUTES.STAKING.COUNTDOWN;
   }
@@ -585,6 +632,16 @@ export default class StakingStore extends Store {
     this.isRanking = false;
   };
 
+  @action _updateFilterOptions = (
+    filterOptions: StakePoolFilterOptionsType
+  ) => {
+    this.filterOptions = filterOptions;
+  };
+
+  @action _clearFilterOptions = () => {
+    this.filterOptions = emptyStakePoolFilterOptions;
+  };
+
   // For testing only
   @action _setFakePoller = (forceLoading: boolean) => {
     const { stores, environment } = this;
diff --git a/source/renderer/app/utils/staking.js b/source/renderer/app/utils/staking.js
index 8d9116ba1e..3928968c39 100644
--- a/source/renderer/app/utils/staking.js
+++ b/source/renderer/app/utils/staking.js
@@ -5,6 +5,8 @@ import {
   SMASH_SERVER_TYPES,
 } from '../config/stakingConfig';
 import type { SmashServerType } from '../types/stakingTypes';
+import type { StakePoolFilterOptionsType } from '../stores/StakingStore';
+import StakePool from '../domains/StakePool';
 
 export const getSmashServerNameFromUrl = (smashServerUrl: string): string =>
   reduce(
@@ -50,3 +52,33 @@ export const getUrlParts = (
     return {};
   }
 };
+
+export const getNumberOfFilterDimensionsApplied = (
+  filterOptions: ?StakePoolFilterOptionsType
+) => {
+  const {
+    retiringPoolsChecked = true,
+    privatePoolsChecked = true,
+    poolsWithoutOffChainDataChecked = true,
+  } = filterOptions || {};
+  let result = 0;
+
+  if (!retiringPoolsChecked) {
+    result++;
+  }
+  if (!privatePoolsChecked) {
+    result++;
+  }
+  if (!poolsWithoutOffChainDataChecked) {
+    result++;
+  }
+
+  return result;
+};
+
+export const isStakePoolInFilterRange = (
+  filterOptions: ?StakePoolFilterOptionsType,
+  stakePool: StakePool
+) => {
+  return true;
+};

From 1078201620b00845611e1dd9b0fa6349775e0f83 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Mon, 22 Mar 2021 21:09:33 -0400
Subject: [PATCH 04/38] [DDW-435] Update theme variables for stake pool filter
 modal

---
 .../components/staking/stake-pools/FilterButton.scss |  4 ++--
 .../components/staking/stake-pools/FilterDialog.scss | 12 ++++++------
 source/renderer/app/themes/daedalus/cardano.js       |  9 +++++++++
 source/renderer/app/themes/daedalus/dark-blue.js     |  9 +++++++++
 source/renderer/app/themes/daedalus/dark-cardano.js  |  9 +++++++++
 .../renderer/app/themes/daedalus/flight-candidate.js |  9 +++++++++
 .../app/themes/daedalus/incentivized-testnet.js      |  9 +++++++++
 source/renderer/app/themes/daedalus/light-blue.js    |  9 +++++++++
 .../renderer/app/themes/daedalus/shelley-testnet.js  |  9 +++++++++
 source/renderer/app/themes/daedalus/white.js         |  9 +++++++++
 source/renderer/app/themes/daedalus/yellow.js        |  9 +++++++++
 11 files changed, 89 insertions(+), 8 deletions(-)

diff --git a/source/renderer/app/components/staking/stake-pools/FilterButton.scss b/source/renderer/app/components/staking/stake-pools/FilterButton.scss
index 21976170fa..753981721c 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterButton.scss
+++ b/source/renderer/app/components/staking/stake-pools/FilterButton.scss
@@ -5,7 +5,7 @@
     padding: 7px 12px;
 
     .actionLabel {
-      color: var(--theme-stake-pools-filter-button-color);
+      color: var(--theme-staking-stake-pools-filter-button-color);
       font-family: var(--font-medium);
       font-size: 14px;
       line-height: 1.36;
@@ -21,7 +21,7 @@
       width: 11px;
 
       g {
-        stroke: var(--theme-stake-pools-filter-button-color);
+        stroke: var(--theme-staking-stake-pools-filter-button-color);
       }
     }
   }
diff --git a/source/renderer/app/components/staking/stake-pools/FilterDialog.scss b/source/renderer/app/components/staking/stake-pools/FilterDialog.scss
index 22dcda823b..129628ad19 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterDialog.scss
+++ b/source/renderer/app/components/staking/stake-pools/FilterDialog.scss
@@ -1,5 +1,5 @@
 .component {
-  background-color: var(--theme-stake-pools-filter-modal-bg-color);
+  background-color: var(--theme-staking-stake-pools-filter-modal-bg-color);
   flex: initial;
   font-family: var(--font-regular);
   padding: 20px 10px 10px 10px;
@@ -22,10 +22,10 @@
 
     .titleLink {
       background: var(
-        --theme-transactions-filter-title-button-background-color
+        --theme-staking-stake-pools-filter-title-button-background-color
       );
       border-radius: 4px;
-      color: var(--theme-transactions-filter-title-button-text-color);
+      color: var(--theme-staking-stake-pools-filter-title-button-text-color);
       cursor: pointer;
       font-size: 10px;
       font-weight: 500;
@@ -48,19 +48,19 @@
 
       &:disabled:hover {
         background: var(
-          --theme-transactions-filter-title-button-background-color
+          --theme-staking-stake-pools-filter-title-button-background-color
         );
       }
 
       &:hover {
         background: var(
-          --theme-transactions-filter-title-button-background-color-hover
+          --theme-staking-stake-pools-filter-title-button-background-color-hover
         );
       }
 
       &:active {
         background: var(
-          --theme-transactions-filter-title-button-background-color-active
+          --theme-staking-stake-pools-filter-title-button-background-color-active
         );
       }
     }
diff --git a/source/renderer/app/themes/daedalus/cardano.js b/source/renderer/app/themes/daedalus/cardano.js
index 5cb1a1fc02..76c6862394 100644
--- a/source/renderer/app/themes/daedalus/cardano.js
+++ b/source/renderer/app/themes/daedalus/cardano.js
@@ -828,6 +828,15 @@ export const CARDANO_THEME_OUTPUT = {
       'rgba(32, 34, 37, 0.05)',
     '--theme-staking-stake-pool-tooltip-id-shadow-1': 'rgba(0, 0, 0, 0.25)',
     '--theme-staking-stake-pool-tooltip-id-shadow-2': 'rgba(42, 43, 60, 0)',
+    '--theme-staking-stake-pools-filter-button-color': '#fafbfc',
+    '--theme-staking-stake-pools-filter-modal-bg-color': '#ffffff',
+    '--theme-staking-stake-pools-filter-title-button-background-color':
+      'rgba(32, 34, 37, 0.1)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-hover':
+      'rgba(32, 34, 37, 0.05)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-active':
+      'rgba(32, 34, 37, 0.12)',
+    '--theme-staking-stake-pools-filter-title-button-text-color': '#2d2d2d',
   },
   staking: {
     '--theme-staking-content-background-color': '#ffffff',
diff --git a/source/renderer/app/themes/daedalus/dark-blue.js b/source/renderer/app/themes/daedalus/dark-blue.js
index d91cb1512c..c1a21b7ee0 100644
--- a/source/renderer/app/themes/daedalus/dark-blue.js
+++ b/source/renderer/app/themes/daedalus/dark-blue.js
@@ -833,6 +833,15 @@ export const DARK_BLUE_THEME_OUTPUT = {
       'rgba(255, 255, 255, 0.05)',
     '--theme-staking-stake-pool-tooltip-id-shadow-1': 'rgba(0, 0, 0, 0.25)',
     '--theme-staking-stake-pool-tooltip-id-shadow-2': 'rgba(42, 43, 60, 0)',
+    '--theme-staking-stake-pools-filter-button-color': '#fafbfc',
+    '--theme-staking-stake-pools-filter-modal-bg-color': '#314259',
+    '--theme-staking-stake-pools-filter-title-button-background-color':
+      'rgba(233, 244, 254, 0.1)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-hover':
+      'rgba(233, 244, 254, 0.05)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-active':
+      'rgba(233, 244, 254, 0.12)',
+    '--theme-staking-stake-pools-filter-title-button-text-color': '#ffffff',
   },
   staking: {
     '--theme-staking-content-background-color': '#263345',
diff --git a/source/renderer/app/themes/daedalus/dark-cardano.js b/source/renderer/app/themes/daedalus/dark-cardano.js
index 9cc0ec37d9..d33133d7f5 100644
--- a/source/renderer/app/themes/daedalus/dark-cardano.js
+++ b/source/renderer/app/themes/daedalus/dark-cardano.js
@@ -814,6 +814,15 @@ export const DARK_CARDANO_THEME_OUTPUT = {
       'rgba(255, 255, 255, 0.05)',
     '--theme-staking-stake-pool-tooltip-id-shadow-1': 'rgba(0, 0, 0, 0.25)',
     '--theme-staking-stake-pool-tooltip-id-shadow-2': 'rgba(42, 43, 60, 0)',
+    '--theme-staking-stake-pools-filter-button-color': 'rgba(18, 19, 38, 1)',
+    '--theme-staking-stake-pools-filter-modal-bg-color': '#3f404f',
+    '--theme-staking-stake-pools-filter-title-button-background-color':
+      'rgba(255, 255, 255, 0.1)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-hover':
+      'rgba(255, 255, 255, 0.05)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-active':
+      'rgba(255, 255, 255, 0.12)',
+    '--theme-staking-stake-pools-filter-title-button-text-color': '#ffffff',
   },
   staking: {
     '--theme-staking-content-background-color': '#1e1f31',
diff --git a/source/renderer/app/themes/daedalus/flight-candidate.js b/source/renderer/app/themes/daedalus/flight-candidate.js
index f7febcd2fb..6a6e21d683 100644
--- a/source/renderer/app/themes/daedalus/flight-candidate.js
+++ b/source/renderer/app/themes/daedalus/flight-candidate.js
@@ -812,6 +812,15 @@ export const FLIGHT_CANDIDATE_THEME_OUTPUT = {
       'rgba(255, 255, 255, 0.05)',
     '--theme-staking-stake-pool-tooltip-id-shadow-1': 'rgba(0, 0, 0, 0.25)',
     '--theme-staking-stake-pool-tooltip-id-shadow-2': 'rgba(42, 43, 60, 0)',
+    '--theme-staking-stake-pools-filter-button-color': 'rgba(18, 19, 38, 1)',
+    '--theme-staking-stake-pools-filter-modal-bg-color': '#3f404f',
+    '--theme-staking-stake-pools-filter-title-button-background-color':
+      'rgba(255, 255, 255, 0.1)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-hover':
+      'rgba(255, 255, 255, 0.05)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-active':
+      'rgba(255, 255, 255, 0.12)',
+    '--theme-staking-stake-pools-filter-title-button-text-color': '#ffffff',
   },
   staking: {
     '--theme-staking-content-background-color': '#1e1f31',
diff --git a/source/renderer/app/themes/daedalus/incentivized-testnet.js b/source/renderer/app/themes/daedalus/incentivized-testnet.js
index 7e34ceaffb..619563e60d 100644
--- a/source/renderer/app/themes/daedalus/incentivized-testnet.js
+++ b/source/renderer/app/themes/daedalus/incentivized-testnet.js
@@ -815,6 +815,15 @@ export const INCENTIVIZED_TESTNET_THEME_OUTPUT = {
     '--theme-staking-stake-pool-tooltip-id-shadow-1': 'rgba(0, 0, 0, 0.25)',
     '--theme-staking-stake-pool-tooltip-id-shadow-2': 'rgba(42, 43, 60, 0)',
     '--theme-staking-stake-pool-tooltip-id-background-color': '#000000',
+    '--theme-staking-stake-pools-filter-button-color': 'rgba(18, 19, 38, 1)',
+    '--theme-staking-stake-pools-filter-modal-bg-color': '#3f404f',
+    '--theme-staking-stake-pools-filter-title-button-background-color':
+      'rgba(255, 255, 255, 0.1)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-hover':
+      'rgba(255, 255, 255, 0.05)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-active':
+      'rgba(255, 255, 255, 0.12)',
+    '--theme-staking-stake-pools-filter-title-button-text-color': '#ffffff',
   },
   staking: {
     '--theme-staking-content-background-color': '#1e1f31',
diff --git a/source/renderer/app/themes/daedalus/light-blue.js b/source/renderer/app/themes/daedalus/light-blue.js
index 63f2701aa7..df0b2e3f64 100644
--- a/source/renderer/app/themes/daedalus/light-blue.js
+++ b/source/renderer/app/themes/daedalus/light-blue.js
@@ -825,6 +825,15 @@ export const LIGHT_BLUE_THEME_OUTPUT = {
       'rgba(68, 91, 124, 0.05)',
     '--theme-staking-stake-pool-tooltip-id-shadow-1': 'rgba(0, 0, 0, 0.25)',
     '--theme-staking-stake-pool-tooltip-id-shadow-2': 'rgba(42, 43, 60, 0)',
+    '--theme-staking-stake-pools-filter-button-color': '#fafbfc',
+    '--theme-staking-stake-pools-filter-modal-bg-color': '#fafbfc',
+    '--theme-staking-stake-pools-filter-title-button-background-color':
+      'rgba(68, 91, 124, 0.1)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-hover':
+      'rgba(68, 91, 124, 0.05)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-active':
+      'rgba(68, 91, 124, 0.12)',
+    '--theme-staking-stake-pools-filter-title-button-text-color': '#2d2d2d',
   },
   staking: {
     '--theme-staking-content-background-color': '#fafbfc',
diff --git a/source/renderer/app/themes/daedalus/shelley-testnet.js b/source/renderer/app/themes/daedalus/shelley-testnet.js
index 15810e143e..65ba105947 100644
--- a/source/renderer/app/themes/daedalus/shelley-testnet.js
+++ b/source/renderer/app/themes/daedalus/shelley-testnet.js
@@ -811,6 +811,15 @@ export const SHELLEY_TESTNET_THEME_OUTPUT = {
     '--theme-staking-stake-pool-tooltip-id-background-color': '#3b3b4b',
     '--theme-staking-stake-pool-tooltip-id-shadow-1': 'rgba(0, 0, 0, 0.25)',
     '--theme-staking-stake-pool-tooltip-id-shadow-2': 'rgba(42, 43, 60, 0)',
+    '--theme-staking-stake-pools-filter-button-color': 'rgba(18, 19, 38, 1)',
+    '--theme-staking-stake-pools-filter-modal-bg-color': '#3f404f',
+    '--theme-staking-stake-pools-filter-title-button-background-color':
+      'rgba(255, 255, 255, 0.1)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-hover':
+      'rgba(255, 255, 255, 0.05)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-active':
+      'rgba(255, 255, 255, 0.12)',
+    '--theme-staking-stake-pools-filter-title-button-text-color': '#ffffff',
   },
   staking: {
     '--theme-staking-content-background-color': '#1e1f31',
diff --git a/source/renderer/app/themes/daedalus/white.js b/source/renderer/app/themes/daedalus/white.js
index 3725f9e442..7c44feb587 100644
--- a/source/renderer/app/themes/daedalus/white.js
+++ b/source/renderer/app/themes/daedalus/white.js
@@ -818,6 +818,15 @@ export const WHITE_THEME_OUTPUT = {
       'rgba(45, 45, 45, 0.05)',
     '--theme-staking-stake-pool-tooltip-id-shadow-1': 'rgba(0, 0, 0, 0.25)',
     '--theme-staking-stake-pool-tooltip-id-shadow-2': 'rgba(42, 43, 60, 0)',
+    '--theme-staking-stake-pools-filter-button-color': '#fff',
+    '--theme-staking-stake-pools-filter-modal-bg-color': '#fff',
+    '--theme-staking-stake-pools-filter-title-button-background-color':
+      'rgba(41, 181, 149, 0.1)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-hover':
+      'rgba(41, 181, 149, 0.05)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-active':
+      'rgba(41, 181, 149, 0.12)',
+    '--theme-staking-stake-pools-filter-title-button-text-color': '#2d2d2d',
   },
   staking: {
     '--theme-staking-content-background-color': '#fff',
diff --git a/source/renderer/app/themes/daedalus/yellow.js b/source/renderer/app/themes/daedalus/yellow.js
index 10c9d741b9..07f626e5a9 100644
--- a/source/renderer/app/themes/daedalus/yellow.js
+++ b/source/renderer/app/themes/daedalus/yellow.js
@@ -817,6 +817,15 @@ export const YELLOW_THEME_OUTPUT = {
       'rgba(45, 45, 45, 0.05)',
     '--theme-staking-stake-pool-tooltip-id-shadow-1': 'rgba(0, 0, 0, 0.25)',
     '--theme-staking-stake-pool-tooltip-id-shadow-2': 'rgba(42, 43, 60, 0)',
+    '--theme-staking-stake-pools-filter-button-color': '#f8f7f3',
+    '--theme-staking-stake-pools-filter-modal-bg-color': '#ffffff',
+    '--theme-staking-stake-pools-filter-title-button-background-color':
+      'rgba(45, 45, 45, 0.1)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-hover':
+      'rgba(45, 45, 45, 0.05)',
+    '--theme-staking-stake-pools-filter-title-button-background-color-active':
+      'rgba(45, 45, 45, 0.12)',
+    '--theme-staking-stake-pools-filter-title-button-text-color': '#2d2d2d',
   },
   staking: {
     '--theme-staking-content-background-color': '#ffffff',

From 9cfbe204133f46df9a23879841adf42845503c62 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Mon, 22 Mar 2021 21:22:13 -0400
Subject: [PATCH 05/38] [DDW-435] Update theme variables for stake pool filter
 modal and translation resources

---
 .../app/i18n/locales/defaultMessages.json     | 135 ++++++++++++++----
 source/renderer/app/i18n/locales/en-US.json   |   5 +
 source/renderer/app/i18n/locales/ja-JP.json   |   5 +
 .../renderer/app/themes/utils/createTheme.js  |  10 ++
 4 files changed, 125 insertions(+), 30 deletions(-)

diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
index 88f668108d..08dba4602e 100644
--- a/source/renderer/app/i18n/locales/defaultMessages.json
+++ b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -5565,6 +5565,81 @@
     ],
     "path": "source/renderer/app/components/staking/rewards/StakingRewardsForIncentivizedTestnet.json"
   },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Reset Filter",
+        "description": "Reset Filter button label.",
+        "end": {
+          "column": 3,
+          "line": 22
+        },
+        "file": "source/renderer/app/components/staking/stake-pools/FilterDialog.js",
+        "id": "staking.stakePools.filter.resetFilter",
+        "start": {
+          "column": 15,
+          "line": 18
+        }
+      },
+      {
+        "defaultMessage": "!!!Retiring pools",
+        "description": "Retiring pools filter type.",
+        "end": {
+          "column": 3,
+          "line": 27
+        },
+        "file": "source/renderer/app/components/staking/stake-pools/FilterDialog.js",
+        "id": "staking.stakePools.filter.retiringPools",
+        "start": {
+          "column": 17,
+          "line": 23
+        }
+      },
+      {
+        "defaultMessage": "!!!Private pools",
+        "description": "Private pools filter type.",
+        "end": {
+          "column": 3,
+          "line": 32
+        },
+        "file": "source/renderer/app/components/staking/stake-pools/FilterDialog.js",
+        "id": "staking.stakePools.filter.privatePools",
+        "start": {
+          "column": 16,
+          "line": 28
+        }
+      },
+      {
+        "defaultMessage": "!!!Pools without off-chain data",
+        "description": "Pools without off-chain data filter type.",
+        "end": {
+          "column": 3,
+          "line": 37
+        },
+        "file": "source/renderer/app/components/staking/stake-pools/FilterDialog.js",
+        "id": "staking.stakePools.filter.poolsWithoutOffChainData",
+        "start": {
+          "column": 28,
+          "line": 33
+        }
+      },
+      {
+        "defaultMessage": "!!!Apply",
+        "description": "Filter button label.",
+        "end": {
+          "column": 3,
+          "line": 42
+        },
+        "file": "source/renderer/app/components/staking/stake-pools/FilterDialog.js",
+        "id": "staking.stakePools.filter.apply",
+        "start": {
+          "column": 9,
+          "line": 38
+        }
+      }
+    ],
+    "path": "source/renderer/app/components/staking/stake-pools/FilterDialog.json"
+  },
   {
     "descriptors": [
       {
@@ -5572,13 +5647,13 @@
         "description": "\"delegatingListTitle\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 31
+          "line": 35
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.delegatingListTitle",
         "start": {
           "column": 23,
-          "line": 27
+          "line": 31
         }
       },
       {
@@ -5586,13 +5661,13 @@
         "description": "\"listTitle\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 36
+          "line": 40
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitle",
         "start": {
           "column": 13,
-          "line": 32
+          "line": 36
         }
       },
       {
@@ -5600,13 +5675,13 @@
         "description": "\"listTitleLoading\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 45
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitleLoading",
         "start": {
           "column": 20,
-          "line": 37
+          "line": 41
         }
       },
       {
@@ -5614,13 +5689,13 @@
         "description": "\"listTitleSearch\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 46
+          "line": 50
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitleSearch",
         "start": {
           "column": 19,
-          "line": 42
+          "line": 46
         }
       },
       {
@@ -5628,13 +5703,13 @@
         "description": "\"listTitleStakePools\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 51
+          "line": 55
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitleStakePools",
         "start": {
           "column": 23,
-          "line": 47
+          "line": 51
         }
       },
       {
@@ -5642,13 +5717,13 @@
         "description": "Loading stake pool message for the Delegation center body section.",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 61
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.loadingStakePoolsMessage",
         "start": {
           "column": 28,
-          "line": 52
+          "line": 56
         }
       },
       {
@@ -5656,13 +5731,13 @@
         "description": "moderatedBy message for the Delegation center body section.",
         "end": {
           "column": 3,
-          "line": 62
+          "line": 66
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.moderatedBy",
         "start": {
           "column": 15,
-          "line": 58
+          "line": 62
         }
       },
       {
@@ -5670,13 +5745,13 @@
         "description": "unmoderated message for the Delegation center body section.",
         "end": {
           "column": 3,
-          "line": 67
+          "line": 71
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.unmoderated",
         "start": {
           "column": 15,
-          "line": 63
+          "line": 67
         }
       }
     ],
@@ -5890,13 +5965,13 @@
         "description": "\"Delegating List Title\" for the Stake Pools search.",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 25
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js",
         "id": "staking.stakePools.search.searchInputPlaceholder",
         "start": {
           "column": 26,
-          "line": 18
+          "line": 21
         }
       },
       {
@@ -5904,13 +5979,13 @@
         "description": "\"delegatingListTitle\" for the Stake Pools search.",
         "end": {
           "column": 3,
-          "line": 27
+          "line": 30
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js",
         "id": "staking.stakePools.search.delegatingListTitle",
         "start": {
           "column": 23,
-          "line": 23
+          "line": 26
         }
       },
       {
@@ -5918,13 +5993,13 @@
         "description": "\"listTitle\" for the Stake Pools search.",
         "end": {
           "column": 3,
-          "line": 32
+          "line": 35
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js",
         "id": "staking.stakePools.search.listTitle",
         "start": {
           "column": 13,
-          "line": 28
+          "line": 31
         }
       },
       {
@@ -5932,13 +6007,13 @@
         "description": "\"gridIconTooltip\" for the Stake Pools search.",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 40
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js",
         "id": "staking.stakePools.search.gridIconTooltip",
         "start": {
           "column": 19,
-          "line": 33
+          "line": 36
         }
       },
       {
@@ -5946,13 +6021,13 @@
         "description": "\"gridRewardsIconTooltip\" for the Stake Pools search.",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 45
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js",
         "id": "staking.stakePools.search.gridRewardsIconTooltip",
         "start": {
           "column": 26,
-          "line": 38
+          "line": 41
         }
       },
       {
@@ -5960,13 +6035,13 @@
         "description": "\"listIconTooltip\" for the Stake Pools search.",
         "end": {
           "column": 3,
-          "line": 47
+          "line": 50
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js",
         "id": "staking.stakePools.search.listIconTooltip",
         "start": {
           "column": 19,
-          "line": 43
+          "line": 46
         }
       },
       {
@@ -5974,13 +6049,13 @@
         "description": "\"clearTooltip\" for the Stake Pools search.",
         "end": {
           "column": 3,
-          "line": 52
+          "line": 55
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js",
         "id": "staking.stakePools.search.clearTooltip",
         "start": {
           "column": 16,
-          "line": 48
+          "line": 51
         }
       }
     ],
diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
index 1888128e61..e0a0fa760c 100755
--- a/source/renderer/app/i18n/locales/en-US.json
+++ b/source/renderer/app/i18n/locales/en-US.json
@@ -472,6 +472,11 @@
   "staking.rewards.tableHeader.wallet": "Wallet",
   "staking.rewards.title": "Earned delegation rewards",
   "staking.stakePools.delegatingListTitle": "Staking pools you are delegating to",
+  "staking.stakePools.filter.apply": "Apply",
+  "staking.stakePools.filter.poolsWithoutOffChainData": "Pools without off-chain data",
+  "staking.stakePools.filter.privatePools": "Private pools",
+  "staking.stakePools.filter.resetFilter": "Reset Filter",
+  "staking.stakePools.filter.retiringPools": "Retiring pools",
   "staking.stakePools.learnMore": "Learn more",
   "staking.stakePools.listTitle": "Stake pools",
   "staking.stakePools.listTitleLoading": "Loading stake pools",
diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
index c0cbff0e9b..885d294f29 100755
--- a/source/renderer/app/i18n/locales/ja-JP.json
+++ b/source/renderer/app/i18n/locales/ja-JP.json
@@ -472,6 +472,11 @@
   "staking.rewards.tableHeader.wallet": "ウォレット",
   "staking.rewards.title": "獲得した委任報酬",
   "staking.stakePools.delegatingListTitle": "現在委任しているステークプール",
+  "staking.stakePools.filter.apply": "適用する",
+  "staking.stakePools.filter.poolsWithoutOffChainData": "!!!Pools without off-chain data",
+  "staking.stakePools.filter.privatePools": "!!!Private pools",
+  "staking.stakePools.filter.resetFilter": "フィルターをリセットする",
+  "staking.stakePools.filter.retiringPools": "!!!Retiring pools",
   "staking.stakePools.learnMore": "もっと知る",
   "staking.stakePools.listTitle": "ステークプール",
   "staking.stakePools.listTitleLoading": "ステークプールをロード中",
diff --git a/source/renderer/app/themes/utils/createTheme.js b/source/renderer/app/themes/utils/createTheme.js
index cdd3d28f07..abc5ebc30d 100644
--- a/source/renderer/app/themes/utils/createTheme.js
+++ b/source/renderer/app/themes/utils/createTheme.js
@@ -1026,6 +1026,16 @@ export const createDaedalusComponentsTheme = (
       '--theme-staking-stake-pool-tooltip-delegate-button-border-color':
         'transparent',
       '--theme-staking-progress-label-light': `${text.secondary}`,
+      '--theme-staking-stake-pools-filter-button-color': `${text.primary}`,
+      '--theme-staking-stake-pools-filter-modal-bg-color': `${background.secondary.regular}`,
+      '--theme-staking-stake-pools-filter-title-button-background-color': `${background.secondary.regular}`,
+      '--theme-staking-stake-pools-filter-title-button-background-color-hover': `${chroma(
+        background.secondary.regular
+      ).alpha(0.1)}`,
+      '--theme-staking-stake-pools-filter-title-button-background-color-active': `${chroma(
+        background.secondary.regular
+      ).alpha(0.5)}`,
+      '--theme-staking-stake-pools-filter-title-button-text-color': `${text.secondary}`,
     },
     staking: {
       '--theme-staking-content-background-color': `${background.primary.lightest}`,

From eded65da22be617b51d683bb550b5a61db7db967 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Mon, 22 Mar 2021 23:01:25 -0400
Subject: [PATCH 06/38] [DDW-435] Update stake pool filter modal markup and
 styles

---
 .../staking/stake-pools/FilterButton.js       | 54 -------------------
 .../staking/stake-pools/FilterButton.scss     | 28 ----------
 .../{FilterDialog.js => FilterPopOver.js}     | 41 ++++++++++----
 .../{FilterDialog.scss => FilterPopOver.scss} | 50 ++++++++++++++++-
 .../staking/stake-pools/StakePools.js         |  6 +--
 .../staking/stake-pools/StakePoolsSearch.js   | 26 +++------
 .../staking/stake-pools/StakePoolsSearch.scss | 32 ++++++-----
 7 files changed, 109 insertions(+), 128 deletions(-)
 delete mode 100644 source/renderer/app/components/staking/stake-pools/FilterButton.js
 delete mode 100644 source/renderer/app/components/staking/stake-pools/FilterButton.scss
 rename source/renderer/app/components/staking/stake-pools/{FilterDialog.js => FilterPopOver.js} (82%)
 rename source/renderer/app/components/staking/stake-pools/{FilterDialog.scss => FilterPopOver.scss} (66%)

diff --git a/source/renderer/app/components/staking/stake-pools/FilterButton.js b/source/renderer/app/components/staking/stake-pools/FilterButton.js
deleted file mode 100644
index 3647c7f3e8..0000000000
--- a/source/renderer/app/components/staking/stake-pools/FilterButton.js
+++ /dev/null
@@ -1,54 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import { observer } from 'mobx-react';
-import { intlShape } from 'react-intl';
-import classNames from 'classnames';
-import SVGInline from 'react-svg-inline';
-import TinyButton from '../../widgets/forms/TinyButton';
-import filterIcon from '../../../assets/images/filter-dis-ic.inline.svg';
-import globalMessages from '../../../i18n/global-messages';
-import styles from './FilterButton.scss';
-
-type Props = {
-  disabled: boolean,
-  numberOfFilterDimensionsApplied: number,
-  onClick?: Function,
-};
-
-@observer
-export default class FilterButton extends Component<Props> {
-  static contextTypes = {
-    intl: intlShape.isRequired,
-  };
-
-  render() {
-    const { intl } = this.context;
-    const { numberOfFilterDimensionsApplied, onClick, disabled } = this.props;
-    const buttonLabel = (
-      <>
-        <div className={styles.actionLabel}>
-          {intl.formatMessage(globalMessages.filter)}
-          {numberOfFilterDimensionsApplied > 0 && (
-            <span className={styles.numberIndicator}>
-              ({numberOfFilterDimensionsApplied})
-            </span>
-          )}
-        </div>
-        <SVGInline svg={filterIcon} className={styles.filterIcon} />
-      </>
-    );
-    const buttonClasses = classNames(['primary', styles.actionButton]);
-
-    return (
-      <div className={styles.component}>
-        <TinyButton
-          className={buttonClasses}
-          label={buttonLabel}
-          loading={false}
-          onClick={onClick}
-          disabled={disabled}
-        />
-      </div>
-    );
-  }
-}
diff --git a/source/renderer/app/components/staking/stake-pools/FilterButton.scss b/source/renderer/app/components/staking/stake-pools/FilterButton.scss
deleted file mode 100644
index 753981721c..0000000000
--- a/source/renderer/app/components/staking/stake-pools/FilterButton.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.component {
-  .actionButton {
-    border-radius: 2px;
-    display: flex;
-    padding: 7px 12px;
-
-    .actionLabel {
-      color: var(--theme-staking-stake-pools-filter-button-color);
-      font-family: var(--font-medium);
-      font-size: 14px;
-      line-height: 1.36;
-      margin-right: 12px;
-
-      .numberIndicator {
-        margin-left: 5px;
-      }
-    }
-
-    .filterIcon {
-      height: 11px;
-      width: 11px;
-
-      g {
-        stroke: var(--theme-staking-stake-pools-filter-button-color);
-      }
-    }
-  }
-}
diff --git a/source/renderer/app/components/staking/stake-pools/FilterDialog.js b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
similarity index 82%
rename from source/renderer/app/components/staking/stake-pools/FilterDialog.js
rename to source/renderer/app/components/staking/stake-pools/FilterPopOver.js
index 5f49f1b4c1..245518ba10 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterDialog.js
+++ b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
@@ -1,18 +1,21 @@
 // @flow
 /* eslint-disable jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
 import React, { Component, createRef } from 'react';
-import type { Element, ElementRef } from 'react';
+import type { ElementRef } from 'react';
 import { observer } from 'mobx-react';
 import { isEqual, pick } from 'lodash';
 import { defineMessages, intlShape } from 'react-intl';
+import classNames from 'classnames';
+import SVGInline from 'react-svg-inline';
 import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import type { StakePoolFilterOptionsType } from '../../../stores/StakingStore';
 import { emptyStakePoolFilterOptions } from '../../../stores/StakingStore';
 import TinyCheckbox from '../../widgets/forms/TinyCheckbox';
 import TinyButton from '../../widgets/forms/TinyButton';
+import filterIcon from '../../../assets/images/filter-dis-ic.inline.svg';
 import globalMessages from '../../../i18n/global-messages';
-import styles from './FilterDialog.scss';
+import styles from './FilterPopOver.scss';
 
 const messages = defineMessages({
   resetFilter: {
@@ -42,14 +45,15 @@ const messages = defineMessages({
   },
 });
 
-export type FilterDialogProps = {
+export type FilterPopOverProps = {
   populatedFilterOptions: StakePoolFilterOptionsType,
   onFilter: Function,
-  triggerElement?: Element<*>,
+  numberOfFilterDimensionsApplied: number,
+  isFilterDisabled: boolean,
 };
 
 @observer
-export default class FilterDialog extends Component<FilterDialogProps> {
+export default class FilterPopOver extends Component<FilterPopOverProps> {
   static contextTypes = {
     intl: intlShape.isRequired,
   };
@@ -57,7 +61,7 @@ export default class FilterDialog extends Component<FilterDialogProps> {
   form: ReactToolboxMobxForm;
   popoverTippyInstance: ElementRef<*> = createRef();
 
-  constructor(props: FilterDialogProps, context: Object) {
+  constructor(props: FilterPopOverProps, context: Object) {
     super(props);
 
     const {
@@ -164,7 +168,7 @@ export default class FilterDialog extends Component<FilterDialogProps> {
 
   render() {
     const { intl } = this.context;
-    const { triggerElement } = this.props;
+    const { numberOfFilterDimensionsApplied, isFilterDisabled } = this.props;
 
     return (
       <PopOver
@@ -181,7 +185,7 @@ export default class FilterDialog extends Component<FilterDialogProps> {
         placement="bottom"
         themeVariables={{
           '--rp-pop-over-bg-color':
-            'var(--theme-stake-pools-filter-modal-bg-color)',
+            'var(--theme-staking-stake-pools-filter-modal-bg-color)',
           '--rp-pop-over-box-shadow': '0 5px 20px 0 rgba(0, 0, 0, 0.25)',
           '--rp-pop-over-border-radius': '4px',
           '--rp-pop-over-border-style': 'solid',
@@ -223,7 +227,26 @@ export default class FilterDialog extends Component<FilterDialogProps> {
           </div>
         }
       >
-        {triggerElement}
+        <div className={styles.triggerButton}>
+          <TinyButton
+            className={classNames(['primary', styles.actionButton])}
+            label={
+              <>
+                <div className={styles.actionLabel}>
+                  {intl.formatMessage(globalMessages.filter)}
+                  {numberOfFilterDimensionsApplied > 0 && (
+                    <span className={styles.numberIndicator}>
+                      ({numberOfFilterDimensionsApplied})
+                    </span>
+                  )}
+                </div>
+                <SVGInline svg={filterIcon} className={styles.filterIcon} />
+              </>
+            }
+            loading={false}
+            disabled={isFilterDisabled}
+          />
+        </div>
       </PopOver>
     );
   }
diff --git a/source/renderer/app/components/staking/stake-pools/FilterDialog.scss b/source/renderer/app/components/staking/stake-pools/FilterPopOver.scss
similarity index 66%
rename from source/renderer/app/components/staking/stake-pools/FilterDialog.scss
rename to source/renderer/app/components/staking/stake-pools/FilterPopOver.scss
index 129628ad19..5f2ffbae1a 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterDialog.scss
+++ b/source/renderer/app/components/staking/stake-pools/FilterPopOver.scss
@@ -73,10 +73,58 @@
       display: flex;
       flex-direction: column;
       margin: 20px 10px 0;
+
+      :global {
+        .TinyCheckbox_component {
+          margin-bottom: 17px;
+        }
+      }
     }
 
     .action {
-      margin-top: 24px;
+      margin-top: 8px;
+    }
+  }
+}
+
+.triggerButton {
+  margin-left: 7px;
+  margin-right: 11px;
+
+  .actionButton {
+    border-radius: 2px;
+    display: flex;
+    height: 28px;
+    margin: 0;
+    padding: 0 12px;
+
+    .actionLabel {
+      color: var(--theme-staking-stake-pools-filter-button-color);
+      font-family: var(--font-regular);
+      font-size: 14px;
+      line-height: 1.36;
+      margin-right: 12px;
+
+      .numberIndicator {
+        margin-left: 5px;
+      }
+    }
+
+    .filterIcon {
+      align-items: center;
+      display: flex;
+      height: 11px;
+      justify-content: center;
+      width: 11px;
+
+      svg {
+        height: 11px;
+        width: 11px;
+      }
+
+      g {
+        stroke: var(--theme-staking-stake-pools-filter-button-color);
+      }
     }
   }
 }
diff --git a/source/renderer/app/components/staking/stake-pools/StakePools.js b/source/renderer/app/components/staking/stake-pools/StakePools.js
index 567c771833..e2c1fcb47c 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePools.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePools.js
@@ -301,11 +301,11 @@ export default class StakePools extends Component<Props, State> {
               isGridView={isGridView}
               isGridRewardsView={isGridRewardsView}
               smashServer={smashServer}
-              isFilterDisabled={isFilterDisabled}
-              numberOfFilterDimensionsApplied={numberOfFilterDimensionsApplied}
-              filterDialogProps={{
+              filterPopOverProps={{
                 populatedFilterOptions,
                 onFilter,
+                isFilterDisabled,
+                numberOfFilterDimensionsApplied,
               }}
             />
             {stakePoolsDelegatingList.length > 0 && (
diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
index 05023ca57d..31b7b8e45c 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
@@ -7,9 +7,8 @@ import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
 import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import classnames from 'classnames';
 import styles from './StakePoolsSearch.scss';
-import FilterButton from './FilterButton';
-import FilterDialog from './FilterDialog';
-import type { FilterDialogProps } from './FilterDialog';
+import FilterPopOver from './FilterPopOver';
+import type { FilterPopOverProps } from './FilterPopOver';
 import searchIcon from '../../../assets/images/search.inline.svg';
 import closeIcon from '../../../assets/images/close-cross.inline.svg';
 import gridIcon from '../../../assets/images/grid-ic.inline.svg';
@@ -67,9 +66,7 @@ type Props = {
   onGridRewardsView?: Function,
   onListView?: Function,
   search: string,
-  isFilterDisabled: boolean,
-  numberOfFilterDimensionsApplied: number,
-  filterDialogProps: FilterDialogProps,
+  filterPopOverProps: FilterPopOverProps,
 };
 
 export class StakePoolsSearch extends Component<Props> {
@@ -106,9 +103,7 @@ export class StakePoolsSearch extends Component<Props> {
       isListView,
       isGridView,
       isGridRewardsView,
-      isFilterDisabled,
-      filterDialogProps,
-      numberOfFilterDimensionsApplied,
+      filterPopOverProps,
     } = this.props;
 
     const gridButtonClasses = classnames([
@@ -200,19 +195,10 @@ export class StakePoolsSearch extends Component<Props> {
                   <SVGInline svg={listIcon} />
                 </button>
               </PopOver>
+              <span className={styles.separator}>|</span>
+              <FilterPopOver {...filterPopOverProps} />
             </div>
           )}
-          <FilterDialog
-            {...filterDialogProps}
-            triggerElement={
-              <FilterButton
-                disabled={isFilterDisabled}
-                numberOfFilterDimensionsApplied={
-                  numberOfFilterDimensionsApplied
-                }
-              />
-            }
-          />
         </div>
       </div>
     );
diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss
index de493589ee..3bdbf3d975 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss
@@ -33,11 +33,11 @@
 
   &.inputExtrasSearch {
     input {
-      padding-right: 160px;
+      padding-right: 265px;
     }
 
     &.withGridRewardsView input {
-      padding-right: 193px;
+      padding-right: 300px;
     }
   }
 }
@@ -51,10 +51,10 @@
   right: 20px;
 
   &.inputExtrasSearch {
-    right: 110px;
+    right: 217px;
 
     &.withGridRewardsView {
-      right: 145px;
+      right: 252px;
     }
   }
 }
@@ -91,28 +91,30 @@
 
 .viewButtons {
   align-items: center;
-  bottom: 0.5px;
+  bottom: 0;
   display: flex;
-  height: 48px;
+  height: 50px;
   justify-content: space-between;
-  line-height: 48px;
-  padding-left: 20px;
+  line-height: 50px;
   position: absolute;
-  right: 11px;
+  right: 0;
 
   .separator {
     color: var(--theme-staking-stake-pools-search-clear-button-color);
+    margin-top: -3px;
     opacity: 0.2;
-    padding-right: 10px;
+    padding: 0 8px;
     position: relative;
-    top: -2px;
   }
 
   button {
+    align-items: center;
     border-radius: 3px;
     color: var(--theme-about-window-icon-close-button-color);
     cursor: pointer;
+    display: flex;
     height: 28px;
+    justify-content: center;
     margin: 0 2px;
     width: 28px;
 
@@ -122,9 +124,13 @@
       );
     }
 
+    :global {
+      .SVGInline {
+        height: 15px;
+      }
+    }
+
     svg {
-      position: relative;
-      top: 1px;
       width: 18px;
 
       > g > g {

From 30eefd011af56a8d9f00ebbc29035df448427407 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 23 Mar 2021 04:24:11 -0400
Subject: [PATCH 07/38] [DDW-435] Update staking store

---
 source/renderer/app/stores/StakingStore.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/renderer/app/stores/StakingStore.js b/source/renderer/app/stores/StakingStore.js
index b87f72e5bb..c2925a6b70 100644
--- a/source/renderer/app/stores/StakingStore.js
+++ b/source/renderer/app/stores/StakingStore.js
@@ -83,7 +83,7 @@ export default class StakingStore extends Store {
   @observable cyclesWithoutIncreasingStakePools: number = 0;
 
   /* ----------  Stake Pools Filter  ---------- */
-  @observable _filterOptions = {};
+  @observable filterOptions: ?StakePoolFilterOptionsType = null;
 
   pollingStakePoolsInterval: ?IntervalID = null;
   refreshPolling: ?IntervalID = null;

From 4a723c3cf0856fe8a4d85850e51aaec8e23f2b43 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 23 Mar 2021 05:42:09 -0400
Subject: [PATCH 08/38] [DDW-435] Update stake pools filter logic

---
 source/renderer/app/api/api.js                    | 12 +++++-------
 .../app/containers/staking/StakePoolsListPage.js  |  4 ++--
 source/renderer/app/domains/StakePool.js          |  6 ++++++
 source/renderer/app/utils/staking.js              | 15 +++++++++++++++
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/source/renderer/app/api/api.js b/source/renderer/app/api/api.js
index f12b48f363..1aba716306 100644
--- a/source/renderer/app/api/api.js
+++ b/source/renderer/app/api/api.js
@@ -2181,16 +2181,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;
@@ -2929,7 +2923,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(
@@ -2962,6 +2957,9 @@ const _createStakePoolFromServerData = action(
       ranking: index + 1,
       retiring: retiringAt ? new Date(retiringAt) : null,
       saturation: saturation * 100,
+      isRetiring: !!retiringAt,
+      isPrivate: profitMarginPercentage === 100,
+      hasNoOffChainData: !metadata,
     });
   }
 );
diff --git a/source/renderer/app/containers/staking/StakePoolsListPage.js b/source/renderer/app/containers/staking/StakePoolsListPage.js
index 6dcf9ca33e..a2844de6f0 100644
--- a/source/renderer/app/containers/staking/StakePoolsListPage.js
+++ b/source/renderer/app/containers/staking/StakePoolsListPage.js
@@ -61,7 +61,7 @@ export default class StakePoolsListPage extends Component<Props> {
     const { isSynced } = networkStatus;
     const {
       stakePoolsRequest,
-      stakePools,
+      allFiltered,
       selectedDelegationWalletId,
       stake,
       fetchingStakePoolsFailed,
@@ -84,7 +84,7 @@ export default class StakePoolsListPage extends Component<Props> {
         <StakePools
           wallets={all}
           currentLocale={currentLocale}
-          stakePoolsList={stakePools}
+          stakePoolsList={allFiltered}
           stakePoolsDelegatingList={recentStakePools}
           onOpenExternalLink={app.openExternalLink}
           currentTheme={currentTheme}
diff --git a/source/renderer/app/domains/StakePool.js b/source/renderer/app/domains/StakePool.js
index 95707fd6d3..ac170a0347 100644
--- a/source/renderer/app/domains/StakePool.js
+++ b/source/renderer/app/domains/StakePool.js
@@ -30,6 +30,9 @@ export type StakePoolProps = {
   ranking: number,
   retiring?: ?Date,
   saturation: number,
+  isRetiring: boolean,
+  isPrivate: boolean,
+  hasNoOffChainData: boolean,
 };
 
 export default class StakePool {
@@ -49,6 +52,9 @@ export default class StakePool {
   @observable ranking: number;
   @observable retiring: ?Date;
   @observable saturation: number;
+  @observable isRetiring: boolean;
+  @observable isPrivate: boolean;
+  @observable hasNoOffChainData: boolean;
 
   constructor(data: StakePoolProps) {
     Object.assign(this, data);
diff --git a/source/renderer/app/utils/staking.js b/source/renderer/app/utils/staking.js
index 3928968c39..31edb215a4 100644
--- a/source/renderer/app/utils/staking.js
+++ b/source/renderer/app/utils/staking.js
@@ -80,5 +80,20 @@ export const isStakePoolInFilterRange = (
   filterOptions: ?StakePoolFilterOptionsType,
   stakePool: StakePool
 ) => {
+  const {
+    retiringPoolsChecked,
+    privatePoolsChecked,
+    poolsWithoutOffChainDataChecked,
+  } = filterOptions;
+
+  if (stakePool.isRetiring && !retiringPoolsChecked) {
+    return false;
+  }
+  if (stakePool.isPrivate && !privatePoolsChecked) {
+    return false;
+  }
+  if (stakePool.hasNoOffChainData && !poolsWithoutOffChainDataChecked) {
+    return false;
+  }
   return true;
 };

From 547736f237157442f39eeee027a33a2bf3eef86e Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 23 Mar 2021 05:46:12 -0400
Subject: [PATCH 09/38] [DDW-435] Update stake pools filter logic

---
 source/renderer/app/utils/staking.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/source/renderer/app/utils/staking.js b/source/renderer/app/utils/staking.js
index 31edb215a4..a4c6eabbc5 100644
--- a/source/renderer/app/utils/staking.js
+++ b/source/renderer/app/utils/staking.js
@@ -80,6 +80,10 @@ export const isStakePoolInFilterRange = (
   filterOptions: ?StakePoolFilterOptionsType,
   stakePool: StakePool
 ) => {
+  if (!filterOptions) {
+    return true;
+  }
+
   const {
     retiringPoolsChecked,
     privatePoolsChecked,

From 31bf0168fd76f729e949db318fe5ba39f29814a1 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 23 Mar 2021 06:40:22 -0400
Subject: [PATCH 10/38] [DDW-435] Update stake pool tooltip info for no
 metadata case

---
 .../staking/widgets/ThumbPoolContent.js       |  8 ++++-
 .../staking/widgets/ThumbPoolContent.scss     | 27 +++++++++++++++--
 .../staking/widgets/ThumbSelectedPool.js      |  9 ++++--
 .../staking/widgets/ThumbSelectedPool.scss    | 19 ++++++++++++
 .../components/staking/widgets/TooltipPool.js | 29 +++++++++++++------
 .../staking/widgets/TooltipPool.scss          |  6 ++--
 source/renderer/app/i18n/locales/en-US.json   |  1 +
 source/renderer/app/i18n/locales/ja-JP.json   |  1 +
 source/renderer/app/utils/staking.js          | 13 ++++-----
 9 files changed, 89 insertions(+), 24 deletions(-)

diff --git a/source/renderer/app/components/staking/widgets/ThumbPoolContent.js b/source/renderer/app/components/staking/widgets/ThumbPoolContent.js
index 1d28df556f..0515935279 100644
--- a/source/renderer/app/components/staking/widgets/ThumbPoolContent.js
+++ b/source/renderer/app/components/staking/widgets/ThumbPoolContent.js
@@ -8,6 +8,7 @@ import clockIcon from '../../../assets/images/clock-corner.inline.svg';
 import noDataDashBigImage from '../../../assets/images/no-data-dash-big.inline.svg';
 import styles from './ThumbPoolContent.scss';
 import { getColorFromRange, getSaturationColor } from '../../../utils/colors';
+import { ellipsis } from '../../../utils/strings';
 import StakePool from '../../../domains/StakePool';
 import {
   IS_RANKING_DATA_AVAILABLE,
@@ -48,6 +49,7 @@ export default class ThumbPoolContent extends Component<Props> {
     const {
       ranking,
       nonMyopicMemberRewards,
+      id,
       ticker,
       retiring,
       saturation,
@@ -67,7 +69,11 @@ export default class ThumbPoolContent extends Component<Props> {
 
     return (
       <div className={componentClassnames}>
-        <div className={styles.ticker}>{ticker}</div>
+        {ticker ? (
+          <div className={styles.ticker}>{ticker}</div>
+        ) : (
+          <div className={styles.id}>{ellipsis(id, 4, 4)}</div>
+        )}
         {isGridRewardsView &&
           (IS_RANKING_DATA_AVAILABLE && nonMyopicMemberRewards ? (
             <div className={styles.rewards}>
diff --git a/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss b/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss
index 49bef2aae1..26f3a6e12f 100644
--- a/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss
+++ b/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss
@@ -1,6 +1,6 @@
 .component {
   height: 69px;
-  padding: 9px 0 0;
+  padding: 6px 0 0;
   position: relative;
   width: 78px;
 
@@ -13,18 +13,41 @@
   }
 
   .ticker {
+    align-items: center;
     color: var(--theme-staking-stake-pool-ticker-color);
+    display: flex;
     font-family: var(--font-semibold);
     font-size: 14px;
+    height: 22px;
+    justify-content: center;
     letter-spacing: -0.5px;
     line-height: 1;
-    margin: 0 0 1px;
+    margin-bottom: 2px;
+    text-align: center;
+  }
+
+  .id {
+    align-items: center;
+    background-color: var(
+      --theme-staking-stake-pool-tooltip-neutral-background-color
+    );
+    border-radius: 3px;
+    color: var(--theme-staking-stake-pool-ticker-color);
+    display: flex;
+    font-family: var(--font-semibold);
+    font-size: 11px;
+    height: 22px;
+    justify-content: center;
+    line-height: 1.27;
+    margin: 0 3.5px 2px;
     text-align: center;
   }
 
   .ranking {
     font-size: 20px;
     font-weight: bold;
+    height: 22px;
+    line-height: 100%;
     position: relative;
     text-align: center;
 
diff --git a/source/renderer/app/components/staking/widgets/ThumbSelectedPool.js b/source/renderer/app/components/staking/widgets/ThumbSelectedPool.js
index ecc244acbd..7ed5ab1f08 100644
--- a/source/renderer/app/components/staking/widgets/ThumbSelectedPool.js
+++ b/source/renderer/app/components/staking/widgets/ThumbSelectedPool.js
@@ -5,6 +5,7 @@ import SVGInline from 'react-svg-inline';
 import classnames from 'classnames';
 import styles from './ThumbSelectedPool.scss';
 import { getColorFromRange } from '../../../utils/colors';
+import { ellipsis } from '../../../utils/strings';
 import checkmarkImage from '../../../assets/images/check-w.inline.svg';
 import questionmarkImage from '../../../assets/images/questionmark.inline.svg';
 import clockImage from '../../../assets/images/clock.inline.svg';
@@ -26,7 +27,7 @@ export default class ThumbSelectedPool extends Component<Props> {
       numberOfRankedStakePools,
     } = this.props;
 
-    const { ticker, retiring, ranking } = stakePool || {};
+    const { id, ticker, retiring, ranking } = stakePool || {};
     const rankColor =
       stakePool && !retiring && IS_RANKING_DATA_AVAILABLE
         ? getColorFromRange(ranking, numberOfRankedStakePools)
@@ -54,7 +55,11 @@ export default class ThumbSelectedPool extends Component<Props> {
 
     return (
       <div className={selectedPoolBlockClasses} style={selectedPoolBlockStyle}>
-        {ticker && <div className={styles.ticker}>{ticker}</div>}
+        {ticker ? (
+          <div className={styles.ticker}>{ticker}</div>
+        ) : (
+          <div className={styles.id}>{ellipsis(id, 4, 4)}</div>
+        )}
         <div className={styles.icon}>
           <SVGInline svg={icon} />
         </div>
diff --git a/source/renderer/app/components/staking/widgets/ThumbSelectedPool.scss b/source/renderer/app/components/staking/widgets/ThumbSelectedPool.scss
index 10e85463ab..08ccbd8694 100644
--- a/source/renderer/app/components/staking/widgets/ThumbSelectedPool.scss
+++ b/source/renderer/app/components/staking/widgets/ThumbSelectedPool.scss
@@ -40,6 +40,25 @@
       text-align: center;
     }
 
+    .id {
+      align-items: center;
+      background-color: var(
+        --theme-staking-stake-pool-tooltip-neutral-background-color
+      );
+      border-radius: 3px;
+      color: var(
+        --theme-delegation-steps-choose-stake-pool-selected-ticker-color
+      );
+      display: flex;
+      font-family: var(--font-semibold);
+      font-size: 11px;
+      height: 22px;
+      justify-content: center;
+      line-height: 1.27;
+      margin: 0 3.5px;
+      text-align: center;
+    }
+
     .icon {
       margin-top: 10px;
       text-align: center;
diff --git a/source/renderer/app/components/staking/widgets/TooltipPool.js b/source/renderer/app/components/staking/widgets/TooltipPool.js
index cdf24e36eb..969998bdf5 100644
--- a/source/renderer/app/components/staking/widgets/TooltipPool.js
+++ b/source/renderer/app/components/staking/widgets/TooltipPool.js
@@ -50,6 +50,11 @@ import {
 } from '../../../config/stakingConfig';
 
 const messages = defineMessages({
+  noData: {
+    id: 'staking.stakePools.tooltip.noData',
+    defaultMessage: '!!!No data',
+    description: '"Name" placeholder when it is empty.',
+  },
   ranking: {
     id: 'staking.stakePools.tooltip.ranking',
     defaultMessage: '!!!Rank:',
@@ -766,11 +771,13 @@ export default class TooltipPool extends Component<Props, State> {
         <div className={colorBandClassnames} style={colorBandStyle} />
         {hasArrow && <div className={arrowClassnames} style={arrowStyle} />}
         <div className={styles.container}>
-          <h3 className={styles.name}>{name}</h3>
+          <h3 className={styles.name}>
+            {name || intl.formatMessage(messages.noData)}
+          </h3>
           <button className={styles.closeButton} onClick={onClick}>
             <SVGInline svg={closeCross} />
           </button>
-          <div className={styles.ticker}>{ticker}</div>
+          {ticker && <div className={styles.ticker}>{ticker}</div>}
           {retiring && (
             <div className={styles.retirement}>
               <FormattedMessage
@@ -802,13 +809,17 @@ export default class TooltipPool extends Component<Props, State> {
               </CopyToClipboard>
             </div>
           </PopOver>
-          <div className={styles.description}>{description}</div>
-          <Link
-            onClick={() => onOpenExternalLink(homepage)}
-            className={styles.homepage}
-            label={homepage}
-            skin={LinkSkin}
-          />
+          {description && (
+            <div className={styles.description}>{description}</div>
+          )}
+          {homepage && (
+            <Link
+              onClick={() => onOpenExternalLink(homepage)}
+              className={styles.homepage}
+              label={homepage}
+              skin={LinkSkin}
+            />
+          )}
           {this.renderDescriptionFields()}
         </div>
         {onSelect && showWithSelectButton && (
diff --git a/source/renderer/app/components/staking/widgets/TooltipPool.scss b/source/renderer/app/components/staking/widgets/TooltipPool.scss
index 98784cd0b3..ceeec1f6b1 100644
--- a/source/renderer/app/components/staking/widgets/TooltipPool.scss
+++ b/source/renderer/app/components/staking/widgets/TooltipPool.scss
@@ -234,7 +234,7 @@
   font-size: 10px;
   height: 14px;
   line-height: 14px;
-  margin: -8px 0 12px;
+  margin: 0 0 12px;
   padding: 3px 0;
   transition: margin 0.4s ease-in-out;
   word-break: break-all;
@@ -346,7 +346,7 @@
   display: inline-block;
   font-size: 14px;
   line-height: 1.36;
-  margin-bottom: 9px;
+  margin-bottom: 1px;
   opacity: 0.6;
   vertical-align: middle;
 }
@@ -378,7 +378,7 @@
 
 .table {
   @extend %regularText;
-  margin: 18px 0 6px 0;
+  margin: 18px 0 0 0;
 
   .dRow {
     align-items: center;
diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
index e0a0fa760c..6811229cc5 100755
--- a/source/renderer/app/i18n/locales/en-US.json
+++ b/source/renderer/app/i18n/locales/en-US.json
@@ -522,6 +522,7 @@
   "staking.stakePools.tooltip.costPerEpochTooltip": "Fixed operational costs that the stake pool retains from any rewards earned during each epoch. ",
   "staking.stakePools.tooltip.delegateButton": "Delegate to this pool",
   "staking.stakePools.tooltip.experimentalTooltipLabel": "Experimental feature, data may be inaccurate.",
+  "staking.stakePools.tooltip.noData": "No data",
   "staking.stakePools.tooltip.pledge": "Pledge:",
   "staking.stakePools.tooltip.pledgeTooltip": "The amount of stake that a pool operator contributes to a pool. Pools with higher pledge amounts earn more rewards for themselves and their delegators. Pools that do not honor their pledge earn zero rewards and accrue low ranking.",
   "staking.stakePools.tooltip.potentialRewards": "Potential rewards:",
diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
index 885d294f29..8a8d93f969 100755
--- a/source/renderer/app/i18n/locales/ja-JP.json
+++ b/source/renderer/app/i18n/locales/ja-JP.json
@@ -522,6 +522,7 @@
   "staking.stakePools.tooltip.costPerEpochTooltip": "各エポックで得られた報酬から差し引かれるステークプールの固定運営費",
   "staking.stakePools.tooltip.delegateButton": "このプールに委任する",
   "staking.stakePools.tooltip.experimentalTooltipLabel": "実験的機能データは不正確な場合があります",
+  "staking.stakePools.tooltip.noData": "!!!No data",
   "staking.stakePools.tooltip.pledge": "出資：",
   "staking.stakePools.tooltip.pledgeTooltip": "プールオペレーターが自分のプールに投資するステーク量で、出資額が多いプールは、より多くの報酬を自身と委任者にもたらすが、出資をしないプールは報酬を稼ぐことができず、ランクが低くなる",
   "staking.stakePools.tooltip.potentialRewards": "見込み報酬額：",
diff --git a/source/renderer/app/utils/staking.js b/source/renderer/app/utils/staking.js
index a4c6eabbc5..b64635631c 100644
--- a/source/renderer/app/utils/staking.js
+++ b/source/renderer/app/utils/staking.js
@@ -90,14 +90,13 @@ export const isStakePoolInFilterRange = (
     poolsWithoutOffChainDataChecked,
   } = filterOptions;
 
-  if (stakePool.isRetiring && !retiringPoolsChecked) {
-    return false;
-  }
-  if (stakePool.isPrivate && !privatePoolsChecked) {
-    return false;
-  }
-  if (stakePool.hasNoOffChainData && !poolsWithoutOffChainDataChecked) {
+  if (
+    (stakePool.isRetiring && !retiringPoolsChecked) ||
+    (stakePool.isPrivate && !privatePoolsChecked) ||
+    (stakePool.hasNoOffChainData && !poolsWithoutOffChainDataChecked)
+  ) {
     return false;
   }
+
   return true;
 };

From d2756e1f03fbdb71b235c59c493d1deae1672452 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 23 Mar 2021 07:45:53 -0400
Subject: [PATCH 11/38] [DDW-435] Apply dynamic style to stake pool search
 input

---
 .../staking/stake-pools/StakePoolsSearch.js   | 50 +++++++++++++------
 .../staking/stake-pools/StakePoolsSearch.scss | 19 -------
 source/renderer/app/i18n/locales/ja-JP.json   |  8 +--
 3 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
index 31b7b8e45c..974b5729dd 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
@@ -54,6 +54,9 @@ const messages = defineMessages({
   },
 });
 
+const INPUT_FIELD_PADDING_DELTA = 60;
+const CLEAR_BUTTON_RIGHT_DELTA = 10;
+
 type Props = {
   label?: string,
   placeholder?: string,
@@ -75,6 +78,13 @@ export class StakePoolsSearch extends Component<Props> {
   };
 
   searchInput: ?Object = null;
+  addOnRef: { current: null | HTMLDivElement };
+
+  constructor(props: Props) {
+    super(props);
+
+    this.addOnRef = React.createRef();
+  }
 
   autoSelectOnFocus = () =>
     this.searchInput ? this.searchInput.inputElement.current.select() : false;
@@ -90,6 +100,23 @@ export class StakePoolsSearch extends Component<Props> {
     }
   };
 
+  generateDynamicStyles = () => {
+    const { current: addOnDom } = this.addOnRef;
+    if (!addOnDom) {
+      return null;
+    }
+
+    const addOnDomRect = addOnDom.getBoundingClientRect();
+    return {
+      inputField: {
+        paddingRight: `${addOnDomRect.width + INPUT_FIELD_PADDING_DELTA}px`,
+      },
+      clearButton: {
+        right: `${addOnDomRect.width + CLEAR_BUTTON_RIGHT_DELTA}px`,
+      },
+    };
+  };
+
   render() {
     const { intl } = this.context;
     const {
@@ -105,6 +132,7 @@ export class StakePoolsSearch extends Component<Props> {
       isGridRewardsView,
       filterPopOverProps,
     } = this.props;
+    const dynamicStyles = this.generateDynamicStyles();
 
     const gridButtonClasses = classnames([
       styles.gridView,
@@ -123,18 +151,6 @@ export class StakePoolsSearch extends Component<Props> {
 
     const isBigSearchComponent = isListView || isGridView || isGridRewardsView;
 
-    const searchInputClases = classnames([
-      styles.searchInput,
-      isBigSearchComponent ? styles.inputExtrasSearch : null,
-      IS_GRID_REWARDS_VIEW_AVAILABLE ? styles.withGridRewardsView : null,
-    ]);
-
-    const clearSearchClasses = classnames([
-      styles.inputExtras,
-      isBigSearchComponent ? styles.inputExtrasSearch : null,
-      IS_GRID_REWARDS_VIEW_AVAILABLE ? styles.withGridRewardsView : null,
-    ]);
-
     return (
       <div className={styles.component}>
         <div className={styles.container}>
@@ -142,7 +158,7 @@ export class StakePoolsSearch extends Component<Props> {
           <Input
             autoFocus
             label={label || null}
-            className={searchInputClases}
+            className={styles.searchInput}
             onChange={onSearch}
             ref={(input) => {
               this.searchInput = input;
@@ -154,9 +170,13 @@ export class StakePoolsSearch extends Component<Props> {
             value={search}
             maxLength={150}
             onFocus={this.autoSelectOnFocus}
+            style={dynamicStyles ? dynamicStyles.inputField : null}
           />
           {this.hasSearchClearButton && (
-            <div className={clearSearchClasses}>
+            <div
+              className={styles.inputExtras}
+              style={dynamicStyles ? dynamicStyles.clearButton : null}
+            >
               <PopOver content={intl.formatMessage(messages.clearTooltip)}>
                 <button
                   onClick={this.handleClearSearch}
@@ -171,7 +191,7 @@ export class StakePoolsSearch extends Component<Props> {
             </div>
           )}
           {isBigSearchComponent && (
-            <div className={styles.viewButtons}>
+            <div className={styles.viewButtons} ref={this.addOnRef}>
               <span className={styles.separator}>|</span>
               <PopOver content={intl.formatMessage(messages.gridIconTooltip)}>
                 <button className={gridButtonClasses} onClick={onGridView}>
diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss
index 3bdbf3d975..f8756b1a6c 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss
@@ -30,16 +30,6 @@
     height: 50px;
     padding: 0 68px 0 55px;
   }
-
-  &.inputExtrasSearch {
-    input {
-      padding-right: 265px;
-    }
-
-    &.withGridRewardsView input {
-      padding-right: 300px;
-    }
-  }
 }
 
 .inputExtras {
@@ -48,15 +38,6 @@
   height: 48px;
   line-height: 48px;
   position: absolute;
-  right: 20px;
-
-  &.inputExtrasSearch {
-    right: 217px;
-
-    &.withGridRewardsView {
-      right: 252px;
-    }
-  }
 }
 
 .clearSearchButton {
diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
index 8a8d93f969..6f77af07a5 100755
--- a/source/renderer/app/i18n/locales/ja-JP.json
+++ b/source/renderer/app/i18n/locales/ja-JP.json
@@ -473,10 +473,10 @@
   "staking.rewards.title": "獲得した委任報酬",
   "staking.stakePools.delegatingListTitle": "現在委任しているステークプール",
   "staking.stakePools.filter.apply": "適用する",
-  "staking.stakePools.filter.poolsWithoutOffChainData": "!!!Pools without off-chain data",
-  "staking.stakePools.filter.privatePools": "!!!Private pools",
+  "staking.stakePools.filter.poolsWithoutOffChainData": "オフチェーンデータのないプール",
+  "staking.stakePools.filter.privatePools": "プライベートプール",
   "staking.stakePools.filter.resetFilter": "フィルターをリセットする",
-  "staking.stakePools.filter.retiringPools": "!!!Retiring pools",
+  "staking.stakePools.filter.retiringPools": "終了予定のプール",
   "staking.stakePools.learnMore": "もっと知る",
   "staking.stakePools.listTitle": "ステークプール",
   "staking.stakePools.listTitleLoading": "ステークプールをロード中",
@@ -522,7 +522,7 @@
   "staking.stakePools.tooltip.costPerEpochTooltip": "各エポックで得られた報酬から差し引かれるステークプールの固定運営費",
   "staking.stakePools.tooltip.delegateButton": "このプールに委任する",
   "staking.stakePools.tooltip.experimentalTooltipLabel": "実験的機能データは不正確な場合があります",
-  "staking.stakePools.tooltip.noData": "!!!No data",
+  "staking.stakePools.tooltip.noData": "データなし",
   "staking.stakePools.tooltip.pledge": "出資：",
   "staking.stakePools.tooltip.pledgeTooltip": "プールオペレーターが自分のプールに投資するステーク量で、出資額が多いプールは、より多くの報酬を自身と委任者にもたらすが、出資をしないプールは報酬を稼ぐことができず、ランクが低くなる",
   "staking.stakePools.tooltip.potentialRewards": "見込み報酬額：",

From c321bf74b718658fd86f306479ecf01b4e5603f3 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 23 Mar 2021 08:45:55 -0400
Subject: [PATCH 12/38] [DDW-435] Fix flow errors and update translations

---
 .../DelegationSetupWizardDialog.js            |  11 +-
 .../DelegationStepsChooseStakePoolDialog.js   |  21 ++
 .../DelegationSetupWizardDialogContainer.js   |   7 +
 .../app/i18n/locales/defaultMessages.json     | 210 ++++++++++--------
 .../staking/DelegationSteps.stories.js        |   3 +
 .../stories/staking/StakePools.stories.js     |   3 +
 .../staking/StakePoolsTable.stories.js        |   6 +
 7 files changed, 162 insertions(+), 99 deletions(-)

diff --git a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationSetupWizardDialog.js b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationSetupWizardDialog.js
index ec88cd5a3d..efa826dbd6 100644
--- a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationSetupWizardDialog.js
+++ b/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,
 };
 
 @observer
@@ -86,6 +89,9 @@ export default class DelegationSetupWizardDialog extends Component<Props> {
       error,
       getStakePoolById,
       hwDeviceStatus,
+      filterOptions,
+      onFilter,
+      populatedFilterOptions,
     } = this.props;
 
     const selectedWalletId = get(selectedWallet, 'id', null);
@@ -130,6 +136,9 @@ export default class DelegationSetupWizardDialog extends Component<Props> {
             onClose={onClose}
             onBack={onBack}
             onSelectPool={onSelectPool}
+            filterOptions={filterOptions}
+            onFilter={onFilter}
+            populatedFilterOptions={populatedFilterOptions}
           />
         );
         break;
diff --git a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
index 154ed3de91..68692890c5 100644
--- a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
+++ b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
@@ -22,6 +22,8 @@ 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 } from '../../../utils/staking';
 import StakePool from '../../../domains/StakePool';
 
 const messages = defineMessages({
@@ -132,6 +134,9 @@ type Props = {
   onClose: Function,
   onBack: Function,
   onSelectPool: Function,
+  filterOptions: StakePoolFilterOptionsType,
+  onFilter: Function,
+  populatedFilterOptions: StakePoolFilterOptionsType,
 };
 
 type State = {
@@ -181,6 +186,9 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
       selectedWallet,
       onClose,
       onBack,
+      filterOptions,
+      onFilter,
+      populatedFilterOptions,
     } = this.props;
     const { searchValue, selectedList, selectedPoolId } = this.state;
     const selectedWalletName = get(selectedWallet, 'name');
@@ -303,11 +311,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
@@ -389,6 +404,12 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
               onClearSearch={this.handleClearSearch}
               scrollableElementClassName="Dialog_content"
               disabledStakePoolId={activeStakePoolId}
+              filterPopOverProps={{
+                populatedFilterOptions,
+                onFilter,
+                isFilterDisabled,
+                numberOfFilterDimensionsApplied,
+              }}
             />
           </div>
 
diff --git a/source/renderer/app/containers/staking/dialogs/DelegationSetupWizardDialogContainer.js b/source/renderer/app/containers/staking/dialogs/DelegationSetupWizardDialogContainer.js
index 012bddf96d..a9efca5ea5 100644
--- a/source/renderer/app/containers/staking/dialogs/DelegationSetupWizardDialogContainer.js
+++ b/source/renderer/app/containers/staking/dialogs/DelegationSetupWizardDialogContainer.js
@@ -176,6 +176,7 @@ export default class DelegationSetupWizardDialogContainer extends Component<
       networkStatus,
       hardwareWallets,
     } = this.props.stores;
+    const { staking: stakingActions } = this.props.actions;
     const { futureEpoch } = networkStatus;
     const { currentTheme, currentLocale } = profile;
     const {
@@ -189,7 +190,10 @@ export default class DelegationSetupWizardDialogContainer extends Component<
       joinStakePoolRequest,
       getStakePoolById,
       isDelegationTransactionPending,
+      filterOptions,
+      populatedFilterOptions,
     } = staking;
+    const { filterStakePools } = stakingActions;
     const futureEpochStartTime = get(futureEpoch, 'epochStart', 0);
     const selectedPool = find(stakePools, (pool) => pool.id === selectedPoolId);
 
@@ -238,6 +242,9 @@ export default class DelegationSetupWizardDialogContainer extends Component<
           selectCoinsRequest.error
         }
         hwDeviceStatus={hwDeviceStatus}
+        filterOptions={filterOptions || {}}
+        populatedFilterOptions={populatedFilterOptions}
+        onFilter={filterStakePools.trigger}
       />
     );
   }
diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
index 08dba4602e..524e7aff8c 100644
--- a/source/renderer/app/i18n/locales/defaultMessages.json
+++ b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -3694,13 +3694,13 @@
         "description": "Title \"Choose a stake pool\" on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 35
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.title",
         "start": {
           "column": 9,
-          "line": 28
+          "line": 30
         }
       },
       {
@@ -3708,13 +3708,13 @@
         "description": "Description on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 39
+          "line": 41
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.description",
         "start": {
           "column": 15,
-          "line": 34
+          "line": 36
         }
       },
       {
@@ -3722,13 +3722,13 @@
         "description": "Select / Selected pool section label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 47
+          "line": 49
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.selectStakePoolLabel",
         "start": {
           "column": 24,
-          "line": 40
+          "line": 42
         }
       },
       {
@@ -3736,13 +3736,13 @@
         "description": "\"Selected Pools\" Selected pool label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 55
+          "line": 57
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.selectedStakePoolLabel",
         "start": {
           "column": 26,
-          "line": 48
+          "line": 50
         }
       },
       {
@@ -3750,13 +3750,13 @@
         "description": "\"Selected Pools\" Selected pool label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 63
+          "line": 65
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.selectedStakePoolLabelRetiring",
         "start": {
           "column": 34,
-          "line": 56
+          "line": 58
         }
       },
       {
@@ -3764,13 +3764,13 @@
         "description": "\"You are already delegating to stake pool\" label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 71
+          "line": 73
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolLabel",
         "start": {
           "column": 27,
-          "line": 64
+          "line": 66
         }
       },
       {
@@ -3778,13 +3778,13 @@
         "description": "\"You are already delegating to stake pool\" label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 79
+          "line": 81
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolNextLabel",
         "start": {
           "column": 31,
-          "line": 72
+          "line": 74
         }
       },
       {
@@ -3792,13 +3792,13 @@
         "description": "Recent \"Pool\" choice section label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 85
+          "line": 87
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.recentPoolsLabel",
         "start": {
           "column": 20,
-          "line": 80
+          "line": 82
         }
       },
       {
@@ -3806,13 +3806,13 @@
         "description": "Search \"Pools\" input label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 92
+          "line": 94
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.label",
         "start": {
           "column": 20,
-          "line": 86
+          "line": 88
         }
       },
       {
@@ -3820,13 +3820,13 @@
         "description": "Search \"Pools\" input placeholder on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 99
+          "line": 101
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.placeholder",
         "start": {
           "column": 26,
-          "line": 93
+          "line": 95
         }
       },
       {
@@ -3834,13 +3834,13 @@
         "description": "Label for continue button on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 106
+          "line": 108
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.continueButtonLabel",
         "start": {
           "column": 23,
-          "line": 100
+          "line": 102
         }
       },
       {
@@ -3848,13 +3848,13 @@
         "description": "Step indicator label on the delegation setup \"choose wallet\" step dialog.",
         "end": {
           "column": 3,
-          "line": 113
+          "line": 115
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.stepIndicatorLabel",
         "start": {
           "column": 22,
-          "line": 107
+          "line": 109
         }
       },
       {
@@ -3862,13 +3862,13 @@
         "description": "Retiring Pool Footer label on the delegation setup \"choose wallet\" step dialog.",
         "end": {
           "column": 3,
-          "line": 121
+          "line": 123
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.retiringPoolFooter",
         "start": {
           "column": 22,
-          "line": 114
+          "line": 116
         }
       }
     ],
@@ -5572,13 +5572,13 @@
         "description": "Reset Filter button label.",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 25
         },
-        "file": "source/renderer/app/components/staking/stake-pools/FilterDialog.js",
+        "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
         "id": "staking.stakePools.filter.resetFilter",
         "start": {
           "column": 15,
-          "line": 18
+          "line": 21
         }
       },
       {
@@ -5586,13 +5586,13 @@
         "description": "Retiring pools filter type.",
         "end": {
           "column": 3,
-          "line": 27
+          "line": 30
         },
-        "file": "source/renderer/app/components/staking/stake-pools/FilterDialog.js",
+        "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
         "id": "staking.stakePools.filter.retiringPools",
         "start": {
           "column": 17,
-          "line": 23
+          "line": 26
         }
       },
       {
@@ -5600,13 +5600,13 @@
         "description": "Private pools filter type.",
         "end": {
           "column": 3,
-          "line": 32
+          "line": 35
         },
-        "file": "source/renderer/app/components/staking/stake-pools/FilterDialog.js",
+        "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
         "id": "staking.stakePools.filter.privatePools",
         "start": {
           "column": 16,
-          "line": 28
+          "line": 31
         }
       },
       {
@@ -5614,13 +5614,13 @@
         "description": "Pools without off-chain data filter type.",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 40
         },
-        "file": "source/renderer/app/components/staking/stake-pools/FilterDialog.js",
+        "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
         "id": "staking.stakePools.filter.poolsWithoutOffChainData",
         "start": {
           "column": 28,
-          "line": 33
+          "line": 36
         }
       },
       {
@@ -5628,17 +5628,17 @@
         "description": "Filter button label.",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 45
         },
-        "file": "source/renderer/app/components/staking/stake-pools/FilterDialog.js",
+        "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
         "id": "staking.stakePools.filter.apply",
         "start": {
           "column": 9,
-          "line": 38
+          "line": 41
         }
       }
     ],
-    "path": "source/renderer/app/components/staking/stake-pools/FilterDialog.json"
+    "path": "source/renderer/app/components/staking/stake-pools/FilterPopOver.json"
   },
   {
     "descriptors": [
@@ -5965,13 +5965,13 @@
         "description": "\"Delegating List Title\" for the Stake Pools search.",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 24
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js",
         "id": "staking.stakePools.search.searchInputPlaceholder",
         "start": {
           "column": 26,
-          "line": 21
+          "line": 20
         }
       },
       {
@@ -5979,13 +5979,13 @@
         "description": "\"delegatingListTitle\" for the Stake Pools search.",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 29
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js",
         "id": "staking.stakePools.search.delegatingListTitle",
         "start": {
           "column": 23,
-          "line": 26
+          "line": 25
         }
       },
       {
@@ -5993,13 +5993,13 @@
         "description": "\"listTitle\" for the Stake Pools search.",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 34
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js",
         "id": "staking.stakePools.search.listTitle",
         "start": {
           "column": 13,
-          "line": 31
+          "line": 30
         }
       },
       {
@@ -6007,13 +6007,13 @@
         "description": "\"gridIconTooltip\" for the Stake Pools search.",
         "end": {
           "column": 3,
-          "line": 40
+          "line": 39
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js",
         "id": "staking.stakePools.search.gridIconTooltip",
         "start": {
           "column": 19,
-          "line": 36
+          "line": 35
         }
       },
       {
@@ -6021,13 +6021,13 @@
         "description": "\"gridRewardsIconTooltip\" for the Stake Pools search.",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 44
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js",
         "id": "staking.stakePools.search.gridRewardsIconTooltip",
         "start": {
           "column": 26,
-          "line": 41
+          "line": 40
         }
       },
       {
@@ -6035,13 +6035,13 @@
         "description": "\"listIconTooltip\" for the Stake Pools search.",
         "end": {
           "column": 3,
-          "line": 50
+          "line": 49
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js",
         "id": "staking.stakePools.search.listIconTooltip",
         "start": {
           "column": 19,
-          "line": 46
+          "line": 45
         }
       },
       {
@@ -6049,13 +6049,13 @@
         "description": "\"clearTooltip\" for the Stake Pools search.",
         "end": {
           "column": 3,
-          "line": 55
+          "line": 54
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js",
         "id": "staking.stakePools.search.clearTooltip",
         "start": {
           "column": 16,
-          "line": 51
+          "line": 50
         }
       }
     ],
@@ -6334,18 +6334,32 @@
   },
   {
     "descriptors": [
+      {
+        "defaultMessage": "!!!No data",
+        "description": "\"Name\" placeholder when it is empty.",
+        "end": {
+          "column": 3,
+          "line": 57
+        },
+        "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
+        "id": "staking.stakePools.tooltip.noData",
+        "start": {
+          "column": 10,
+          "line": 53
+        }
+      },
       {
         "defaultMessage": "!!!Rank:",
         "description": "\"Rank\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 62
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.ranking",
         "start": {
           "column": 11,
-          "line": 53
+          "line": 58
         }
       },
       {
@@ -6353,13 +6367,13 @@
         "description": "\"Rank\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 63
+          "line": 68
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.rankingTooltip",
         "start": {
           "column": 18,
-          "line": 58
+          "line": 63
         }
       },
       {
@@ -6367,13 +6381,13 @@
         "description": "\"Live stake\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 68
+          "line": 73
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.relativeStake",
         "start": {
           "column": 17,
-          "line": 64
+          "line": 69
         }
       },
       {
@@ -6381,13 +6395,13 @@
         "description": "\"Live stake\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 74
+          "line": 79
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.relativeStakeTooltip",
         "start": {
           "column": 24,
-          "line": 69
+          "line": 74
         }
       },
       {
@@ -6395,13 +6409,13 @@
         "description": "\"Pool margin\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 79
+          "line": 84
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.profitMargin",
         "start": {
           "column": 16,
-          "line": 75
+          "line": 80
         }
       },
       {
@@ -6409,13 +6423,13 @@
         "description": "\"Pool margin\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 85
+          "line": 90
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.profitMarginTooltip",
         "start": {
           "column": 23,
-          "line": 80
+          "line": 85
         }
       },
       {
@@ -6423,13 +6437,13 @@
         "description": "\"Cost per epoch\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 90
+          "line": 95
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.costPerEpoch",
         "start": {
           "column": 16,
-          "line": 86
+          "line": 91
         }
       },
       {
@@ -6437,13 +6451,13 @@
         "description": "\"Cost per epoch\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 96
+          "line": 101
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.costPerEpochTooltip",
         "start": {
           "column": 23,
-          "line": 91
+          "line": 96
         }
       },
       {
@@ -6451,13 +6465,13 @@
         "description": "\"Blocks\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 101
+          "line": 106
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.producedBlocks",
         "start": {
           "column": 18,
-          "line": 97
+          "line": 102
         }
       },
       {
@@ -6465,13 +6479,13 @@
         "description": "\"Blocks\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 107
+          "line": 112
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.producedBlocksTooltip",
         "start": {
           "column": 25,
-          "line": 102
+          "line": 107
         }
       },
       {
@@ -6479,13 +6493,13 @@
         "description": "\"Rewards\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 112
+          "line": 117
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.potentialRewards",
         "start": {
           "column": 20,
-          "line": 108
+          "line": 113
         }
       },
       {
@@ -6493,13 +6507,13 @@
         "description": "\"Rewards\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 118
+          "line": 123
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.potentialRewardsTooltip",
         "start": {
           "column": 27,
-          "line": 113
+          "line": 118
         }
       },
       {
@@ -6507,13 +6521,13 @@
         "description": "\"Retirement\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 123
+          "line": 128
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.retirement",
         "start": {
           "column": 14,
-          "line": 119
+          "line": 124
         }
       },
       {
@@ -6521,13 +6535,13 @@
         "description": "\"Saturation\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 128
+          "line": 133
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.saturation",
         "start": {
           "column": 14,
-          "line": 124
+          "line": 129
         }
       },
       {
@@ -6535,13 +6549,13 @@
         "description": "\"Saturation\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 134
+          "line": 139
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.saturationTooltip",
         "start": {
           "column": 21,
-          "line": 129
+          "line": 134
         }
       },
       {
@@ -6549,13 +6563,13 @@
         "description": "\"Pledge\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 139
+          "line": 144
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.pledge",
         "start": {
           "column": 10,
-          "line": 135
+          "line": 140
         }
       },
       {
@@ -6563,13 +6577,13 @@
         "description": "\"Pledge\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 145
+          "line": 150
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.pledgeTooltip",
         "start": {
           "column": 17,
-          "line": 140
+          "line": 145
         }
       },
       {
@@ -6577,13 +6591,13 @@
         "description": "\"Delegate to this pool\" Button for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-          "line": 151
+          "line": 156
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.delegateButton",
         "start": {
           "column": 18,
-          "line": 146
+          "line": 151
         }
       },
       {
@@ -6591,13 +6605,13 @@
         "description": "Experimental tooltip label",
         "end": {
           "column": 3,
-          "line": 156
+          "line": 161
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.experimentalTooltipLabel",
         "start": {
           "column": 28,
-          "line": 152
+          "line": 157
         }
       },
       {
@@ -6605,13 +6619,13 @@
         "description": "copyId tooltip label",
         "end": {
           "column": 3,
-          "line": 161
+          "line": 166
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.copyIdTooltipLabel",
         "start": {
           "column": 22,
-          "line": 157
+          "line": 162
         }
       },
       {
@@ -6619,13 +6633,13 @@
         "description": "Data not available yet label",
         "end": {
           "column": 3,
-          "line": 166
+          "line": 171
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.noDataDashTooltip",
         "start": {
           "column": 26,
-          "line": 162
+          "line": 167
         }
       }
     ],
diff --git a/storybook/stories/staking/DelegationSteps.stories.js b/storybook/stories/staking/DelegationSteps.stories.js
index 225c73f3df..ed5ce75f81 100644
--- a/storybook/stories/staking/DelegationSteps.stories.js
+++ b/storybook/stories/staking/DelegationSteps.stories.js
@@ -169,6 +169,9 @@ export class StakingDelegationSteps extends Component<Props, State> {
         onSelectPool={this.onContinue}
         selectedPool={null}
         selectedWallet={WALLETS[0]}
+        filterOptions={{}}
+        onFilter={() => null}
+        populatedFilterOptions={{}}
       />,
       <DelegationStepsConfirmationDialog
         key="DelegationStepsConfirmationDialog"
diff --git a/storybook/stories/staking/StakePools.stories.js b/storybook/stories/staking/StakePools.stories.js
index 00a72e7531..30416ec6c4 100644
--- a/storybook/stories/staking/StakePools.stories.js
+++ b/storybook/stories/staking/StakePools.stories.js
@@ -93,5 +93,8 @@ export const StakePoolsStory = (props: Props) => (
     onSmashSettingsClick={action('onSmashSettingsClick')}
     smashServerUrl="https://smash.cardano-mainnet.iohk.io"
     maxDelegationFunds={maxDelegationFunds}
+    filterOptions={{}}
+    populatedFilterOptions={{}}
+    onFilter={() => null}
   />
 );
diff --git a/storybook/stories/staking/StakePoolsTable.stories.js b/storybook/stories/staking/StakePoolsTable.stories.js
index 9304fccbad..330e1854f1 100644
--- a/storybook/stories/staking/StakePoolsTable.stories.js
+++ b/storybook/stories/staking/StakePoolsTable.stories.js
@@ -36,6 +36,12 @@ export const StakePoolsTableStory = (props: Props) => (
         isListView
         isGridView={false}
         isClearTooltipOpeningDownward
+        filterPopOverProps={{
+          populatedFilterOptions: {},
+          onFilter: () => null,
+          isFilterDisabled: false,
+          numberOfFilterDimensionsApplied: 0,
+        }}
       />
       <h2
         style={{

From ac228d60c53b3605162f9924a49591f072eae821 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 23 Mar 2021 09:31:06 -0400
Subject: [PATCH 13/38] [DDW-435] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 77930a12de..5d72982e14 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ Changelog
 
 ### Features
 
+- This PR implemented stake pools filter pop over ([PR 2461](https://github.com/input-output-hk/daedalus/pull/2461))
 - This PR improves the Transactions history and Rewards CSV 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))
 

From 17f76698e62884bd36c8b6c3e1e3caf62b66f531 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Thu, 25 Mar 2021 22:12:52 -0400
Subject: [PATCH 14/38] [DDW-435] Update stakepool filter props

---
 .../staking/stake-pools/FilterPopOver.js      | 68 +++++++++----------
 source/renderer/app/i18n/locales/en-US.json   |  6 +-
 source/renderer/app/i18n/locales/ja-JP.json   |  6 +-
 source/renderer/app/stores/StakingStore.js    | 12 ++--
 source/renderer/app/utils/staking.js          | 30 ++++----
 5 files changed, 59 insertions(+), 63 deletions(-)

diff --git a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
index 245518ba10..67675ab594 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
+++ b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
@@ -23,20 +23,20 @@ const messages = defineMessages({
     defaultMessage: '!!!Reset Filter',
     description: 'Reset Filter button label.',
   },
-  retiringPools: {
-    id: 'staking.stakePools.filter.retiringPools',
-    defaultMessage: '!!!Retiring pools',
-    description: 'Retiring pools filter type.',
+  hideRetiringPools: {
+    id: 'staking.stakePools.filter.hideRetiringPools',
+    defaultMessage: '!!!Hide retiring pools',
+    description: 'Hide retiring pools filter type.',
   },
-  privatePools: {
-    id: 'staking.stakePools.filter.privatePools',
-    defaultMessage: '!!!Private pools',
-    description: 'Private pools filter type.',
+  hidePrivatePools: {
+    id: 'staking.stakePools.filter.hidePrivatePools',
+    defaultMessage: '!!!Hide private pools',
+    description: 'Hide private pools filter type.',
   },
-  poolsWithoutOffChainData: {
-    id: 'staking.stakePools.filter.poolsWithoutOffChainData',
-    defaultMessage: '!!!Pools without off-chain data',
-    description: 'Pools without off-chain data filter type.',
+  hidePoolsWithoutOffChainData: {
+    id: 'staking.stakePools.filter.hidePoolsWithoutOffChainData',
+    defaultMessage: '!!!Hide pools without off-chain data',
+    description: 'Hide pools without off-chain data filter type.',
   },
   apply: {
     id: 'staking.stakePools.filter.apply',
@@ -66,9 +66,9 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
 
     const {
       populatedFilterOptions: {
-        retiringPoolsChecked,
-        privatePoolsChecked,
-        poolsWithoutOffChainDataChecked,
+        retiringPoolsHidden,
+        privatePoolsHidden,
+        poolsWithoutOffChainDataHidden,
       },
     } = props;
 
@@ -76,20 +76,20 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
 
     this.form = new ReactToolboxMobxForm({
       fields: {
-        retiringPoolsChecked: {
+        retiringPoolsHidden: {
           type: 'checkbox',
-          label: intl.formatMessage(messages.retiringPools),
-          value: retiringPoolsChecked,
+          label: intl.formatMessage(messages.hideRetiringPools),
+          value: retiringPoolsHidden,
         },
-        privatePoolsChecked: {
+        privatePoolsHidden: {
           type: 'checkbox',
-          label: intl.formatMessage(messages.privatePools),
-          value: privatePoolsChecked,
+          label: intl.formatMessage(messages.hidePrivatePools),
+          value: privatePoolsHidden,
         },
-        poolsWithoutOffChainDataChecked: {
+        poolsWithoutOffChainDataHidden: {
           type: 'checkbox',
-          label: intl.formatMessage(messages.poolsWithoutOffChainData),
-          value: poolsWithoutOffChainDataChecked,
+          label: intl.formatMessage(messages.hidePoolsWithoutOffChainData),
+          value: poolsWithoutOffChainDataHidden,
         },
       },
     });
@@ -97,16 +97,16 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
 
   fillFormFields = (filterOptions: StakePoolFilterOptionsType) => {
     const {
-      retiringPoolsChecked,
-      privatePoolsChecked,
-      poolsWithoutOffChainDataChecked,
+      retiringPoolsHidden,
+      privatePoolsHidden,
+      poolsWithoutOffChainDataHidden,
     } = filterOptions;
 
-    this.form.select('retiringPoolsChecked').set(retiringPoolsChecked);
-    this.form.select('privatePoolsChecked').set(privatePoolsChecked);
+    this.form.select('retiringPoolsHidden').set(retiringPoolsHidden);
+    this.form.select('privatePoolsHidden').set(privatePoolsHidden);
     this.form
-      .select('poolsWithoutOffChainDataChecked')
-      .set(poolsWithoutOffChainDataChecked);
+      .select('poolsWithoutOffChainDataHidden')
+      .set(poolsWithoutOffChainDataHidden);
   };
 
   resetForm = () => this.fillFormFields(emptyStakePoolFilterOptions);
@@ -135,10 +135,10 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
 
   renderFields = () => {
     const { form } = this;
-    const retiringPoolsCheckboxField = form.$('retiringPoolsChecked');
-    const privatePoolsCheckboxField = form.$('privatePoolsChecked');
+    const retiringPoolsCheckboxField = form.$('retiringPoolsHidden');
+    const privatePoolsCheckboxField = form.$('privatePoolsHidden');
     const poolsWithoutOffChainDataCheckboxField = form.$(
-      'poolsWithoutOffChainDataChecked'
+      'poolsWithoutOffChainDataHidden'
     );
 
     return (
diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
index 692617dda2..91ace47458 100755
--- a/source/renderer/app/i18n/locales/en-US.json
+++ b/source/renderer/app/i18n/locales/en-US.json
@@ -473,10 +473,10 @@
   "staking.rewards.title": "Earned delegation rewards",
   "staking.stakePools.delegatingListTitle": "Staking pools you are delegating to",
   "staking.stakePools.filter.apply": "Apply",
-  "staking.stakePools.filter.poolsWithoutOffChainData": "Pools without off-chain data",
-  "staking.stakePools.filter.privatePools": "Private pools",
+  "staking.stakePools.filter.hidePoolsWithoutOffChainData": "Hide pools without off-chain data",
+  "staking.stakePools.filter.hidePrivatePools": "Hide private pools",
+  "staking.stakePools.filter.hideRetiringPools": "Hide retiring pools",
   "staking.stakePools.filter.resetFilter": "Reset Filter",
-  "staking.stakePools.filter.retiringPools": "Retiring pools",
   "staking.stakePools.learnMore": "Learn more",
   "staking.stakePools.listTitle": "Stake pools",
   "staking.stakePools.listTitleLoading": "Loading stake pools",
diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
index fdf4e1dc4b..450213187c 100755
--- a/source/renderer/app/i18n/locales/ja-JP.json
+++ b/source/renderer/app/i18n/locales/ja-JP.json
@@ -473,10 +473,10 @@
   "staking.rewards.title": "獲得した委任報酬",
   "staking.stakePools.delegatingListTitle": "現在委任しているステークプール",
   "staking.stakePools.filter.apply": "適用する",
-  "staking.stakePools.filter.poolsWithoutOffChainData": "オフチェーンデータのないプール",
-  "staking.stakePools.filter.privatePools": "プライベートプール",
+  "staking.stakePools.filter.hidePoolsWithoutOffChainData": "オフチェーンデータのないプール",
+  "staking.stakePools.filter.hidePrivatePools": "プライベートプール",
+  "staking.stakePools.filter.hideRetiringPools": "終了予定のプール",
   "staking.stakePools.filter.resetFilter": "フィルターをリセットする",
-  "staking.stakePools.filter.retiringPools": "終了予定のプール",
   "staking.stakePools.learnMore": "もっと知る",
   "staking.stakePools.listTitle": "ステークプール",
   "staking.stakePools.listTitleLoading": "ステークプールをロード中",
diff --git a/source/renderer/app/stores/StakingStore.js b/source/renderer/app/stores/StakingStore.js
index c2925a6b70..546fa1bc69 100644
--- a/source/renderer/app/stores/StakingStore.js
+++ b/source/renderer/app/stores/StakingStore.js
@@ -42,15 +42,15 @@ import type { RedeemItnRewardsStep } from '../types/stakingTypes';
 import type { CsvFileContent } from '../../../common/types/csv-request.types';
 
 export type StakePoolFilterOptionsType = {
-  retiringPoolsChecked?: boolean,
-  privatePoolsChecked?: boolean,
-  poolsWithoutOffChainDataChecked?: boolean,
+  retiringPoolsHidden?: boolean,
+  privatePoolsHidden?: boolean,
+  poolsWithoutOffChainDataHidden?: boolean,
 };
 
 export const emptyStakePoolFilterOptions = {
-  retiringPoolsChecked: true,
-  privatePoolsChecked: true,
-  poolsWithoutOffChainDataChecked: true,
+  retiringPoolsHidden: true,
+  privatePoolsHidden: true,
+  poolsWithoutOffChainDataHidden: true,
 };
 
 export default class StakingStore extends Store {
diff --git a/source/renderer/app/utils/staking.js b/source/renderer/app/utils/staking.js
index b64635631c..5f07dd9c30 100644
--- a/source/renderer/app/utils/staking.js
+++ b/source/renderer/app/utils/staking.js
@@ -57,19 +57,19 @@ export const getNumberOfFilterDimensionsApplied = (
   filterOptions: ?StakePoolFilterOptionsType
 ) => {
   const {
-    retiringPoolsChecked = true,
-    privatePoolsChecked = true,
-    poolsWithoutOffChainDataChecked = true,
+    retiringPoolsHidden = true,
+    privatePoolsHidden = true,
+    poolsWithoutOffChainDataHidden = true,
   } = filterOptions || {};
   let result = 0;
 
-  if (!retiringPoolsChecked) {
+  if (retiringPoolsHidden) {
     result++;
   }
-  if (!privatePoolsChecked) {
+  if (privatePoolsHidden) {
     result++;
   }
-  if (!poolsWithoutOffChainDataChecked) {
+  if (poolsWithoutOffChainDataHidden) {
     result++;
   }
 
@@ -80,20 +80,16 @@ export const isStakePoolInFilterRange = (
   filterOptions: ?StakePoolFilterOptionsType,
   stakePool: StakePool
 ) => {
-  if (!filterOptions) {
-    return true;
-  }
-
   const {
-    retiringPoolsChecked,
-    privatePoolsChecked,
-    poolsWithoutOffChainDataChecked,
-  } = filterOptions;
+    retiringPoolsHidden = true,
+    privatePoolsHidden = true,
+    poolsWithoutOffChainDataHidden = true,
+  } = filterOptions || {};
 
   if (
-    (stakePool.isRetiring && !retiringPoolsChecked) ||
-    (stakePool.isPrivate && !privatePoolsChecked) ||
-    (stakePool.hasNoOffChainData && !poolsWithoutOffChainDataChecked)
+    (stakePool.isRetiring && retiringPoolsHidden) ||
+    (stakePool.isPrivate && privatePoolsHidden) ||
+    (stakePool.hasNoOffChainData && poolsWithoutOffChainDataHidden)
   ) {
     return false;
   }

From e519c8bd9db76c7309851dc168dfbccf83692cb5 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Fri, 26 Mar 2021 05:15:15 -0400
Subject: [PATCH 15/38] [DDW-435] Update stakepool filter translations for
 private and retiring pools

---
 .../DelegationStepsChooseStakePoolDialog.js   |  50 +++++++-
 .../DelegationStepsChooseStakePoolDialog.scss |  12 +-
 .../app/i18n/locales/defaultMessages.json     | 110 +++++++++++-------
 source/renderer/app/i18n/locales/en-US.json   |   4 +-
 source/renderer/app/i18n/locales/ja-JP.json   |   4 +-
 5 files changed, 131 insertions(+), 49 deletions(-)

diff --git a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
index 68692890c5..1406ed9e72 100644
--- a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
+++ b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
@@ -26,6 +26,7 @@ import type { StakePoolFilterOptionsType } from '../../../stores/StakingStore';
 import { getNumberOfFilterDimensionsApplied } from '../../../utils/staking';
 import StakePool from '../../../domains/StakePool';
 
+const HIGH_PROFIT_MARGIN_BASE = 50;
 const messages = defineMessages({
   title: {
     id: 'staking.delegationSetup.chooseStakePool.step.dialog.title',
@@ -117,10 +118,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 = {
@@ -229,12 +245,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 &&
+      selectedPool.profitMargin > HIGH_PROFIT_MARGIN_BASE ? (
+        <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,
diff --git a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.scss b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.scss
index 250d47a64a..f535f31bf8 100644
--- a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.scss
+++ b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.scss
@@ -152,12 +152,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;
+      }
+    }
   }
 }
diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
index d326efb34f..c3f9b4ec46 100644
--- a/source/renderer/app/i18n/locales/defaultMessages.json
+++ b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -3708,13 +3708,13 @@
         "description": "Title \"Choose a stake pool\" on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 36
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.title",
         "start": {
           "column": 9,
-          "line": 30
+          "line": 31
         }
       },
       {
@@ -3722,13 +3722,13 @@
         "description": "Description on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 42
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.description",
         "start": {
           "column": 15,
-          "line": 36
+          "line": 37
         }
       },
       {
@@ -3736,13 +3736,13 @@
         "description": "Select / Selected pool section label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 50
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.selectStakePoolLabel",
         "start": {
           "column": 24,
-          "line": 42
+          "line": 43
         }
       },
       {
@@ -3750,13 +3750,13 @@
         "description": "\"Selected Pools\" Selected pool label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 58
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.selectedStakePoolLabel",
         "start": {
           "column": 26,
-          "line": 50
+          "line": 51
         }
       },
       {
@@ -3764,13 +3764,13 @@
         "description": "\"Selected Pools\" Selected pool label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 66
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.selectedStakePoolLabelRetiring",
         "start": {
           "column": 34,
-          "line": 58
+          "line": 59
         }
       },
       {
@@ -3778,13 +3778,13 @@
         "description": "\"You are already delegating to stake pool\" label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 73
+          "line": 74
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolLabel",
         "start": {
           "column": 27,
-          "line": 66
+          "line": 67
         }
       },
       {
@@ -3792,13 +3792,13 @@
         "description": "\"You are already delegating to stake pool\" label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 81
+          "line": 82
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolNextLabel",
         "start": {
           "column": 31,
-          "line": 74
+          "line": 75
         }
       },
       {
@@ -3806,13 +3806,13 @@
         "description": "Recent \"Pool\" choice section label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 87
+          "line": 88
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.recentPoolsLabel",
         "start": {
           "column": 20,
-          "line": 82
+          "line": 83
         }
       },
       {
@@ -3820,13 +3820,13 @@
         "description": "Search \"Pools\" input label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 94
+          "line": 95
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.label",
         "start": {
           "column": 20,
-          "line": 88
+          "line": 89
         }
       },
       {
@@ -3834,13 +3834,13 @@
         "description": "Search \"Pools\" input placeholder on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 101
+          "line": 102
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.placeholder",
         "start": {
           "column": 26,
-          "line": 95
+          "line": 96
         }
       },
       {
@@ -3848,13 +3848,13 @@
         "description": "Label for continue button on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 108
+          "line": 109
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.continueButtonLabel",
         "start": {
           "column": 23,
-          "line": 102
+          "line": 103
         }
       },
       {
@@ -3862,27 +3862,55 @@
         "description": "Step indicator label on the delegation setup \"choose wallet\" step dialog.",
         "end": {
           "column": 3,
-          "line": 115
+          "line": 116
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.stepIndicatorLabel",
         "start": {
           "column": 22,
-          "line": 109
+          "line": 110
         }
       },
       {
-        "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.",
+        "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 \"choose wallet\" step dialog.",
         "end": {
           "column": 3,
-          "line": 123
+          "line": 124
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.retiringPoolFooter",
         "start": {
           "column": 22,
-          "line": 116
+          "line": 117
+        }
+      },
+      {
+        "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.",
+        "end": {
+          "column": 3,
+          "line": 131
+        },
+        "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
+        "id": "staking.delegationSetup.chooseStakePool.step.dialog.privatePoolFooter",
+        "start": {
+          "column": 21,
+          "line": 125
+        }
+      },
+      {
+        "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.",
+        "end": {
+          "column": 3,
+          "line": 139
+        },
+        "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
+        "id": "staking.delegationSetup.chooseStakePool.step.dialog.highProfitMarginPoolFooter",
+        "start": {
+          "column": 30,
+          "line": 132
         }
       }
     ],
@@ -5596,44 +5624,44 @@
         }
       },
       {
-        "defaultMessage": "!!!Retiring pools",
-        "description": "Retiring pools filter type.",
+        "defaultMessage": "!!!Hide retiring pools",
+        "description": "Hide retiring pools filter type.",
         "end": {
           "column": 3,
           "line": 30
         },
         "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
-        "id": "staking.stakePools.filter.retiringPools",
+        "id": "staking.stakePools.filter.hideRetiringPools",
         "start": {
-          "column": 17,
+          "column": 21,
           "line": 26
         }
       },
       {
-        "defaultMessage": "!!!Private pools",
-        "description": "Private pools filter type.",
+        "defaultMessage": "!!!Hide private pools",
+        "description": "Hide private pools filter type.",
         "end": {
           "column": 3,
           "line": 35
         },
         "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
-        "id": "staking.stakePools.filter.privatePools",
+        "id": "staking.stakePools.filter.hidePrivatePools",
         "start": {
-          "column": 16,
+          "column": 20,
           "line": 31
         }
       },
       {
-        "defaultMessage": "!!!Pools without off-chain data",
-        "description": "Pools without off-chain data filter type.",
+        "defaultMessage": "!!!Hide pools without off-chain data",
+        "description": "Hide pools without off-chain data filter type.",
         "end": {
           "column": 3,
           "line": 40
         },
         "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
-        "id": "staking.stakePools.filter.poolsWithoutOffChainData",
+        "id": "staking.stakePools.filter.hidePoolsWithoutOffChainData",
         "start": {
-          "column": 28,
+          "column": 32,
           "line": 36
         }
       },
@@ -16847,13 +16875,13 @@
         "description": "\"Address\" word in the Address PDF export",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 22
         },
         "file": "source/renderer/app/containers/wallet/WalletReceivePage.js",
         "id": "wallet.receive.pdf.filenamePrefix",
         "start": {
           "column": 11,
-          "line": 17
+          "line": 18
         }
       }
     ],
diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
index 91ace47458..2e3bb51572 100755
--- a/source/renderer/app/i18n/locales/en-US.json
+++ b/source/renderer/app/i18n/locales/en-US.json
@@ -350,8 +350,10 @@
   "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.delegatedStakePoolNextLabel": "You are already pending delegation <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.highProfitMarginPoolFooter": "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.",
+  "staking.delegationSetup.chooseStakePool.step.dialog.privatePoolFooter": "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.",
   "staking.delegationSetup.chooseStakePool.step.dialog.recentPoolsLabel": "Choose one of your recent stake pool choices:",
-  "staking.delegationSetup.chooseStakePool.step.dialog.retiringPoolFooter": "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.",
+  "staking.delegationSetup.chooseStakePool.step.dialog.retiringPoolFooter": "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.",
   "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.label": "Or select a stake pool from the list of all available stake pools:",
   "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.placeholder": "Search stake pools",
   "staking.delegationSetup.chooseStakePool.step.dialog.selectStakePoolLabel": "Select a stake pool to receive your delegated funds in the <span>{selectedWalletName}</span> wallet.",
diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
index 450213187c..3b970eff39 100755
--- a/source/renderer/app/i18n/locales/ja-JP.json
+++ b/source/renderer/app/i18n/locales/ja-JP.json
@@ -350,8 +350,10 @@
   "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolLabel": "<span>{selectedWalletName}</span>ウォレットは既に<span>「{selectedPoolTicker}」</span>ステークプールに委任されています。<span>ステークの委任先を変更する場合は、異なるプールを選択してください。</span>",
   "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolNextLabel": "<span>{selectedWalletName}</span>ウォレットは既に<span>「{selectedPoolTicker}」</span>ステークプールへの委任処理中です。<span>ステークの委任先を変更する場合は、異なるプールを選択してください。</span>",
   "staking.delegationSetup.chooseStakePool.step.dialog.description": "現在選択されているステークプール：",
+  "staking.delegationSetup.chooseStakePool.step.dialog.highProfitMarginPoolFooter": "選択されたステークプールは、55.4%の高いマージンが設定されています。別のプールに委任するともっと高い報酬を得ることができます。 高マージンのプールへの委任は、慈善を目的としたプールの場合や、プールを別の目的で支援している場合、問題はありません。",
+  "staking.delegationSetup.chooseStakePool.step.dialog.privatePoolFooter": "選択されたステークプールは、マージン100%のプライベートプールです。このプールに委任しても、すべての報酬はステークプールのものとなり、委任報酬を得ることはできません。",
   "staking.delegationSetup.chooseStakePool.step.dialog.recentPoolsLabel": "最近選択したステークプールから選択する：",
-  "staking.delegationSetup.chooseStakePool.step.dialog.retiringPoolFooter": "選択されたステークプールはまもなく終了します。このまま委任プロセスを続けた場合、このプールの終了に伴い報酬が停止することを避けるためには、プール終了日までに完全な1エポック以上が残っているうちに別のプールにステークを委任し直す必要があります。",
+  "staking.delegationSetup.chooseStakePool.step.dialog.retiringPoolFooter": "選択されたステークプールはまもなく終了します。このプールに委任した場合、報酬を失わないようにするためには、プールの終了日より丸1エポック以上前にウォレットを別のプールに委任し直す必要があります。",
   "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.label": "または利用可能な全ステークプールのリストから選択する：",
   "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.placeholder": "ステークプールを検索する",
   "staking.delegationSetup.chooseStakePool.step.dialog.selectStakePoolLabel": "<span>{selectedWalletName}</span>ウォレットの資金を委任するステークプールを選んでください。",

From 7ce66ca25eb3770bafb4aa14d3a52e60dd6991b6 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Fri, 26 Mar 2021 05:25:36 -0400
Subject: [PATCH 16/38] [DDW-435] Update japanese translations

---
 source/renderer/app/i18n/locales/ja-JP.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
index 3b970eff39..4fabe17b75 100755
--- a/source/renderer/app/i18n/locales/ja-JP.json
+++ b/source/renderer/app/i18n/locales/ja-JP.json
@@ -475,9 +475,9 @@
   "staking.rewards.title": "獲得した委任報酬",
   "staking.stakePools.delegatingListTitle": "現在委任しているステークプール",
   "staking.stakePools.filter.apply": "適用する",
-  "staking.stakePools.filter.hidePoolsWithoutOffChainData": "オフチェーンデータのないプール",
-  "staking.stakePools.filter.hidePrivatePools": "プライベートプール",
-  "staking.stakePools.filter.hideRetiringPools": "終了予定のプール",
+  "staking.stakePools.filter.hidePoolsWithoutOffChainData": "オフチェーンデータのないプールを非表示にする",
+  "staking.stakePools.filter.hidePrivatePools": "プライベートプールを非表示にする",
+  "staking.stakePools.filter.hideRetiringPools": "終了するプールを非表示にする",
   "staking.stakePools.filter.resetFilter": "フィルターをリセットする",
   "staking.stakePools.learnMore": "もっと知る",
   "staking.stakePools.listTitle": "ステークプール",

From 6c8626146a26d6bc6d794f85f2f1e598b8add8c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomislav=20Hora=C4=8Dek?= <tomislav.horacek@thespian.hr>
Date: Fri, 26 Mar 2021 10:34:37 +0100
Subject: [PATCH 17/38] [DDW-435] Fix delegation issue while device not
 selected at first

---
 .../staking/dialogs/DelegationSetupWizardDialogContainer.js  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/source/renderer/app/containers/staking/dialogs/DelegationSetupWizardDialogContainer.js b/source/renderer/app/containers/staking/dialogs/DelegationSetupWizardDialogContainer.js
index ddee6ab583..4ea772a336 100644
--- a/source/renderer/app/containers/staking/dialogs/DelegationSetupWizardDialogContainer.js
+++ b/source/renderer/app/containers/staking/dialogs/DelegationSetupWizardDialogContainer.js
@@ -207,7 +207,10 @@ export default class DelegationSetupWizardDialogContainer extends Component<
       this.handleIsWalletAcceptable(amount, reward)
     );
 
-    const isTrezor = checkIsTrezorByWalletId(selectedWallet.id);
+    let isTrezor = false;
+    if (selectedWallet) {
+      isTrezor = checkIsTrezorByWalletId(selectedWallet.id);
+    }
 
     return (
       <DelegationSetupWizardDialog

From 00ea17d03ebdff9513b36f9b54235f967082386b Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Fri, 26 Mar 2021 06:01:11 -0400
Subject: [PATCH 18/38] [DDW-435] Show private, retiring and high profit margin
 pool warnings on delegation confirmm step as well

---
 .../DelegationStepsChooseStakePoolDialog.js   |   8 +-
 .../DelegationStepsConfirmationDialog.js      |  58 +++++++
 .../DelegationStepsConfirmationDialog.scss    |  17 ++
 .../app/i18n/locales/defaultMessages.json     | 150 +++++++++++-------
 source/renderer/app/utils/staking.js          |   6 +
 5 files changed, 182 insertions(+), 57 deletions(-)

diff --git a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
index 1406ed9e72..9f34e0d4e1 100644
--- a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
+++ b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
@@ -23,10 +23,12 @@ 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 } from '../../../utils/staking';
+import {
+  getNumberOfFilterDimensionsApplied,
+  hasStakePoolHighProfitMargin,
+} from '../../../utils/staking';
 import StakePool from '../../../domains/StakePool';
 
-const HIGH_PROFIT_MARGIN_BASE = 50;
 const messages = defineMessages({
   title: {
     id: 'staking.delegationSetup.chooseStakePool.step.dialog.title',
@@ -260,7 +262,7 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
     const highProfitMarginFooter =
       selectedPool &&
       !selectedPool.isPrivate &&
-      selectedPool.profitMargin > HIGH_PROFIT_MARGIN_BASE ? (
+      hasStakePoolHighProfitMargin(selectedPool) ? (
         <div className={styles.poolFooterContent}>
           <FormattedHTMLMessage
             {...messages.highProfitMarginPoolFooter}
diff --git a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js
index 590d03cede..db263ba7d9 100644
--- a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js
+++ b/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}
diff --git a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.scss b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.scss
index 6d9d211c2c..29506e9224 100644
--- a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.scss
+++ b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.scss
@@ -76,6 +76,23 @@
     text-align: center;
   }
 
+  .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: left;
+
+    .poolFooterContent {
+      margin-bottom: 10px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
   :global {
     .LoadingSpinner_component {
       .LoadingSpinner_icon {
diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
index c3f9b4ec46..e51833d191 100644
--- a/source/renderer/app/i18n/locales/defaultMessages.json
+++ b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -3708,13 +3708,13 @@
         "description": "Title \"Choose a stake pool\" on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 36
+          "line": 38
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.title",
         "start": {
           "column": 9,
-          "line": 31
+          "line": 33
         }
       },
       {
@@ -3722,13 +3722,13 @@
         "description": "Description on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 44
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.description",
         "start": {
           "column": 15,
-          "line": 37
+          "line": 39
         }
       },
       {
@@ -3736,13 +3736,13 @@
         "description": "Select / Selected pool section label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 50
+          "line": 52
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.selectStakePoolLabel",
         "start": {
           "column": 24,
-          "line": 43
+          "line": 45
         }
       },
       {
@@ -3750,13 +3750,13 @@
         "description": "\"Selected Pools\" Selected pool label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 58
+          "line": 60
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.selectedStakePoolLabel",
         "start": {
           "column": 26,
-          "line": 51
+          "line": 53
         }
       },
       {
@@ -3764,13 +3764,13 @@
         "description": "\"Selected Pools\" Selected pool label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 66
+          "line": 68
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.selectedStakePoolLabelRetiring",
         "start": {
           "column": 34,
-          "line": 59
+          "line": 61
         }
       },
       {
@@ -3778,13 +3778,13 @@
         "description": "\"You are already delegating to stake pool\" label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 74
+          "line": 76
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolLabel",
         "start": {
           "column": 27,
-          "line": 67
+          "line": 69
         }
       },
       {
@@ -3792,13 +3792,13 @@
         "description": "\"You are already delegating to stake pool\" label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 82
+          "line": 84
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.delegatedStakePoolNextLabel",
         "start": {
           "column": 31,
-          "line": 75
+          "line": 77
         }
       },
       {
@@ -3806,13 +3806,13 @@
         "description": "Recent \"Pool\" choice section label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 88
+          "line": 90
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.recentPoolsLabel",
         "start": {
           "column": 20,
-          "line": 83
+          "line": 85
         }
       },
       {
@@ -3820,13 +3820,13 @@
         "description": "Search \"Pools\" input label on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 95
+          "line": 97
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.label",
         "start": {
           "column": 20,
-          "line": 89
+          "line": 91
         }
       },
       {
@@ -3834,13 +3834,13 @@
         "description": "Search \"Pools\" input placeholder on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 102
+          "line": 104
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.searchInput.placeholder",
         "start": {
           "column": 26,
-          "line": 96
+          "line": 98
         }
       },
       {
@@ -3848,13 +3848,13 @@
         "description": "Label for continue button on the delegation setup \"choose stake pool\" dialog.",
         "end": {
           "column": 3,
-          "line": 109
+          "line": 111
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.continueButtonLabel",
         "start": {
           "column": 23,
-          "line": 103
+          "line": 105
         }
       },
       {
@@ -3862,13 +3862,13 @@
         "description": "Step indicator label on the delegation setup \"choose wallet\" step dialog.",
         "end": {
           "column": 3,
-          "line": 116
+          "line": 118
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.stepIndicatorLabel",
         "start": {
           "column": 22,
-          "line": 110
+          "line": 112
         }
       },
       {
@@ -3876,13 +3876,13 @@
         "description": "Retiring Pool Footer label on the delegation setup \"choose wallet\" step dialog.",
         "end": {
           "column": 3,
-          "line": 124
+          "line": 126
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.retiringPoolFooter",
         "start": {
           "column": 22,
-          "line": 117
+          "line": 119
         }
       },
       {
@@ -3890,13 +3890,13 @@
         "description": "Private Pool Footer label on the delegation setup \"choose wallet\" step dialog.",
         "end": {
           "column": 3,
-          "line": 131
+          "line": 133
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.privatePoolFooter",
         "start": {
           "column": 21,
-          "line": 125
+          "line": 127
         }
       },
       {
@@ -3904,13 +3904,13 @@
         "description": "High Profit Margin Pool Footer label on the delegation setup \"choose wallet\" step dialog.",
         "end": {
           "column": 3,
-          "line": 139
+          "line": 141
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js",
         "id": "staking.delegationSetup.chooseStakePool.step.dialog.highProfitMarginPoolFooter",
         "start": {
           "column": 30,
-          "line": 132
+          "line": 134
         }
       }
     ],
@@ -4068,13 +4068,13 @@
         "description": "Title \"Confirm Delegation\" on the delegation setup \"confirmation\" step dialog.",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 43
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
         "id": "staking.delegationSetup.confirmation.step.dialog.title",
         "start": {
           "column": 9,
-          "line": 37
+          "line": 38
         }
       },
       {
@@ -4082,13 +4082,13 @@
         "description": "Step indicator label on the delegation setup \"confirmation\" step dialog.",
         "end": {
           "column": 3,
-          "line": 48
+          "line": 49
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
         "id": "staking.delegationSetup.confirmation.step.dialog.stepIndicatorLabel",
         "start": {
           "column": 22,
-          "line": 43
+          "line": 44
         }
       },
       {
@@ -4096,13 +4096,13 @@
         "description": "Description on the delegation setup \"confirmation\" step dialog.",
         "end": {
           "column": 3,
-          "line": 55
+          "line": 56
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
         "id": "staking.delegationSetup.confirmation.step.dialog.description",
         "start": {
           "column": 15,
-          "line": 49
+          "line": 50
         }
       },
       {
@@ -4110,13 +4110,13 @@
         "description": "Stake pool ID label on the delegation setup \"confirmation\" step dialog.",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 62
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
         "id": "staking.delegationSetup.confirmation.step.dialog.stakePoolIdLabel",
         "start": {
           "column": 20,
-          "line": 56
+          "line": 57
         }
       },
       {
@@ -4124,13 +4124,13 @@
         "description": "Fees label on the delegation setup \"confirmation\" step dialog.",
         "end": {
           "column": 3,
-          "line": 67
+          "line": 68
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
         "id": "staking.delegationSetup.confirmation.step.dialog.feesLabel",
         "start": {
           "column": 13,
-          "line": 62
+          "line": 63
         }
       },
       {
@@ -4138,13 +4138,13 @@
         "description": "Deposit label on the delegation setup \"confirmation\" step dialog.",
         "end": {
           "column": 3,
-          "line": 73
+          "line": 74
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
         "id": "staking.delegationSetup.confirmation.step.dialog.depositLabel",
         "start": {
           "column": 16,
-          "line": 68
+          "line": 69
         }
       },
       {
@@ -4152,13 +4152,13 @@
         "description": "Placeholder for \"spending password\"",
         "end": {
           "column": 3,
-          "line": 79
+          "line": 80
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
         "id": "staking.delegationSetup.confirmation.step.dialog.spendingPasswordPlaceholder",
         "start": {
           "column": 31,
-          "line": 74
+          "line": 75
         }
       },
       {
@@ -4166,13 +4166,13 @@
         "description": "Label for \"spending password\"",
         "end": {
           "column": 3,
-          "line": 85
+          "line": 86
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
         "id": "staking.delegationSetup.confirmation.step.dialog.spendingPasswordLabel",
         "start": {
           "column": 25,
-          "line": 80
+          "line": 81
         }
       },
       {
@@ -4180,13 +4180,13 @@
         "description": "Label for continue button on the delegation setup \"confirmation\" step dialog.",
         "end": {
           "column": 3,
-          "line": 91
+          "line": 92
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
         "id": "staking.delegationSetup.confirmation.step.dialog.confirmButtonLabel",
         "start": {
           "column": 22,
-          "line": 86
+          "line": 87
         }
       },
       {
@@ -4194,13 +4194,13 @@
         "description": "Label for \"Cancel\" button on the delegation setup \"confirmation\" step dialog.",
         "end": {
           "column": 3,
-          "line": 97
+          "line": 98
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
         "id": "staking.delegationSetup.confirmation.step.dialog.cancelButtonLabel",
         "start": {
           "column": 21,
-          "line": 92
+          "line": 93
         }
       },
       {
@@ -4208,13 +4208,13 @@
         "description": "\"Calculating fees\" message in the \"confirmation\" dialog.",
         "end": {
           "column": 3,
-          "line": 102
+          "line": 103
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
         "id": "staking.delegationSetup.confirmation.step.dialog.calculatingFees",
         "start": {
           "column": 19,
-          "line": 98
+          "line": 99
         }
       },
       {
@@ -4222,13 +4222,55 @@
         "description": "\"Calculating deposit\" message in the \"confirmation\" dialog.",
         "end": {
           "column": 3,
-          "line": 107
+          "line": 108
         },
         "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
         "id": "staking.delegationSetup.confirmation.step.dialog.calculatingDeposit",
         "start": {
           "column": 22,
-          "line": 103
+          "line": 104
+        }
+      },
+      {
+        "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.",
+        "end": {
+          "column": 3,
+          "line": 116
+        },
+        "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
+        "id": "staking.delegationSetup.chooseStakePool.step.dialog.retiringPoolFooter",
+        "start": {
+          "column": 22,
+          "line": 109
+        }
+      },
+      {
+        "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.",
+        "end": {
+          "column": 3,
+          "line": 123
+        },
+        "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
+        "id": "staking.delegationSetup.chooseStakePool.step.dialog.privatePoolFooter",
+        "start": {
+          "column": 21,
+          "line": 117
+        }
+      },
+      {
+        "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.",
+        "end": {
+          "column": 3,
+          "line": 131
+        },
+        "file": "source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js",
+        "id": "staking.delegationSetup.chooseStakePool.step.dialog.highProfitMarginPoolFooter",
+        "start": {
+          "column": 30,
+          "line": 124
         }
       }
     ],
diff --git a/source/renderer/app/utils/staking.js b/source/renderer/app/utils/staking.js
index 5f07dd9c30..702099f2c9 100644
--- a/source/renderer/app/utils/staking.js
+++ b/source/renderer/app/utils/staking.js
@@ -8,6 +8,8 @@ import type { SmashServerType } from '../types/stakingTypes';
 import type { StakePoolFilterOptionsType } from '../stores/StakingStore';
 import StakePool from '../domains/StakePool';
 
+const HIGH_PROFIT_MARGIN_BASE = 50;
+
 export const getSmashServerNameFromUrl = (smashServerUrl: string): string =>
   reduce(
     SMASH_SERVERS_LIST,
@@ -96,3 +98,7 @@ export const isStakePoolInFilterRange = (
 
   return true;
 };
+
+export const hasStakePoolHighProfitMargin = (stakePool: StakePool) => {
+  return stakePool.profitMargin > HIGH_PROFIT_MARGIN_BASE;
+};

From 09899f59351aeb0071ee191b0fe1ea2131c70889 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Fri, 26 Mar 2021 06:05:09 -0400
Subject: [PATCH 19/38] [DDW-435] Remove unnecessary eslint disable marker

---
 .../staking/stake-pools/FilterPopOver.js      |  1 -
 .../app/i18n/locales/defaultMessages.json     | 20 +++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
index 67675ab594..36e00f662e 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
+++ b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
@@ -1,5 +1,4 @@
 // @flow
-/* eslint-disable jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */
 import React, { Component, createRef } from 'react';
 import type { ElementRef } from 'react';
 import { observer } from 'mobx-react';
diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
index e51833d191..f77c027357 100644
--- a/source/renderer/app/i18n/locales/defaultMessages.json
+++ b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -5656,13 +5656,13 @@
         "description": "Reset Filter button label.",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 24
         },
         "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
         "id": "staking.stakePools.filter.resetFilter",
         "start": {
           "column": 15,
-          "line": 21
+          "line": 20
         }
       },
       {
@@ -5670,13 +5670,13 @@
         "description": "Hide retiring pools filter type.",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 29
         },
         "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
         "id": "staking.stakePools.filter.hideRetiringPools",
         "start": {
           "column": 21,
-          "line": 26
+          "line": 25
         }
       },
       {
@@ -5684,13 +5684,13 @@
         "description": "Hide private pools filter type.",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 34
         },
         "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
         "id": "staking.stakePools.filter.hidePrivatePools",
         "start": {
           "column": 20,
-          "line": 31
+          "line": 30
         }
       },
       {
@@ -5698,13 +5698,13 @@
         "description": "Hide pools without off-chain data filter type.",
         "end": {
           "column": 3,
-          "line": 40
+          "line": 39
         },
         "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
         "id": "staking.stakePools.filter.hidePoolsWithoutOffChainData",
         "start": {
           "column": 32,
-          "line": 36
+          "line": 35
         }
       },
       {
@@ -5712,13 +5712,13 @@
         "description": "Filter button label.",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 44
         },
         "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
         "id": "staking.stakePools.filter.apply",
         "start": {
           "column": 9,
-          "line": 41
+          "line": 40
         }
       }
     ],

From f997afbe88584c6877e53482d30b6678bd35e535 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Fri, 26 Mar 2021 06:47:16 -0400
Subject: [PATCH 20/38] [DDW-435] Update styles for stake pool filter popup

---
 source/renderer/app/components/layout/SidebarLayout.scss      | 4 +---
 .../app/components/staking/layouts/StakingWithNavigation.scss | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/source/renderer/app/components/layout/SidebarLayout.scss b/source/renderer/app/components/layout/SidebarLayout.scss
index 648ac779b0..ae750ce387 100644
--- a/source/renderer/app/components/layout/SidebarLayout.scss
+++ b/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 {
diff --git a/source/renderer/app/components/staking/layouts/StakingWithNavigation.scss b/source/renderer/app/components/staking/layouts/StakingWithNavigation.scss
index 60472a7a59..e18c9fb5d7 100644
--- a/source/renderer/app/components/staking/layouts/StakingWithNavigation.scss
+++ b/source/renderer/app/components/staking/layouts/StakingWithNavigation.scss
@@ -8,7 +8,7 @@
   flex-shrink: 0;
   height: 50px;
   position: relative;
-  z-index: 2;
+  z-index: 10000;
 }
 
 .page {

From c7a76603d944624c6a8e814ecd25ef787cef0c26 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Fri, 26 Mar 2021 07:15:48 -0400
Subject: [PATCH 21/38] [DDW-435] Restore form values when hiding filter popup
 on stake pool

---
 .../app/components/staking/stake-pools/FilterPopOver.js  | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
index 36e00f662e..c55a669908 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
+++ b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
@@ -59,6 +59,7 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
 
   form: ReactToolboxMobxForm;
   popoverTippyInstance: ElementRef<*> = createRef();
+  isSubmitClicked = false;
 
   constructor(props: FilterPopOverProps, context: Object) {
     super(props);
@@ -109,6 +110,7 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
   };
 
   resetForm = () => this.fillFormFields(emptyStakePoolFilterOptions);
+  restoreForm = () => this.fillFormFields(this.props.populatedFilterOptions);
 
   isFormValuesEqualTo = (comparedFilterOptions: StakePoolFilterOptionsType) => {
     const formFieldNames = Object.keys(this.form.fields.toJSON());
@@ -127,6 +129,7 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
       },
       onError: () => null,
     });
+    this.isSubmitClicked = true;
     if (this.popoverTippyInstance.current) {
       this.popoverTippyInstance.current.hide();
     }
@@ -177,6 +180,12 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
         appendTo={document.body}
         onShow={(instance) => {
           this.popoverTippyInstance.current = instance;
+          this.isSubmitClicked = false;
+        }}
+        onHide={() => {
+          if (!this.isSubmitClicked) {
+            this.restoreForm();
+          }
         }}
         duration={0}
         offset={[0, 10]}

From c60c08d4f41b08ec6907231f3fcbdbfd40c1d37d Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Fri, 26 Mar 2021 07:23:38 -0400
Subject: [PATCH 22/38] [DDW-435] Update styles of filter popup on stake pools

---
 .../renderer/app/components/staking/widgets/TooltipPool.scss  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/renderer/app/components/staking/widgets/TooltipPool.scss b/source/renderer/app/components/staking/widgets/TooltipPool.scss
index ceeec1f6b1..6c08a3afcd 100644
--- a/source/renderer/app/components/staking/widgets/TooltipPool.scss
+++ b/source/renderer/app/components/staking/widgets/TooltipPool.scss
@@ -347,6 +347,7 @@
   font-size: 14px;
   line-height: 1.36;
   margin-bottom: 1px;
+  margin-right: 8px;
   opacity: 0.6;
   vertical-align: middle;
 }
@@ -359,8 +360,7 @@
   color: var(--theme-staking-stake-pool-tooltip-retirement-text-color);
   display: inline-block;
   font-size: 10px;
-  margin-bottom: 9px;
-  margin-left: 8px;
+  margin-bottom: 1px;
   padding: 3px 9px;
   vertical-align: middle;
 }

From f057bc316c29adc520a5341eb5b0c851abc968ed Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Fri, 26 Mar 2021 13:12:30 -0400
Subject: [PATCH 23/38] [DDW-435] Show ordered stake pools by default

---
 source/renderer/app/stores/StakingStore.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/source/renderer/app/stores/StakingStore.js b/source/renderer/app/stores/StakingStore.js
index 546fa1bc69..976fcce1a5 100644
--- a/source/renderer/app/stores/StakingStore.js
+++ b/source/renderer/app/stores/StakingStore.js
@@ -488,7 +488,8 @@ export default class StakingStore extends Store {
 
   @computed get allFiltered(): Array<StakePool> {
     const { recentFiltered } = this;
-    const allFiltered = this.stakePools.filter((stakePool) =>
+    const orderedStakePools = orderBy(this.stakePools, 'ranking', 'asc');
+    const allFiltered = orderedStakePools.filter((stakePool) =>
       isStakePoolInFilterRange(this.filterOptions, stakePool)
     );
     return !allFiltered.length && recentFiltered.length

From 343be038fc5c060e26ed1c132c2f1b2cc5be7ce3 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Mon, 29 Mar 2021 05:43:44 -0400
Subject: [PATCH 24/38] [DDW-435] Fix ranked stake pools calculation logic when
 filtering

---
 .../staking/stake-pools/StakePools.js         | 12 +--
 .../containers/staking/StakePoolsListPage.js  | 11 ++-
 .../app/i18n/locales/defaultMessages.json     | 32 ++++----
 source/renderer/app/stores/StakingStore.js    |  8 ++
 .../stories/staking/StakePools.stories.js     | 73 ++++++++++---------
 5 files changed, 73 insertions(+), 63 deletions(-)

diff --git a/source/renderer/app/components/staking/stake-pools/StakePools.js b/source/renderer/app/components/staking/stake-pools/StakePools.js
index e2c1fcb47c..4103f1f96f 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePools.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePools.js
@@ -20,10 +20,7 @@ import {
 } from '../../../utils/staking';
 import type { StakePoolFilterOptionsType } from '../../../stores/StakingStore';
 import StakePool from '../../../domains/StakePool';
-import {
-  IS_RANKING_DATA_AVAILABLE,
-  SMASH_SERVER_TYPES,
-} from '../../../config/stakingConfig';
+import { SMASH_SERVER_TYPES } from '../../../config/stakingConfig';
 import smashSettingsIcon from '../../../assets/images/smash-settings-ic.inline.svg';
 import tinySpinnerIcon from '../../../assets/images/spinner-tiny.inline.svg';
 
@@ -79,6 +76,7 @@ type Props = {
   wallets: Array<Wallet>,
   currentLocale: string,
   stakePoolsList: Array<StakePool>,
+  numberOfRankedStakePools: number,
   onOpenExternalLink: Function,
   currentTheme: string,
   updateDelegatingStake: Function,
@@ -173,6 +171,7 @@ export default class StakePools extends Component<Props, State> {
       wallets,
       currentLocale,
       stakePoolsList,
+      numberOfRankedStakePools,
       updateDelegatingStake,
       rankStakePools,
       selectedDelegationWalletId,
@@ -212,11 +211,6 @@ export default class StakePools extends Component<Props, State> {
     const isFilterDisabled =
       !filteredStakePoolsList.length && !numberOfFilterDimensionsApplied;
 
-    const numberOfRankedStakePools: number = stakePoolsList.filter(
-      (stakePool) =>
-        IS_RANKING_DATA_AVAILABLE && stakePool.nonMyopicMemberRewards
-    ).length;
-
     const listTitleMessage = isFetching
       ? messages.listTitleLoading
       : messages.listTitle;
diff --git a/source/renderer/app/containers/staking/StakePoolsListPage.js b/source/renderer/app/containers/staking/StakePoolsListPage.js
index a2844de6f0..0c51dbd68d 100644
--- a/source/renderer/app/containers/staking/StakePoolsListPage.js
+++ b/source/renderer/app/containers/staking/StakePoolsListPage.js
@@ -1,6 +1,7 @@
 // @flow
 import React, { Component, Fragment } from 'react';
 import { observer, inject } from 'mobx-react';
+import { IS_RANKING_DATA_AVAILABLE } from '../../config/stakingConfig';
 import StakePools from '../../components/staking/stake-pools/StakePools';
 import StakePoolsRankingLoader from '../../components/staking/stake-pools/StakePoolsRankingLoader';
 import DelegationSetupWizardDialogContainer from './dialogs/DelegationSetupWizardDialogContainer';
@@ -61,6 +62,7 @@ export default class StakePoolsListPage extends Component<Props> {
     const { isSynced } = networkStatus;
     const {
       stakePoolsRequest,
+      all: allStakePools,
       allFiltered,
       selectedDelegationWalletId,
       stake,
@@ -74,17 +76,22 @@ export default class StakePoolsListPage extends Component<Props> {
       populatedFilterOptions,
     } = staking;
     const { filterStakePools } = stakingActions;
-    const { all } = wallets;
+    const { all: allWallets } = wallets;
     const isLoading = !isSynced || fetchingStakePoolsFailed;
     const isRanking =
       !isLoading && staking.isRanking && stakePoolsRequest.isExecuting;
+    const numberOfRankedStakePools = allStakePools.filter(
+      (stakePool) =>
+        IS_RANKING_DATA_AVAILABLE && stakePool.nonMyopicMemberRewards
+    ).length;
 
     return (
       <Fragment>
         <StakePools
-          wallets={all}
+          wallets={allWallets}
           currentLocale={currentLocale}
           stakePoolsList={allFiltered}
+          numberOfRankedStakePools={numberOfRankedStakePools}
           stakePoolsDelegatingList={recentStakePools}
           onOpenExternalLink={app.openExternalLink}
           currentTheme={currentTheme}
diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
index 8c7e069f57..0a4a91dbaf 100644
--- a/source/renderer/app/i18n/locales/defaultMessages.json
+++ b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -5731,13 +5731,13 @@
         "description": "\"delegatingListTitle\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 32
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.delegatingListTitle",
         "start": {
           "column": 23,
-          "line": 31
+          "line": 28
         }
       },
       {
@@ -5745,13 +5745,13 @@
         "description": "\"listTitle\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 40
+          "line": 37
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitle",
         "start": {
           "column": 13,
-          "line": 36
+          "line": 33
         }
       },
       {
@@ -5759,13 +5759,13 @@
         "description": "\"listTitleLoading\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 42
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitleLoading",
         "start": {
           "column": 20,
-          "line": 41
+          "line": 38
         }
       },
       {
@@ -5773,13 +5773,13 @@
         "description": "\"listTitleSearch\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 50
+          "line": 47
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitleSearch",
         "start": {
           "column": 19,
-          "line": 46
+          "line": 43
         }
       },
       {
@@ -5787,13 +5787,13 @@
         "description": "\"listTitleStakePools\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 55
+          "line": 52
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitleStakePools",
         "start": {
           "column": 23,
-          "line": 51
+          "line": 48
         }
       },
       {
@@ -5801,13 +5801,13 @@
         "description": "Loading stake pool message for the Delegation center body section.",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 58
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.loadingStakePoolsMessage",
         "start": {
           "column": 28,
-          "line": 56
+          "line": 53
         }
       },
       {
@@ -5815,13 +5815,13 @@
         "description": "moderatedBy message for the Delegation center body section.",
         "end": {
           "column": 3,
-          "line": 66
+          "line": 63
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.moderatedBy",
         "start": {
           "column": 15,
-          "line": 62
+          "line": 59
         }
       },
       {
@@ -5829,13 +5829,13 @@
         "description": "unmoderated message for the Delegation center body section.",
         "end": {
           "column": 3,
-          "line": 71
+          "line": 68
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.unmoderated",
         "start": {
           "column": 15,
-          "line": 67
+          "line": 64
         }
       }
     ],
diff --git a/source/renderer/app/stores/StakingStore.js b/source/renderer/app/stores/StakingStore.js
index 976fcce1a5..44b3d04c13 100644
--- a/source/renderer/app/stores/StakingStore.js
+++ b/source/renderer/app/stores/StakingStore.js
@@ -486,6 +486,14 @@ export default class StakingStore extends Store {
     return this.stakePoolsRequest.result ? this.stakePoolsRequest.result : [];
   }
 
+  @computed get all(): Array<StakePool> {
+    const { recentStakePools } = this;
+    const orderedStakePools = orderBy(this.stakePools, 'ranking', 'asc');
+    return !orderedStakePools.length && recentStakePools.length
+      ? recentStakePools
+      : orderedStakePools;
+  }
+
   @computed get allFiltered(): Array<StakePool> {
     const { recentFiltered } = this;
     const orderedStakePools = orderBy(this.stakePools, 'ranking', 'asc');
diff --git a/storybook/stories/staking/StakePools.stories.js b/storybook/stories/staking/StakePools.stories.js
index 30416ec6c4..12816292a8 100644
--- a/storybook/stories/staking/StakePools.stories.js
+++ b/storybook/stories/staking/StakePools.stories.js
@@ -62,39 +62,40 @@ type Props = {
   isLoading: boolean,
 };
 
-export const StakePoolsStory = (props: Props) => (
-  <StakePools
-    stakePoolsList={STAKE_POOLS.slice(
-      0,
-      number('Pools', 300, {
-        range: true,
-        min: 37,
-        max: 300,
-        step: 1,
-      })
-    )}
-    stakePoolsDelegatingList={[
-      STAKE_POOLS[1],
-      STAKE_POOLS[3],
-      STAKE_POOLS[20],
-      STAKE_POOLS[36],
-    ]}
-    isFetching={boolean('isFetching', false)}
-    onOpenExternalLink={action('onOpenExternalLink')}
-    currentTheme={props.currentTheme}
-    currentLocale={props.locale}
-    onDelegate={action('onDelegate')}
-    isLoading={props.isLoading}
-    isRanking={false}
-    updateDelegatingStake={() => null}
-    rankStakePools={() => null}
-    wallets={dummyWallets}
-    getStakePoolById={() => null}
-    onSmashSettingsClick={action('onSmashSettingsClick')}
-    smashServerUrl="https://smash.cardano-mainnet.iohk.io"
-    maxDelegationFunds={maxDelegationFunds}
-    filterOptions={{}}
-    populatedFilterOptions={{}}
-    onFilter={() => null}
-  />
-);
+export const StakePoolsStory = (props: Props) => {
+  const numberOfStakePools = number('Pools', 300, {
+    range: true,
+    min: 37,
+    max: 300,
+    step: 1,
+  });
+  return (
+    <StakePools
+      stakePoolsList={STAKE_POOLS.slice(0, numberOfStakePools)}
+      numberOfRankedStakePools={numberOfStakePools}
+      stakePoolsDelegatingList={[
+        STAKE_POOLS[1],
+        STAKE_POOLS[3],
+        STAKE_POOLS[20],
+        STAKE_POOLS[36],
+      ]}
+      isFetching={boolean('isFetching', false)}
+      onOpenExternalLink={action('onOpenExternalLink')}
+      currentTheme={props.currentTheme}
+      currentLocale={props.locale}
+      onDelegate={action('onDelegate')}
+      isLoading={props.isLoading}
+      isRanking={false}
+      updateDelegatingStake={() => null}
+      rankStakePools={() => null}
+      wallets={dummyWallets}
+      getStakePoolById={() => null}
+      onSmashSettingsClick={action('onSmashSettingsClick')}
+      smashServerUrl="https://smash.cardano-mainnet.iohk.io"
+      maxDelegationFunds={maxDelegationFunds}
+      filterOptions={{}}
+      populatedFilterOptions={{}}
+      onFilter={() => null}
+    />
+  );
+};

From 5d310b10ea6c8d3dfa1e3d88ccde19d97d986d32 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 30 Mar 2021 04:57:05 -0400
Subject: [PATCH 25/38] [DDW-435] Update stake pools ranking using index

---
 .../staking/stake-pools/StakePools.js         | 11 ++-
 .../staking/stake-pools/StakePoolsList.js     |  5 +-
 .../stake-pools/StakePoolsTableBody.js        | 12 +--
 .../components/staking/widgets/ThumbPool.js   |  7 +-
 .../staking/widgets/ThumbPoolContent.js       |  3 +-
 .../staking/widgets/ThumbSelectedPool.js      |  4 +-
 .../components/staking/widgets/TooltipPool.js |  3 +-
 .../containers/staking/StakePoolsListPage.js  |  7 --
 .../stories/staking/StakePools.stories.js     | 73 +++++++++----------
 9 files changed, 66 insertions(+), 59 deletions(-)

diff --git a/source/renderer/app/components/staking/stake-pools/StakePools.js b/source/renderer/app/components/staking/stake-pools/StakePools.js
index 4103f1f96f..613f3a0476 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePools.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePools.js
@@ -20,7 +20,10 @@ import {
 } from '../../../utils/staking';
 import type { StakePoolFilterOptionsType } from '../../../stores/StakingStore';
 import StakePool from '../../../domains/StakePool';
-import { SMASH_SERVER_TYPES } from '../../../config/stakingConfig';
+import {
+  IS_RANKING_DATA_AVAILABLE,
+  SMASH_SERVER_TYPES,
+} from '../../../config/stakingConfig';
 import smashSettingsIcon from '../../../assets/images/smash-settings-ic.inline.svg';
 import tinySpinnerIcon from '../../../assets/images/spinner-tiny.inline.svg';
 
@@ -76,7 +79,6 @@ type Props = {
   wallets: Array<Wallet>,
   currentLocale: string,
   stakePoolsList: Array<StakePool>,
-  numberOfRankedStakePools: number,
   onOpenExternalLink: Function,
   currentTheme: string,
   updateDelegatingStake: Function,
@@ -171,7 +173,6 @@ export default class StakePools extends Component<Props, State> {
       wallets,
       currentLocale,
       stakePoolsList,
-      numberOfRankedStakePools,
       updateDelegatingStake,
       rankStakePools,
       selectedDelegationWalletId,
@@ -207,6 +208,10 @@ export default class StakePools extends Component<Props, State> {
       stakePoolsList,
       search
     );
+    const numberOfRankedStakePools = filteredStakePoolsList.filter(
+      (stakePool) =>
+        IS_RANKING_DATA_AVAILABLE && stakePool.nonMyopicMemberRewards
+    ).length;
 
     const isFilterDisabled =
       !filteredStakePoolsList.length && !numberOfFilterDimensionsApplied;
diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsList.js b/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
index 2e2bb3042f..90aafd80ff 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
@@ -136,14 +136,15 @@ export class StakePoolsList extends Component<Props, State> {
 
     return (
       <div className={componentClasses}>
-        {stakePoolsList.map((stakePool) => {
+        {stakePoolsList.map((stakePool, index) => {
           const isHighlighted = this.getIsHighlighted(stakePool.id);
           const isSelected = selectedPoolId && stakePool.id === selectedPoolId;
 
           return (
             <ThumbPool
               stakePool={stakePool}
-              key={stakePool.id + stakePool.ranking}
+              ranking={index + 1}
+              key={stakePool.id.toString()}
               onOpenExternalLink={onOpenExternalLink}
               isHighlighted={isHighlighted}
               onClose={this.handleClose}
diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTableBody.js b/source/renderer/app/components/staking/stake-pools/StakePoolsTableBody.js
index 61f7925433..2e0bfae075 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsTableBody.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTableBody.js
@@ -186,8 +186,7 @@ export class StakePoolsTableBody extends Component<
       containerClassName,
     } = this.props;
     const { intl } = this.context;
-    return map(sortedStakePoolList, (stakePool, key) => {
-      const rank = get(stakePool, 'ranking', '');
+    return map(sortedStakePoolList, (stakePool, index) => {
       const ticker = get(stakePool, 'ticker', '');
       const saturation = get(stakePool, 'saturation', '');
       const cost = new BigNumber(get(stakePool, 'cost', ''));
@@ -209,19 +208,19 @@ export class StakePoolsTableBody extends Component<
       ]);
 
       const isHighlighted = this.getIsHighlighted(stakePool.id);
-      const color = getColorFromRange(rank, numberOfRankedStakePools);
+      const color = getColorFromRange(index + 1, numberOfRankedStakePools);
       const { top, left, selectedRow } = this.state;
 
       return (
         <tr
-          key={key}
+          key={index + 1}
           className={
-            selectedRow && selectedRow === key ? styles.selected : null
+            selectedRow && selectedRow === index ? styles.selected : null
           }
         >
           <td>
             {!memberRewards.isZero() ? (
-              rank
+              index + 1
             ) : (
               <>
                 {numberOfRankedStakePools + 1}
@@ -231,6 +230,7 @@ export class StakePoolsTableBody extends Component<
             {isHighlighted && (
               <TooltipPool
                 stakePool={stakePool}
+                ranking={index + 1}
                 isVisible
                 hasArrow
                 onClick={this.handleCloseTooltip}
diff --git a/source/renderer/app/components/staking/widgets/ThumbPool.js b/source/renderer/app/components/staking/widgets/ThumbPool.js
index 21dd01635d..ce0d315758 100644
--- a/source/renderer/app/components/staking/widgets/ThumbPool.js
+++ b/source/renderer/app/components/staking/widgets/ThumbPool.js
@@ -22,6 +22,7 @@ type Props = {
   showWithSelectButton?: boolean,
   showSelected?: boolean,
   stakePool: StakePool,
+  ranking: number,
   isSelected?: ?Function,
   containerClassName: string,
   numberOfRankedStakePools: number,
@@ -98,6 +99,7 @@ export class ThumbPool extends Component<Props, State> {
       showWithSelectButton,
       showSelected,
       stakePool,
+      ranking,
       containerClassName,
       numberOfRankedStakePools,
       disabledStakePoolId,
@@ -105,7 +107,7 @@ export class ThumbPool extends Component<Props, State> {
     } = this.props;
     const { top, left } = this.state;
 
-    const { ranking, id } = stakePool;
+    const { id } = stakePool;
     const color = getColorFromRange(ranking, numberOfRankedStakePools);
     const isDisabled = disabledStakePoolId === id;
 
@@ -121,11 +123,13 @@ export class ThumbPool extends Component<Props, State> {
       isSelected && showSelected ? (
         <ThumbSelectedPool
           stakePool={stakePool}
+          ranking={ranking}
           numberOfRankedStakePools={numberOfRankedStakePools}
         />
       ) : (
         <ThumbPoolContent
           stakePool={stakePool}
+          ranking={ranking}
           isGridRewardsView={isGridRewardsView}
           numberOfRankedStakePools={numberOfRankedStakePools}
         />
@@ -144,6 +148,7 @@ export class ThumbPool extends Component<Props, State> {
         {isHighlighted && (
           <TooltipPool
             stakePool={stakePool}
+            ranking={ranking}
             isVisible
             hasArrow
             onClick={onClose}
diff --git a/source/renderer/app/components/staking/widgets/ThumbPoolContent.js b/source/renderer/app/components/staking/widgets/ThumbPoolContent.js
index 0515935279..55a6645856 100644
--- a/source/renderer/app/components/staking/widgets/ThumbPoolContent.js
+++ b/source/renderer/app/components/staking/widgets/ThumbPoolContent.js
@@ -19,6 +19,7 @@ import { formattedWalletAmount } from '../../../utils/formatters';
 
 type Props = {
   stakePool: StakePool,
+  ranking: number,
   numberOfRankedStakePools: number,
   isGridRewardsView?: boolean,
 };
@@ -43,11 +44,11 @@ export default class ThumbPoolContent extends Component<Props> {
   render() {
     const {
       stakePool,
+      ranking,
       numberOfRankedStakePools,
       isGridRewardsView,
     } = this.props;
     const {
-      ranking,
       nonMyopicMemberRewards,
       id,
       ticker,
diff --git a/source/renderer/app/components/staking/widgets/ThumbSelectedPool.js b/source/renderer/app/components/staking/widgets/ThumbSelectedPool.js
index 7ed5ab1f08..2ac7b87253 100644
--- a/source/renderer/app/components/staking/widgets/ThumbSelectedPool.js
+++ b/source/renderer/app/components/staking/widgets/ThumbSelectedPool.js
@@ -14,6 +14,7 @@ import { IS_RANKING_DATA_AVAILABLE } from '../../../config/stakingConfig';
 
 type Props = {
   stakePool?: StakePool,
+  ranking: number,
   alreadyDelegated?: boolean,
   numberOfRankedStakePools: number,
 };
@@ -23,11 +24,12 @@ export default class ThumbSelectedPool extends Component<Props> {
   render() {
     const {
       stakePool,
+      ranking,
       alreadyDelegated,
       numberOfRankedStakePools,
     } = this.props;
 
-    const { id, ticker, retiring, ranking } = stakePool || {};
+    const { id, ticker, retiring } = stakePool || {};
     const rankColor =
       stakePool && !retiring && IS_RANKING_DATA_AVAILABLE
         ? getColorFromRange(ranking, numberOfRankedStakePools)
diff --git a/source/renderer/app/components/staking/widgets/TooltipPool.js b/source/renderer/app/components/staking/widgets/TooltipPool.js
index 969998bdf5..8389b720fc 100644
--- a/source/renderer/app/components/staking/widgets/TooltipPool.js
+++ b/source/renderer/app/components/staking/widgets/TooltipPool.js
@@ -173,6 +173,7 @@ const messages = defineMessages({
 
 type Props = {
   stakePool: StakePool,
+  ranking: number,
   isVisible: boolean,
   fromStakePool?: boolean,
   currentTheme: string,
@@ -498,11 +499,11 @@ export default class TooltipPool extends Component<Props, State> {
     const {
       currentTheme,
       stakePool,
+      ranking,
       numberOfRankedStakePools,
       isGridRewardsView,
     } = this.props;
     const {
-      ranking,
       relativeStake,
       producedBlocks,
       potentialRewards,
diff --git a/source/renderer/app/containers/staking/StakePoolsListPage.js b/source/renderer/app/containers/staking/StakePoolsListPage.js
index 0c51dbd68d..b219862b60 100644
--- a/source/renderer/app/containers/staking/StakePoolsListPage.js
+++ b/source/renderer/app/containers/staking/StakePoolsListPage.js
@@ -1,7 +1,6 @@
 // @flow
 import React, { Component, Fragment } from 'react';
 import { observer, inject } from 'mobx-react';
-import { IS_RANKING_DATA_AVAILABLE } from '../../config/stakingConfig';
 import StakePools from '../../components/staking/stake-pools/StakePools';
 import StakePoolsRankingLoader from '../../components/staking/stake-pools/StakePoolsRankingLoader';
 import DelegationSetupWizardDialogContainer from './dialogs/DelegationSetupWizardDialogContainer';
@@ -62,7 +61,6 @@ export default class StakePoolsListPage extends Component<Props> {
     const { isSynced } = networkStatus;
     const {
       stakePoolsRequest,
-      all: allStakePools,
       allFiltered,
       selectedDelegationWalletId,
       stake,
@@ -80,10 +78,6 @@ export default class StakePoolsListPage extends Component<Props> {
     const isLoading = !isSynced || fetchingStakePoolsFailed;
     const isRanking =
       !isLoading && staking.isRanking && stakePoolsRequest.isExecuting;
-    const numberOfRankedStakePools = allStakePools.filter(
-      (stakePool) =>
-        IS_RANKING_DATA_AVAILABLE && stakePool.nonMyopicMemberRewards
-    ).length;
 
     return (
       <Fragment>
@@ -91,7 +85,6 @@ export default class StakePoolsListPage extends Component<Props> {
           wallets={allWallets}
           currentLocale={currentLocale}
           stakePoolsList={allFiltered}
-          numberOfRankedStakePools={numberOfRankedStakePools}
           stakePoolsDelegatingList={recentStakePools}
           onOpenExternalLink={app.openExternalLink}
           currentTheme={currentTheme}
diff --git a/storybook/stories/staking/StakePools.stories.js b/storybook/stories/staking/StakePools.stories.js
index 12816292a8..30416ec6c4 100644
--- a/storybook/stories/staking/StakePools.stories.js
+++ b/storybook/stories/staking/StakePools.stories.js
@@ -62,40 +62,39 @@ type Props = {
   isLoading: boolean,
 };
 
-export const StakePoolsStory = (props: Props) => {
-  const numberOfStakePools = number('Pools', 300, {
-    range: true,
-    min: 37,
-    max: 300,
-    step: 1,
-  });
-  return (
-    <StakePools
-      stakePoolsList={STAKE_POOLS.slice(0, numberOfStakePools)}
-      numberOfRankedStakePools={numberOfStakePools}
-      stakePoolsDelegatingList={[
-        STAKE_POOLS[1],
-        STAKE_POOLS[3],
-        STAKE_POOLS[20],
-        STAKE_POOLS[36],
-      ]}
-      isFetching={boolean('isFetching', false)}
-      onOpenExternalLink={action('onOpenExternalLink')}
-      currentTheme={props.currentTheme}
-      currentLocale={props.locale}
-      onDelegate={action('onDelegate')}
-      isLoading={props.isLoading}
-      isRanking={false}
-      updateDelegatingStake={() => null}
-      rankStakePools={() => null}
-      wallets={dummyWallets}
-      getStakePoolById={() => null}
-      onSmashSettingsClick={action('onSmashSettingsClick')}
-      smashServerUrl="https://smash.cardano-mainnet.iohk.io"
-      maxDelegationFunds={maxDelegationFunds}
-      filterOptions={{}}
-      populatedFilterOptions={{}}
-      onFilter={() => null}
-    />
-  );
-};
+export const StakePoolsStory = (props: Props) => (
+  <StakePools
+    stakePoolsList={STAKE_POOLS.slice(
+      0,
+      number('Pools', 300, {
+        range: true,
+        min: 37,
+        max: 300,
+        step: 1,
+      })
+    )}
+    stakePoolsDelegatingList={[
+      STAKE_POOLS[1],
+      STAKE_POOLS[3],
+      STAKE_POOLS[20],
+      STAKE_POOLS[36],
+    ]}
+    isFetching={boolean('isFetching', false)}
+    onOpenExternalLink={action('onOpenExternalLink')}
+    currentTheme={props.currentTheme}
+    currentLocale={props.locale}
+    onDelegate={action('onDelegate')}
+    isLoading={props.isLoading}
+    isRanking={false}
+    updateDelegatingStake={() => null}
+    rankStakePools={() => null}
+    wallets={dummyWallets}
+    getStakePoolById={() => null}
+    onSmashSettingsClick={action('onSmashSettingsClick')}
+    smashServerUrl="https://smash.cardano-mainnet.iohk.io"
+    maxDelegationFunds={maxDelegationFunds}
+    filterOptions={{}}
+    populatedFilterOptions={{}}
+    onFilter={() => null}
+  />
+);

From 6884d1e85791b1fe1a8e659dcbf37350c2d3fbb8 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 30 Mar 2021 05:55:28 -0400
Subject: [PATCH 26/38] [DDW-435] Update stake pools filter lables

---
 .../staking/stake-pools/FilterPopOver.js      | 91 +++++++++++--------
 source/renderer/app/i18n/locales/en-US.json   |  7 +-
 source/renderer/app/i18n/locales/ja-JP.json   |  7 +-
 source/renderer/app/stores/StakingStore.js    | 20 ++--
 source/renderer/app/utils/staking.js          | 32 ++++---
 5 files changed, 93 insertions(+), 64 deletions(-)

diff --git a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
index c55a669908..25719c1646 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
+++ b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
@@ -9,7 +9,7 @@ import SVGInline from 'react-svg-inline';
 import { PopOver } from 'react-polymorph/lib/components/PopOver';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import type { StakePoolFilterOptionsType } from '../../../stores/StakingStore';
-import { emptyStakePoolFilterOptions } from '../../../stores/StakingStore';
+import { defaultStakePoolFilterOptions } from '../../../stores/StakingStore';
 import TinyCheckbox from '../../widgets/forms/TinyCheckbox';
 import TinyButton from '../../widgets/forms/TinyButton';
 import filterIcon from '../../../assets/images/filter-dis-ic.inline.svg';
@@ -22,20 +22,25 @@ const messages = defineMessages({
     defaultMessage: '!!!Reset Filter',
     description: 'Reset Filter button label.',
   },
-  hideRetiringPools: {
-    id: 'staking.stakePools.filter.hideRetiringPools',
-    defaultMessage: '!!!Hide retiring pools',
-    description: 'Hide retiring pools filter type.',
+  publicPoolsWithOffChainData: {
+    id: 'staking.stakePools.filter.publicPoolsWithOffChainData',
+    defaultMessage: '!!!Public pools with off-chain data',
+    description: 'Public pools with off-chain data filter type.',
   },
-  hidePrivatePools: {
-    id: 'staking.stakePools.filter.hidePrivatePools',
-    defaultMessage: '!!!Hide private pools',
-    description: 'Hide private pools filter type.',
+  retiringPools: {
+    id: 'staking.stakePools.filter.retiringPools',
+    defaultMessage: '!!!Retiring pools',
+    description: 'Retiring pools filter type.',
   },
-  hidePoolsWithoutOffChainData: {
-    id: 'staking.stakePools.filter.hidePoolsWithoutOffChainData',
-    defaultMessage: '!!!Hide pools without off-chain data',
-    description: 'Hide pools without off-chain data filter type.',
+  privatePools: {
+    id: 'staking.stakePools.filter.privatePools',
+    defaultMessage: '!!!Private pools',
+    description: 'Private pools filter type.',
+  },
+  poolsWithoutOffChainData: {
+    id: 'staking.stakePools.filter.poolsWithoutOffChainData',
+    defaultMessage: '!!!Pools without off-chain data',
+    description: 'Pools without off-chain data filter type.',
   },
   apply: {
     id: 'staking.stakePools.filter.apply',
@@ -66,9 +71,10 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
 
     const {
       populatedFilterOptions: {
-        retiringPoolsHidden,
-        privatePoolsHidden,
-        poolsWithoutOffChainDataHidden,
+        publicPoolsWithOffChainData,
+        retiringPools,
+        privatePools,
+        poolsWithoutOffChainData,
       },
     } = props;
 
@@ -76,20 +82,25 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
 
     this.form = new ReactToolboxMobxForm({
       fields: {
-        retiringPoolsHidden: {
+        publicPoolsWithOffChainData: {
+          type: 'checkbox',
+          label: intl.formatMessage(messages.publicPoolsWithOffChainData),
+          value: publicPoolsWithOffChainData,
+        },
+        retiringPools: {
           type: 'checkbox',
-          label: intl.formatMessage(messages.hideRetiringPools),
-          value: retiringPoolsHidden,
+          label: intl.formatMessage(messages.retiringPools),
+          value: retiringPools,
         },
-        privatePoolsHidden: {
+        privatePools: {
           type: 'checkbox',
-          label: intl.formatMessage(messages.hidePrivatePools),
-          value: privatePoolsHidden,
+          label: intl.formatMessage(messages.privatePools),
+          value: privatePools,
         },
-        poolsWithoutOffChainDataHidden: {
+        poolsWithoutOffChainData: {
           type: 'checkbox',
-          label: intl.formatMessage(messages.hidePoolsWithoutOffChainData),
-          value: poolsWithoutOffChainDataHidden,
+          label: intl.formatMessage(messages.poolsWithoutOffChainData),
+          value: poolsWithoutOffChainData,
         },
       },
     });
@@ -97,19 +108,21 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
 
   fillFormFields = (filterOptions: StakePoolFilterOptionsType) => {
     const {
-      retiringPoolsHidden,
-      privatePoolsHidden,
-      poolsWithoutOffChainDataHidden,
+      publicPoolsWithOffChainData,
+      retiringPools,
+      privatePools,
+      poolsWithoutOffChainData,
     } = filterOptions;
 
-    this.form.select('retiringPoolsHidden').set(retiringPoolsHidden);
-    this.form.select('privatePoolsHidden').set(privatePoolsHidden);
     this.form
-      .select('poolsWithoutOffChainDataHidden')
-      .set(poolsWithoutOffChainDataHidden);
+      .select('publicPoolsWithOffChainData')
+      .set(publicPoolsWithOffChainData);
+    this.form.select('retiringPools').set(retiringPools);
+    this.form.select('privatePools').set(privatePools);
+    this.form.select('poolsWithoutOffChainData').set(poolsWithoutOffChainData);
   };
 
-  resetForm = () => this.fillFormFields(emptyStakePoolFilterOptions);
+  resetForm = () => this.fillFormFields(defaultStakePoolFilterOptions);
   restoreForm = () => this.fillFormFields(this.props.populatedFilterOptions);
 
   isFormValuesEqualTo = (comparedFilterOptions: StakePoolFilterOptionsType) => {
@@ -137,14 +150,18 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
 
   renderFields = () => {
     const { form } = this;
-    const retiringPoolsCheckboxField = form.$('retiringPoolsHidden');
-    const privatePoolsCheckboxField = form.$('privatePoolsHidden');
+    const publicPoolsWithOffChainDataCheckboxField = form.$(
+      'publicPoolsWithOffChainData'
+    );
+    const retiringPoolsCheckboxField = form.$('retiringPools');
+    const privatePoolsCheckboxField = form.$('privatePools');
     const poolsWithoutOffChainDataCheckboxField = form.$(
-      'poolsWithoutOffChainDataHidden'
+      'poolsWithoutOffChainData'
     );
 
     return (
       <div className={styles.fields}>
+        <TinyCheckbox {...publicPoolsWithOffChainDataCheckboxField.bind()} />
         <TinyCheckbox {...retiringPoolsCheckboxField.bind()} />
         <TinyCheckbox {...privatePoolsCheckboxField.bind()} />
         <TinyCheckbox {...poolsWithoutOffChainDataCheckboxField.bind()} />
@@ -221,7 +238,7 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
                   className={styles.titleLink}
                   onClick={this.resetForm}
                   disabled={this.isFormValuesEqualTo(
-                    emptyStakePoolFilterOptions
+                    defaultStakePoolFilterOptions
                   )}
                 >
                   {intl.formatMessage(messages.resetFilter)}
diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
index a4e34b669c..40ab4eb314 100755
--- a/source/renderer/app/i18n/locales/en-US.json
+++ b/source/renderer/app/i18n/locales/en-US.json
@@ -475,10 +475,11 @@
   "staking.rewards.title": "Earned delegation rewards",
   "staking.stakePools.delegatingListTitle": "Staking pools you are delegating to",
   "staking.stakePools.filter.apply": "Apply",
-  "staking.stakePools.filter.hidePoolsWithoutOffChainData": "Hide pools without off-chain data",
-  "staking.stakePools.filter.hidePrivatePools": "Hide private pools",
-  "staking.stakePools.filter.hideRetiringPools": "Hide retiring pools",
+  "staking.stakePools.filter.poolsWithoutOffChainData": "Pools without off-chain data",
+  "staking.stakePools.filter.privatePools": "Private pools",
+  "staking.stakePools.filter.publicPoolsWithOffChainData": "Public pools with off-chain data",
   "staking.stakePools.filter.resetFilter": "Reset Filter",
+  "staking.stakePools.filter.retiringPools": "Retiring pools",
   "staking.stakePools.learnMore": "Learn more",
   "staking.stakePools.listTitle": "Stake pools",
   "staking.stakePools.listTitleLoading": "Loading stake pools",
diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
index e25713ef9f..e14e04211a 100755
--- a/source/renderer/app/i18n/locales/ja-JP.json
+++ b/source/renderer/app/i18n/locales/ja-JP.json
@@ -475,10 +475,11 @@
   "staking.rewards.title": "獲得した委任報酬",
   "staking.stakePools.delegatingListTitle": "現在委任しているステークプール",
   "staking.stakePools.filter.apply": "適用する",
-  "staking.stakePools.filter.hidePoolsWithoutOffChainData": "オフチェーンデータのないプールを非表示にする",
-  "staking.stakePools.filter.hidePrivatePools": "プライベートプールを非表示にする",
-  "staking.stakePools.filter.hideRetiringPools": "終了するプールを非表示にする",
+  "staking.stakePools.filter.poolsWithoutOffChainData": "オフチェーンデータのないプール",
+  "staking.stakePools.filter.privatePools": "プライベートプール",
+  "staking.stakePools.filter.publicPoolsWithOffChainData": "オフチェーンデータのあるパブリックプール",
   "staking.stakePools.filter.resetFilter": "フィルターをリセットする",
+  "staking.stakePools.filter.retiringPools": "終了予定のプール",
   "staking.stakePools.learnMore": "もっと知る",
   "staking.stakePools.listTitle": "ステークプール",
   "staking.stakePools.listTitleLoading": "ステークプールをロード中",
diff --git a/source/renderer/app/stores/StakingStore.js b/source/renderer/app/stores/StakingStore.js
index 44b3d04c13..8a1c28be10 100644
--- a/source/renderer/app/stores/StakingStore.js
+++ b/source/renderer/app/stores/StakingStore.js
@@ -42,15 +42,17 @@ import type { RedeemItnRewardsStep } from '../types/stakingTypes';
 import type { CsvFileContent } from '../../../common/types/csv-request.types';
 
 export type StakePoolFilterOptionsType = {
-  retiringPoolsHidden?: boolean,
-  privatePoolsHidden?: boolean,
-  poolsWithoutOffChainDataHidden?: boolean,
+  publicPoolsWithOffChainData?: boolean,
+  retiringPools?: boolean,
+  privatePools?: boolean,
+  poolsWithoutOffChainData?: boolean,
 };
 
-export const emptyStakePoolFilterOptions = {
-  retiringPoolsHidden: true,
-  privatePoolsHidden: true,
-  poolsWithoutOffChainDataHidden: true,
+export const defaultStakePoolFilterOptions = {
+  publicPoolsWithOffChainData: true,
+  retiringPools: false,
+  privatePools: false,
+  poolsWithoutOffChainData: false,
 };
 
 export default class StakingStore extends Store {
@@ -541,7 +543,7 @@ export default class StakingStore extends Store {
   }
 
   @computed get populatedFilterOptions(): StakePoolFilterOptionsType {
-    return this.filterOptions || emptyStakePoolFilterOptions;
+    return this.filterOptions || defaultStakePoolFilterOptions;
   }
 
   @computed get hasAnyFiltered(): boolean {
@@ -650,7 +652,7 @@ export default class StakingStore extends Store {
   };
 
   @action _clearFilterOptions = () => {
-    this.filterOptions = emptyStakePoolFilterOptions;
+    this.filterOptions = defaultStakePoolFilterOptions;
   };
 
   // For testing only
diff --git a/source/renderer/app/utils/staking.js b/source/renderer/app/utils/staking.js
index 702099f2c9..c5d1e551dd 100644
--- a/source/renderer/app/utils/staking.js
+++ b/source/renderer/app/utils/staking.js
@@ -59,19 +59,23 @@ export const getNumberOfFilterDimensionsApplied = (
   filterOptions: ?StakePoolFilterOptionsType
 ) => {
   const {
-    retiringPoolsHidden = true,
-    privatePoolsHidden = true,
-    poolsWithoutOffChainDataHidden = true,
+    publicPoolsWithOffChainData = true,
+    retiringPools = false,
+    privatePools = false,
+    poolsWithoutOffChainData = false,
   } = filterOptions || {};
   let result = 0;
 
-  if (retiringPoolsHidden) {
+  if (publicPoolsWithOffChainData) {
     result++;
   }
-  if (privatePoolsHidden) {
+  if (retiringPools) {
     result++;
   }
-  if (poolsWithoutOffChainDataHidden) {
+  if (privatePools) {
+    result++;
+  }
+  if (poolsWithoutOffChainData) {
     result++;
   }
 
@@ -83,15 +87,19 @@ export const isStakePoolInFilterRange = (
   stakePool: StakePool
 ) => {
   const {
-    retiringPoolsHidden = true,
-    privatePoolsHidden = true,
-    poolsWithoutOffChainDataHidden = true,
+    publicPoolsWithOffChainData = true,
+    retiringPools = false,
+    privatePools = false,
+    poolsWithoutOffChainData = false,
   } = filterOptions || {};
 
   if (
-    (stakePool.isRetiring && retiringPoolsHidden) ||
-    (stakePool.isPrivate && privatePoolsHidden) ||
-    (stakePool.hasNoOffChainData && poolsWithoutOffChainDataHidden)
+    (!stakePool.hasNoOffChainData &&
+      !stakePool.isPrivate &&
+      !publicPoolsWithOffChainData) ||
+    (stakePool.isRetiring && !retiringPools) ||
+    (stakePool.isPrivate && !privatePools) ||
+    (stakePool.hasNoOffChainData && !poolsWithoutOffChainData)
   ) {
     return false;
   }

From c65f1e2bae63d98472bd44d7be3375f57a397d8a Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 30 Mar 2021 20:13:13 -0400
Subject: [PATCH 27/38] [DDW-435] Update missing props after merging develop

---
 .../app/components/staking/stake-pools/StakePoolsList.js   | 5 +++--
 .../components/staking/stake-pools/StakePoolsTableBody.js  | 7 ++++---
 .../renderer/app/components/staking/widgets/PoolPopOver.js | 2 ++
 .../renderer/app/components/staking/widgets/ThumbPool.js   | 1 +
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsList.js b/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
index f0f02548d7..23cb62cc6c 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
@@ -71,11 +71,12 @@ export const StakePoolsList = observer((props: StakePoolsListProps) => {
     return (
       <div key={key} style={style}>
         <div className={styles.tiles}>
-          {stakePools.map((stakePool, index) => (
+          {stakePools.map((stakePool, ind) => (
             <ThumbPool
               key={stakePool.id}
               stakePool={stakePool}
-              ranking={index + 1}
+              ranking={ind + 1}
+              onOpenExternalLink={props.onOpenExternalLink}
               highlightOnHover={props.highlightOnHover}
               highlightWithDelay={props.highlightWithDelay}
               showWithSelectButton={props.showWithSelectButton}
diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTableBody.js b/source/renderer/app/components/staking/stake-pools/StakePoolsTableBody.js
index 559013d5d6..4500607d4c 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsTableBody.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTableBody.js
@@ -45,7 +45,7 @@ export class StakePoolsTableBody extends Component<TableBodyProps> {
     } = this.props;
     const { intl } = this.context;
     return map(sortedStakePoolList, (stakePool, index) => {
-      const rank = index + 1;
+      const ranking = index + 1;
       const ticker = get(stakePool, 'ticker', '');
       const saturation = get(stakePool, 'saturation', '');
       const cost = new BigNumber(get(stakePool, 'cost', ''));
@@ -66,13 +66,13 @@ export class StakePoolsTableBody extends Component<TableBodyProps> {
         styles[getSaturationColor(saturation)],
       ]);
 
-      const color = getColorFromRange(rank, numberOfRankedStakePools);
+      const color = getColorFromRange(ranking, numberOfRankedStakePools);
 
       return (
         <tr key={index}>
           <td>
             {!memberRewards.isZero() ? (
-              index + 1
+              ranking
             ) : (
               <>
                 {numberOfRankedStakePools + 1}
@@ -88,6 +88,7 @@ export class StakePoolsTableBody extends Component<TableBodyProps> {
               onSelect={onSelect}
               isSelected={selectedPoolId === stakePool.id}
               stakePool={stakePool}
+              ranking={ranking}
               containerClassName={containerClassName}
               numberOfRankedStakePools={numberOfRankedStakePools}
               showWithSelectButton={showWithSelectButton}
diff --git a/source/renderer/app/components/staking/widgets/PoolPopOver.js b/source/renderer/app/components/staking/widgets/PoolPopOver.js
index a2cb0740b1..22d2093177 100644
--- a/source/renderer/app/components/staking/widgets/PoolPopOver.js
+++ b/source/renderer/app/components/staking/widgets/PoolPopOver.js
@@ -28,6 +28,7 @@ export function PoolPopOver(props: {
   openWithDelay?: boolean,
   showWithSelectButton?: boolean,
   stakePool: StakePool,
+  ranking: number,
   containerClassName: string,
   numberOfRankedStakePools: number,
   isGridRewardsView?: boolean,
@@ -89,6 +90,7 @@ export function PoolPopOver(props: {
               }}
               showWithSelectButton={props.showWithSelectButton}
               stakePool={props.stakePool}
+              ranking={props.ranking}
               isGridRewardsView={props.isGridRewardsView}
             />
           }
diff --git a/source/renderer/app/components/staking/widgets/ThumbPool.js b/source/renderer/app/components/staking/widgets/ThumbPool.js
index d9b4225ea6..504e824c9e 100644
--- a/source/renderer/app/components/staking/widgets/ThumbPool.js
+++ b/source/renderer/app/components/staking/widgets/ThumbPool.js
@@ -78,6 +78,7 @@ export function ThumbPool(props: {
         openWithDelay={props.highlightWithDelay}
         onSelect={props.onSelect}
         stakePool={stakePool}
+        ranking={ranking}
         containerClassName={props.containerClassName}
         numberOfRankedStakePools={numberOfRankedStakePools}
         showWithSelectButton={props.showWithSelectButton}

From 6306bc5fce57bc4650f5ccc39152b0c8ce44caef Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 30 Mar 2021 21:09:12 -0400
Subject: [PATCH 28/38] [DDW-435] Update stake pool ranking index handler

---
 .../staking/stake-pools/StakePoolsList.js     |   4 +-
 .../staking/widgets/ThumbPoolContent.scss     |   2 +-
 .../app/i18n/locales/defaultMessages.json     | 330 +++++-------------
 3 files changed, 91 insertions(+), 245 deletions(-)

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsList.js b/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
index 23cb62cc6c..06db4c802e 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsList.js
@@ -75,7 +75,7 @@ export const StakePoolsList = observer((props: StakePoolsListProps) => {
             <ThumbPool
               key={stakePool.id}
               stakePool={stakePool}
-              ranking={ind + 1}
+              ranking={startIndex + ind + 1}
               onOpenExternalLink={props.onOpenExternalLink}
               highlightOnHover={props.highlightOnHover}
               highlightWithDelay={props.highlightWithDelay}
@@ -107,7 +107,7 @@ export const StakePoolsList = observer((props: StakePoolsListProps) => {
             if (!stakePoolsCount || !width) {
               return null;
             }
-            const itemsPerRow = Math.ceil(
+            const itemsPerRow = Math.floor(
               width / (POOL_THUMB_SIZE + POOL_THUMB_GRID_GAP)
             );
             const rowCount = Math.ceil(stakePoolsCount / itemsPerRow);
diff --git a/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss b/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss
index 26f3a6e12f..d011f13038 100644
--- a/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss
+++ b/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss
@@ -63,9 +63,9 @@
   .rewards {
     font-size: 14px;
     font-weight: 600;
+    height: 22px;
     letter-spacing: -0.5px;
     line-height: 1.57;
-    padding: 3px 0;
     position: relative;
     text-align: center;
 
diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
index d12580f7ee..4645c94afc 100644
--- a/source/renderer/app/i18n/locales/defaultMessages.json
+++ b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -5783,59 +5783,73 @@
         }
       },
       {
-        "defaultMessage": "!!!Hide retiring pools",
-        "description": "Hide retiring pools filter type.",
+        "defaultMessage": "!!!Public pools with off-chain data",
+        "description": "Public pools with off-chain data filter type.",
         "end": {
           "column": 3,
           "line": 29
         },
         "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
-        "id": "staking.stakePools.filter.hideRetiringPools",
+        "id": "staking.stakePools.filter.publicPoolsWithOffChainData",
         "start": {
-          "column": 21,
+          "column": 31,
           "line": 25
         }
       },
       {
-        "defaultMessage": "!!!Hide private pools",
-        "description": "Hide private pools filter type.",
+        "defaultMessage": "!!!Retiring pools",
+        "description": "Retiring pools filter type.",
         "end": {
           "column": 3,
           "line": 34
         },
         "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
-        "id": "staking.stakePools.filter.hidePrivatePools",
+        "id": "staking.stakePools.filter.retiringPools",
         "start": {
-          "column": 20,
+          "column": 17,
           "line": 30
         }
       },
       {
-        "defaultMessage": "!!!Hide pools without off-chain data",
-        "description": "Hide pools without off-chain data filter type.",
+        "defaultMessage": "!!!Private pools",
+        "description": "Private pools filter type.",
         "end": {
           "column": 3,
           "line": 39
         },
         "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
-        "id": "staking.stakePools.filter.hidePoolsWithoutOffChainData",
+        "id": "staking.stakePools.filter.privatePools",
         "start": {
-          "column": 32,
+          "column": 16,
           "line": 35
         }
       },
+      {
+        "defaultMessage": "!!!Pools without off-chain data",
+        "description": "Pools without off-chain data filter type.",
+        "end": {
+          "column": 3,
+          "line": 44
+        },
+        "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
+        "id": "staking.stakePools.filter.poolsWithoutOffChainData",
+        "start": {
+          "column": 28,
+          "line": 40
+        }
+      },
       {
         "defaultMessage": "!!!Apply",
         "description": "Filter button label.",
         "end": {
           "column": 3,
-          "line": 44
+          "line": 49
         },
         "file": "source/renderer/app/components/staking/stake-pools/FilterPopOver.js",
         "id": "staking.stakePools.filter.apply",
         "start": {
           "column": 9,
-          "line": 40
+          "line": 45
         }
       }
     ],
@@ -5848,13 +5862,13 @@
         "description": "\"delegatingListTitle\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 32
+          "line": 36
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.delegatingListTitle",
         "start": {
           "column": 23,
-          "line": 28
+          "line": 32
         }
       },
       {
@@ -5862,13 +5876,13 @@
         "description": "\"listTitle\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 41
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitle",
         "start": {
           "column": 13,
-          "line": 33
+          "line": 37
         }
       },
       {
@@ -5876,13 +5890,13 @@
         "description": "\"listTitleLoading\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 46
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitleLoading",
         "start": {
           "column": 20,
-          "line": 38
+          "line": 42
         }
       },
       {
@@ -5890,13 +5904,13 @@
         "description": "\"listTitleSearch\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 47
+          "line": 51
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitleSearch",
         "start": {
           "column": 19,
-          "line": 43
+          "line": 47
         }
       },
       {
@@ -5904,13 +5918,13 @@
         "description": "\"listTitleStakePools\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 52
+          "line": 56
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitleStakePools",
         "start": {
           "column": 23,
-          "line": 48
+          "line": 52
         }
       },
       {
@@ -5918,13 +5932,13 @@
         "description": "Loading stake pool message for the Delegation center body section.",
         "end": {
           "column": 3,
-          "line": 58
+          "line": 62
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.loadingStakePoolsMessage",
         "start": {
           "column": 28,
-          "line": 53
+          "line": 57
         }
       },
       {
@@ -5932,13 +5946,13 @@
         "description": "moderatedBy message for the Delegation center body section.",
         "end": {
           "column": 3,
-          "line": 63
+          "line": 67
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.moderatedBy",
         "start": {
           "column": 15,
-          "line": 59
+          "line": 63
         }
       },
       {
@@ -5946,13 +5960,13 @@
         "description": "unmoderated message for the Delegation center body section.",
         "end": {
           "column": 3,
-          "line": 68
+          "line": 72
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.unmoderated",
         "start": {
           "column": 15,
-          "line": 64
+          "line": 68
         }
       }
     ],
@@ -6540,13 +6554,13 @@
         "description": "\"Name\" placeholder when it is empty.",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 45
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.noData",
         "start": {
           "column": 10,
-          "line": 53
+          "line": 41
         }
       },
       {
@@ -6554,21 +6568,13 @@
         "description": "\"Rank\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 62
-=======
-          "line": 45
->>>>>>> develop
+          "line": 50
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.ranking",
         "start": {
           "column": 11,
-<<<<<<< HEAD
-          "line": 58
-=======
-          "line": 41
->>>>>>> develop
+          "line": 46
         }
       },
       {
@@ -6576,21 +6582,13 @@
         "description": "\"Rank\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 68
-=======
-          "line": 51
->>>>>>> develop
+          "line": 56
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.rankingTooltip",
         "start": {
           "column": 18,
-<<<<<<< HEAD
-          "line": 63
-=======
-          "line": 46
->>>>>>> develop
+          "line": 51
         }
       },
       {
@@ -6598,21 +6596,13 @@
         "description": "\"Live stake\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 73
-=======
-          "line": 56
->>>>>>> develop
+          "line": 61
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.relativeStake",
         "start": {
           "column": 17,
-<<<<<<< HEAD
-          "line": 69
-=======
-          "line": 52
->>>>>>> develop
+          "line": 57
         }
       },
       {
@@ -6620,21 +6610,13 @@
         "description": "\"Live stake\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 79
-=======
-          "line": 62
->>>>>>> develop
+          "line": 67
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.relativeStakeTooltip",
         "start": {
           "column": 24,
-<<<<<<< HEAD
-          "line": 74
-=======
-          "line": 57
->>>>>>> develop
+          "line": 62
         }
       },
       {
@@ -6642,21 +6624,13 @@
         "description": "\"Pool margin\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 84
-=======
-          "line": 67
->>>>>>> develop
+          "line": 72
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.profitMargin",
         "start": {
           "column": 16,
-<<<<<<< HEAD
-          "line": 80
-=======
-          "line": 63
->>>>>>> develop
+          "line": 68
         }
       },
       {
@@ -6664,21 +6638,13 @@
         "description": "\"Pool margin\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 90
-=======
-          "line": 73
->>>>>>> develop
+          "line": 78
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.profitMarginTooltip",
         "start": {
           "column": 23,
-<<<<<<< HEAD
-          "line": 85
-=======
-          "line": 68
->>>>>>> develop
+          "line": 73
         }
       },
       {
@@ -6686,21 +6652,13 @@
         "description": "\"Cost per epoch\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 95
-=======
-          "line": 78
->>>>>>> develop
+          "line": 83
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.costPerEpoch",
         "start": {
           "column": 16,
-<<<<<<< HEAD
-          "line": 91
-=======
-          "line": 74
->>>>>>> develop
+          "line": 79
         }
       },
       {
@@ -6708,21 +6666,13 @@
         "description": "\"Cost per epoch\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 101
-=======
-          "line": 84
->>>>>>> develop
+          "line": 89
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.costPerEpochTooltip",
         "start": {
           "column": 23,
-<<<<<<< HEAD
-          "line": 96
-=======
-          "line": 79
->>>>>>> develop
+          "line": 84
         }
       },
       {
@@ -6730,21 +6680,13 @@
         "description": "\"Blocks\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 106
-=======
-          "line": 89
->>>>>>> develop
+          "line": 94
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.producedBlocks",
         "start": {
           "column": 18,
-<<<<<<< HEAD
-          "line": 102
-=======
-          "line": 85
->>>>>>> develop
+          "line": 90
         }
       },
       {
@@ -6752,21 +6694,13 @@
         "description": "\"Blocks\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 112
-=======
-          "line": 95
->>>>>>> develop
+          "line": 100
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.producedBlocksTooltip",
         "start": {
           "column": 25,
-<<<<<<< HEAD
-          "line": 107
-=======
-          "line": 90
->>>>>>> develop
+          "line": 95
         }
       },
       {
@@ -6774,21 +6708,13 @@
         "description": "\"Rewards\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 117
-=======
-          "line": 100
->>>>>>> develop
+          "line": 105
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.potentialRewards",
         "start": {
           "column": 20,
-<<<<<<< HEAD
-          "line": 113
-=======
-          "line": 96
->>>>>>> develop
+          "line": 101
         }
       },
       {
@@ -6796,21 +6722,13 @@
         "description": "\"Rewards\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 123
-=======
-          "line": 106
->>>>>>> develop
+          "line": 111
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.potentialRewardsTooltip",
         "start": {
           "column": 27,
-<<<<<<< HEAD
-          "line": 118
-=======
-          "line": 101
->>>>>>> develop
+          "line": 106
         }
       },
       {
@@ -6818,21 +6736,13 @@
         "description": "\"Retirement\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 128
-=======
-          "line": 111
->>>>>>> develop
+          "line": 116
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.retirement",
         "start": {
           "column": 14,
-<<<<<<< HEAD
-          "line": 124
-=======
-          "line": 107
->>>>>>> develop
+          "line": 112
         }
       },
       {
@@ -6840,21 +6750,13 @@
         "description": "\"Saturation\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 133
-=======
-          "line": 116
->>>>>>> develop
+          "line": 121
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.saturation",
         "start": {
           "column": 14,
-<<<<<<< HEAD
-          "line": 129
-=======
-          "line": 112
->>>>>>> develop
+          "line": 117
         }
       },
       {
@@ -6862,21 +6764,13 @@
         "description": "\"Saturation\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 139
-=======
-          "line": 122
->>>>>>> develop
+          "line": 127
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.saturationTooltip",
         "start": {
           "column": 21,
-<<<<<<< HEAD
-          "line": 134
-=======
-          "line": 117
->>>>>>> develop
+          "line": 122
         }
       },
       {
@@ -6884,21 +6778,13 @@
         "description": "\"Pledge\" for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 144
-=======
-          "line": 127
->>>>>>> develop
+          "line": 132
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.pledge",
         "start": {
           "column": 10,
-<<<<<<< HEAD
-          "line": 140
-=======
-          "line": 123
->>>>>>> develop
+          "line": 128
         }
       },
       {
@@ -6906,21 +6792,13 @@
         "description": "\"Pledge\" tooltip for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 150
-=======
-          "line": 133
->>>>>>> develop
+          "line": 138
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.pledgeTooltip",
         "start": {
           "column": 17,
-<<<<<<< HEAD
-          "line": 145
-=======
-          "line": 128
->>>>>>> develop
+          "line": 133
         }
       },
       {
@@ -6928,21 +6806,13 @@
         "description": "\"Delegate to this pool\" Button for the Stake Pools Tooltip page.",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 156
-=======
-          "line": 139
->>>>>>> develop
+          "line": 144
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.delegateButton",
         "start": {
           "column": 18,
-<<<<<<< HEAD
-          "line": 151
-=======
-          "line": 134
->>>>>>> develop
+          "line": 139
         }
       },
       {
@@ -6950,21 +6820,13 @@
         "description": "Experimental tooltip label",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 161
-=======
-          "line": 144
->>>>>>> develop
+          "line": 149
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.experimentalTooltipLabel",
         "start": {
           "column": 28,
-<<<<<<< HEAD
-          "line": 157
-=======
-          "line": 140
->>>>>>> develop
+          "line": 145
         }
       },
       {
@@ -6972,21 +6834,13 @@
         "description": "copyId tooltip label",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 166
-=======
-          "line": 149
->>>>>>> develop
+          "line": 154
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.tooltip.copyIdTooltipLabel",
         "start": {
           "column": 22,
-<<<<<<< HEAD
-          "line": 162
-=======
-          "line": 145
->>>>>>> develop
+          "line": 150
         }
       },
       {
@@ -6994,21 +6848,13 @@
         "description": "Data not available yet label",
         "end": {
           "column": 3,
-<<<<<<< HEAD
-          "line": 171
-=======
-          "line": 154
->>>>>>> develop
+          "line": 159
         },
         "file": "source/renderer/app/components/staking/widgets/TooltipPool.js",
         "id": "staking.stakePools.noDataDashTooltip",
         "start": {
           "column": 26,
-<<<<<<< HEAD
-          "line": 167
-=======
-          "line": 150
->>>>>>> develop
+          "line": 155
         }
       }
     ],

From d849ace8d393bf759902fafd508fa6705670b727 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 30 Mar 2021 21:14:19 -0400
Subject: [PATCH 29/38] [DDW-435] Fix stake pool tile style

---
 .../app/components/staking/widgets/ThumbPoolContent.scss        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss b/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss
index d011f13038..94189342b0 100644
--- a/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss
+++ b/source/renderer/app/components/staking/widgets/ThumbPoolContent.scss
@@ -87,7 +87,7 @@
   .noDataDash {
     align-items: center;
     display: flex;
-    height: 27px;
+    height: 22px;
     justify-content: center;
 
     :global {

From 2340db7d15c902524d62b997424769db615360e7 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 30 Mar 2021 22:10:15 -0400
Subject: [PATCH 30/38] [DDW-435] Adjust stake pool filter popover style

---
 .../app/components/staking/stake-pools/FilterPopOver.js        | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
index 25719c1646..05c596759c 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
+++ b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
@@ -197,6 +197,9 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
         appendTo={document.body}
         onShow={(instance) => {
           this.popoverTippyInstance.current = instance;
+          setTimeout(() => {
+            instance.popper.style.transform = 'translate(-11px, 0)';
+          }, 0);
           this.isSubmitClicked = false;
         }}
         onHide={() => {

From 7995c229882bd61641ee45b67c04f2f715a7405c Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 30 Mar 2021 22:19:21 -0400
Subject: [PATCH 31/38] [DDW-435] Fix stake pool list view style

---
 .../app/components/staking/stake-pools/StakePoolsTable.scss     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss
index da4de43c19..229e86a44b 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss
@@ -105,7 +105,7 @@
       padding: 0 20px;
       position: sticky;
       top: 0;
-      z-index: 999;
+      z-index: 99;
 
       tr {
         border: 0;

From e8303bc7bd5e24c2dab9575e97ae96079214c5ef Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Tue, 30 Mar 2021 23:09:35 -0400
Subject: [PATCH 32/38] [DDW-435] Add empty filter warning

---
 .../staking/stake-pools/FilterPopOver.js      |  2 +-
 .../staking/stake-pools/StakePools.js         | 49 +++++++++++++------
 source/renderer/app/i18n/global-messages.js   |  5 ++
 source/renderer/app/i18n/locales/en-US.json   |  2 +
 source/renderer/app/i18n/locales/ja-JP.json   |  2 +
 5 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
index 05c596759c..5609944653 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
+++ b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
@@ -234,7 +234,7 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
           <div className={styles.component}>
             <div className={styles.title}>
               <h4 className={styles.titleText}>
-                {intl.formatMessage(globalMessages.filter)}
+                {intl.formatMessage(globalMessages.show)}
               </h4>
               <div>
                 <button
diff --git a/source/renderer/app/components/staking/stake-pools/StakePools.js b/source/renderer/app/components/staking/stake-pools/StakePools.js
index 170753c78c..e32a3420f2 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePools.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePools.js
@@ -70,6 +70,12 @@ const messages = defineMessages({
     defaultMessage: '!!!Unmoderated',
     description: 'unmoderated message for the Delegation center body section.',
   },
+  emptyFilterWarning: {
+    id: 'staking.stakePools.filter.emptyFilterWarning',
+    defaultMessage:
+      '!!!Please select at least one category in the filter or reset filter.',
+    description: 'Empty filter warning',
+  },
 });
 
 const SELECTED_INDEX_TABLE = 'selectedIndexTable';
@@ -213,7 +219,8 @@ export default class StakePools extends Component<Props, State> {
     ).length;
 
     const isFilterDisabled =
-      !filteredStakePoolsList.length && !numberOfFilterDimensionsApplied;
+      !filteredStakePoolsList.length &&
+      numberOfFilterDimensionsApplied === Object.keys(filterOptions).length;
 
     const listTitleMessage = isFetching
       ? messages.listTitleLoading
@@ -338,13 +345,19 @@ export default class StakePools extends Component<Props, State> {
               <Fragment>
                 <h2>
                   <span className={styles.leftContent}>
-                    <span>
-                      {intl.formatMessage(listTitleMessage)}
-                      {listTitleSearchMessage}
-                      {intl.formatMessage(messages.listTitleStakePools, {
-                        pools: formattedNumber(filteredStakePoolsList.length),
-                      })}
-                    </span>
+                    {numberOfFilterDimensionsApplied === 0 ? (
+                      <span>
+                        {intl.formatMessage(messages.emptyFilterWarning)}
+                      </span>
+                    ) : (
+                      <span>
+                        {intl.formatMessage(listTitleMessage)}
+                        {listTitleSearchMessage}
+                        {intl.formatMessage(messages.listTitleStakePools, {
+                          pools: formattedNumber(filteredStakePoolsList.length),
+                        })}
+                      </span>
+                    )}
                     {tinyLoadingSpinner}
                   </span>
                   {smashSettings}
@@ -370,13 +383,19 @@ export default class StakePools extends Component<Props, State> {
               <Fragment>
                 <h2>
                   <span className={styles.leftContent}>
-                    <span>
-                      {intl.formatMessage(listTitleMessage)}
-                      {listTitleSearchMessage}
-                      {intl.formatMessage(messages.listTitleStakePools, {
-                        pools: formattedNumber(filteredStakePoolsList.length),
-                      })}
-                    </span>
+                    {numberOfFilterDimensionsApplied === 0 ? (
+                      <span>
+                        {intl.formatMessage(messages.emptyFilterWarning)}
+                      </span>
+                    ) : (
+                      <span>
+                        {intl.formatMessage(listTitleMessage)}
+                        {listTitleSearchMessage}
+                        {intl.formatMessage(messages.listTitleStakePools, {
+                          pools: formattedNumber(filteredStakePoolsList.length),
+                        })}
+                      </span>
+                    )}
                     {tinyLoadingSpinner}
                   </span>
                   {smashSettings}
diff --git a/source/renderer/app/i18n/global-messages.js b/source/renderer/app/i18n/global-messages.js
index 8f24f0faa8..5a2c11b70b 100644
--- a/source/renderer/app/i18n/global-messages.js
+++ b/source/renderer/app/i18n/global-messages.js
@@ -109,6 +109,11 @@ export default defineMessages({
     defaultMessage: '!!!Save',
     description: 'The word "save" reused at several places (like save buttons)',
   },
+  show: {
+    id: 'global.labels.show',
+    defaultMessage: '!!!Show',
+    description: 'The word "show" reused at several places (like save buttons)',
+  },
   languageEnglish: {
     id: 'global.language.english',
     defaultMessage: '!!!English',
diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
index 4bb48afcc2..1874c72258 100755
--- a/source/renderer/app/i18n/locales/en-US.json
+++ b/source/renderer/app/i18n/locales/en-US.json
@@ -152,6 +152,7 @@
   "global.labels.reset": "Reset",
   "global.labels.reveal": "Reveal",
   "global.labels.save": "Save",
+  "global.labels.show": "Show",
   "global.labels.token": "Token",
   "global.language.chinese": "Chinese",
   "global.language.croatian": "Croatian",
@@ -482,6 +483,7 @@
   "staking.rewards.title": "Earned delegation rewards",
   "staking.stakePools.delegatingListTitle": "Staking pools you are delegating to",
   "staking.stakePools.filter.apply": "Apply",
+  "staking.stakePools.filter.emptyFilterWarning": "Please select at least one category in the filter or reset filter.",
   "staking.stakePools.filter.poolsWithoutOffChainData": "Pools without off-chain data",
   "staking.stakePools.filter.privatePools": "Private pools",
   "staking.stakePools.filter.publicPoolsWithOffChainData": "Public pools with off-chain data",
diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
index 0d28f0d50c..a00e3efeb2 100755
--- a/source/renderer/app/i18n/locales/ja-JP.json
+++ b/source/renderer/app/i18n/locales/ja-JP.json
@@ -152,6 +152,7 @@
   "global.labels.reset": "リセット",
   "global.labels.reveal": "表示する",
   "global.labels.save": "保存する",
+  "global.labels.show": "表示する",
   "global.labels.token": "トークン",
   "global.language.chinese": "中国語",
   "global.language.croatian": "クロアチア語",
@@ -482,6 +483,7 @@
   "staking.rewards.title": "獲得した委任報酬",
   "staking.stakePools.delegatingListTitle": "現在委任しているステークプール",
   "staking.stakePools.filter.apply": "適用する",
+  "staking.stakePools.filter.emptyFilterWarning": "!!!Please select at least one category in the filter or reset filter.",
   "staking.stakePools.filter.poolsWithoutOffChainData": "オフチェーンデータのないプール",
   "staking.stakePools.filter.privatePools": "プライベートプール",
   "staking.stakePools.filter.publicPoolsWithOffChainData": "オフチェーンデータのあるパブリックプール",

From 409f3af453637a46035843ce1e4d720c335f8d4c Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Wed, 31 Mar 2021 04:03:24 -0400
Subject: [PATCH 33/38] [DDW-435] Fix missing props

---
 .../staking/delegation-center/WalletRow.js    |   1 +
 .../DelegationStepsChooseStakePoolDialog.js   |   1 +
 .../app/i18n/locales/defaultMessages.json     | 200 ++++++++++--------
 3 files changed, 116 insertions(+), 86 deletions(-)

diff --git a/source/renderer/app/components/staking/delegation-center/WalletRow.js b/source/renderer/app/components/staking/delegation-center/WalletRow.js
index b448f6417f..3d7ac247b7 100644
--- a/source/renderer/app/components/staking/delegation-center/WalletRow.js
+++ b/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}
diff --git a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
index 02cb5fde4f..81ccdd84ab 100644
--- a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
+++ b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsChooseStakePoolDialog.js
@@ -404,6 +404,7 @@ export default class DelegationStepsChooseStakePoolDialog extends Component<
           <div className={styles.selectStakePoolWrapper}>
             <ThumbSelectedPool
               stakePool={selectedPool}
+              ranking={selectedPool.ranking}
               numberOfRankedStakePools={numberOfRankedStakePools}
               alreadyDelegated={selectedPool && !canSubmit}
             />
diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
index 4645c94afc..ac9082e41a 100644
--- a/source/renderer/app/i18n/locales/defaultMessages.json
+++ b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -5968,6 +5968,20 @@
           "column": 15,
           "line": 68
         }
+      },
+      {
+        "defaultMessage": "!!!Please select at least one category in the filter or reset filter.",
+        "description": "Empty filter warning",
+        "end": {
+          "column": 3,
+          "line": 78
+        },
+        "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
+        "id": "staking.stakePools.filter.emptyFilterWarning",
+        "start": {
+          "column": 22,
+          "line": 73
+        }
       }
     ],
     "path": "source/renderer/app/components/staking/stake-pools/StakePools.json"
@@ -17314,18 +17328,32 @@
           "line": 107
         }
       },
+      {
+        "defaultMessage": "!!!Show",
+        "description": "The word \"show\" reused at several places (like save buttons)",
+        "end": {
+          "column": 3,
+          "line": 116
+        },
+        "file": "source/renderer/app/i18n/global-messages.js",
+        "id": "global.labels.show",
+        "start": {
+          "column": 8,
+          "line": 112
+        }
+      },
       {
         "defaultMessage": "!!!English",
         "description": "Language name for \"English\" language.",
         "end": {
           "column": 3,
-          "line": 116
+          "line": 121
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.language.english",
         "start": {
           "column": 19,
-          "line": 112
+          "line": 117
         }
       },
       {
@@ -17333,13 +17361,13 @@
         "description": "Language name for \"Japanese\" language.",
         "end": {
           "column": 3,
-          "line": 121
+          "line": 126
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.language.japanese",
         "start": {
           "column": 20,
-          "line": 117
+          "line": 122
         }
       },
       {
@@ -17347,13 +17375,13 @@
         "description": "Language name for \"Chinese\" language.",
         "end": {
           "column": 3,
-          "line": 126
+          "line": 131
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.language.chinese",
         "start": {
           "column": 19,
-          "line": 122
+          "line": 127
         }
       },
       {
@@ -17361,13 +17389,13 @@
         "description": "Language name for \"Korean\" language.",
         "end": {
           "column": 3,
-          "line": 131
+          "line": 136
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.language.korean",
         "start": {
           "column": 18,
-          "line": 127
+          "line": 132
         }
       },
       {
@@ -17375,13 +17403,13 @@
         "description": "Language name for \"German\" language.",
         "end": {
           "column": 3,
-          "line": 136
+          "line": 141
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.language.german",
         "start": {
           "column": 18,
-          "line": 132
+          "line": 137
         }
       },
       {
@@ -17389,13 +17417,13 @@
         "description": "Language name for \"Croatian\" language.",
         "end": {
           "column": 3,
-          "line": 141
+          "line": 146
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.language.croatian",
         "start": {
           "column": 20,
-          "line": 137
+          "line": 142
         }
       },
       {
@@ -17403,13 +17431,13 @@
         "description": "Colon punctuation.",
         "end": {
           "column": 3,
-          "line": 146
+          "line": 151
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.punctuation.colon",
         "start": {
           "column": 20,
-          "line": 142
+          "line": 147
         }
       },
       {
@@ -17417,13 +17445,13 @@
         "description": "Final dot punctuation.",
         "end": {
           "column": 3,
-          "line": 151
+          "line": 156
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.punctuation.dot",
         "start": {
           "column": 18,
-          "line": 147
+          "line": 152
         }
       },
       {
@@ -17431,13 +17459,13 @@
         "description": "Name for \"ADA\" unit.",
         "end": {
           "column": 3,
-          "line": 156
+          "line": 161
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.unit.ada",
         "start": {
           "column": 11,
-          "line": 152
+          "line": 157
         }
       },
       {
@@ -17445,13 +17473,13 @@
         "description": "Title for the \"Recovery Phrase\" dialog.",
         "end": {
           "column": 3,
-          "line": 161
+          "line": 166
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "wallet.backup.recovery.phrase.dialog.title",
         "start": {
           "column": 29,
-          "line": 157
+          "line": 162
         }
       },
       {
@@ -17459,13 +17487,13 @@
         "description": "Label for the \"Wallet password\" input in the create wallet dialog.",
         "end": {
           "column": 3,
-          "line": 167
+          "line": 172
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.spendingPasswordLabel",
         "start": {
           "column": 25,
-          "line": 162
+          "line": 167
         }
       },
       {
@@ -17473,13 +17501,13 @@
         "description": "Placeholder for the \"Password\" inputs in the create wallet dialog.",
         "end": {
           "column": 3,
-          "line": 173
+          "line": 178
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.spendingPasswordPlaceholder",
         "start": {
           "column": 31,
-          "line": 168
+          "line": 173
         }
       },
       {
@@ -17487,13 +17515,13 @@
         "description": "Label \"Continue\" in dialogs.",
         "end": {
           "column": 3,
-          "line": 178
+          "line": 183
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.dialog.button.continue",
         "start": {
           "column": 29,
-          "line": 174
+          "line": 179
         }
       },
       {
@@ -17501,13 +17529,13 @@
         "description": "URL for the \"Known Issues\" link in the \"Help and support\" section on the support settings page",
         "end": {
           "column": 3,
-          "line": 185
+          "line": 190
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "settings.support.faq.faqLinkURL",
         "start": {
           "column": 14,
-          "line": 179
+          "line": 184
         }
       },
       {
@@ -17515,13 +17543,13 @@
         "description": "Name for \"Ada\" unit.",
         "end": {
           "column": 3,
-          "line": 190
+          "line": 195
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "environment.currency.ada",
         "start": {
           "column": 12,
-          "line": 186
+          "line": 191
         }
       },
       {
@@ -17529,13 +17557,13 @@
         "description": "Name for \"Cardano\" client.",
         "end": {
           "column": 3,
-          "line": 195
+          "line": 200
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "environment.apiName.cardano",
         "start": {
           "column": 11,
-          "line": 191
+          "line": 196
         }
       },
       {
@@ -17543,13 +17571,13 @@
         "description": "\"mainnet\" Cardano network",
         "end": {
           "column": 3,
-          "line": 200
+          "line": 205
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "environment.network.mainnet",
         "start": {
           "column": 19,
-          "line": 196
+          "line": 201
         }
       },
       {
@@ -17557,13 +17585,13 @@
         "description": "\"staging\" Cardano network",
         "end": {
           "column": 3,
-          "line": 205
+          "line": 210
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "environment.network.staging",
         "start": {
           "column": 19,
-          "line": 201
+          "line": 206
         }
       },
       {
@@ -17571,13 +17599,13 @@
         "description": "\"testnet\" Cardano network",
         "end": {
           "column": 3,
-          "line": 210
+          "line": 215
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "environment.network.testnet",
         "start": {
           "column": 19,
-          "line": 206
+          "line": 211
         }
       },
       {
@@ -17585,13 +17613,13 @@
         "description": "\"Shelley Testnet\" Cardano network",
         "end": {
           "column": 3,
-          "line": 215
+          "line": 220
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "environment.network.shelley_testnet",
         "start": {
           "column": 27,
-          "line": 211
+          "line": 216
         }
       },
       {
@@ -17599,13 +17627,13 @@
         "description": "\"Shelley QA\" Cardano network",
         "end": {
           "column": 3,
-          "line": 220
+          "line": 225
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "environment.network.shelley_qa",
         "start": {
           "column": 22,
-          "line": 216
+          "line": 221
         }
       },
       {
@@ -17613,13 +17641,13 @@
         "description": "\"development\" Cardano network",
         "end": {
           "column": 3,
-          "line": 225
+          "line": 230
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "environment.network.development",
         "start": {
           "column": 23,
-          "line": 221
+          "line": 226
         }
       },
       {
@@ -17627,13 +17655,13 @@
         "description": "\"itn_rewards_v1\" Cardano network",
         "end": {
           "column": 3,
-          "line": 230
+          "line": 235
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "environment.network.itn_rewards_v1",
         "start": {
           "column": 26,
-          "line": 226
+          "line": 231
         }
       },
       {
@@ -17641,13 +17669,13 @@
         "description": "\"itn_selfnode\" Cardano network",
         "end": {
           "column": 3,
-          "line": 235
+          "line": 240
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "environment.network.itn_selfnode",
         "start": {
           "column": 24,
-          "line": 231
+          "line": 236
         }
       },
       {
@@ -17655,13 +17683,13 @@
         "description": "\"selfnode\" Cardano network",
         "end": {
           "column": 3,
-          "line": 240
+          "line": 245
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "environment.network.selfnode",
         "start": {
           "column": 20,
-          "line": 236
+          "line": 241
         }
       },
       {
@@ -17669,13 +17697,13 @@
         "description": "\"qa\" Cardano network",
         "end": {
           "column": 3,
-          "line": 245
+          "line": 250
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "environment.network.qa",
         "start": {
           "column": 14,
-          "line": 241
+          "line": 246
         }
       },
       {
@@ -17683,13 +17711,13 @@
         "description": "\"nightly\" Cardano network",
         "end": {
           "column": 3,
-          "line": 250
+          "line": 255
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "environment.network.nightly",
         "start": {
           "column": 19,
-          "line": 246
+          "line": 251
         }
       },
       {
@@ -17697,13 +17725,13 @@
         "description": "Label for years value in duration.",
         "end": {
           "column": 3,
-          "line": 255
+          "line": 260
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.duration.years",
         "start": {
           "column": 9,
-          "line": 251
+          "line": 256
         }
       },
       {
@@ -17711,13 +17739,13 @@
         "description": "Label for months value in duration.",
         "end": {
           "column": 3,
-          "line": 260
+          "line": 265
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.duration.months",
         "start": {
           "column": 10,
-          "line": 256
+          "line": 261
         }
       },
       {
@@ -17725,13 +17753,13 @@
         "description": "Label for days value in duration.",
         "end": {
           "column": 3,
-          "line": 265
+          "line": 270
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.duration.days",
         "start": {
           "column": 8,
-          "line": 261
+          "line": 266
         }
       },
       {
@@ -17739,13 +17767,13 @@
         "description": "Label for hours value in duration.",
         "end": {
           "column": 3,
-          "line": 270
+          "line": 275
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.duration.hours",
         "start": {
           "column": 9,
-          "line": 266
+          "line": 271
         }
       },
       {
@@ -17753,13 +17781,13 @@
         "description": "Label for minutes value in duration.",
         "end": {
           "column": 3,
-          "line": 275
+          "line": 280
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.duration.minutes",
         "start": {
           "column": 11,
-          "line": 271
+          "line": 276
         }
       },
       {
@@ -17767,13 +17795,13 @@
         "description": "Label for seconds value in duration.",
         "end": {
           "column": 3,
-          "line": 280
+          "line": 285
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.duration.seconds",
         "start": {
           "column": 11,
-          "line": 276
+          "line": 281
         }
       },
       {
@@ -17781,13 +17809,13 @@
         "description": "From label of range.",
         "end": {
           "column": 3,
-          "line": 285
+          "line": 290
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.range.from",
         "start": {
           "column": 13,
-          "line": 281
+          "line": 286
         }
       },
       {
@@ -17795,13 +17823,13 @@
         "description": "To label of range.",
         "end": {
           "column": 3,
-          "line": 290
+          "line": 295
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.range.to",
         "start": {
           "column": 11,
-          "line": 286
+          "line": 291
         }
       },
       {
@@ -17809,13 +17837,13 @@
         "description": "Filter label.",
         "end": {
           "column": 3,
-          "line": 295
+          "line": 300
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.labels.filter",
         "start": {
           "column": 10,
-          "line": 291
+          "line": 296
         }
       },
       {
@@ -17823,13 +17851,13 @@
         "description": "All label.",
         "end": {
           "column": 3,
-          "line": 300
+          "line": 305
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.labels.all",
         "start": {
           "column": 7,
-          "line": 296
+          "line": 301
         }
       },
       {
@@ -17837,13 +17865,13 @@
         "description": "Reset label.",
         "end": {
           "column": 3,
-          "line": 305
+          "line": 310
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.labels.reset",
         "start": {
           "column": 9,
-          "line": 301
+          "line": 306
         }
       },
       {
@@ -17851,13 +17879,13 @@
         "description": "Token description.",
         "end": {
           "column": 3,
-          "line": 310
+          "line": 315
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.labels.token",
         "start": {
           "column": 9,
-          "line": 306
+          "line": 311
         }
       },
       {
@@ -17865,13 +17893,13 @@
         "description": "Reveal label.",
         "end": {
           "column": 3,
-          "line": 315
+          "line": 320
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.labels.reveal",
         "start": {
           "column": 10,
-          "line": 311
+          "line": 316
         }
       },
       {
@@ -17879,13 +17907,13 @@
         "description": "Hide label.",
         "end": {
           "column": 3,
-          "line": 320
+          "line": 325
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.labels.hide",
         "start": {
           "column": 8,
-          "line": 316
+          "line": 321
         }
       },
       {
@@ -17893,13 +17921,13 @@
         "description": "Copy label.",
         "end": {
           "column": 3,
-          "line": 325
+          "line": 330
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.labels.copy",
         "start": {
           "column": 8,
-          "line": 321
+          "line": 326
         }
       },
       {
@@ -17907,13 +17935,13 @@
         "description": "Info message displayed for features which are unavailable while Daedalus is syncing",
         "end": {
           "column": 3,
-          "line": 332
+          "line": 337
         },
         "file": "source/renderer/app/i18n/global-messages.js",
         "id": "global.info.featureUnavailableWhileSyncing",
         "start": {
           "column": 34,
-          "line": 326
+          "line": 331
         }
       }
     ],

From 8f77cd46ad35db15b6e592b296384ce00fce5f0f Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Wed, 31 Mar 2021 05:58:44 -0400
Subject: [PATCH 34/38] [DDW-435] Fix stake pools filter behavior

---
 .../staking/stake-pools/FilterPopOver.js      |  9 +--
 .../staking/stake-pools/StakePools.js         | 68 +++++++++++++++----
 .../staking/stake-pools/StakePools.scss       | 24 ++++++-
 source/renderer/app/i18n/locales/en-US.json   |  3 +-
 source/renderer/app/i18n/locales/ja-JP.json   |  5 +-
 5 files changed, 84 insertions(+), 25 deletions(-)

diff --git a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
index 5609944653..2bfe4c9266 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
+++ b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
@@ -64,7 +64,6 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
 
   form: ReactToolboxMobxForm;
   popoverTippyInstance: ElementRef<*> = createRef();
-  isSubmitClicked = false;
 
   constructor(props: FilterPopOverProps, context: Object) {
     super(props);
@@ -142,7 +141,6 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
       },
       onError: () => null,
     });
-    this.isSubmitClicked = true;
     if (this.popoverTippyInstance.current) {
       this.popoverTippyInstance.current.hide();
     }
@@ -196,16 +194,11 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
         trigger="click"
         appendTo={document.body}
         onShow={(instance) => {
+          this.restoreForm();
           this.popoverTippyInstance.current = instance;
           setTimeout(() => {
             instance.popper.style.transform = 'translate(-11px, 0)';
           }, 0);
-          this.isSubmitClicked = false;
-        }}
-        onHide={() => {
-          if (!this.isSubmitClicked) {
-            this.restoreForm();
-          }
         }}
         duration={0}
         offset={[0, 10]}
diff --git a/source/renderer/app/components/staking/stake-pools/StakePools.js b/source/renderer/app/components/staking/stake-pools/StakePools.js
index e32a3420f2..15ff2e9bc6 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePools.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePools.js
@@ -4,6 +4,7 @@ import SVGInline from 'react-svg-inline';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import classnames from 'classnames';
+import { Link } from 'react-polymorph/lib/components/Link';
 import { StakingPageScrollContext } from '../layouts/StakingWithNavigation';
 import StakePoolsRanking from './StakePoolsRanking';
 import { StakePoolsList } from './StakePoolsList';
@@ -20,6 +21,7 @@ import {
   getSmashServerNameFromUrl,
 } from '../../../utils/staking';
 import type { StakePoolFilterOptionsType } from '../../../stores/StakingStore';
+import { defaultStakePoolFilterOptions } from '../../../stores/StakingStore';
 import StakePool from '../../../domains/StakePool';
 import {
   IS_RANKING_DATA_AVAILABLE,
@@ -70,11 +72,20 @@ const messages = defineMessages({
     defaultMessage: '!!!Unmoderated',
     description: 'unmoderated message for the Delegation center body section.',
   },
-  emptyFilterWarning: {
-    id: 'staking.stakePools.filter.emptyFilterWarning',
-    defaultMessage:
-      '!!!Please select at least one category in the filter or reset filter.',
-    description: 'Empty filter warning',
+  emptyFilterWarningPrefix: {
+    id: 'staking.stakePools.filter.emptyFilterWarningPrefix',
+    defaultMessage: '!!!Please select at least one category in the filter or',
+    description: 'Empty filter warning prefix',
+  },
+  emptyFilterWarningSuffix: {
+    id: 'staking.stakePools.filter.emptyFilterWarningSuffix',
+    defaultMessage: '!!!.',
+    description: 'Empty filter warning suffix',
+  },
+  resetFilter: {
+    id: 'staking.stakePools.filter.resetFilter',
+    defaultMessage: '!!!Reset Filter',
+    description: 'Reset Filter link label',
   },
 });
 
@@ -172,6 +183,11 @@ export default class StakePools extends Component<Props, State> {
     onDelegate(poolId);
   };
 
+  resetFilter = () => {
+    const { onFilter } = this.props;
+    onFilter(defaultStakePoolFilterOptions);
+  };
+
   render() {
     const { intl } = this.context;
     const {
@@ -317,7 +333,7 @@ export default class StakePools extends Component<Props, State> {
               <Fragment>
                 <h2 className={styles.listTitle}>
                   <span className={styles.leftContent}>
-                    <span>
+                    <span className={styles.blurText}>
                       {intl.formatMessage(messages.delegatingListTitle)}
                     </span>
                   </span>
@@ -346,11 +362,25 @@ export default class StakePools extends Component<Props, State> {
                 <h2>
                   <span className={styles.leftContent}>
                     {numberOfFilterDimensionsApplied === 0 ? (
-                      <span>
-                        {intl.formatMessage(messages.emptyFilterWarning)}
+                      <span className={styles.emptyFilterWarning}>
+                        <span className={styles.blurText}>
+                          {intl.formatMessage(
+                            messages.emptyFilterWarningPrefix
+                          )}
+                        </span>
+                        <Link
+                          className={styles.resetFilter}
+                          onClick={this.resetFilter}
+                          label={intl.formatMessage(messages.resetFilter)}
+                        />
+                        <span className={styles.blurText}>
+                          {intl.formatMessage(
+                            messages.emptyFilterWarningSuffix
+                          )}
+                        </span>
                       </span>
                     ) : (
-                      <span>
+                      <span className={styles.blurText}>
                         {intl.formatMessage(listTitleMessage)}
                         {listTitleSearchMessage}
                         {intl.formatMessage(messages.listTitleStakePools, {
@@ -384,11 +414,25 @@ export default class StakePools extends Component<Props, State> {
                 <h2>
                   <span className={styles.leftContent}>
                     {numberOfFilterDimensionsApplied === 0 ? (
-                      <span>
-                        {intl.formatMessage(messages.emptyFilterWarning)}
+                      <span className={styles.emptyFilterWarning}>
+                        <span className={styles.blurText}>
+                          {intl.formatMessage(
+                            messages.emptyFilterWarningPrefix
+                          )}
+                        </span>
+                        <Link
+                          className={styles.resetFilter}
+                          onClick={this.resetFilter}
+                          label={intl.formatMessage(messages.resetFilter)}
+                        />
+                        <span className={styles.blurText}>
+                          {intl.formatMessage(
+                            messages.emptyFilterWarningSuffix
+                          )}
+                        </span>
                       </span>
                     ) : (
-                      <span>
+                      <span className={styles.blurText}>
                         {intl.formatMessage(listTitleMessage)}
                         {listTitleSearchMessage}
                         {intl.formatMessage(messages.listTitleStakePools, {
diff --git a/source/renderer/app/components/staking/stake-pools/StakePools.scss b/source/renderer/app/components/staking/stake-pools/StakePools.scss
index 54b0c61432..e3e4876224 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePools.scss
+++ b/source/renderer/app/components/staking/stake-pools/StakePools.scss
@@ -35,9 +35,29 @@
   }
 
   .leftContent {
-    > span:first-child {
+    align-items: center;
+    display: flex;
+
+    .blurText {
       opacity: 0.5;
     }
+
+    .emptyFilterWarning {
+      align-items: center;
+      display: flex;
+
+      .resetFilter {
+        border-top: 1px solid transparent;
+        font-size: 16px;
+        height: 22px;
+        margin: 0 5px;
+        text-transform: lowercase;
+
+        &::after {
+          display: none;
+        }
+      }
+    }
   }
 
   .smashSettings {
@@ -70,7 +90,7 @@
   }
   .tinySpinner {
     display: inline-block;
-    margin: -5px 0 0 6px;
+    margin-left: 6px;
     vertical-align: middle;
     svg {
       animation: rotating-spinner 1.2s linear infinite;
diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
index 1874c72258..feb58067f0 100755
--- a/source/renderer/app/i18n/locales/en-US.json
+++ b/source/renderer/app/i18n/locales/en-US.json
@@ -483,7 +483,8 @@
   "staking.rewards.title": "Earned delegation rewards",
   "staking.stakePools.delegatingListTitle": "Staking pools you are delegating to",
   "staking.stakePools.filter.apply": "Apply",
-  "staking.stakePools.filter.emptyFilterWarning": "Please select at least one category in the filter or reset filter.",
+  "staking.stakePools.filter.emptyFilterWarningPrefix": "Please select at least one category in the filter or",
+  "staking.stakePools.filter.emptyFilterWarningSuffix": ".",
   "staking.stakePools.filter.poolsWithoutOffChainData": "Pools without off-chain data",
   "staking.stakePools.filter.privatePools": "Private pools",
   "staking.stakePools.filter.publicPoolsWithOffChainData": "Public pools with off-chain data",
diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
index a00e3efeb2..08e8ecb820 100755
--- a/source/renderer/app/i18n/locales/ja-JP.json
+++ b/source/renderer/app/i18n/locales/ja-JP.json
@@ -483,11 +483,12 @@
   "staking.rewards.title": "獲得した委任報酬",
   "staking.stakePools.delegatingListTitle": "現在委任しているステークプール",
   "staking.stakePools.filter.apply": "適用する",
-  "staking.stakePools.filter.emptyFilterWarning": "!!!Please select at least one category in the filter or reset filter.",
+  "staking.stakePools.filter.emptyFilterWarningPrefix": "フィルターのカテゴリーを1つ以上選択するか、",
+  "staking.stakePools.filter.emptyFilterWarningSuffix": "してください。",
   "staking.stakePools.filter.poolsWithoutOffChainData": "オフチェーンデータのないプール",
   "staking.stakePools.filter.privatePools": "プライベートプール",
   "staking.stakePools.filter.publicPoolsWithOffChainData": "オフチェーンデータのあるパブリックプール",
-  "staking.stakePools.filter.resetFilter": "フィルターをリセットする",
+  "staking.stakePools.filter.resetFilter": "フィルターをリセット",
   "staking.stakePools.filter.retiringPools": "終了予定のプール",
   "staking.stakePools.learnMore": "もっと知る",
   "staking.stakePools.listTitle": "ステークプール",

From d38fbede941843986b0abcc14eb4baa291893db3 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Wed, 31 Mar 2021 06:54:52 -0400
Subject: [PATCH 35/38] [DDW-435] Adjust stake pools filter popover style

---
 .../staking/stake-pools/FilterPopOver.js         | 16 +++++++++++-----
 .../staking/stake-pools/StakePoolsSearch.js      |  9 +++++++--
 .../staking/stake-pools/StakePoolsSearch.scss    |  4 ++++
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
index 2bfe4c9266..298727fcc0 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
+++ b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
@@ -54,6 +54,7 @@ export type FilterPopOverProps = {
   onFilter: Function,
   numberOfFilterDimensionsApplied: number,
   isFilterDisabled: boolean,
+  containerRefDom?: null | HTMLDivElement,
 };
 
 @observer
@@ -185,20 +186,25 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
 
   render() {
     const { intl } = this.context;
-    const { numberOfFilterDimensionsApplied, isFilterDisabled } = this.props;
+    const {
+      numberOfFilterDimensionsApplied,
+      isFilterDisabled,
+      containerRefDom,
+    } = this.props;
+
+    if (!containerRefDom) {
+      return null;
+    }
 
     return (
       <PopOver
         arrow={false}
         interactive
         trigger="click"
-        appendTo={document.body}
+        appendTo={containerRefDom}
         onShow={(instance) => {
           this.restoreForm();
           this.popoverTippyInstance.current = instance;
-          setTimeout(() => {
-            instance.popper.style.transform = 'translate(-11px, 0)';
-          }, 0);
         }}
         duration={0}
         offset={[0, 10]}
diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
index 974b5729dd..c17e132904 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.js
@@ -79,11 +79,13 @@ export class StakePoolsSearch extends Component<Props> {
 
   searchInput: ?Object = null;
   addOnRef: { current: null | HTMLDivElement };
+  selfRef: { current: null | HTMLDivElement };
 
   constructor(props: Props) {
     super(props);
 
     this.addOnRef = React.createRef();
+    this.selfRef = React.createRef();
   }
 
   autoSelectOnFocus = () =>
@@ -152,7 +154,7 @@ export class StakePoolsSearch extends Component<Props> {
     const isBigSearchComponent = isListView || isGridView || isGridRewardsView;
 
     return (
-      <div className={styles.component}>
+      <div className={styles.component} ref={this.selfRef}>
         <div className={styles.container}>
           <SVGInline svg={searchIcon} className={styles.searchIcon} />
           <Input
@@ -216,7 +218,10 @@ export class StakePoolsSearch extends Component<Props> {
                 </button>
               </PopOver>
               <span className={styles.separator}>|</span>
-              <FilterPopOver {...filterPopOverProps} />
+              <FilterPopOver
+                {...filterPopOverProps}
+                containerRefDom={this.selfRef.current}
+              />
             </div>
           )}
         </div>
diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss
index f8756b1a6c..07d889416f 100644
--- a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss
+++ b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss
@@ -4,6 +4,10 @@
   position: initial;
   transition: position 1s ease-out, top 1s ease-out;
   width: 100%;
+
+  & > div[data-tippy-root] {
+    transform: translate(10px, 0);
+  }
 }
 
 .container {

From a43856ffba41e1464a707644c95e72c70add89a1 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Wed, 31 Mar 2021 10:43:57 -0400
Subject: [PATCH 36/38] [DDW-435] Adjust stake pools filter popover style

---
 .../staking/stake-pools/FilterPopOver.js      | 71 ++++++++++++-------
 .../staking/stake-pools/FilterPopOver.scss    | 14 ++++
 2 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
index 298727fcc0..cd610b34a0 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
+++ b/source/renderer/app/components/staking/stake-pools/FilterPopOver.js
@@ -147,6 +147,48 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
     }
   };
 
+  renderTriggerElement = (disabled?: boolean) => {
+    const { intl } = this.context;
+    const {
+      numberOfFilterDimensionsApplied,
+      isFilterDisabled,
+      populatedFilterOptions,
+    } = this.props;
+    const tinyButtonType = isEqual(
+      populatedFilterOptions,
+      defaultStakePoolFilterOptions
+    )
+      ? 'flat'
+      : 'primary';
+
+    return (
+      <div className={styles.triggerButton}>
+        <TinyButton
+          className={classNames([tinyButtonType, styles.actionButton])}
+          label={
+            <>
+              <div className={styles.actionLabel}>
+                {intl.formatMessage(globalMessages.filter)}
+                {numberOfFilterDimensionsApplied > 0 &&
+                  !isEqual(
+                    populatedFilterOptions,
+                    defaultStakePoolFilterOptions
+                  ) && (
+                    <span className={styles.numberIndicator}>
+                      ({numberOfFilterDimensionsApplied})
+                    </span>
+                  )}
+              </div>
+              <SVGInline svg={filterIcon} className={styles.filterIcon} />
+            </>
+          }
+          loading={false}
+          disabled={isFilterDisabled || disabled}
+        />
+      </div>
+    );
+  };
+
   renderFields = () => {
     const { form } = this;
     const publicPoolsWithOffChainDataCheckboxField = form.$(
@@ -186,14 +228,10 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
 
   render() {
     const { intl } = this.context;
-    const {
-      numberOfFilterDimensionsApplied,
-      isFilterDisabled,
-      containerRefDom,
-    } = this.props;
+    const { containerRefDom } = this.props;
 
     if (!containerRefDom) {
-      return null;
+      return this.renderTriggerElement(true);
     }
 
     return (
@@ -254,26 +292,7 @@ export default class FilterPopOver extends Component<FilterPopOverProps> {
           </div>
         }
       >
-        <div className={styles.triggerButton}>
-          <TinyButton
-            className={classNames(['primary', styles.actionButton])}
-            label={
-              <>
-                <div className={styles.actionLabel}>
-                  {intl.formatMessage(globalMessages.filter)}
-                  {numberOfFilterDimensionsApplied > 0 && (
-                    <span className={styles.numberIndicator}>
-                      ({numberOfFilterDimensionsApplied})
-                    </span>
-                  )}
-                </div>
-                <SVGInline svg={filterIcon} className={styles.filterIcon} />
-              </>
-            }
-            loading={false}
-            disabled={isFilterDisabled}
-          />
-        </div>
+        {this.renderTriggerElement()}
       </PopOver>
     );
   }
diff --git a/source/renderer/app/components/staking/stake-pools/FilterPopOver.scss b/source/renderer/app/components/staking/stake-pools/FilterPopOver.scss
index 5f2ffbae1a..5e9135234d 100644
--- a/source/renderer/app/components/staking/stake-pools/FilterPopOver.scss
+++ b/source/renderer/app/components/staking/stake-pools/FilterPopOver.scss
@@ -91,6 +91,20 @@
   margin-left: 7px;
   margin-right: 11px;
 
+  :global {
+    button.flat {
+      .FilterPopOver_actionLabel {
+        color: var(--theme-button-flat-text-color);
+      }
+
+      .FilterPopOver_filterIcon {
+        g {
+          stroke: var(--theme-button-flat-text-color);
+        }
+      }
+    }
+  }
+
   .actionButton {
     border-radius: 2px;
     display: flex;

From e2e5581ad3968315fa805e525ea955b7c379c5e7 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Wed, 31 Mar 2021 11:22:31 -0400
Subject: [PATCH 37/38] [DDW-435] Run translations manager

---
 .../app/i18n/locales/defaultMessages.json     | 72 +++++++++++++------
 1 file changed, 50 insertions(+), 22 deletions(-)

diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json
index ac9082e41a..68cc0db862 100644
--- a/source/renderer/app/i18n/locales/defaultMessages.json
+++ b/source/renderer/app/i18n/locales/defaultMessages.json
@@ -5862,13 +5862,13 @@
         "description": "\"delegatingListTitle\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 36
+          "line": 38
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.delegatingListTitle",
         "start": {
           "column": 23,
-          "line": 32
+          "line": 34
         }
       },
       {
@@ -5876,13 +5876,13 @@
         "description": "\"listTitle\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 43
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitle",
         "start": {
           "column": 13,
-          "line": 37
+          "line": 39
         }
       },
       {
@@ -5890,13 +5890,13 @@
         "description": "\"listTitleLoading\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 46
+          "line": 48
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitleLoading",
         "start": {
           "column": 20,
-          "line": 42
+          "line": 44
         }
       },
       {
@@ -5904,13 +5904,13 @@
         "description": "\"listTitleSearch\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 51
+          "line": 53
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitleSearch",
         "start": {
           "column": 19,
-          "line": 47
+          "line": 49
         }
       },
       {
@@ -5918,13 +5918,13 @@
         "description": "\"listTitleStakePools\" for the Stake Pools page.",
         "end": {
           "column": 3,
-          "line": 56
+          "line": 58
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.listTitleStakePools",
         "start": {
           "column": 23,
-          "line": 52
+          "line": 54
         }
       },
       {
@@ -5932,13 +5932,13 @@
         "description": "Loading stake pool message for the Delegation center body section.",
         "end": {
           "column": 3,
-          "line": 62
+          "line": 64
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.loadingStakePoolsMessage",
         "start": {
           "column": 28,
-          "line": 57
+          "line": 59
         }
       },
       {
@@ -5946,13 +5946,13 @@
         "description": "moderatedBy message for the Delegation center body section.",
         "end": {
           "column": 3,
-          "line": 67
+          "line": 69
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.moderatedBy",
         "start": {
           "column": 15,
-          "line": 63
+          "line": 65
         }
       },
       {
@@ -5960,27 +5960,55 @@
         "description": "unmoderated message for the Delegation center body section.",
         "end": {
           "column": 3,
-          "line": 72
+          "line": 74
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
         "id": "staking.stakePools.unmoderated",
         "start": {
           "column": 15,
-          "line": 68
+          "line": 70
         }
       },
       {
-        "defaultMessage": "!!!Please select at least one category in the filter or reset filter.",
-        "description": "Empty filter warning",
+        "defaultMessage": "!!!Please select at least one category in the filter or",
+        "description": "Empty filter warning prefix",
         "end": {
           "column": 3,
-          "line": 78
+          "line": 79
         },
         "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
-        "id": "staking.stakePools.filter.emptyFilterWarning",
+        "id": "staking.stakePools.filter.emptyFilterWarningPrefix",
         "start": {
-          "column": 22,
-          "line": 73
+          "column": 28,
+          "line": 75
+        }
+      },
+      {
+        "defaultMessage": "!!!.",
+        "description": "Empty filter warning suffix",
+        "end": {
+          "column": 3,
+          "line": 84
+        },
+        "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
+        "id": "staking.stakePools.filter.emptyFilterWarningSuffix",
+        "start": {
+          "column": 28,
+          "line": 80
+        }
+      },
+      {
+        "defaultMessage": "!!!Reset Filter",
+        "description": "Reset Filter link label",
+        "end": {
+          "column": 3,
+          "line": 89
+        },
+        "file": "source/renderer/app/components/staking/stake-pools/StakePools.js",
+        "id": "staking.stakePools.filter.resetFilter",
+        "start": {
+          "column": 15,
+          "line": 85
         }
       }
     ],

From fa0c2822ff9840c86b7432ada0cd872f2eb09b01 Mon Sep 17 00:00:00 2001
From: Yakov Karavelov <yakov.karavelov@iohk.io>
Date: Thu, 1 Apr 2021 05:52:48 -0400
Subject: [PATCH 38/38] [DDW-435] Fix modal overlay style

---
 source/renderer/app/themes/overrides/ModalOverrides.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/renderer/app/themes/overrides/ModalOverrides.scss b/source/renderer/app/themes/overrides/ModalOverrides.scss
index 1ce51e4571..e1ae80bd1b 100644
--- a/source/renderer/app/themes/overrides/ModalOverrides.scss
+++ b/source/renderer/app/themes/overrides/ModalOverrides.scss
@@ -1,7 +1,7 @@
 @import '../mixins/overlay-backdrop';
 
 .overlay {
-  z-index: 100;
+  z-index: 10001;
   @include overlay-backrop;
 }