@tradejs/app 1.0.8 → 1.0.10

package/src/app/routes/dashboard/{[provider]/[symbol]/[interval]/page.tsx → Dashboard.tsx}

@@ -3,16 +3,26 @@
 import { useCallback, useEffect } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { Box, Flex, ClientOnly } from '@chakra-ui/react';
-import { useFilters, useTickers, useTestList } from '@store';
-import { Filters } from '@shared/Filters';
-import { MainChart } from '@app/components/Dashboard/MainChart';
-import { Interval, OnChangeFilters, Provider } from '@tradejs/types';
+import { useFilters, useTickers, useTestList } from '#store';
+import { Filters } from '#shared/Filters';
+import { MainChart } from '#app/components/Dashboard/MainChart';
+import {
+  Interval,
+  MarketUniverse,
+  OnChangeFilters,
+  Provider,
+} from '@tradejs/types';
+import {
+  buildDashboardPath,
+  parseDashboardPath as parseMarketDashboardPath,
+} from '#app/lib/marketRoutes';
 
-const Dashboard = () => {
+const DashboardRoute = () => {
   const searchParams = useSearchParams();
   const { filters, setFilters } = useFilters();
   const { tickers, ensureLoaded: ensureTickersLoaded } = useTickers(
     filters.provider || 'bybit',
+    filters.universe ?? 'crypto',
     { enabled: false },
   );
   const { tests, ensureLoaded: ensureBacktestsLoaded } = useTestList({
@@ -26,18 +36,18 @@ const Dashboard = () => {
   const isScreenshotMode = searchParams.get('screenshot') === '1';
 
   const parseDashboardPath = useCallback(() => {
-    const parts = window.location.pathname.split('/').filter(Boolean);
-    return {
-      provider: (parts[2] || filters.provider || 'bybit') as Provider,
-      symbol: (parts[3] || filters.symbol) as string,
-      interval: (parts[4] || filters.interval) as Interval,
-    };
+    return parseMarketDashboardPath(window.location.pathname, {
+      provider: (filters.provider || 'bybit') as Provider,
+      symbol: filters.symbol,
+      interval: filters.interval as Interval,
+    });
   }, [filters.interval, filters.provider, filters.symbol]);
 
   useEffect(() => {
     const parsed = parseDashboardPath();
     setFilters({
       provider: parsed.provider,
+      universe: parsed.universe,
       symbol: parsed.symbol,
       interval: parsed.interval,
       ...(hasBacktestId ? { backtestId } : {}),
@@ -59,14 +69,17 @@ const Dashboard = () => {
         ...filters,
         ...newFilters,
         provider: (newFilters.provider || parsed.provider) as Provider,
+        universe: (newFilters.universe || parsed.universe) as MarketUniverse,
         symbol: (newFilters.symbol || parsed.symbol) as string,
         interval: (newFilters.interval || parsed.interval) as Interval,
       };
       setFilters(nextFilters);
       const nextProvider = nextFilters.provider || 'bybit';
+      const nextUniverse = nextFilters.universe || 'crypto';
       const nextSymbol = nextFilters.symbol;
       const nextInterval = nextFilters.interval;
       const params = new URLSearchParams(window.location.search);
+      params.delete('universe');
 
       if (nextFilters.backtestId) {
         params.set('backtestId', nextFilters.backtestId);
@@ -80,12 +93,18 @@ const Dashboard = () => {
         params.delete('backtestStrategy');
       }
 
-      const search = params.toString();
-
       window.history.replaceState(
         null,
         '',
-        `/routes/dashboard/${nextProvider}/${nextSymbol}/${nextInterval}${search ? `?${search}` : ''}`,
+        buildDashboardPath(
+          {
+            provider: nextProvider,
+            universe: nextUniverse,
+            symbol: nextSymbol,
+            interval: nextInterval,
+          },
+          params,
+        ),
       );
     },
     [filters, parseDashboardPath, setFilters],
@@ -114,6 +133,7 @@ const Dashboard = () => {
           >
             <Flex mb={2} gap={4} alignItems="center" flexDirection="row">
               <Filters.SelectProvider />
+              {Filters.SelectUniverse ? <Filters.SelectUniverse /> : null}
               <Filters.SelectSymbol />
               <Filters.FavoriteIndicator />
               <Filters.SelectInterval />
@@ -132,4 +152,4 @@ const Dashboard = () => {
   );
 };
 
-export default Dashboard;
+export default DashboardRoute;

package/src/app/routes/dashboard/[provider]/[universe]/[symbol]/[interval]/page.tsx

@@ -0,0 +1 @@
+export { default } from '../../../../Dashboard';

package/src/app/routes/dashboard/page.tsx

@@ -2,7 +2,8 @@
 
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { useFilters } from '@store';
+import { useFilters } from '#store';
+import { buildDashboardPath } from '#app/lib/marketRoutes';
 
 const DashboardIndex = () => {
   const { filters } = useFilters();
@@ -10,9 +11,20 @@ const DashboardIndex = () => {
 
   useEffect(() => {
     router.replace(
-      `/routes/dashboard/${filters.provider || 'bybit'}/${filters.symbol}/${filters.interval}`,
+      buildDashboardPath({
+        provider: filters.provider || 'bybit',
+        universe: filters.universe || 'crypto',
+        symbol: filters.symbol,
+        interval: filters.interval,
+      }),
     );
-  }, [filters.interval, filters.provider, filters.symbol, router]);
+  }, [
+    filters.interval,
+    filters.provider,
+    filters.symbol,
+    filters.universe,
+    router,
+  ]);
 
   return null;
 };