[DDW-852] Display tooltip for list view

input-output-hk · Feb 2, 2022 · 07d8fd5 · 07d8fd5
1 parent b8b1830
commit 07d8fd5
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 15 deletions.
diff --git a/source/common/config/electron-store.config.ts b/source/common/config/electron-store.config.ts
@@ -23,6 +23,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',

diff --git a/source/common/types/electron-store.types.ts b/source/common/types/electron-store.types.ts
@@ -17,6 +17,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/renderer/app/api/utils/localStorage.ts b/source/renderer/app/api/utils/localStorage.ts
@@ -404,6 +404,10 @@ 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);
   reset = async () => {
     await LocalStorageApi.reset();
   };

diff --git a/source/renderer/app/components/staking/stake-pools/StakePools.tsx b/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;
+  onListViewClick: (...args: Array<any>) => any;
+  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,14 @@ class StakePools extends Component<Props, State> {
       isListView: false,
     });
   };
-  handleListView = () =>
+  handleListView = () => {
     this.setState({
       isGridView: false,
       isGridRewardsView: false,
       isListView: true,
     });
+    this.props.onListViewClick();
+  };
   handleSetListActive = (selectedList: string) =>
     this.setState({
       selectedList,
@@ -170,8 +174,9 @@ class StakePools extends Component<Props, State> {
       stake,
       onOpenExternalLink,
       currentTheme,
-      isLoading,
       isFetching,
+      isListViewTooltipVisible,
+      isLoading,
       isRanking,
       stakePoolsDelegatingList,
       getStakePoolById,
@@ -270,6 +275,7 @@ class StakePools extends Component<Props, State> {
               onGridRewardsView={this.handleGridRewardsView}
               onListView={this.handleListView}
               isListView={isListView}
+              isListViewTooltipVisible={isListViewTooltipVisible}
               isGridView={isGridView}
               isGridRewardsView={isGridRewardsView}
               // @ts-ignore ts-migrate(2769) FIXME: No overload matches this call.

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.scss
@@ -114,6 +114,12 @@
       background-color: var(
         --theme-staking-stake-pools-search-clear-button-background-color
       );
+
+      svg {
+        > g > g {
+          opacity: 1;
+        }
+      }
     }
 
     svg {

diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsSearch.tsx
@@ -60,6 +60,7 @@ type Props = {
   label?: string;
   placeholder?: string;
   isListView?: boolean;
+  isListViewTooltipVisible?: boolean;
   isGridView?: boolean;
   isGridRewardsView?: boolean;
   onSearch: (...args: Array<any>) => any;
@@ -100,6 +101,7 @@ export class StakePoolsSearch extends Component<Props> {
       placeholder,
       search,
       isListView,
+      isListViewTooltipVisible,
       isGridView,
       isGridRewardsView,
     } = this.props;
@@ -182,7 +184,10 @@ export class StakePoolsSearch extends Component<Props> {
                 </button>
               </PopOver>
             )}
-            <PopOver content={intl.formatMessage(messages.listIconTooltip)}>
+            <PopOver
+              visible={isListViewTooltipVisible}
+              content={intl.formatMessage(messages.listIconTooltip)}
+            >
               <button className={listButtonClasses} onClick={onListView}>
                 <SVGInline svg={listIcon} />
               </button>

diff --git a/source/renderer/app/containers/staking/StakePoolsListPage.tsx b/source/renderer/app/containers/staking/StakePoolsListPage.tsx
@@ -89,6 +89,8 @@ class StakePoolsListPage extends Component<Props> {
           stake={stake}
           onDelegate={this.handleDelegate}
           isLoading={isLoading}
+          isListViewTooltipVisible={staking.stakePoolsListViewTooltipVisible}
+          onListViewClick={staking.hideStakePoolsListViewTooltip}
           isFetching={isFetchingStakePools}
           isRanking={isRanking}
           getStakePoolById={getStakePoolById}

diff --git a/source/renderer/app/stores/StakingStore.ts b/source/renderer/app/stores/StakingStore.ts
@@ -54,6 +54,8 @@ export default class StakingStore extends Store {
   smashServerUrlError: LocalizableError | null | undefined = null;
   @observable
   smashServerLoading = false;
+  @observable
+  stakePoolsListViewTooltipVisible = true;
 
   /* ----------  Redeem ITN Rewards  ---------- */
   @observable
@@ -143,6 +145,7 @@ export default class StakingStore extends Store {
     this._startStakePoolsFetchTracker();
 
     this._getStakingInfoWasOpen();
+    this._getStakePoolsListViewTooltip();
   }
 
   // REQUESTS
@@ -280,6 +283,20 @@ export default class StakingStore extends Store {
     this.api.localStorage.setStakingInfoWasOpen();
   };
   @action
+  _getStakePoolsListViewTooltip = async () => {
+    const tooltipShown = await this.api.localStorage.getStakePoolsListViewTooltip();
+    runInAction(() => {
+      this.stakePoolsListViewTooltipVisible = tooltipShown;
+    });
+  };
+  @action
+  hideStakePoolsListViewTooltip = () => {
+    this.stakePoolsListViewTooltipVisible = false;
+    this.api.localStorage.setStakePoolsListViewTooltip(
+      this.stakePoolsListViewTooltipVisible
+    );
+  };
+  @action
   _stakePoolsFetchTracker = () => {
     const lastNumberOfStakePoolsFetched = this.numberOfStakePoolsFetched;
     this.numberOfStakePoolsFetched = this.stakePools.length;