@tradejs/app 1.0.9 → 1.0.10

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,

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/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "lib": ["dom", "dom.iterable", "esnext"],
-    "types": ["jest", "node"],
+    "types": ["node"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -15,20 +15,20 @@
     "incremental": true,
     "target": "ES2017",
     "baseUrl": ".",
+    "resolvePackageJsonImports": true,
+    "paths": {
+      "#app/*": ["./src/app/*"],
+      "#actions/*": ["./src/app/actions/*"],
+      "#store": ["./src/app/store/index.ts"],
+      "#shared/*": ["./src/app/components/Shared/*"],
+      "#ui": ["./src/app/components/UI/index.ts"],
+      "#components/*": ["./src/app/components/*"]
+    },
     "plugins": [
       {
         "name": "next"
       }
-    ],
-    "paths": {
-      "@/*": ["./src/*"],
-      "@app/*": ["./src/app/*"],
-      "@actions/*": ["./src/app/actions/*"],
-      "@store": ["./src/app/store/index"],
-      "@shared/*": ["./src/app/components/Shared/*"],
-      "@UI": ["./src/app/components/UI/index"],
-      "@components/*": ["./src/app/components/*"]
-    }
+    ]
   },
   "include": [
     "next-env.d.ts",
@@ -37,5 +37,10 @@
     ".next/types/**/*.ts",
     ".next/dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules",
+    "src/**/__tests__",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx"
+  ]
 }

package/src/app/components/Backtest/TestCard/OpenReportButton/index.tsx

@@ -1,24 +0,0 @@
-import { IconButton } from '@chakra-ui/react';
-import { FiExternalLink } from 'react-icons/fi';
-import { useTestContext } from '../context';
-
-export const TestCardOpenReportButton = () => {
-  const { testResult } = useTestContext();
-
-  return (
-    <IconButton
-      size="xs"
-      colorPalette="teal"
-      variant="outline"
-      onClick={() =>
-        window.open(
-          `/routes/backtest/${testResult.test.name}`,
-          '_blank',
-          'noopener,noreferrer',
-        )
-      }
-    >
-      <FiExternalLink />
-    </IconButton>
-  );
-};

package/src/app/routes/backtest/[test]/page.tsx

@@ -1,33 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Box, ClientOnly } from '@chakra-ui/react';
-import { useParams } from 'next/navigation';
-import { TestCard } from '@components/Backtest/TestCard';
-
-const BacktestReport = () => {
-  const { test: testName } = useParams();
-
-  if (typeof testName !== 'string') {
-    return null;
-  }
-
-  return (
-    <ClientOnly>
-      <Box minH="100vh" bg="gray.900">
-        <Box minW="1200px" pl={4} pt={4}>
-          <TestCard.Root testName={testName} noWrapper={true}>
-            <TestCard.Title>
-              <TestCard.FavoriteIndicator />
-              <TestCard.ConfigDrawer />
-            </TestCard.Title>
-            <TestCard.Chart height="500px" />
-            <TestCard.StatTable />
-          </TestCard.Root>
-        </Box>
-      </Box>
-    </ClientOnly>
-  );
-};
-
-export default BacktestReport;