chore(trading): adjust onboarding experience (#4754)

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;

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 {
+import { useMarketSelectorList } from './use-market-selector-list';
-  isMarketActive,
+import { isMarketActive } from '../../lib/utils';
-  useMarketSelectorList,
+import { Product } from './product-selector';
-} from './use-market-selector-list';
-import { Product } from '../../components/market-selector/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', () => ({

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';
-
+import { isMarketActive } from '../../lib/utils';
-// Used for sort order and filter
-const MARKET_TEMPLATE = [
-  MarketState.STATE_ACTIVE,
-  MarketState.STATE_SUSPENDED,
-  MarketState.STATE_PENDING,
-];
 
 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);
-};

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 { data } = useMarketList();
-    const link = Links[Routes.MARKETS]();
+  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 = () => {
           />
         </ul>
         <TradingButton
-          onClick={browseMarkets}
+          onClick={explore}
           className="block w-full"
           data-testid="browse-markets-button"
         >
-          {t('Browse the markets')}
+          {t('Explore')}
         </TradingButton>
       </div>
       <div className="sm:w-1/2 flex grow">

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);
+};