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

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

Author: renanvalentin

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

source/common/config/electron-store.config.ts

@@ -20,6 +20,7 @@ export const STORAGE_KEYS: Record<string, StorageKey> = {
   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',

source/common/types/electron-store.types.ts

@@ -15,6 +15,7 @@ export type StorageKey =
   | 'READ-NEWS'
   | 'RESET'
   | 'SMASH-SERVER'
+  | 'STAKE-POOLS-LIST-VIEW-TOOLTIP'
   | 'TERMS-OF-USE-ACCEPTANCE'
   | 'THEME'
   | 'TOKEN-FAVORITES'

source/main/ipc/electronStoreConversation.ts

@@ -37,6 +37,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);

source/renderer/app/api/utils/localStorage.ts

@@ -398,6 +398,12 @@ export default class LocalStorageApi {
     LocalStorageApi.unset(keys.HARDWARE_WALLET_DEVICES, deviceId);
   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();
   };

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

@@ -71,24 +71,26 @@ const messages = defineMessages({
 });
 const SELECTED_INDEX_TABLE = 'selectedIndexTable';
 type Props = {
-  wallets: Array<Wallet>;
   currentLocale: string;
-  stakePoolsList: Array<StakePool>;
-  onOpenExternalLink: (...args: Array<any>) => any;
   currentTheme: string;
-  updateDelegatingStake: (...args: Array<any>) => any;
-  rankStakePools: (...args: Array<any>) => any;
-  selectedDelegationWalletId?: string | null | undefined;
-  stake?: number | null | undefined;
-  onDelegate: (...args: Array<any>) => any;
-  isLoading: boolean;
+  getStakePoolById: (...args: Array<any>) => any;
   isFetching: boolean;
+  isListViewTooltipVisible?: boolean;
+  isLoading: boolean;
   isRanking: boolean;
-  stakePoolsDelegatingList: Array<StakePool>;
-  getStakePoolById: (...args: Array<any>) => any;
+  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;
-  maxDelegationFunds: number;
+  stake?: number | null | undefined;
+  stakePoolsDelegatingList: Array<StakePool>;
+  stakePoolsList: Array<StakePool>;
+  updateDelegatingStake: (...args: Array<any>) => any;
+  wallets: Array<Wallet>;
 };
 type State = {
   search: string;
@@ -135,12 +137,13 @@ class StakePools extends Component<Props, State> {
       isListView: false,
     });
   };
-  handleListView = () =>
+  handleListView = () => {
     this.setState({
       isGridView: false,
       isGridRewardsView: false,
       isListView: true,
     });
+  };
   handleSetListActive = (selectedList: string) =>
     this.setState({
       selectedList,
@@ -169,9 +172,11 @@ class StakePools extends Component<Props, State> {
       selectedDelegationWalletId,
       stake,
       onOpenExternalLink,
+      onListViewVisited,
       currentTheme,
-      isLoading,
       isFetching,
+      isListViewTooltipVisible,
+      isLoading,
       isRanking,
       stakePoolsDelegatingList,
       getStakePoolById,
@@ -269,7 +274,9 @@ 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}
               // @ts-ignore ts-migrate(2769) FIXME: No overload matches this call.

source/renderer/app/components/staking/stake-pools/StakePoolsSearch.messages.ts

@@ -0,0 +1,39 @@
+import { defineMessages } from 'react-intl';
+
+export const messages = defineMessages({
+  searchInputPlaceholder: {
+    id: 'staking.stakePools.search.searchInputPlaceholder',
+    defaultMessage: '!!!Search stake pools',
+    description: '"Delegating List Title" for the Stake Pools search.',
+  },
+  delegatingListTitle: {
+    id: 'staking.stakePools.search.delegatingListTitle',
+    defaultMessage: '!!!Stake pools to which you are delegating',
+    description: '"delegatingListTitle" for the Stake Pools search.',
+  },
+  listTitle: {
+    id: 'staking.stakePools.search.listTitle',
+    defaultMessage: '!!!Stake pools ({pools})',
+    description: '"listTitle" for the Stake Pools search.',
+  },
+  gridIconTooltip: {
+    id: 'staking.stakePools.search.gridIconTooltip',
+    defaultMessage: '!!!Grid View',
+    description: '"gridIconTooltip" for the Stake Pools search.',
+  },
+  gridRewardsIconTooltip: {
+    id: 'staking.stakePools.search.gridRewardsIconTooltip',
+    defaultMessage: '!!!Grid Rewards View',
+    description: '"gridRewardsIconTooltip" for the Stake Pools search.',
+  },
+  listIconTooltip: {
+    id: 'staking.stakePools.search.listIconTooltip',
+    defaultMessage: '!!!List View',
+    description: '"listIconTooltip" for the Stake Pools search.',
+  },
+  clearTooltip: {
+    id: 'staking.stakePools.search.clearTooltip',
+    defaultMessage: '!!!Clear',
+    description: '"clearTooltip" for the Stake Pools search.',
+  },
+});

source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss

@@ -1,12 +1,16 @@
+@import '../stakingConfig';
+
 .component {
   background: transparent;
+  display: flex;
   padding: 20px 0 0;
   position: initial;
   transition: position 1s ease-out, top 1s ease-out;
   width: 100%;
 }
 
 .container {
+  flex: 1 1 auto;
   position: relative;
 }
 
@@ -52,14 +56,6 @@
   line-height: 48px;
   position: absolute;
   right: 20px;
-
-  &.inputExtrasSearch {
-    right: 110px;
-
-    &.withGridRewardsView {
-      right: 145px;
-    }
-  }
 }
 
 .clearSearchButton {
@@ -93,36 +89,33 @@
 }
 
 .viewButtons {
+  @extend %contentBorderAndBackground;
   align-items: center;
-  bottom: 0.5px;
   display: flex;
-  height: 48px;
+  height: 50px;
   justify-content: space-between;
   line-height: 48px;
-  padding-left: 20px;
-  position: absolute;
-  right: 11px;
+  margin-left: 10px;
+  padding: 0 20px;
+  width: 118px;
 
-  .separator {
-    color: var(--theme-staking-stake-pools-search-clear-button-color);
-    opacity: 0.2;
-    padding-right: 10px;
-    position: relative;
-    top: -2px;
+  & > span {
+    display: flex;
   }
 
   button {
     border-radius: 3px;
     color: var(--theme-about-window-icon-close-button-color);
     cursor: pointer;
-    height: 28px;
-    margin: 0 2px;
-    width: 28px;
+    height: 15px;
+    width: 15px;
 
     &:hover {
-      background-color: var(
-        --theme-staking-stake-pools-search-clear-button-background-color
-      );
+      svg {
+        > g > g {
+          opacity: 0.7;
+        }
+      }
     }
 
     svg {