[DDW-852] Improve Stake Pools list view attention (#2847)

Co-authored-by: Daniel Main <daniel.main.cernhoff@icloud.com>
input-output-hk · Mar 7, 2022 · 1c6f67b · 1c6f67b
1 parent 8b51e92
commit 1c6f67b
Show file tree

Hide file tree

Showing 12 changed files with 322 additions and 233 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## vNext
+
+### Features
+- Improved stake pool searchbar ([PR 2847](https://github.com/input-output-hk/daedalus/pull/2847))
+
 ## 4.9.0-FC1
 
 ### Features

diff --git a/source/common/config/electron-store.config.js b/source/common/config/electron-store.config.js
@@ -26,6 +26,7 @@ export const STORAGE_KEYS: {
   READ_NEWS: 'READ-NEWS',
   RESET: 'RESET',
   SMASH_SERVER: 'SMASH-SERVER',
+  STAKE_POOLS_LIST_VIEW_TOOLTIP: 'STAKE-POOLS-LIST-VIEW-TOOLTIP',
   STAKING_INFO_WAS_OPEN: 'ALONZO-INFO-WAS-OPEN',
   TERMS_OF_USE_ACCEPTANCE: 'TERMS-OF-USE-ACCEPTANCE',
   THEME: 'THEME',

diff --git a/source/common/types/electron-store.types.js b/source/common/types/electron-store.types.js
@@ -18,6 +18,7 @@ export type StorageKey =
   | 'READ-NEWS'
   | 'RESET'
   | 'SMASH-SERVER'
+  | 'STAKE-POOLS-LIST-VIEW-TOOLTIP'
   | 'TERMS-OF-USE-ACCEPTANCE'
   | 'THEME'
   | 'TOKEN-FAVORITES'

diff --git a/source/main/ipc/electronStoreConversation.js b/source/main/ipc/electronStoreConversation.js
@@ -39,6 +39,7 @@ const reset = async () => {
   await unset(keys.READ_NEWS);
   await unset(keys.SMASH_SERVER);
   await unset(keys.STAKING_INFO_WAS_OPEN);
+  await unset(keys.STAKE_POOLS_LIST_VIEW_TOOLTIP);
   await unset(keys.TERMS_OF_USE_ACCEPTANCE);
   await unset(keys.THEME);
   await unset(keys.USER_DATE_FORMAT_ENGLISH);

diff --git a/source/renderer/app/api/utils/localStorage.js b/source/renderer/app/api/utils/localStorage.js
@@ -478,7 +478,12 @@ export default class LocalStorageApi {
 
   unsetHardwareWalletDevicesAll = async (): Promise<void> =>
     LocalStorageApi.unset(keys.HARDWARE_WALLET_DEVICES);
-
+  setStakePoolsListViewTooltip = async (visited: boolean): Promise<void> =>
+    LocalStorageApi.set(keys.STAKE_POOLS_LIST_VIEW_TOOLTIP, visited);
+  getStakePoolsListViewTooltip = async (): Promise<boolean> =>
+    LocalStorageApi.get(keys.STAKE_POOLS_LIST_VIEW_TOOLTIP, true);
+  unsetStakePoolsListViewTooltip = async (): Promise<void> =>
+    LocalStorageApi.unset(keys.STAKE_POOLS_LIST_VIEW_TOOLTIP);
   reset = async () => {
     await LocalStorageApi.reset();
   };

diff --git a/source/renderer/app/components/staking/stake-pools/StakePools.js b/source/renderer/app/components/staking/stake-pools/StakePools.js
@@ -71,24 +71,26 @@ const messages = defineMessages({
 const SELECTED_INDEX_TABLE = 'selectedIndexTable';
 
 type Props = {
-  wallets: Array<Wallet>,
-  currentLocale: string,
-  stakePoolsList: Array<StakePool>,
-  onOpenExternalLink: Function,
-  currentTheme: string,
-  updateDelegatingStake: Function,
-  rankStakePools: Function,
-  selectedDelegationWalletId?: ?string,
-  stake?: ?number,
-  onDelegate: Function,
-  isLoading: boolean,
-  isFetching: boolean,
-  isRanking: boolean,
-  stakePoolsDelegatingList: Array<StakePool>,
-  getStakePoolById: Function,
-  onSmashSettingsClick: Function,
-  smashServerUrl: ?string,
-  maxDelegationFunds: number,
+  currentLocale: string;
+  currentTheme: string;
+  getStakePoolById: (...args: Array<any>) => any;
+  isFetching: boolean;
+  isListViewTooltipVisible?: boolean;
+  isLoading: boolean;
+  isRanking: boolean;
+  maxDelegationFunds: number;
+  onDelegate: (...args: Array<any>) => any;
+  onListViewVisited: () => void;
+  onOpenExternalLink: (...args: Array<any>) => any;
+  onSmashSettingsClick: (...args: Array<any>) => any;
+  rankStakePools: (...args: Array<any>) => any;
+  selectedDelegationWalletId?: string | null | undefined;
+  smashServerUrl: string | null | undefined;
+  stake?: number | null | undefined;
+  stakePoolsDelegatingList: Array<StakePool>;
+  stakePoolsList: Array<StakePool>;
+  updateDelegatingStake: (...args: Array<any>) => any;
+  wallets: Array<Wallet>;
 };
 
 type State = {
@@ -137,14 +139,13 @@ export default class StakePools extends Component<Props, State> {
       isListView: false,
     });
   };
-
-  handleListView = () =>
+  handleListView = () => {
     this.setState({
       isGridView: false,
       isGridRewardsView: false,
       isListView: true,
     });
-
+  };
   handleSetListActive = (selectedList: string) =>
     this.setState({ selectedList });
 
@@ -170,9 +171,11 @@ export default class StakePools extends Component<Props, State> {
       selectedDelegationWalletId,
       stake,
       onOpenExternalLink,
+      onListViewVisited,
       currentTheme,
-      isLoading,
       isFetching,
+      isListViewTooltipVisible,
+      isLoading,
       isRanking,
       stakePoolsDelegatingList,
       getStakePoolById,
@@ -278,7 +281,9 @@ export default class StakePools extends Component<Props, State> {
               onGridView={this.handleGridView}
               onGridRewardsView={this.handleGridRewardsView}
               onListView={this.handleListView}
+              onListViewVisited={onListViewVisited}
               isListView={isListView}
+              isListViewTooltipVisible={isListViewTooltipVisible}
               isGridView={isGridView}
               isGridRewardsView={isGridRewardsView}
               smashServer={smashServer}