@tradejs/app 1.0.9 → 1.0.11

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

@@ -2,22 +2,33 @@
 
 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 Link from 'next/link';
+import { Box, Button, 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,
+  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({
     symbol: filters.symbol,
-    enabled: false,
+    enabled: Boolean(filters.backtestId || filters.backtestStrategy),
   });
   const hasBacktestId = searchParams.has('backtestId');
   const hasBacktestStrategy = searchParams.has('backtestStrategy');
@@ -26,18 +37,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 +70,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 +94,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],
@@ -104,25 +124,46 @@ const Dashboard = () => {
         alignItems="flex-start"
       >
         {!isScreenshotMode && (
-          <Filters.Root
-            filters={filters}
-            tickers={tickers}
-            backtestFiles={tests}
-            onChangeFilters={onChangeFilters}
-            ensureTickersLoaded={ensureTickersLoaded}
-            ensureBacktestsLoaded={ensureBacktestsLoaded}
+          <Box
+            w="full"
+            display="grid"
+            gridTemplateColumns={{ base: '1fr', lg: 'minmax(0, 1fr) auto' }}
+            columnGap={4}
+            alignItems="start"
           >
-            <Flex mb={2} gap={4} alignItems="center" flexDirection="row">
-              <Filters.SelectProvider />
-              <Filters.SelectSymbol />
-              <Filters.FavoriteIndicator />
-              <Filters.SelectInterval />
-              <Filters.SelectIndicator />
-            </Flex>
-            <Flex mb={4} gap={4} flexDirection="row">
-              <Filters.SelectBacktest />
-            </Flex>
-          </Filters.Root>
+            <Box minW={0}>
+              <Filters.Root
+                filters={filters}
+                tickers={tickers}
+                backtestFiles={tests}
+                onChangeFilters={onChangeFilters}
+                ensureTickersLoaded={ensureTickersLoaded}
+                ensureBacktestsLoaded={ensureBacktestsLoaded}
+              >
+                <Flex mb={2} gap={4} alignItems="center" flexDirection="row">
+                  <Filters.SelectProvider />
+                  {Filters.SelectUniverse ? <Filters.SelectUniverse /> : null}
+                  <Filters.SelectSymbol />
+                  <Filters.FavoriteIndicator />
+                  <Filters.SelectInterval />
+                  <Filters.SelectIndicator />
+                </Flex>
+                <Flex mb={4} gap={4} flexDirection="row">
+                  <Filters.SelectBacktest />
+                </Flex>
+              </Filters.Root>
+            </Box>
+            <Button
+              asChild
+              bg="#20c5bd"
+              color="gray.950"
+              _hover={{ bg: '#42d8d0' }}
+              justifySelf={{ base: 'start', lg: 'end' }}
+              mb={4}
+            >
+              <Link href="/routes/backtest">Create backtest</Link>
+            </Button>
+          </Box>
         )}
         <Box position="relative" flex="1" w="full">
           <MainChart screenshotMode={isScreenshotMode} />
@@ -132,4 +173,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;
 };