feat(staking): add default sorting for browse pools [LW-10104] (#985)

* feat(staking): add default sorting for  browse pools
* feat(staking): browse pools - add default sorting for  hardware wallet legacy

Author: tommayeliog

apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakePoolsTable/StakePoolsTable.tsx

@@ -9,7 +9,9 @@ import {
   StakePoolsListRowSkeleton,
   StakePoolSortOptions,
   stakePoolTableConfig,
-  TranslationsFor
+  TranslationsFor,
+  getDefaultSortOrderByField,
+  DEFAULT_SORT_OPTIONS
 } from '@lace/staking';
 import { Typography } from 'antd';
 import { Search } from '@lace/common';
@@ -31,11 +33,6 @@ type stakePoolsTableProps = {
 
 type LoadMoreDataParam = Parameters<typeof Table.Body>[0]['loadMoreData'];
 
-const DEFAULT_SORT_OPTIONS: StakePoolSortOptions = {
-  field: 'ticker',
-  order: 'desc'
-};
-
 const searchDebounce = 300;
 
 export const StakePoolsTable = ({ scrollableTargetId }: stakePoolsTableProps): React.ReactElement => {
@@ -109,7 +106,8 @@ export const StakePoolsTable = ({ scrollableTargetId }: stakePoolsTableProps): R
   };
 
   const onSortChange = (sortField: SortField) => {
-    const order = sortField === sort?.field && sort?.order === 'asc' ? 'desc' : 'asc';
+    const inverseOrder = sort?.order === 'asc' ? 'desc' : 'asc';
+    const order = sortField !== sort?.field ? getDefaultSortOrderByField(sortField) : inverseOrder;
 
     setSort({ field: sortField, order });
   };

packages/staking/package.json

@@ -81,6 +81,7 @@
     "@storybook/addon-links": "^7.6.7",
     "@storybook/blocks": "^7.6.7",
     "@storybook/jest": "^0.2.3",
+    "@storybook/preview-api": "^8.0.4",
     "@storybook/react": "^7.6.7",
     "@storybook/react-vite": "^7.6.7",
     "@storybook/test": "^7.6.7",

packages/staking/src/features/BrowsePools/BrowsePoolsPreferencesCard/BrowsePoolsPreferencesCard.stories.tsx

@@ -1,23 +1,23 @@
 import { Box, Cell, Flex, Grid, LocalThemeProvider, Section, ThemeColorScheme, Variants } from '@lace/ui';
 import { action } from '@storybook/addon-actions';
-import { StakePoolSortOptions } from 'features/BrowsePools';
+import { useArgs } from '@storybook/preview-api';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { DEFAULT_SORT_OPTIONS, StakePoolSortOptions } from 'features/BrowsePools';
 import { useCallback, useState } from 'react';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { PoolsFilter, QueryStakePoolsFilters } from '../../store';
 import { BrowsePoolsPreferencesCard } from './BrowsePoolsPreferencesCard';
 import { SortAndFilterTab } from './types';
 
-export default {
+const meta: Meta<typeof BrowsePoolsPreferencesCard> = {
+  component: BrowsePoolsPreferencesCard,
   title: 'Cards/Stake Pool Sorting & Filter',
-} as Meta;
-
+};
+export default meta;
 const Wrapper = ({ defaultTab }: { defaultTab: SortAndFilterTab }) => {
   const [activeTab, setActiveTab] = useState(defaultTab);
-  const [sort, setSort] = useState<StakePoolSortOptions>({
-    field: 'saturation',
-    order: 'asc',
-  });
+  const [sort, setSort] = useState<StakePoolSortOptions>(DEFAULT_SORT_OPTIONS);
   const [filter, setFilter] = useState<QueryStakePoolsFilters>({
     [PoolsFilter.Saturation]: ['', ''],
     [PoolsFilter.ProfitMargin]: ['', ''],
@@ -109,3 +109,57 @@ export const Overview = (): JSX.Element => (
     </Section>
   </>
 );
+
+export const Interactions: StoryObj<typeof BrowsePoolsPreferencesCard> = {
+  args: {
+    activeTab: SortAndFilterTab.sort,
+    filter: {
+      [PoolsFilter.Saturation]: ['', ''],
+      [PoolsFilter.ProfitMargin]: ['', ''],
+      [PoolsFilter.Performance]: ['', ''],
+      [PoolsFilter.Ros]: ['lastepoch'],
+    },
+    sort: {
+      field: 'pledge',
+      order: 'desc',
+    },
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() => expect(canvas.getByTestId('radio-btn-test-id-ticker')));
+    const tickerBtn = canvas.getByTestId('radio-btn-test-id-ticker');
+
+    await userEvent.click(tickerBtn);
+    const saturationBtn = canvas.getByTestId('radio-btn-test-id-saturation');
+    await step('Change sort field', async () => {
+      await userEvent.click(saturationBtn);
+    });
+
+    const iconDesc = canvas.getByTestId('sort-desc');
+    await waitFor(() => expect(saturationBtn).toBeChecked());
+    await waitFor(() => expect(iconDesc).toBeInTheDocument());
+    await step('Click on iconDesc', async () => {
+      await userEvent.click(iconDesc);
+    });
+
+    await waitFor(() => expect(iconDesc).not.toBeInTheDocument());
+    const iconAsc = canvas.getByTestId('sort-asc');
+    await waitFor(() => expect(iconAsc).toBeInTheDocument());
+  },
+  render: function Render(args) {
+    const [{ sort }, setArgs] = useArgs();
+
+    return (
+      <BrowsePoolsPreferencesCard
+        {...args}
+        sort={sort}
+        onSortChange={(newSort) => {
+          setArgs({
+            ...args,
+            sort: newSort,
+          });
+        }}
+      />
+    );
+  },
+};

packages/staking/src/features/BrowsePools/BrowsePoolsPreferencesCard/BrowsePoolsPreferencesCard.tsx

@@ -21,6 +21,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { USE_MULTI_DELEGATION_STAKING_FILTERS, USE_ROS_STAKING_COLUMN } from '../../../featureFlags';
 import { PoolsFilter, QueryStakePoolsFilters } from '../../store';
+import { getDefaultSortOrderByField } from '../utils';
 import * as styles from './BrowsePoolsPreferencesCard.css';
 import { BrowsePoolsPreferencesCardLabel } from './BrowsePoolsPreferencesCardLabel';
 import { FilterOption, SelectOption, SortAndFilterTab } from './types';
@@ -89,7 +90,7 @@ export const BrowsePoolsPreferencesCard = ({
 
       onSortChange({
         field: sortField,
-        order: 'asc',
+        order: getDefaultSortOrderByField(sortField),
       });
     },
     [analytics, onSortChange]
@@ -135,8 +136,18 @@ export const BrowsePoolsPreferencesCard = ({
   };
 
   const sortingOptions: RadioButtonGroupOption[] = useMemo(() => {
-    const iconAlphabetical = direction === 'asc' ? SortAlphabeticalAscIcon : SortAlphabeticalDescIcon;
-    const iconNumerical = direction === 'asc' ? SortNumericalAscIcon : SortNumericalDescIcon;
+    const iconAlphabetical =
+      direction === 'asc' ? (
+        <SortAlphabeticalAscIcon data-testid="sort-asc" />
+      ) : (
+        <SortAlphabeticalDescIcon data-testid="sort-desc" />
+      );
+    const iconNumerical =
+      direction === 'asc' ? (
+        <SortNumericalAscIcon data-testid="sort-asc" />
+      ) : (
+        <SortNumericalDescIcon data-testid="sort-desc" />
+      );
     return [
       {
         icon: iconAlphabetical,

packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListHeader.tsx

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useOutsideHandles } from '../../outside-handles-provider';
 import { analyticsActionsMap } from '../analytics';
+import { getDefaultSortOrderByField } from '../utils';
 import { config } from './config';
 
 export interface TableHeaders {
@@ -66,7 +67,8 @@ export const StakePoolsListHeader = ({ setActiveSort, activeSort }: StakePoolsLi
   }));
 
   const onSortChange = (field: SortField) => {
-    const order = field === activeSort?.field && activeSort?.order === 'asc' ? 'desc' : 'asc';
+    const inverseOrder = activeSort?.order === 'asc' ? 'desc' : 'asc';
+    const order = field !== activeSort?.field ? getDefaultSortOrderByField(field) : inverseOrder;
 
     analytics.sendEventToPostHog(analyticsActionsMap[field]);
     setActiveSort({ field, order });

packages/staking/src/features/BrowsePools/__tests__/defaultSortOrderByField.test.ts

@@ -0,0 +1,19 @@
+/* eslint-disable unicorn/no-useless-undefined */
+import { getDefaultSortOrderByField } from '../utils';
+
+describe('getDefaultSortOrderByField', () => {
+  it('returns asc', () => {
+    const tickerOrder = getDefaultSortOrderByField('ticker');
+    const costOrder = getDefaultSortOrderByField('cost');
+    const marginOrder = getDefaultSortOrderByField('margin');
+
+    expect(tickerOrder).toEqual('asc');
+    expect(costOrder).toEqual('asc');
+    expect(marginOrder).toEqual('asc');
+  });
+
+  it('returns desc', () => {
+    const pledgeOrder = getDefaultSortOrderByField('pledge');
+    expect(pledgeOrder).toEqual('desc');
+  });
+});

packages/staking/src/features/BrowsePools/constants.ts

@@ -1,10 +1,11 @@
 import { BrowsePoolsView, StakePoolSortOptions } from './types';
+import { getDefaultSortOrderByField } from './utils';
 
 export const SEARCH_DEBOUNCE_IN_MS = 300;
 
 export const DEFAULT_SORT_OPTIONS: StakePoolSortOptions = {
   field: 'ticker',
-  order: 'asc',
+  order: getDefaultSortOrderByField('ticker'),
 };
 
 export const DEFAULT_BROWSE_POOLS_VIEW: BrowsePoolsView = BrowsePoolsView.grid;

packages/staking/src/features/BrowsePools/index.ts

@@ -5,7 +5,7 @@ export { useBrowsePoolsPersistence } from './hooks';
 export { DEFAULT_SORT_OPTIONS } from './constants';
 
 // TODO: remove once multi delegation feature is GA'd
-export { getSaturationLevel, isOversaturated } from './utils';
+export { getSaturationLevel, isOversaturated, getDefaultSortOrderByField } from './utils';
 export type { StakePoolSortOptions, TranslationsFor, SortField, SortOrder } from './types';
 export { BrowsePoolsView } from './types';
 export { StakePoolCardProgressBar } from './StakePoolCard';

packages/staking/src/features/BrowsePools/utils.ts

@@ -1,5 +1,5 @@
 import inRange from 'lodash/inRange';
-import { SaturationLevels } from './types';
+import { SaturationLevels, SortField, SortOrder } from './types';
 
 const mediumUpperBound = 90;
 const highUpperBound = 95;
@@ -28,3 +28,6 @@ export const getSaturationLevel = (saturation: number): SaturationLevels => {
   }
   return SaturationLevels.Medium;
 };
+
+export const getDefaultSortOrderByField = (field: SortField): SortOrder =>
+  ['ticker', 'cost', 'margin'].includes(field) ? 'asc' : 'desc';

packages/staking/src/index.ts

@@ -16,6 +16,8 @@ export {
   StakePoolsListRowSkeleton,
   getSaturationLevel,
   isOversaturated,
+  getDefaultSortOrderByField,
+  DEFAULT_SORT_OPTIONS,
 } from './features/BrowsePools';
 export { mapStakePoolToDisplayData } from './features/store';
 /* eslint-enable import/export */