@tradejs/app 1.0.0

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

@@ -0,0 +1,202 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  Box,
+  Heading,
+  Text,
+  Table,
+  HStack,
+  Spinner,
+  Button,
+  Input,
+} from '@chakra-ui/react';
+import { API } from '@tradejs/core/api';
+
+type SummaryResponse = {
+  rows: Array<{
+    symbol: string;
+    interval: string;
+    ts: string;
+    open_interest: number | null;
+    funding_rate: number | null;
+    liq_long: number | null;
+    liq_short: number | null;
+    liq_total: number | null;
+  }>;
+  aggregates: Array<{
+    symbol: string;
+    interval: string;
+    points: number;
+    last_ts: string;
+    avg_open_interest: number | null;
+    avg_funding_rate: number | null;
+    sum_liq_total: number | null;
+  }>;
+  hours: number;
+};
+
+const fmt = (value: number | null | undefined, digits = 4) => {
+  if (value == null || !Number.isFinite(Number(value))) return 'n/a';
+  return Number(value).toFixed(digits);
+};
+
+const DerivativesPage = () => {
+  const [hours, setHours] = useState('24');
+  const [limit, setLimit] = useState('500');
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<SummaryResponse | null>(null);
+  const [error, setError] = useState<string>('');
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const response = await API.get<SummaryResponse>(
+        `/api/derivatives/summary?hours=${hours}&limit=${limit}`,
+      );
+      setData(response);
+    } catch (err) {
+      setError((err as Error)?.message || 'Failed to load derivatives');
+    } finally {
+      setLoading(false);
+    }
+  }, [hours, limit]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const totals = useMemo(() => {
+    const aggregates = data?.aggregates ?? [];
+    return {
+      pairs: aggregates.length,
+      points: aggregates.reduce(
+        (acc, item) => acc + Number(item.points || 0),
+        0,
+      ),
+      liq: aggregates.reduce(
+        (acc, item) => acc + Number(item.sum_liq_total || 0),
+        0,
+      ),
+    };
+  }, [data]);
+
+  return (
+    <Box p={6}>
+      <Heading size="lg" mb={2}>
+        Derivatives Dashboard
+      </Heading>
+      <Text color="gray.500" mb={4}>
+        OI / Funding / Liquidations from Timescale (TF 15m, 1h)
+      </Text>
+
+      <HStack mb={4}>
+        <select
+          value={hours}
+          onChange={(e) => setHours(e.target.value)}
+          style={{
+            width: '160px',
+            border: '1px solid #d1d5db',
+            borderRadius: '8px',
+            padding: '8px',
+          }}
+        >
+          <option value="6">Last 6h</option>
+          <option value="24">Last 24h</option>
+          <option value="72">Last 72h</option>
+          <option value="168">Last 7d</option>
+        </select>
+        <Input
+          value={limit}
+          onChange={(e) => setLimit(e.target.value)}
+          width="160px"
+          placeholder="Row limit"
+        />
+        <Button onClick={load}>Refresh</Button>
+      </HStack>
+
+      {loading && <Spinner />}
+      {error && (
+        <Text color="red.400" mb={4}>
+          {error}
+        </Text>
+      )}
+
+      <Text mb={4}>
+        Symbols/TF: {totals.pairs} | Points: {totals.points} | Sum liquidation:{' '}
+        {fmt(totals.liq, 2)}
+      </Text>
+
+      <Heading size="md" mb={2}>
+        Aggregates
+      </Heading>
+      <Box overflowX="auto" mb={8}>
+        <Table.Root size="sm">
+          <Table.Header>
+            <Table.Row>
+              <Table.ColumnHeader>symbol</Table.ColumnHeader>
+              <Table.ColumnHeader>tf</Table.ColumnHeader>
+              <Table.ColumnHeader>points</Table.ColumnHeader>
+              <Table.ColumnHeader>last_ts</Table.ColumnHeader>
+              <Table.ColumnHeader>avg_oi</Table.ColumnHeader>
+              <Table.ColumnHeader>avg_funding</Table.ColumnHeader>
+              <Table.ColumnHeader>sum_liq</Table.ColumnHeader>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {(data?.aggregates ?? []).map((row) => (
+              <Table.Row key={`${row.symbol}:${row.interval}`}>
+                <Table.Cell>{row.symbol}</Table.Cell>
+                <Table.Cell>{row.interval}</Table.Cell>
+                <Table.Cell>{row.points}</Table.Cell>
+                <Table.Cell>
+                  {row.last_ts ? new Date(row.last_ts).toISOString() : 'n/a'}
+                </Table.Cell>
+                <Table.Cell>{fmt(row.avg_open_interest, 2)}</Table.Cell>
+                <Table.Cell>{fmt(row.avg_funding_rate, 6)}</Table.Cell>
+                <Table.Cell>{fmt(row.sum_liq_total, 2)}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </Box>
+
+      <Heading size="md" mb={2}>
+        Latest Points
+      </Heading>
+      <Box overflowX="auto">
+        <Table.Root size="sm">
+          <Table.Header>
+            <Table.Row>
+              <Table.ColumnHeader>ts</Table.ColumnHeader>
+              <Table.ColumnHeader>symbol</Table.ColumnHeader>
+              <Table.ColumnHeader>tf</Table.ColumnHeader>
+              <Table.ColumnHeader>oi</Table.ColumnHeader>
+              <Table.ColumnHeader>funding</Table.ColumnHeader>
+              <Table.ColumnHeader>liq_long</Table.ColumnHeader>
+              <Table.ColumnHeader>liq_short</Table.ColumnHeader>
+              <Table.ColumnHeader>liq_total</Table.ColumnHeader>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {(data?.rows ?? []).slice(0, 200).map((row, idx) => (
+              <Table.Row key={`${row.symbol}:${row.interval}:${row.ts}:${idx}`}>
+                <Table.Cell>{new Date(row.ts).toISOString()}</Table.Cell>
+                <Table.Cell>{row.symbol}</Table.Cell>
+                <Table.Cell>{row.interval}</Table.Cell>
+                <Table.Cell>{fmt(row.open_interest, 2)}</Table.Cell>
+                <Table.Cell>{fmt(row.funding_rate, 6)}</Table.Cell>
+                <Table.Cell>{fmt(row.liq_long, 2)}</Table.Cell>
+                <Table.Cell>{fmt(row.liq_short, 2)}</Table.Cell>
+                <Table.Cell>{fmt(row.liq_total, 2)}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </Box>
+    </Box>
+  );
+};
+
+export default DerivativesPage;

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

@@ -0,0 +1,155 @@
+'use client';
+
+import { Suspense, useEffect, useMemo, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Image from 'next/image';
+import { signIn, useSession } from 'next-auth/react';
+import { Box, Button, Field, Flex, Input, Stack, Text } from '@chakra-ui/react';
+
+const SigninContent = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { status } = useSession();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const callbackUrl = useMemo(
+    () => searchParams.get('callbackUrl') ?? '/routes/dashboard',
+    [searchParams],
+  );
+
+  useEffect(() => {
+    if (status === 'authenticated') {
+      router.replace(callbackUrl);
+    }
+  }, [status, router, callbackUrl]);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError('');
+    if (!username.trim() || !password) {
+      setError('Please enter username and password');
+      return;
+    }
+    setIsSubmitting(true);
+
+    const result = await signIn('credentials', {
+      redirect: false,
+      username,
+      password,
+      callbackUrl,
+    });
+
+    setIsSubmitting(false);
+
+    if (!result || result.error) {
+      setError('Invalid username or password');
+      return;
+    }
+
+    router.replace(callbackUrl);
+  };
+
+  return (
+    <Flex minH="100vh" direction={{ base: 'column', lg: 'row' }} bg="gray.950">
+      <Flex
+        w={{ base: 'full', lg: '33.333%' }}
+        px={{ base: 6, md: 10, lg: 12 }}
+        py={{ base: 10, lg: 12 }}
+        align="center"
+        justify={{ base: 'center', lg: 'flex-start' }}
+        minH={{ base: '100vh', lg: 'auto' }}
+      >
+        <form onSubmit={handleSubmit} style={{ width: '100%' }}>
+          <Box
+            w="full"
+            maxW={{ base: '360px', lg: '420px' }}
+            mx={{ base: 'auto', lg: 0 }}
+            display="flex"
+            flexDirection="column"
+            gap="6"
+          >
+            <Stack gap="4">
+              <Text fontSize="sm" opacity={0.7} letterSpacing="0.2em">
+                SIGN IN
+              </Text>
+              <Text fontSize="2xl" fontWeight="600">
+                TradeJS
+              </Text>
+            </Stack>
+
+            <Stack gap="4">
+              <Field.Root>
+                <Field.Label>Username</Field.Label>
+                <Input
+                  value={username}
+                  onChange={(event) => setUsername(event.target.value)}
+                  autoComplete="username"
+                  placeholder="Username"
+                />
+              </Field.Root>
+
+              <Field.Root>
+                <Field.Label>Password</Field.Label>
+                <Input
+                  value={password}
+                  onChange={(event) => setPassword(event.target.value)}
+                  type="password"
+                  autoComplete="current-password"
+                  placeholder="Password"
+                />
+              </Field.Root>
+            </Stack>
+
+            {error ? (
+              <Text fontSize="sm" color="red.300">
+                {error}
+              </Text>
+            ) : null}
+
+            <Button
+              type="submit"
+              loading={isSubmitting}
+              disabled={!username || !password}
+              bg="gray.900"
+              color="white"
+              _hover={{ bg: 'gray.800' }}
+            >
+              Sign in
+            </Button>
+          </Box>
+        </form>
+      </Flex>
+
+      <Box
+        display={{ base: 'none', lg: 'block' }}
+        w={{ lg: '66.666%' }}
+        minH="100vh"
+        bg="gray.900"
+        position="relative"
+        overflow="hidden"
+      >
+        <Image
+          src="/auth-bg.jpg"
+          alt="Market chart background"
+          fill
+          priority
+          sizes="(min-width: 1024px) 66vw, 0vw"
+          style={{ objectFit: 'cover', objectPosition: 'center' }}
+        />
+      </Box>
+    </Flex>
+  );
+};
+
+const SigninFallback = () => <Flex minH="100vh" bg="gray.950" />;
+
+const Signin = () => (
+  <Suspense fallback={<SigninFallback />}>
+    <SigninContent />
+  </Suspense>
+);
+
+export default Signin;

package/src/app/store/data.ts

@@ -0,0 +1,144 @@
+import { useEffect, useRef, useState } from 'react';
+import { create } from 'zustand';
+import _ from 'lodash';
+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 { isWrongData, mergeData } from '@tradejs/core/data';
+
+interface DataState {
+  data: Map<string, KlineChartData | null>;
+  setData: (
+    provider: Provider,
+    symbol: string,
+    interval: Interval,
+    data: KlineChartData,
+  ) => void;
+}
+
+const getKey = (filters: Pick<Filters, 'provider' | 'symbol' | 'interval'>) =>
+  `${filters.provider || 'bybit'}_${filters.symbol}_${filters.interval}`;
+
+const useDataStore = create<DataState>((set) => ({
+  data: new Map<string, KlineChartData | null>(),
+  setData: (provider, symbol, interval, newData) =>
+    set(({ data }) => {
+      const next = new Map(data);
+
+      next.set(getKey({ provider, symbol, interval }), newData);
+
+      return {
+        data: next,
+      };
+    }),
+}));
+
+export const useData = (filters: Filters) => {
+  const key = getKey(filters);
+  const prevKey = useRef(key);
+  const retried = useRef(false);
+  const [fulfilled, setFulfilled] = useState(false);
+  const storedData = useDataStore((s) => s.data.get(key));
+  const setData = useDataStore((s) => s.setData);
+
+  const searchParams = useSearchParams();
+  const cacheOnly = Boolean(searchParams.get('cacheOnly')) ?? false;
+
+  useEffect(() => {
+    if (key !== prevKey.current) {
+      setFulfilled(false);
+      prevKey.current = key;
+      retried.current = false;
+    }
+
+    const updateData = async () => {
+      const { provider = 'bybit', symbol, interval, start, end } = filters;
+      if (!symbol) {
+        if (!fulfilled) {
+          setFulfilled(true);
+        }
+        return;
+      }
+      let currentData = [...(storedData ?? [])];
+
+      if (!currentData || currentData.length < 2) {
+        const cachedResult = (await get(key)) as KlineChartData | null;
+
+        if (cachedResult && cachedResult.length > 2) {
+          currentData = [...cachedResult];
+        }
+      }
+
+      if (currentData?.length > 2 && isWrongData(interval, currentData)) {
+        console.warn('Wrong kline continuity, drop cache', symbol, interval);
+        currentData = [];
+        set(key, []);
+      }
+
+      const normStart = Math.max(
+        start,
+        currentData?.length > 2
+          ? currentData[currentData.length - 2]?.timestamp || 0
+          : 0,
+      );
+
+      const newData = await kline({
+        provider,
+        symbol,
+        interval,
+        start: normStart,
+        end,
+        cacheOnly,
+      });
+
+      const finalData = mergeData(currentData, newData);
+
+      if (
+        !cacheOnly &&
+        !retried.current &&
+        finalData.length > 2 &&
+        isWrongData(interval, finalData)
+      ) {
+        console.warn(
+          'Wrong kline continuity after merge, refetch full',
+          symbol,
+          interval,
+        );
+        retried.current = true;
+        set(key, []);
+        const refetchData = await kline({
+          provider,
+          symbol,
+          interval,
+          start,
+          end,
+          cacheOnly,
+        });
+        const cleaned = mergeData([], refetchData);
+        setData(provider as Provider, symbol, interval, cleaned);
+        if (!fulfilled) {
+          setFulfilled(true);
+        }
+        set(key, cleaned);
+        return;
+      }
+
+      setData(provider as Provider, symbol, interval, finalData);
+
+      if (!fulfilled) {
+        setFulfilled(true);
+      }
+
+      set(key, finalData);
+    };
+
+    void updateData();
+  }, [cacheOnly, filters, fulfilled, key, setData, storedData]);
+
+  return {
+    key,
+    data: storedData ?? [],
+    fulfilled,
+  };
+};

package/src/app/store/filters.ts

@@ -0,0 +1,29 @@
+import { create } from 'zustand';
+import { DASHBOARD_PRELOAD_DAYS } from '@tradejs/core/constants';
+import { getTimestamp } from '@tradejs/core/time';
+import { Interval, UIFilters } from '@tradejs/types';
+
+interface FiltersState {
+  filters: UIFilters;
+  setFilters: (filters: Partial<UIFilters>) => void;
+}
+
+const useStore = create<FiltersState>((set) => ({
+  filters: {
+    provider: 'bybit',
+    symbol: 'BTCUSDT',
+    interval: '15' as Interval,
+    start: getTimestamp(DASHBOARD_PRELOAD_DAYS),
+    end: getTimestamp(),
+    backtestId: null,
+    backtestStrategy: null,
+  } as UIFilters,
+  setFilters: (newFilters) =>
+    set(({ filters }) => ({ filters: { ...filters, ...newFilters } })),
+}));
+
+export const useFilters = () => {
+  const filters = useStore((s) => s.filters);
+  const setFilters = useStore((s) => s.setFilters);
+  return { filters, setFilters };
+};

package/src/app/store/index.ts

@@ -0,0 +1,13 @@
+export { useFilters } from './filters';
+export { useTickers } from './tickers';
+export { useIndicators } from './indicators';
+export type { IndicatorRendererConfig } from './indicators';
+export { useData } from './data';
+export {
+  useTest,
+  useTestsCompare,
+  useTestList,
+  useFavoriteTests,
+  useBacktest,
+  useBacktestMutations,
+} from './tests';