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 = () => {
/>