From 27e8ce88bf3e32f7fd93fd83cfff6565e9e55b35 Mon Sep 17 00:00:00 2001 From: Maciek Date: Tue, 12 Sep 2023 20:10:17 +0200 Subject: [PATCH] chore(trading): adjust onboarding experience (#4754) --- .../market-selector/market-selector.spec.tsx | 2 +- .../use-market-selector-list.spec.tsx | 10 +++---- .../use-market-selector-list.ts | 13 +--------- .../welcome-dialog/welcome-dialog-content.tsx | 26 ++++++++++++++++--- apps/trading/lib/utils/index.ts | 12 +++++++++ 5 files changed, 40 insertions(+), 23 deletions(-) create mode 100644 apps/trading/lib/utils/index.ts diff --git a/apps/trading/components/market-selector/market-selector.spec.tsx b/apps/trading/components/market-selector/market-selector.spec.tsx index f4cfadda6..588d78b7d 100644 --- a/apps/trading/components/market-selector/market-selector.spec.tsx +++ b/apps/trading/components/market-selector/market-selector.spec.tsx @@ -10,7 +10,7 @@ import type { SortType } from './sort-dropdown'; import { SortTypeMapping } from './sort-dropdown'; import { Sort } from './sort-dropdown'; import { subDays } from 'date-fns'; -import { isMarketActive } from './use-market-selector-list'; +import { isMarketActive } from '../../lib/utils'; jest.mock('@vegaprotocol/markets'); const mockUseMarketList = useMarketList as jest.Mock; diff --git a/apps/trading/components/market-selector/use-market-selector-list.spec.tsx b/apps/trading/components/market-selector/use-market-selector-list.spec.tsx index 5297dafc4..05dfa3836 100644 --- a/apps/trading/components/market-selector/use-market-selector-list.spec.tsx +++ b/apps/trading/components/market-selector/use-market-selector-list.spec.tsx @@ -1,15 +1,13 @@ import merge from 'lodash/merge'; import { renderHook } from '@testing-library/react'; -import { - isMarketActive, - useMarketSelectorList, -} from './use-market-selector-list'; -import { Product } from '../../components/market-selector/product-selector'; +import { useMarketSelectorList } from './use-market-selector-list'; +import { isMarketActive } from '../../lib/utils'; +import { Product } from './product-selector'; import { Sort } from './sort-dropdown'; import { createMarketFragment } from '@vegaprotocol/mock'; import { MarketState } from '@vegaprotocol/types'; import { useMarketList } from '@vegaprotocol/markets'; -import type { Filter } from '../../components/market-selector'; +import type { Filter } from './market-selector'; import { subDays } from 'date-fns'; jest.mock('@vegaprotocol/markets', () => ({ diff --git a/apps/trading/components/market-selector/use-market-selector-list.ts b/apps/trading/components/market-selector/use-market-selector-list.ts index 47f68e4c8..f22a3ca09 100644 --- a/apps/trading/components/market-selector/use-market-selector-list.ts +++ b/apps/trading/components/market-selector/use-market-selector-list.ts @@ -1,18 +1,11 @@ import { useMemo } from 'react'; import orderBy from 'lodash/orderBy'; -import { MarketState } from '@vegaprotocol/types'; import { calcTradedFactor, useMarketList } from '@vegaprotocol/markets'; import { priceChangePercentage } from '@vegaprotocol/utils'; import type { Filter } from '../../components/market-selector/market-selector'; import { Sort } from './sort-dropdown'; import { Product } from './product-selector'; - -// Used for sort order and filter -const MARKET_TEMPLATE = [ - MarketState.STATE_ACTIVE, - MarketState.STATE_SUSPENDED, - MarketState.STATE_PENDING, -]; +import { isMarketActive } from '../../lib/utils'; export const useMarketSelectorList = ({ product, @@ -87,7 +80,3 @@ export const useMarketSelectorList = ({ return { markets, data, loading, error, reload }; }; - -export const isMarketActive = (state: MarketState) => { - return MARKET_TEMPLATE.includes(state); -}; diff --git a/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx b/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx index 7e9564de4..1a2cedff6 100644 --- a/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx +++ b/apps/trading/components/welcome-dialog/welcome-dialog-content.tsx @@ -6,14 +6,32 @@ import { Links, Routes } from '../../pages/client-router'; import { Networks, useEnvironment } from '@vegaprotocol/environment'; import type { ReactNode } from 'react'; import { useOnboardingStore } from './welcome-dialog'; +import { useMarketList } from '@vegaprotocol/markets'; +import { isMarketActive } from '../../lib/utils'; +import orderBy from 'lodash/orderBy'; +import { priceChangePercentage } from '@vegaprotocol/utils'; export const WelcomeDialogContent = () => { const { VEGA_ENV } = useEnvironment(); const dismiss = useOnboardingStore((store) => store.dismiss); const navigate = useNavigate(); - const browseMarkets = () => { - const link = Links[Routes.MARKETS](); + const { data } = useMarketList(); + const markets = orderBy( + data?.filter((m) => isMarketActive(m.state)) || [], + [ + (m) => { + if (!m.candles?.length) return 0; + return Number(priceChangePercentage(m.candles.map((c) => c.close))); + }, + ], + ['desc'] + ); + const explore = () => { + const marketId = markets?.[0].id ?? ''; + const link = marketId + ? Links[Routes.MARKET](marketId) + : Links[Routes.MARKETS](); navigate(link); dismiss(); }; @@ -48,11 +66,11 @@ export const WelcomeDialogContent = () => { /> - {t('Browse the markets')} + {t('Explore')}
diff --git a/apps/trading/lib/utils/index.ts b/apps/trading/lib/utils/index.ts new file mode 100644 index 000000000..95c3e7329 --- /dev/null +++ b/apps/trading/lib/utils/index.ts @@ -0,0 +1,12 @@ +import { MarketState } from '@vegaprotocol/types'; + +// Used for sort order and filter +const MARKET_TEMPLATE = [ + MarketState.STATE_ACTIVE, + MarketState.STATE_SUSPENDED, + MarketState.STATE_PENDING, +]; + +export const isMarketActive = (state: MarketState) => { + return MARKET_TEMPLATE.includes(state); +};