@tradejs/app 1.0.9 → 1.0.11

package/src/app/store/data.ts

@@ -2,10 +2,20 @@ import { useEffect, useMemo, useState } from 'react';
 import { create } from 'zustand';
 import { get, set } from 'idb-keyval';
 import { useSearchParams } from 'next/navigation';
-import { KlineChartData, Interval, Filters, Provider } from '@tradejs/types';
-import { kline } from '@actions/kline';
+import {
+  KlineChartData,
+  Interval,
+  Filters,
+  MarketUniverse,
+  Provider,
+} from '@tradejs/types';
+import { kline } from '#actions/kline';
 import { isWrongData, mergeData } from '@tradejs/core/data';
-import { normalizeEndToIntervalBoundary } from '@app/lib/klineWindow';
+import { normalizeEndToIntervalBoundary } from '#app/lib/klineWindow';
+import {
+  buildDashboardKlineTopic,
+  subscribeMarketKline,
+} from './marketKlineStream';
 
 interface DataState {
   data: Map<string, KlineChartData | null>;
@@ -14,6 +24,7 @@ interface DataState {
     symbol: string,
     interval: Interval,
     data: KlineChartData,
+    universe?: MarketUniverse,
   ) => void;
 }
 
@@ -22,6 +33,7 @@ interface DataRequest {
   provider: Provider;
   symbol: string;
   interval: Interval;
+  universe: MarketUniverse;
   start: number;
   end: number;
   cacheBucketEnd: number;
@@ -30,17 +42,23 @@ interface DataRequest {
 
 const MIN_CACHED_CANDLES = 2;
 
-const getKey = (provider: Provider, symbol: string, interval: Interval) =>
-  `${provider}_${symbol}_${interval}`;
+const getKey = (
+  provider: Provider,
+  universe: MarketUniverse,
+  symbol: string,
+  interval: Interval,
+) => `${provider}_${universe}_${symbol}_${interval}`;
 
 const getProvider = (provider?: Provider): Provider => provider || 'bybit';
 
 const toRequest = (filters: Filters, cacheOnly: boolean): DataRequest => {
   const provider = getProvider(filters.provider);
+  const universe = filters.universe ?? 'crypto';
 
   return {
-    key: getKey(provider, filters.symbol, filters.interval),
+    key: getKey(provider, universe, filters.symbol, filters.interval),
     provider,
+    universe,
     symbol: filters.symbol,
     interval: filters.interval,
     start: filters.start,
@@ -75,11 +93,11 @@ const inFlightRequests = new Map<string, Promise<KlineChartData>>();
 
 const useDataStore = create<DataState>((set) => ({
   data: new Map<string, KlineChartData | null>(),
-  setData: (provider, symbol, interval, newData) =>
+  setData: (provider, symbol, interval, newData, universe = 'crypto') =>
     set(({ data }) => {
       const next = new Map(data);
 
-      next.set(getKey(provider, symbol, interval), newData);
+      next.set(getKey(provider, universe, symbol, interval), newData);
 
       return {
         data: next,
@@ -103,11 +121,12 @@ const getFetchStart = (start: number, data: KlineChartData) =>
 const requestKline = async (
   request: Pick<
     DataRequest,
-    'provider' | 'symbol' | 'interval' | 'end' | 'cacheOnly'
+    'provider' | 'universe' | 'symbol' | 'interval' | 'end' | 'cacheOnly'
   > & { start: number },
 ) =>
   kline({
     provider: request.provider,
+    universe: request.universe,
     symbol: request.symbol,
     interval: request.interval,
     start: request.start,
@@ -178,13 +197,14 @@ const mergeFreshData = async (
 const persistData = async (
   {
     provider,
+    universe,
     symbol,
     interval,
     key,
-  }: Pick<DataRequest, 'provider' | 'symbol' | 'interval' | 'key'>,
+  }: Pick<DataRequest, 'provider' | 'universe' | 'symbol' | 'interval' | 'key'>,
   data: KlineChartData,
 ) => {
-  useDataStore.getState().setData(provider, symbol, interval, data);
+  useDataStore.getState().setData(provider, symbol, interval, data, universe);
   await set(key, data);
 };
 
@@ -211,10 +231,10 @@ const fetchAndStoreData = async (dataRequest: DataRequest) => {
   return pendingRequest;
 };
 
-export const useData = (filters: Filters) => {
+export const useData = (filters: Filters, live = true) => {
   const searchParams = useSearchParams();
   const cacheOnly = Boolean(searchParams.get('cacheOnly')) ?? false;
-  const { end, interval, provider, start, symbol } = filters;
+  const { end, interval, provider, start, symbol, universe } = filters;
   const dataRequest = useMemo(
     () =>
       toRequest(
@@ -222,22 +242,27 @@ export const useData = (filters: Filters) => {
           end,
           interval,
           provider,
+          universe,
           start,
           symbol,
         } as Filters,
         cacheOnly,
       ),
-    [cacheOnly, end, interval, provider, start, symbol],
+    [cacheOnly, end, interval, provider, start, symbol, universe],
   );
   const requestKey = useMemo(() => getRequestKey(dataRequest), [dataRequest]);
   const [fulfilledRequestKey, setFulfilledRequestKey] = useState<string | null>(
     null,
   );
+  const [liveWindow, setLiveWindow] = useState({ key: '', end: 0 });
   const storedData = useDataStore((s) => s.data.get(dataRequest.key));
+  const effectiveEnd = Math.max(
+    dataRequest.end,
+    liveWindow.key === dataRequest.key ? liveWindow.end : dataRequest.end,
+  );
   const windowedData = useMemo(
-    () =>
-      filterDataToWindow(storedData ?? [], dataRequest.start, dataRequest.end),
-    [dataRequest.end, dataRequest.start, storedData],
+    () => filterDataToWindow(storedData ?? [], dataRequest.start, effectiveEnd),
+    [dataRequest.start, effectiveEnd, storedData],
   );
 
   const fulfilled = fulfilledRequestKey === requestKey;
@@ -267,6 +292,37 @@ export const useData = (filters: Filters) => {
     };
   }, [dataRequest, requestKey]);
 
+  useEffect(() => {
+    if (!live || cacheOnly || !dataRequest.symbol) return;
+    const topic = buildDashboardKlineTopic(dataRequest);
+    const catchUp = () => {
+      const end = Date.now();
+      void fetchAndStoreData({
+        ...dataRequest,
+        end,
+        cacheBucketEnd: normalizeEndToIntervalBoundary(
+          end,
+          dataRequest.interval,
+        ),
+      });
+    };
+    return subscribeMarketKline({
+      topic,
+      onReconnect: catchUp,
+      onEvent: (event) => {
+        setLiveWindow((current) => ({
+          key: dataRequest.key,
+          end: Math.max(
+            current.key === dataRequest.key ? current.end : dataRequest.end,
+            event.candle.timestamp,
+          ),
+        }));
+        const current = useDataStore.getState().data.get(dataRequest.key) ?? [];
+        void persistData(dataRequest, mergeData(current, [event.candle]));
+      },
+    });
+  }, [cacheOnly, dataRequest, live]);
+
   return {
     key: dataRequest.key,
     data: windowedData,

package/src/app/store/filters.ts

@@ -11,6 +11,7 @@ interface FiltersState {
 const useStore = create<FiltersState>((set) => ({
   filters: {
     provider: 'bybit',
+    universe: 'crypto',
     symbol: 'BTCUSDT',
     interval: '15' as Interval,
     start: getTimestamp(DASHBOARD_PRELOAD_DAYS),

package/src/app/store/marketKlineStream.ts

@@ -0,0 +1,87 @@
+import type { MarketKlineEvent } from '@tradejs/types';
+
+type MarketKlineMessage = {
+  type: 'kline';
+  topic: string;
+  event: MarketKlineEvent;
+};
+
+export const buildDashboardKlineTopic = ({
+  provider,
+  universe,
+  symbol,
+  interval,
+}: Pick<MarketKlineEvent, 'provider' | 'universe' | 'symbol' | 'interval'>) =>
+  [provider, universe, symbol.trim().toUpperCase(), interval].join(':');
+
+export const parseMarketKlineMessage = (
+  payload: string,
+): MarketKlineMessage | null => {
+  try {
+    const message = JSON.parse(payload) as Partial<MarketKlineMessage>;
+    if (
+      message.type !== 'kline' ||
+      typeof message.topic !== 'string' ||
+      !message.event?.candle ||
+      !Number.isFinite(message.event.candle.timestamp)
+    ) {
+      return null;
+    }
+    return message as MarketKlineMessage;
+  } catch {
+    return null;
+  }
+};
+
+export const getMarketWebSocketUrl = (location: Location) => {
+  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+  return `${protocol}//${location.host}/ws/market`;
+};
+
+export const subscribeMarketKline = ({
+  topic,
+  onEvent,
+  onReconnect,
+}: {
+  topic: string;
+  onEvent: (event: MarketKlineEvent) => void;
+  onReconnect: () => void;
+}) => {
+  let socket: WebSocket | null = null;
+  let stopped = false;
+  let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  let reconnectAttempt = 0;
+  let openedOnce = false;
+
+  const connect = () => {
+    if (stopped) return;
+    socket = new WebSocket(getMarketWebSocketUrl(window.location));
+    socket.onopen = () => {
+      reconnectAttempt = 0;
+      socket?.send(JSON.stringify({ op: 'subscribe', topics: [topic] }));
+      if (openedOnce) onReconnect();
+      openedOnce = true;
+    };
+    socket.onmessage = ({ data }) => {
+      const message = parseMarketKlineMessage(String(data));
+      if (message?.topic === topic) onEvent(message.event);
+    };
+    socket.onclose = () => {
+      if (stopped) return;
+      const delayMs = Math.min(30_000, 1_000 * 2 ** reconnectAttempt);
+      reconnectAttempt += 1;
+      reconnectTimer = setTimeout(connect, delayMs);
+    };
+    socket.onerror = () => socket?.close();
+  };
+
+  connect();
+  return () => {
+    stopped = true;
+    if (reconnectTimer) clearTimeout(reconnectTimer);
+    if (socket?.readyState === WebSocket.OPEN) {
+      socket.send(JSON.stringify({ op: 'unsubscribe', topics: [topic] }));
+    }
+    socket?.close();
+  };
+};

package/src/app/store/tests.ts

@@ -3,7 +3,7 @@ import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import _ from 'lodash';
 import { del, get, set } from 'idb-keyval';
-import { getBacktest, getBacktestFiles, getOrderLog } from '@actions/backtest';
+import { getBacktest, getBacktestFiles, getOrderLog } from '#actions/backtest';
 import {
   TestResult,
   TestCompareList,
@@ -18,6 +18,7 @@ const COMPARE_LOCAL_STORAGE_KEY = 'compare';
 const FAVORITE_LOCAL_STORAGE_KEY = 'favorite';
 const BACKTEST_FILES_CACHE_KEY = 'backtest-files';
 const BACKTEST_FILES_CACHE_TTL_MS = 5 * 60 * 1000;
+const testLoadRequests = new Map<string, Promise<void>>();
 
 const COLORS = [
   'purple',
@@ -180,6 +181,7 @@ const useTestsCompareStore = create<TestsCompareState>()(
 interface TestsState {
   tests: Map<string, TestResult | null>;
   setTest: (test: TestResult) => void;
+  setTestUnavailable: (testName: string) => void;
   removeTest: (testName: string) => void;
 }
 
@@ -190,6 +192,15 @@ const useTestsStore = create<TestsState>((set) => ({
       const next = new Map(tests);
       next.set(testResult.test.name, testResult);
 
+      return {
+        tests: next,
+      };
+    }),
+  setTestUnavailable: (testName) =>
+    set(({ tests }) => {
+      const next = new Map(tests);
+      next.set(testName, null);
+
       return {
         tests: next,
       };
@@ -357,49 +368,73 @@ export const useTestList = (filters: TestListProps = {}) => {
 
 export const useTest = (testName: string) => {
   const testResult = useTestsStore((s) => s.tests.get(testName));
+  const hasTestResult = useTestsStore((s) => s.tests.has(testName));
   const setTest = useTestsStore((s) => s.setTest);
+  const setTestUnavailable = useTestsStore((s) => s.setTestUnavailable);
   const tests = useTestListStore((s) => s.tests);
   const setTestList = useTestListStore((s) => s.setTest);
   const testItem = tests.find((item) => item.value === testName);
   const strategyName = testItem?.data?.strategyName as string | undefined;
 
   useEffect(() => {
-    const loadData = async () => {
-      if (!_.isEmpty(testResult)) {
-        return;
-      }
+    if (hasTestResult) {
+      return;
+    }
 
+    const loadData = async () => {
       const key = `test-${testName}`;
 
-      const cachedResult = (await get(key)) as TestResult | null;
+      try {
+        const cachedResult = (await get(key)) as TestResult | null;
 
-      if (!_.isEmpty(cachedResult)) {
-        setTest(cachedResult);
+        if (!_.isEmpty(cachedResult)) {
+          setTest(cachedResult);
 
-        return;
-      }
+          return;
+        }
 
-      let resolvedStrategy = strategyName;
-      if (!resolvedStrategy) {
-        const newTests = await loadBacktestFilesList();
-        setTestList(newTests);
-        resolvedStrategy = newTests.find((item) => item.value === testName)
-          ?.data?.strategyName as string | undefined;
-      }
+        let resolvedStrategy = strategyName;
+        if (!resolvedStrategy) {
+          const newTests = await loadBacktestFilesList();
+          setTestList(newTests);
+          resolvedStrategy = newTests.find((item) => item.value === testName)
+            ?.data?.strategyName as string | undefined;
+        }
 
-      const test = await getBacktest(testName, resolvedStrategy);
+        const test = await getBacktest(testName, resolvedStrategy);
 
-      if (!test) {
-        return;
-      }
+        if (!test) {
+          setTestUnavailable(testName);
+          return;
+        }
 
-      setTest(test);
+        setTest(test);
 
-      await set(key, test);
+        await set(key, test);
+      } catch {
+        setTestUnavailable(testName);
+      }
     };
 
-    void loadData();
-  }, [setTest, setTestList, strategyName, testName, testResult]);
+    let request = testLoadRequests.get(testName);
+
+    if (!request) {
+      request = loadData();
+      testLoadRequests.set(testName, request);
+      void request.finally(() => {
+        if (testLoadRequests.get(testName) === request) {
+          testLoadRequests.delete(testName);
+        }
+      });
+    }
+  }, [
+    hasTestResult,
+    setTest,
+    setTestList,
+    setTestUnavailable,
+    strategyName,
+    testName,
+  ]);
 
   return testResult;
 };
@@ -500,31 +535,33 @@ export const useBacktest = (id: string | undefined) => {
 
       setLoading(true);
 
-      const cachedResult = (await get(key)) as OrderLogData | null;
-
-      if (cachedResult && !_.isEmpty(cachedResult)) {
-        setBacktest(id, cachedResult);
-        setLoading(false);
+      try {
+        const cachedResult = (await get(key)) as OrderLogData | null;
 
-        return;
-      }
+        if (cachedResult && !_.isEmpty(cachedResult)) {
+          setBacktest(id, cachedResult);
+          return;
+        }
 
-      let resolvedStrategy = strategyName;
-      if (!resolvedStrategy) {
-        const newTests = await loadBacktestFilesList();
-        setTestList(newTests);
-        resolvedStrategy = newTests.find((item) => item.value === id)?.data
-          ?.strategyName as string | undefined;
-      }
+        let resolvedStrategy = strategyName;
+        if (!resolvedStrategy) {
+          const newTests = await loadBacktestFilesList();
+          setTestList(newTests);
+          resolvedStrategy = newTests.find((item) => item.value === id)?.data
+            ?.strategyName as string | undefined;
+        }
 
-      const backtestData = await getOrderLog(id, resolvedStrategy);
+        const backtestData = await getOrderLog(id, resolvedStrategy);
 
-      if (backtestData && !_.isEmpty(backtestData)) {
-        setBacktest(id, backtestData);
-        await set(key, backtestData);
+        if (backtestData && !_.isEmpty(backtestData)) {
+          setBacktest(id, backtestData);
+          await set(key, backtestData);
+        }
+      } catch {
+        // A missing or expired order-log artifact must not crash the dashboard.
+      } finally {
+        setLoading(false);
       }
-
-      setLoading(false);
     };
 
     void updateBacktest();
@@ -537,6 +574,7 @@ export const useBacktest = (id: string | undefined) => {
 };
 
 export const resetTestsStoreForTests = () => {
+  testLoadRequests.clear();
   useDataStore.setState({
     backtests: new Map<string, OrderLogData | null>(),
   });

package/src/app/store/tickers.ts

@@ -3,8 +3,8 @@ import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { get, set } from 'idb-keyval';
 import _ from 'lodash';
-import { scan } from '@actions/scanner';
-import { Items } from '@tradejs/types';
+import { scan } from '#actions/scanner';
+import { Items, MarketUniverse } from '@tradejs/types';
 
 const LOCAL_STORAGE_KEY = 'tickers';
 const TICKERS_CACHE_TTL_MS = 10 * 60 * 1000;
@@ -78,12 +78,29 @@ const useScannerStore = create<TickersScannerState>((set) => ({
     })),
 }));
 
-const getTickersCacheKey = (provider: string) => `tickers:${provider}`;
+const getProviderUniverseKey = (provider: string, universe: MarketUniverse) =>
+  universe === 'crypto' ? provider : `${provider}:${universe}`;
+const getTickersCacheKey = (providerUniverseKey: string) =>
+  `tickers:${providerUniverseKey}`;
 
 const isFresh = (savedAt: number) =>
   Date.now() - savedAt < TICKERS_CACHE_TTL_MS;
 
-const loadTickersForProvider = async (provider: string) => {
+const reportTickerLoadError = (
+  provider: string,
+  universe: MarketUniverse,
+  error: unknown,
+) => {
+  if (process.env.NODE_ENV !== 'test') {
+    console.warn(`Ticker loading failed for ${provider}:${universe}`, error);
+  }
+};
+
+const loadTickersForProvider = async (
+  provider: string,
+  universe: MarketUniverse,
+) => {
+  const providerUniverseKey = getProviderUniverseKey(provider, universe);
   const {
     tickersByProvider,
     loadedAtByProvider,
@@ -91,52 +108,72 @@ const loadTickersForProvider = async (provider: string) => {
     setTickers,
     setInFlight,
   } = useScannerStore.getState();
-  const memoryTickers = tickersByProvider[provider] ?? [];
-  const loadedAt = loadedAtByProvider[provider] ?? 0;
+  const memoryTickers = tickersByProvider[providerUniverseKey] ?? [];
+  const loadedAt = loadedAtByProvider[providerUniverseKey] ?? 0;
 
   if (memoryTickers.length && isFresh(loadedAt)) {
     return memoryTickers;
   }
 
-  const inFlight = inFlightByProvider[provider];
+  const inFlight = inFlightByProvider[providerUniverseKey];
   if (inFlight) {
     return inFlight;
   }
 
   const pending = (async () => {
     const cached = (await get(
-      getTickersCacheKey(provider),
+      getTickersCacheKey(providerUniverseKey),
     )) as TickersCacheRecord | null;
 
     if (cached?.items?.length && isFresh(cached.savedAt)) {
-      setTickers(provider, cached.items, cached.savedAt);
+      setTickers(providerUniverseKey, cached.items, cached.savedAt);
       return cached.items;
     }
 
-    const coins = await scan(provider);
+    let coins: Items;
+    try {
+      coins = await scan(provider, universe);
+    } catch (error) {
+      if (cached?.items?.length) {
+        setTickers(providerUniverseKey, cached.items, cached.savedAt);
+        return cached.items;
+      }
+      throw error;
+    }
     const savedAt = Date.now();
-    setTickers(provider, coins, savedAt);
-    await set(getTickersCacheKey(provider), {
+    setTickers(providerUniverseKey, coins, savedAt);
+    await set(getTickersCacheKey(providerUniverseKey), {
       savedAt,
       items: coins,
     } satisfies TickersCacheRecord);
     return coins;
-  })().finally(() => {
-    useScannerStore.getState().setInFlight(provider, undefined);
-  });
-
-  setInFlight(provider, pending);
+  })()
+    .catch((error) => {
+      reportTickerLoadError(provider, universe, error);
+      throw error;
+    })
+    .finally(() => {
+      useScannerStore.getState().setInFlight(providerUniverseKey, undefined);
+    });
+
+  setInFlight(providerUniverseKey, pending);
   return pending;
 };
 
 export const useTickers = (
   provider = 'bybit',
+  universeOrOptions: MarketUniverse | { enabled?: boolean } = 'crypto',
   options: { enabled?: boolean } = {},
 ) => {
-  const { enabled = true } = options;
+  const universe =
+    typeof universeOrOptions === 'string' ? universeOrOptions : 'crypto';
+  const { enabled = true } =
+    typeof universeOrOptions === 'string' ? options : universeOrOptions;
   const favorites = useFavoriteTickersStore((s) => s.favorites);
   const tickers = useScannerStore(
-    (s) => s.tickersByProvider[provider] ?? EMPTY_ITEMS,
+    (s) =>
+      s.tickersByProvider[getProviderUniverseKey(provider, universe)] ??
+      EMPTY_ITEMS,
   );
   const toggleFavorite = useFavoriteTickersStore((s) => s.toggleFavorite);
   const checkIsFavorite = useCallback(
@@ -144,8 +181,8 @@ export const useTickers = (
     [favorites],
   );
   const ensureLoaded = useCallback(
-    () => loadTickersForProvider(provider),
-    [provider],
+    () => loadTickersForProvider(provider, universe),
+    [provider, universe],
   );
 
   useEffect(() => {
@@ -153,7 +190,7 @@ export const useTickers = (
       return;
     }
 
-    void ensureLoaded();
+    void ensureLoaded().catch(() => undefined);
   }, [enabled, ensureLoaded]);
 
   const items = useMemo(() => {

package/src/proxy.ts

@@ -3,6 +3,8 @@ import { encode, getToken } from 'next-auth/jwt';
 import { consumeScreenshotSessionToken } from '@tradejs/infra/redis';
 
 const SIGNIN_PATH = '/routes/signin';
+const INSTALL_PATH = '/routes/install';
+const INSTALL_API_PATH = '/api/install';
 const SCREENSHOT_API_PREFIX = '/api/files/screenshot';
 const SCREENSHOT_SESSION_QUERY_PARAM = 'screenshotToken';
 const SESSION_COOKIE_NAME = 'authjs.session-token';
@@ -54,6 +56,8 @@ export const proxy = async (req: NextRequest) => {
     pathname.startsWith('/_next') ||
     pathname === '/favicon.ico' ||
     pathname.startsWith(SIGNIN_PATH) ||
+    pathname.startsWith(INSTALL_PATH) ||
+    pathname === INSTALL_API_PATH ||
     pathname.startsWith('/api/auth') ||
     pathname.startsWith(SCREENSHOT_API_PREFIX) ||
     (!pathname.startsWith('/api') && PUBLIC_FILE_RE.test(pathname))