From 16c0a35fb6d6c44fb9f82fd3f9d5e99dbff8e298 Mon Sep 17 00:00:00 2001 From: vetalcore Date: Mon, 13 May 2024 13:09:42 +0300 Subject: [PATCH 1/2] feat(extension): [LW-10378] implement fuzzy search * feat(extension): implement fuzzy search in fetch stake pool slice and utils * test(extension): fix broken smoke test * feat(extension): make sort optional * test(extension): update test LW-8448 * test(extension): update LW-8448 to match recent changes * fix(extension): fix sonarcloud issues --------- Co-authored-by: wklos-iohk --- apps/browser-extension-wallet/package.json | 14 +- .../stores/slices/stake-pool-search-slice.ts | 65 +++--- .../browser-view/features/staking/utils.ts | 23 +- packages/cardano/package.json | 16 +- .../MultidelegationPageAssert.ts | 6 +- .../multidelegation/MultidelegationPage.ts | 2 +- .../MultiDelegationPageExtended.part1.feature | 13 +- packages/staking/package.json | 18 +- .../src/features/BrowsePools/BrowsePools.tsx | 2 +- .../BrowsePoolsPreferencesCard.tsx | 134 +++-------- .../StakePoolsGrid/StakePoolsGrid.tsx | 2 +- .../StakePoolsGrid/StakePoolsGridItem.tsx | 4 +- .../StakePoolsList/StakePoolsList.tsx | 2 +- .../StakePoolsList/StakePoolsListHeader.tsx | 2 +- .../BrowsePools/hooks/useQueryStakePools.tsx | 31 +-- .../stateMachine/processExpandedViewCases.ts | 2 + .../useDelegationPortfolioStore.ts | 3 + .../table/table-header.component.tsx | 4 +- yarn.lock | 212 +++++++++--------- 19 files changed, 247 insertions(+), 308 deletions(-) diff --git a/apps/browser-extension-wallet/package.json b/apps/browser-extension-wallet/package.json index 436bfac58..38dbad215 100644 --- a/apps/browser-extension-wallet/package.json +++ b/apps/browser-extension-wallet/package.json @@ -39,14 +39,14 @@ }, "dependencies": { "@ant-design/icons": "^4.7.0", - "@cardano-sdk/cardano-services-client": "0.19.2", - "@cardano-sdk/core": "0.30.2", - "@cardano-sdk/dapp-connector": "0.12.16", - "@cardano-sdk/input-selection": "0.12.29", - "@cardano-sdk/tx-construction": "0.18.5", + "@cardano-sdk/cardano-services-client": "0.19.3", + "@cardano-sdk/core": "0.31.0", + "@cardano-sdk/dapp-connector": "0.12.17", + "@cardano-sdk/input-selection": "0.12.30", + "@cardano-sdk/tx-construction": "0.18.6", "@cardano-sdk/util": "0.15.1", - "@cardano-sdk/wallet": "0.37.3", - "@cardano-sdk/web-extension": "0.27.3", + "@cardano-sdk/wallet": "0.37.4", + "@cardano-sdk/web-extension": "0.27.4", "@emurgo/cip14-js": "~3.0.1", "@lace/cardano": "0.1.0", "@lace/common": "0.1.0", diff --git a/apps/browser-extension-wallet/src/stores/slices/stake-pool-search-slice.ts b/apps/browser-extension-wallet/src/stores/slices/stake-pool-search-slice.ts index b47adaf8e..4f75405be 100644 --- a/apps/browser-extension-wallet/src/stores/slices/stake-pool-search-slice.ts +++ b/apps/browser-extension-wallet/src/stores/slices/stake-pool-search-slice.ts @@ -5,6 +5,41 @@ import { BlockchainProviderSlice, SliceCreator, StakePoolSearchSlice, StateStatu const defaultFetchLimit = 100; +export const getQueryStakePoolsFilters = ({ + searchString, + skip = 0, + limit = defaultFetchLimit, + sort +}: Parameters[0]): Wallet.QueryStakePoolsArgs => { + let filtersValues: Wallet.QueryStakePoolsArgs['filters'] = {}; + try { + const poolId: Wallet.Cardano.PoolId = Wallet.Cardano.PoolId(searchString); + filtersValues = { + identifier: { + values: [{ id: poolId }] + } + }; + } catch { + filtersValues = { text: searchString }; + } + return { + filters: { + ...filtersValues, + pledgeMet: true, + status: [ + Wallet.Cardano.StakePoolStatus.Active, + Wallet.Cardano.StakePoolStatus.Activating, + Wallet.Cardano.StakePoolStatus.Retiring + ] + }, + pagination: { + startAt: skip, + limit: limit - skip + 1 + }, + ...(sort && { sort }) + }; +}; + const fetchStakePools = ({ set, @@ -18,34 +53,8 @@ const fetchStakePools = } = get().stakePoolSearchResults || {}; set({ stakePoolSearchResultsStatus: StateStatus.LOADING }); - let filtersValues = []; - try { - const poolId: Wallet.Cardano.PoolId = Wallet.Cardano.PoolId(searchString); - filtersValues = [{ id: poolId }]; - } catch { - filtersValues = [{ name: searchString }, { ticker: searchString }]; - } - const filters: Wallet.QueryStakePoolsArgs = { - filters: { - ...(searchString && { - identifier: { - _condition: 'or', - values: filtersValues - } - }), - pledgeMet: true, - status: [ - Wallet.Cardano.StakePoolStatus.Active, - Wallet.Cardano.StakePoolStatus.Activating, - Wallet.Cardano.StakePoolStatus.Retiring - ] - }, - pagination: { - startAt: skip, - limit: limit - skip + 1 - }, - sort - }; + const filters = getQueryStakePoolsFilters({ searchString, skip, limit, sort }); + const { totalResultCount, pageResults } = await get().blockchainProvider.stakePoolProvider.queryStakePools(filters); const paginating = isEqual(prevSort, sort) && prevTotalCount === totalResultCount; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/staking/utils.ts b/apps/browser-extension-wallet/src/views/browser-view/features/staking/utils.ts index e5fa0b843..f48f54aec 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/staking/utils.ts +++ b/apps/browser-extension-wallet/src/views/browser-view/features/staking/utils.ts @@ -1,4 +1,5 @@ import { Wallet } from '@lace/cardano'; +import { getQueryStakePoolsFilters } from '@src/stores/slices'; export const fetchPoolsInfo = async ({ searchString = '', @@ -7,26 +8,8 @@ export const fetchPoolsInfo = async ({ searchString: string; stakePoolProvider: Wallet.StakePoolProvider; }): Promise => { - const filters: Wallet.QueryStakePoolsArgs = { - filters: { - ...(searchString && { - identifier: { - _condition: 'or', - values: [{ name: searchString }, { ticker: searchString }, { id: Wallet.Cardano.PoolId(searchString) }] - } - }), - pledgeMet: true, - status: [ - Wallet.Cardano.StakePoolStatus.Active, - Wallet.Cardano.StakePoolStatus.Activating, - Wallet.Cardano.StakePoolStatus.Retiring - ] - }, - pagination: { - startAt: 0, - limit: 100 - } - }; + const filters = getQueryStakePoolsFilters({ searchString }); + const { pageResults: pools } = await stakePoolProvider.queryStakePools(filters); return pools; diff --git a/packages/cardano/package.json b/packages/cardano/package.json index 7506d185f..07e16553e 100644 --- a/packages/cardano/package.json +++ b/packages/cardano/package.json @@ -38,15 +38,15 @@ "watch": "yarn build --watch" }, "dependencies": { - "@cardano-sdk/cardano-services-client": "0.19.2", - "@cardano-sdk/core": "0.30.2", + "@cardano-sdk/cardano-services-client": "0.19.3", + "@cardano-sdk/core": "0.31.0", "@cardano-sdk/crypto": "0.1.23", - "@cardano-sdk/hardware-ledger": "0.9.3", - "@cardano-sdk/hardware-trezor": "0.4.23", - "@cardano-sdk/key-management": "0.20.3", + "@cardano-sdk/hardware-ledger": "0.9.4", + "@cardano-sdk/hardware-trezor": "0.4.24", + "@cardano-sdk/key-management": "0.20.4", "@cardano-sdk/util": "0.15.1", - "@cardano-sdk/wallet": "0.37.3", - "@cardano-sdk/web-extension": "0.27.3", + "@cardano-sdk/wallet": "0.37.4", + "@cardano-sdk/web-extension": "0.27.4", "@lace/common": "0.1.0", "@ledgerhq/devices": "^8.2.1", "@stablelib/chacha20poly1305": "1.0.1", @@ -68,7 +68,7 @@ "webextension-polyfill": "0.8.0" }, "devDependencies": { - "@cardano-sdk/util-dev": "0.20.2", + "@cardano-sdk/util-dev": "0.20.3", "@emurgo/cardano-message-signing-browser": "1.0.1", "rollup-plugin-polyfill-node": "^0.8.0", "typescript": "^4.9.5" diff --git a/packages/e2e-tests/src/assert/multidelegation/MultidelegationPageAssert.ts b/packages/e2e-tests/src/assert/multidelegation/MultidelegationPageAssert.ts index 498ab4d8e..d972ee296 100644 --- a/packages/e2e-tests/src/assert/multidelegation/MultidelegationPageAssert.ts +++ b/packages/e2e-tests/src/assert/multidelegation/MultidelegationPageAssert.ts @@ -25,10 +25,10 @@ class MultidelegationPageAssert { expect(poolsCounter).to.equal(poolsCount); }; - assertSeeSearchResultsCountExact = async (items: number) => { - await browser.waitUntil(async () => (await MultidelegationPage.displayedPools.length) === items, { + assertSeeSearchResultsCountGreaterOrEqual = async (expectedPoolsCount: number) => { + await browser.waitUntil(async () => (await MultidelegationPage.displayedPools.length) >= expectedPoolsCount, { timeout: 20_000, - timeoutMsg: `Search result does not match exact items count expected: ${items}` + timeoutMsg: `There should be ${expectedPoolsCount} or more stake pools returned` }); }; diff --git a/packages/e2e-tests/src/elements/multidelegation/MultidelegationPage.ts b/packages/e2e-tests/src/elements/multidelegation/MultidelegationPage.ts index c4362bd2d..4c7177547 100644 --- a/packages/e2e-tests/src/elements/multidelegation/MultidelegationPage.ts +++ b/packages/e2e-tests/src/elements/multidelegation/MultidelegationPage.ts @@ -376,7 +376,7 @@ class MultidelegationPage { }); for (const ticker of poolsToMark) { await this.fillSearch(ticker); - await MultidelegationPageAssert.assertSeeSearchResultsCountExact(1); + await MultidelegationPageAssert.assertSeeSearchResultsCountGreaterOrEqual(1); await this.markStakePoolWithTicker(ticker); await this.stakingPageSearchInput.click(); await clearInputFieldValue(await this.stakingPageSearchInput); diff --git a/packages/e2e-tests/src/features/MultiDelegationPageExtended.part1.feature b/packages/e2e-tests/src/features/MultiDelegationPageExtended.part1.feature index 6f13f3733..b9bdc1412 100644 --- a/packages/e2e-tests/src/features/MultiDelegationPageExtended.part1.feature +++ b/packages/e2e-tests/src/features/MultiDelegationPageExtended.part1.feature @@ -27,6 +27,7 @@ Feature: Staking Page - Extended View And I switch to list view on "Browse pools" tab Then I see the stake pool search control with appropriate content + # TODO: update to match LW-10410 when ready @LW-8448 @Testnet Scenario Outline: Extended View - Stake pool search for "" returns the expected number of results with appropriate content When I navigate to Staking extended page @@ -37,14 +38,14 @@ Feature: Staking Page - Extended View And (if applicable) first stake pool search result has "" ticker Examples: | stake_pool_search_term | number_of_results | stake_pool_ticker | - | a Ocean | 1 | OCEAN | - | a ocean | 1 | OCEAN | - | NED# | 0 | | - | PAN | 1 | PANL | + | a Ocean | 3 | OCEAN | + | a ocean | 3 | OCEAN | + | ABC# | 0 | | + | HUA | 1 | HUADA | | 123456 | 0 | | - | WO | 2 | WOOF | + | ZZZ | 2 | ZZZZX | | £££ | 0 | | - | Amso | 0 | | + | Abcde | 0 | | @LW-8448 @Mainnet Scenario Outline: Extended View - Stake pool search for "" returns the expected number of results with appropriate content diff --git a/packages/staking/package.json b/packages/staking/package.json index 2aa5069c6..7be4ea882 100644 --- a/packages/staking/package.json +++ b/packages/staking/package.json @@ -73,12 +73,12 @@ }, "devDependencies": { "@babel/core": "^7.21.0", - "@cardano-sdk/core": "0.30.2", - "@cardano-sdk/input-selection": "0.12.29", - "@cardano-sdk/tx-construction": "0.18.5", + "@cardano-sdk/core": "0.31.0", + "@cardano-sdk/input-selection": "0.12.30", + "@cardano-sdk/tx-construction": "0.18.6", "@cardano-sdk/util": "0.15.1", - "@cardano-sdk/wallet": "0.37.3", - "@cardano-sdk/web-extension": "0.27.3", + "@cardano-sdk/wallet": "0.37.4", + "@cardano-sdk/web-extension": "0.27.4", "@storybook/addon-actions": "^7.6.7", "@storybook/addon-essentials": "^7.6.7", "@storybook/addon-interactions": "^7.6.7", @@ -123,11 +123,11 @@ "wait-on": "^7.0.1" }, "peerDependencies": { - "@cardano-sdk/input-selection": "0.12.29", - "@cardano-sdk/tx-construction": "0.18.5", + "@cardano-sdk/input-selection": "0.12.30", + "@cardano-sdk/tx-construction": "0.18.6", "@cardano-sdk/util": "0.15.1", - "@cardano-sdk/wallet": "0.37.3", - "@cardano-sdk/web-extension": "0.27.3", + "@cardano-sdk/wallet": "0.37.4", + "@cardano-sdk/web-extension": "0.27.4", "@lace/cardano": "^0.1.0", "@lace/common": "^0.1.0", "@lace/core": "0.1.0", diff --git a/packages/staking/src/features/BrowsePools/BrowsePools.tsx b/packages/staking/src/features/BrowsePools/BrowsePools.tsx index 8c0a065e3..715a32574 100644 --- a/packages/staking/src/features/BrowsePools/BrowsePools.tsx +++ b/packages/staking/src/features/BrowsePools/BrowsePools.tsx @@ -49,7 +49,7 @@ export const BrowsePools = () => { showSkeleton={fetching} loadMoreData={paginatePools} scrollableTargetId={LACE_APP_ID} - sortField={sort.field} + sortField={sort?.field} /> ) : ( void; onFilterChange: (filters: QueryStakePoolsFilters) => void; @@ -60,7 +60,7 @@ export const BrowsePoolsPreferencesCard = ({ const { t } = useTranslation(); const { analytics } = useOutsideHandles(); const [localFilters, setLocalFilters] = useState(filter); - const { field: sortBy, order: direction } = sort; + const { field: sortBy, order: direction } = sort || {}; const debouncedFilterChange = useMemo(() => debounce(onFilterChange, ON_CHANGE_DEBOUNCE), [onFilterChange]); const handleFilterChange = useCallback( @@ -75,13 +75,16 @@ export const BrowsePoolsPreferencesCard = ({ [debouncedFilterChange, localFilters] ); - const handleIconClick = useCallback(() => { - const newSort: StakePoolSortOptions = { - field: sortBy, - order: direction === 'desc' ? 'asc' : 'desc', - }; - onSortChange(newSort); - }, [direction, onSortChange, sortBy]); + const handleIconClick = useCallback( + (_sortBy) => { + const newSort: StakePoolSortOptions = { + field: _sortBy, + order: direction === 'desc' ? 'asc' : 'desc', + }; + onSortChange(newSort); + }, + [direction, onSortChange] + ); const handleSortChange = useCallback( (field: string) => { @@ -148,96 +151,29 @@ export const BrowsePoolsPreferencesCard = ({ ) : ( ); - return [ - { - icon: iconAlphabetical, - label: ( - - ), - onIconClick: handleIconClick, - value: 'ticker', - }, - { - icon: iconNumerical, - label: ( - - ), - onIconClick: handleIconClick, - value: 'saturation', - }, - USE_ROS_STAKING_COLUMN && { - icon: iconNumerical, - label: ( - - ), - onIconClick: handleIconClick, - value: 'ros', - }, - { - icon: iconNumerical, - label: ( - - ), - onIconClick: handleIconClick, - value: 'cost', - }, - { - icon: iconNumerical, - label: ( - - ), - onIconClick: handleIconClick, - value: 'margin', - }, - { - icon: iconNumerical, - label: ( - - ), - onIconClick: handleIconClick, - value: 'blocks', - }, - { - icon: iconNumerical, - label: ( - - ), - onIconClick: handleIconClick, - value: 'pledge', - }, - { - icon: iconNumerical, - label: ( - - ), - onIconClick: handleIconClick, - value: 'liveStake', - }, - ].filter(Boolean) as RadioButtonGroupOption[]; + + const values: SortField[] = [ + 'ticker', + 'saturation', + USE_ROS_STAKING_COLUMN && 'ros', + 'cost', + 'margin', + 'blocks', + 'pledge', + 'liveStake', + ].filter((v): v is SortField => !!v); + + return values.map((value) => ({ + icon: value === 'ticker' ? iconAlphabetical : iconNumerical, + label: ( + + ), + onIconClick: () => handleIconClick(value), + value, + })) as RadioButtonGroupOption[]; }, [direction, handleIconClick, t]); const filterOptions: FilterOption[] = useMemo(() => { diff --git a/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.tsx b/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.tsx index 446d3a7eb..fe1c6e8e8 100644 --- a/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.tsx +++ b/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.tsx @@ -24,7 +24,7 @@ export type StakePoolsGridProps = { loadMoreData: (range: ListRange) => void; emptyPlaceholder: () => ReactElement; showSkeleton?: boolean; - sortField: SortField; + sortField?: SortField; }; export const StakePoolsGrid = ({ diff --git a/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGridItem.tsx b/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGridItem.tsx index bb01057f0..bdef70018 100644 --- a/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGridItem.tsx +++ b/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGridItem.tsx @@ -7,14 +7,14 @@ import { getFormattedStakePoolProp } from '../formatters'; import { SortField } from '../types'; type StakePoolsGridItemProps = StakePoolDetails & { - sortField: SortField; + sortField?: SortField; }; export const StakePoolsGridItem = ({ stakePool, hexId, id, - sortField, + sortField = 'ticker', ...data }: StakePoolsGridItemProps): React.ReactElement => { const { analytics } = useOutsideHandles(); diff --git a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsList.tsx b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsList.tsx index 6d56822c9..cf3548904 100644 --- a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsList.tsx +++ b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsList.tsx @@ -16,7 +16,7 @@ export type StakePoolsListProps = { selectedPools: StakePoolDetails[]; loadMoreData: (range: ListRange) => void; setActiveSort: (props: StakePoolSortOptions) => void; - activeSort: StakePoolSortOptions; + activeSort?: StakePoolSortOptions; emptyPlaceholder: () => ReactElement; showSkeleton?: boolean; }; diff --git a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListHeader.tsx b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListHeader.tsx index a16120b8c..9a5d03402 100644 --- a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListHeader.tsx +++ b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListHeader.tsx @@ -15,7 +15,7 @@ export interface TableHeaders { export type StakePoolsListHeaderProps = { setActiveSort: (props: StakePoolSortOptions) => void; - activeSort: StakePoolSortOptions; + activeSort?: StakePoolSortOptions; }; export const StakePoolsListHeader = ({ setActiveSort, activeSort }: StakePoolsListHeaderProps) => { diff --git a/packages/staking/src/features/BrowsePools/hooks/useQueryStakePools.tsx b/packages/staking/src/features/BrowsePools/hooks/useQueryStakePools.tsx index 22fe0c484..938b9fa7c 100644 --- a/packages/staking/src/features/BrowsePools/hooks/useQueryStakePools.tsx +++ b/packages/staking/src/features/BrowsePools/hooks/useQueryStakePools.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ import { PostHogAction } from '@lace/common'; import { StateStatus, useOutsideHandles } from 'features/outside-handles-provider'; import { StakePoolDetails, mapStakePoolToDisplayData, useDelegationPortfolioStore } from 'features/store'; @@ -5,7 +6,7 @@ import debounce from 'lodash/debounce'; import isEqual from 'lodash/isEqual'; import { useCallback, useMemo, useRef } from 'react'; import { ListRange } from 'react-virtuoso'; -import { DEFAULT_SORT_OPTIONS, SEARCH_DEBOUNCE_IN_MS } from '../constants'; +import { SEARCH_DEBOUNCE_IN_MS } from '../constants'; import { StakePoolSortOptions } from '../types'; type QueryStatus = 'idle' | 'fetching' | 'paginating'; @@ -17,7 +18,7 @@ type UseQueryStakePoolsResult = { searchQuery: string; setSearchQuery: (searchString: string) => void; setSort: (sortOptions: StakePoolSortOptions) => void; - sort: StakePoolSortOptions; + sort?: StakePoolSortOptions; totalPoolsCount: number; }; @@ -32,10 +33,11 @@ export const useQueryStakePools = () => { const { searchQuery, sortField, sortOrder } = useDelegationPortfolioStore((store) => ({ searchQuery: store.searchQuery || '', - sortField: store.sortField ?? DEFAULT_SORT_OPTIONS.field, - sortOrder: store.sortOrder ?? DEFAULT_SORT_OPTIONS.order, + sortField: store.sortField, + sortOrder: store.sortOrder, })); - const previousRequest = useRef<{ searchQuery: string; sortField: string; sortOrder: string } | null>(null); + + const previousRequest = useRef<{ searchQuery: string; sortField?: string; sortOrder?: string } | null>(null); const status = useMemo(() => { const nextRequest = { searchQuery, sortField, sortOrder }; const requestChanged = !isEqual(previousRequest.current, nextRequest); @@ -48,12 +50,12 @@ export const useQueryStakePools = () => { const debouncedSearch = useMemo( () => - debounce(async (params: Required[0]>) => { + debounce(async (params: Parameters[0]) => { await fetchStakePools(params); previousRequest.current = { searchQuery: params.searchString, - sortField: params.sort.field, - sortOrder: params.sort.order, + sortField: params.sort?.field, + sortOrder: params.sort?.order, }; }, SEARCH_DEBOUNCE_IN_MS), [fetchStakePools] @@ -67,7 +69,7 @@ export const useQueryStakePools = () => { limit: endIndex, searchString: searchQuery ?? '', skip: startIndex, - sort: { field: sortField, order: sortOrder }, + ...(sortField && sortOrder && { sort: { field: sortField, order: sortOrder } }), }); }, [debouncedSearch, searchQuery, sortField, sortOrder] @@ -108,10 +110,13 @@ export const useQueryStakePools = () => { searchQuery, setSearchQuery, setSort, - sort: { - field: sortField, - order: sortOrder, - }, + ...(sortField && + sortOrder && { + sort: { + field: sortField, + order: sortOrder, + }, + }), status, totalPoolsCount, }), diff --git a/packages/staking/src/features/store/delegationPortfolioStore/stateMachine/processExpandedViewCases.ts b/packages/staking/src/features/store/delegationPortfolioStore/stateMachine/processExpandedViewCases.ts index 076258008..272bc01ce 100644 --- a/packages/staking/src/features/store/delegationPortfolioStore/stateMachine/processExpandedViewCases.ts +++ b/packages/staking/src/features/store/delegationPortfolioStore/stateMachine/processExpandedViewCases.ts @@ -197,6 +197,8 @@ export const processExpandedViewCases: Handler = (params) => ({ state, command: { data } }) => ({ ...state, searchQuery: data, + sortField: undefined, + sortOrder: undefined, }) ), SetSort: handler(({ state, command: { data } }) => ({ diff --git a/packages/staking/src/features/store/delegationPortfolioStore/useDelegationPortfolioStore.ts b/packages/staking/src/features/store/delegationPortfolioStore/useDelegationPortfolioStore.ts index edc8b05a3..2446f46a2 100644 --- a/packages/staking/src/features/store/delegationPortfolioStore/useDelegationPortfolioStore.ts +++ b/packages/staking/src/features/store/delegationPortfolioStore/useDelegationPortfolioStore.ts @@ -1,4 +1,5 @@ import { Wallet } from '@lace/cardano'; +import { DEFAULT_SORT_OPTIONS } from 'features/BrowsePools/constants'; import { create } from 'zustand'; import { immer } from 'zustand/middleware/immer'; import { CARDANO_COIN_SYMBOL_BY_NETWORK, LAST_STABLE_EPOCH, PERCENTAGE_SCALE_MAX } from './constants'; @@ -24,6 +25,8 @@ const defaultState: DelegationPortfolioState = { draftPortfolio: undefined, pendingSelectedPortfolio: undefined, selectedPortfolio: [], + sortField: DEFAULT_SORT_OPTIONS.field, + sortOrder: DEFAULT_SORT_OPTIONS.order, view: undefined, viewedStakePool: undefined, }; diff --git a/packages/ui/src/design-system/table/table-header.component.tsx b/packages/ui/src/design-system/table/table-header.component.tsx index 0e26bd86a..f35debbba 100644 --- a/packages/ui/src/design-system/table/table-header.component.tsx +++ b/packages/ui/src/design-system/table/table-header.component.tsx @@ -17,7 +17,7 @@ export interface HeaderProps { isActiveSortItem: (value: string) => boolean; isSortingAvailable?: (value: string) => boolean; onSortChange: (field: T) => void; - order: 'asc' | 'desc'; + order?: 'asc' | 'desc'; withSelection?: boolean; dataTestId?: string; headers: Headers[]; @@ -58,7 +58,7 @@ export const Header = ({ {label} - {isSortingAvailable(value) && isActiveSortItem(value) && ( + {order && isSortingAvailable(value) && isActiveSortItem(value) && ( Date: Mon, 13 May 2024 11:12:27 +0100 Subject: [PATCH 2/2] fix: multi-wallet timeline container on small screen (#1152) * fix: multi-wallet timeline container on small screen * fix: responsiveness issue on multi-wallet main screen --- .../browser-view/features/multi-wallet/MultiWallet.module.scss | 2 ++ .../WalletSetupRevamp/WalletSetupStepLayoutRevamp.module.scss | 1 + 2 files changed, 3 insertions(+) diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/MultiWallet.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/MultiWallet.module.scss index eb2f57982..81897b45d 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/MultiWallet.module.scss +++ b/apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/MultiWallet.module.scss @@ -15,6 +15,8 @@ $container-width: 840px; max-height: 584px; width: 100%; height: 100%; + min-width: 650px; + overflow: auto; } :global(.ant-modal-body) { padding: 0; diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupStepLayoutRevamp.module.scss b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupStepLayoutRevamp.module.scss index afb619c60..d51e0eaba 100644 --- a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupStepLayoutRevamp.module.scss +++ b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupStepLayoutRevamp.module.scss @@ -12,6 +12,7 @@ width: 204px; border-right: 1px solid var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey)); margin: size_unit(5) 0; + min-width: 200px; .activeText { @include text-bodySmall-semi-bold;