@tradejs/app 3.0.1 → 3.1.1

package/src/app/routes/derivatives/useDerivativesDashboard.ts

@@ -0,0 +1,105 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { API } from '@tradejs/core/api';
+import { toaster } from '#ui';
+import { FIXED_SYMBOLS, type ChartWindow } from './derivativesDashboardConfig';
+import { loadDerivativesDashboardData } from './derivativesDashboardLoader';
+import {
+  buildDerivativesDashboardViewModel,
+  type DerivativesInterval,
+  type DetailRow,
+  type PriceRow,
+  type SummaryResponse,
+} from './derivativesViewModel';
+
+export const useDerivativesDashboard = () => {
+  const [hours, setHours] = useState('24');
+  const [selectedInterval, setSelectedInterval] =
+    useState<DerivativesInterval>('1h');
+  const [summary, setSummary] = useState<SummaryResponse | null>(null);
+  const [detailsBySymbol, setDetailsBySymbol] = useState<
+    Record<string, DetailRow[]>
+  >({});
+  const [pricesBySymbol, setPricesBySymbol] = useState<
+    Record<string, PriceRow[]>
+  >({});
+  const [chartWindow, setChartWindow] = useState<ChartWindow>(() => {
+    const endTimestamp = Date.now();
+    return {
+      startTimestamp: endTimestamp - 24 * 60 * 60 * 1000,
+      endTimestamp,
+    };
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const requestRevision = useRef(0);
+
+  useEffect(() => {
+    const revision = ++requestRevision.current;
+    setLoading(true);
+    setError('');
+
+    void loadDerivativesDashboardData({
+      hours,
+      selectedInterval,
+      client: API,
+    })
+      .then((data) => {
+        if (requestRevision.current !== revision) return;
+        setSummary(data.summary);
+        setDetailsBySymbol(data.detailsBySymbol);
+        setPricesBySymbol(data.pricesBySymbol);
+        setChartWindow(data.chartWindow);
+      })
+      .catch((loadError) => {
+        if (requestRevision.current !== revision) return;
+        const message =
+          (loadError as Error)?.message || 'Failed to load derivatives';
+        setError(message);
+        toaster.error({
+          title: 'Failed to load derivatives',
+          description: message,
+        });
+      })
+      .finally(() => {
+        if (requestRevision.current === revision) setLoading(false);
+      });
+
+    return () => {
+      if (requestRevision.current === revision) requestRevision.current += 1;
+    };
+  }, [hours, selectedInterval]);
+
+  const dashboard = useMemo(
+    () =>
+      buildDerivativesDashboardViewModel({
+        symbols: FIXED_SYMBOLS,
+        selectedInterval,
+        summary,
+        detailsBySymbol,
+        pricesBySymbol,
+        summaryLoading: loading,
+        detailLoading: loading,
+        summaryError: error,
+        detailError: error,
+      }),
+    [
+      detailsBySymbol,
+      error,
+      loading,
+      pricesBySymbol,
+      selectedInterval,
+      summary,
+    ],
+  );
+
+  return {
+    hours,
+    setHours,
+    selectedInterval,
+    setSelectedInterval,
+    chartWindow,
+    dashboard,
+  };
+};

package/src/app/routes/strategies/StrategiesPageClient.tsx

@@ -1,10 +1,13 @@
 'use client';
 
 import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
-import { Box, Button, ClientOnly, Flex } from '@chakra-ui/react';
+import { Box, ClientOnly, Flex } from '@chakra-ui/react';
 import { usePathname } from 'next/navigation';
 import { FiFolder } from 'react-icons/fi';
-import type { StrategyChartsSnapshotResponse } from '@tradejs/types';
+import type {
+  RuntimeStrategiesResponse,
+  StrategyChartsSnapshotResponse,
+} from '@tradejs/types';
 import {
   deleteStrategyCard,
   getAiStrategies,
@@ -13,14 +16,12 @@ import {
 } from '#actions/strategies';
 import { RuntimeStrategyCard } from '#components/Strategies/RuntimeStrategyCard';
 import { RuntimeStrategyCardSkeleton } from '#components/Strategies/RuntimeStrategyCardSkeleton';
-import { RuntimeStrategyConfigDrawer } from '#components/Strategies/RuntimeStrategyConfigDrawer';
 import { StrategySnapshotList } from '#components/Strategies/StrategySnapshotList';
 import { BacktestResultsPageClient } from '#components/Backtest/ResultsPageClient';
 import {
   BulkDeleteToolbar,
   useBulkSelection,
 } from '#components/Shared/BulkSelection';
-import type { RuntimeStrategiesResponse } from '#app/lib/runtimeStrategyContracts';
 import { CARD_PAGE_CONTENT_MAX_WIDTH } from '#app/lib/cardPageLayout';
 import { EmptyState, Segment, Select, toaster } from '#ui';
 
@@ -83,7 +84,6 @@ const RuntimeStrategiesContent = () => {
   const [error, setError] = useState('');
   const [runtimeData, setRuntimeData] =
     useState<RuntimeStrategiesResponse | null>(null);
-  const [createRuntimeConfigOpen, setCreateRuntimeConfigOpen] = useState(false);
   const [snapshotData, setSnapshotData] =
     useState<StrategyChartsSnapshotResponse | null>(null);
   const isSnapshotMode = mode === 'replay' || mode === 'ai';
@@ -517,23 +517,8 @@ const RuntimeStrategiesContent = () => {
                   />
                 ) : null}
               </Flex>
-              {mode === 'runtime' ? (
-                <Button
-                  ml="auto"
-                  colorPalette="teal"
-                  onClick={() => setCreateRuntimeConfigOpen(true)}
-                >
-                  Create
-                </Button>
-              ) : null}
             </Flex>
 
-            <RuntimeStrategyConfigDrawer
-              open={createRuntimeConfigOpen}
-              onOpenChange={setCreateRuntimeConfigOpen}
-              onSaved={load}
-            />
-
             {isSnapshotMode ? (
               <BulkDeleteToolbar
                 selectedCount={selectedFilteredCount}