@tradejs/app 3.0.1 → 3.1.1

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

@@ -0,0 +1,900 @@
+'use client';
+
+import { type ReactNode, useMemo } from 'react';
+import {
+  Badge,
+  Box,
+  Card,
+  Heading,
+  SimpleGrid,
+  Skeleton,
+  SkeletonText,
+  Stat,
+  Table,
+  Text,
+} from '@chakra-ui/react';
+import { Chart, useChart } from '@chakra-ui/charts';
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Legend,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  YAxis,
+} from 'recharts';
+import { format } from 'date-fns';
+import { FiBarChart2 } from 'react-icons/fi';
+import { formatTimeSeriesTooltipTimestamp } from '#app/lib/timeSeriesChart';
+import { TimeSeriesXAxis } from '#shared/Charts/TimeSeriesXAxis';
+import { EmptyState } from '#ui';
+import { FIXED_SYMBOLS, type ChartWindow } from './derivativesDashboardConfig';
+import {
+  type DerivativesChartRow,
+  type PriceChartRow,
+  type SymbolMetrics,
+  buildDerivativesDashboardViewModel,
+  toFiniteNumber,
+} from './derivativesViewModel';
+
+type SymbolChartTheme = {
+  primary: string;
+  primaryNegative: string;
+  secondary: string;
+};
+
+const SYMBOL_THEMES: Record<string, SymbolChartTheme> = {
+  BTCUSDT: {
+    primary: 'orange.solid',
+    primaryNegative: 'red.solid',
+    secondary: 'orange.solid',
+  },
+  ETHUSDT: {
+    primary: 'teal.solid',
+    primaryNegative: 'pink.solid',
+    secondary: 'teal.solid',
+  },
+};
+
+const compactFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 2,
+});
+
+const compactSignedFormatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 2,
+  signDisplay: 'always',
+});
+
+const formatCompact = (value: number | null | undefined) => {
+  const parsed = toFiniteNumber(value);
+  if (parsed == null) return 'n/a';
+  return compactFormatter.format(parsed);
+};
+
+const formatSignedCompact = (value: number | null | undefined) => {
+  const parsed = toFiniteNumber(value);
+  if (parsed == null) return 'n/a';
+  return compactSignedFormatter.format(parsed);
+};
+
+const formatPercent = (value: number | null | undefined) => {
+  const parsed = toFiniteNumber(value);
+  if (parsed == null) return 'n/a';
+  return `${parsed >= 0 ? '+' : ''}${parsed.toFixed(2)}%`;
+};
+
+const formatFunding = (value: number | null | undefined) => {
+  const parsed = toFiniteNumber(value);
+  if (parsed == null) return 'n/a';
+  const basisPoints = parsed * 10_000;
+  return `${basisPoints >= 0 ? '+' : ''}${basisPoints.toFixed(2)} bps`;
+};
+
+const formatAxisCompact = (value: number) =>
+  compactFormatter.format(Math.abs(value));
+
+const formatPrice = (value: number | null | undefined) => {
+  const parsed = toFiniteNumber(value);
+  if (parsed == null) return 'n/a';
+
+  const digits = parsed >= 1000 ? 2 : parsed >= 1 ? 3 : 6;
+  return parsed.toLocaleString('en-US', {
+    maximumFractionDigits: digits,
+    minimumFractionDigits: 0,
+  });
+};
+
+const getChartDomain = (
+  values: Array<number | null | undefined>,
+  options?: { includeZero?: boolean; minPaddingPct?: number },
+): [number, number] | undefined => {
+  const finite = values.filter(
+    (value): value is number =>
+      typeof value === 'number' && Number.isFinite(value),
+  );
+
+  if (!finite.length) return undefined;
+
+  let min = Math.min(...finite);
+  let max = Math.max(...finite);
+
+  if (options?.includeZero) {
+    min = Math.min(min, 0);
+    max = Math.max(max, 0);
+  }
+
+  const span = max - min;
+  const paddingPct = options?.minPaddingPct ?? 0.06;
+  const basePadding =
+    span > 0
+      ? span * paddingPct
+      : Math.max(Math.abs(max || min || 1) * paddingPct, 1e-6);
+
+  return [min - basePadding, max + basePadding];
+};
+
+const formatFullTime = (value: string | null | undefined) => {
+  if (!value) return 'n/a';
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return value;
+  return format(parsed, 'dd.MM.yyyy HH:mm');
+};
+
+const getValueColor = (value: number | null | undefined) => {
+  const parsed = toFiniteNumber(value);
+  if (parsed == null || parsed === 0) return 'gray.200';
+  return parsed > 0 ? 'teal.300' : 'red.300';
+};
+
+const getFundingColor = (value: number | null | undefined) => {
+  const parsed = toFiniteNumber(value);
+  if (parsed == null || parsed === 0) return 'gray.200';
+  return parsed > 0 ? 'orange.300' : 'teal.300';
+};
+
+const getSymbolLabel = (symbol: string) =>
+  symbol === 'BTCUSDT' ? 'BTC' : symbol === 'ETHUSDT' ? 'ETH' : symbol;
+
+const DashboardSkeleton = () => (
+  <>
+    <SimpleGrid columns={{ base: 1, lg: 2 }} gap={4} mb={6}>
+      {FIXED_SYMBOLS.map((symbol) => (
+        <Card.Root
+          key={symbol}
+          bg="gray.900"
+          borderColor="gray.800"
+          borderWidth="1px"
+          size="sm"
+        >
+          <Card.Header>
+            <Skeleton height="24px" width="120px" />
+          </Card.Header>
+          <Card.Body>
+            <SimpleGrid columns={{ base: 2, xl: 4 }} gap={4}>
+              {Array.from({ length: 4 }).map((_, index) => (
+                <Box key={`${symbol}:${index}`}>
+                  <SkeletonText noOfLines={2} gap="3" mb={2} />
+                  <Skeleton height="18px" width="70%" />
+                </Box>
+              ))}
+            </SimpleGrid>
+          </Card.Body>
+        </Card.Root>
+      ))}
+    </SimpleGrid>
+
+    <SimpleGrid columns={{ base: 1, lg: 2 }} gap={4} mb={6}>
+      <Card.Root
+        bg="gray.900"
+        borderColor="gray.800"
+        borderWidth="1px"
+        size="sm"
+      >
+        <Card.Header>
+          <Skeleton height="24px" width="220px" />
+        </Card.Header>
+        <Card.Body>
+          <Skeleton height="280px" />
+        </Card.Body>
+      </Card.Root>
+      <Card.Root
+        bg="gray.900"
+        borderColor="gray.800"
+        borderWidth="1px"
+        size="sm"
+      >
+        <Card.Header>
+          <Skeleton height="24px" width="220px" />
+        </Card.Header>
+        <Card.Body>
+          <Skeleton height="280px" />
+        </Card.Body>
+      </Card.Root>
+    </SimpleGrid>
+
+    <SimpleGrid columns={{ base: 1, lg: 2 }} gap={4} mb={6}>
+      <Card.Root
+        bg="gray.900"
+        borderColor="gray.800"
+        borderWidth="1px"
+        size="sm"
+      >
+        <Card.Header>
+          <Skeleton height="24px" width="220px" />
+        </Card.Header>
+        <Card.Body>
+          <Skeleton height="280px" />
+        </Card.Body>
+      </Card.Root>
+      <Card.Root
+        bg="gray.900"
+        borderColor="gray.800"
+        borderWidth="1px"
+        size="sm"
+      >
+        <Card.Header>
+          <Skeleton height="24px" width="220px" />
+        </Card.Header>
+        <Card.Body>
+          <Skeleton height="280px" />
+        </Card.Body>
+      </Card.Root>
+    </SimpleGrid>
+
+    <SimpleGrid columns={{ base: 1, lg: 2 }} gap={4} mb={6}>
+      <Card.Root
+        bg="gray.900"
+        borderColor="gray.800"
+        borderWidth="1px"
+        size="sm"
+      >
+        <Card.Header>
+          <Skeleton height="24px" width="220px" />
+        </Card.Header>
+        <Card.Body>
+          <Skeleton height="280px" />
+        </Card.Body>
+      </Card.Root>
+      <Card.Root
+        bg="gray.900"
+        borderColor="gray.800"
+        borderWidth="1px"
+        size="sm"
+      >
+        <Card.Header>
+          <Skeleton height="24px" width="220px" />
+        </Card.Header>
+        <Card.Body>
+          <Skeleton height="280px" />
+        </Card.Body>
+      </Card.Root>
+    </SimpleGrid>
+
+    <SimpleGrid columns={{ base: 1, lg: 2 }} gap={4} mb={6}>
+      <Card.Root
+        bg="gray.900"
+        borderColor="gray.800"
+        borderWidth="1px"
+        size="sm"
+      >
+        <Card.Header>
+          <Skeleton height="24px" width="220px" />
+        </Card.Header>
+        <Card.Body>
+          <Skeleton height="320px" />
+        </Card.Body>
+      </Card.Root>
+      <Card.Root
+        bg="gray.900"
+        borderColor="gray.800"
+        borderWidth="1px"
+        size="sm"
+      >
+        <Card.Header>
+          <Skeleton height="24px" width="260px" />
+        </Card.Header>
+        <Card.Body>
+          <Skeleton height="320px" />
+        </Card.Body>
+      </Card.Root>
+    </SimpleGrid>
+
+    <Card.Root bg="gray.900" borderColor="gray.800" borderWidth="1px" size="sm">
+      <Card.Header>
+        <Skeleton height="24px" width="180px" />
+      </Card.Header>
+      <Card.Body>
+        <SkeletonText noOfLines={8} gap="5" />
+      </Card.Body>
+    </Card.Root>
+  </>
+);
+
+const SymbolMetricsCard = ({
+  title,
+  metrics,
+}: {
+  title: string;
+  metrics: SymbolMetrics;
+}) => (
+  <Card.Root bg="gray.900" borderColor="gray.800" borderWidth="1px" size="sm">
+    <Card.Header pb={0}>
+      <Heading size="md">{title}</Heading>
+      <Text mt={1} color="gray.500" fontSize="sm">
+        Updated {formatFullTime(metrics.lastTs)}
+      </Text>
+    </Card.Header>
+    <Card.Body>
+      <SimpleGrid columns={{ base: 2, xl: 4 }} gap={4}>
+        <Stat.Root>
+          <Stat.Label color="gray.400">Open Interest</Stat.Label>
+          <Stat.ValueText color={getValueColor(metrics.oiChange)}>
+            {formatCompact(metrics.currentOpenInterest)}
+          </Stat.ValueText>
+        </Stat.Root>
+        <Stat.Root>
+          <Stat.Label color="gray.400">OI Change</Stat.Label>
+          <Stat.ValueText color={getValueColor(metrics.oiChangePct)}>
+            {formatPercent(metrics.oiChangePct)}
+          </Stat.ValueText>
+          <Stat.HelpText color="gray.500">
+            {formatSignedCompact(metrics.oiChange)}
+          </Stat.HelpText>
+        </Stat.Root>
+        <Stat.Root>
+          <Stat.Label color="gray.400">Funding</Stat.Label>
+          <Stat.ValueText color={getFundingColor(metrics.currentFundingRate)}>
+            {formatFunding(metrics.currentFundingRate)}
+          </Stat.ValueText>
+          <Stat.HelpText color="gray.500">
+            Delta {formatFunding(metrics.fundingChange)}
+          </Stat.HelpText>
+        </Stat.Root>
+        <Stat.Root>
+          <Stat.Label color="gray.400">Liquidations</Stat.Label>
+          <Stat.ValueText color="gray.200">
+            {formatCompact(metrics.sumLiqTotal)}
+          </Stat.ValueText>
+          <Stat.HelpText color="gray.500">
+            Long {formatCompact(metrics.sumLiqLong)} / Short{' '}
+            {formatCompact(metrics.sumLiqShort)}
+          </Stat.HelpText>
+        </Stat.Root>
+      </SimpleGrid>
+    </Card.Body>
+  </Card.Root>
+);
+
+const ChartCard = ({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description: string;
+  children: ReactNode;
+}) => (
+  <Card.Root bg="gray.900" borderColor="gray.800" borderWidth="1px" size="sm">
+    <Card.Header pb={0}>
+      <Heading size="md">{title}</Heading>
+      <Text mt={1} color="gray.500" fontSize="sm">
+        {description}
+      </Text>
+    </Card.Header>
+    <Card.Body>{children}</Card.Body>
+  </Card.Root>
+);
+
+const SymbolPriceCard = ({
+  symbol,
+  chartRows,
+  window,
+}: {
+  symbol: string;
+  chartRows: PriceChartRow[];
+  window: ChartWindow;
+}) => {
+  const theme = SYMBOL_THEMES[symbol];
+  const symbolLabel = getSymbolLabel(symbol);
+
+  const priceChartConfig = useMemo(
+    () => ({
+      data: chartRows,
+      series: [{ name: 'price', color: theme.primary }],
+    }),
+    [chartRows, theme.primary],
+  );
+
+  const priceChart = useChart(priceChartConfig as never);
+  const latestPrice = chartRows[chartRows.length - 1]?.price ?? null;
+  const priceDomain = useMemo(
+    () => getChartDomain(chartRows.map((row) => row.price)),
+    [chartRows],
+  );
+
+  return (
+    <ChartCard
+      title={`${symbolLabel} Price`}
+      description={`Last close ${formatPrice(latestPrice)}`}
+    >
+      <Box h="280px">
+        <ResponsiveContainer width="100%" height="100%">
+          <Chart.Root chart={priceChart}>
+            <AreaChart data={priceChart.data}>
+              <defs>
+                <linearGradient
+                  id={`${symbol}-price-fill`}
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop
+                    offset="5%"
+                    stopColor={priceChart.color(theme.primary)}
+                    stopOpacity={0.28}
+                  />
+                  <stop
+                    offset="95%"
+                    stopColor={priceChart.color(theme.primary)}
+                    stopOpacity={0}
+                  />
+                </linearGradient>
+              </defs>
+              <CartesianGrid
+                stroke={priceChart.color('border')}
+                vertical={false}
+              />
+              <TimeSeriesXAxis
+                startTimestamp={window.startTimestamp}
+                endTimestamp={window.endTimestamp}
+                tickCount={5}
+                minTickGap={36}
+              />
+              <YAxis domain={priceDomain} tickFormatter={formatPrice} />
+              <Tooltip
+                cursor={false}
+                content={
+                  <Chart.Tooltip
+                    labelFormatter={formatTimeSeriesTooltipTimestamp}
+                  />
+                }
+              />
+              <Area
+                type="monotone"
+                dataKey={priceChart.key('price') as string}
+                stroke={priceChart.color(theme.primary)}
+                fill={`url(#${symbol}-price-fill)`}
+                strokeWidth={2}
+                dot={false}
+                isAnimationActive={false}
+              />
+            </AreaChart>
+          </Chart.Root>
+        </ResponsiveContainer>
+      </Box>
+    </ChartCard>
+  );
+};
+
+const SymbolOpenInterestCard = ({
+  symbol,
+  chartRows,
+  window,
+}: {
+  symbol: string;
+  chartRows: DerivativesChartRow[];
+  window: ChartWindow;
+}) => {
+  const theme = SYMBOL_THEMES[symbol];
+  const symbolLabel = getSymbolLabel(symbol);
+
+  const oiChartConfig = useMemo(
+    () => ({
+      data: chartRows,
+      series: [{ name: 'openInterest', color: theme.primary }],
+    }),
+    [chartRows, theme.primary],
+  );
+
+  const oiChart = useChart(oiChartConfig as never);
+  const oiDomain = useMemo(
+    () => getChartDomain(chartRows.map((row) => row.openInterest)),
+    [chartRows],
+  );
+
+  return (
+    <ChartCard
+      title={`${symbolLabel} Open Interest`}
+      description="Position size through the selected window."
+    >
+      <Box h="280px">
+        <ResponsiveContainer width="100%" height="100%">
+          <Chart.Root chart={oiChart}>
+            <AreaChart data={oiChart.data}>
+              <defs>
+                <linearGradient
+                  id={`${symbol}-oi-fill`}
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop
+                    offset="5%"
+                    stopColor={oiChart.color(theme.primary)}
+                    stopOpacity={0.3}
+                  />
+                  <stop
+                    offset="95%"
+                    stopColor={oiChart.color(theme.primary)}
+                    stopOpacity={0}
+                  />
+                </linearGradient>
+              </defs>
+              <CartesianGrid
+                stroke={oiChart.color('border')}
+                vertical={false}
+              />
+              <TimeSeriesXAxis
+                startTimestamp={window.startTimestamp}
+                endTimestamp={window.endTimestamp}
+                tickCount={5}
+                minTickGap={36}
+              />
+              <YAxis domain={oiDomain} tickFormatter={formatAxisCompact} />
+              <Tooltip
+                cursor={false}
+                content={
+                  <Chart.Tooltip
+                    labelFormatter={formatTimeSeriesTooltipTimestamp}
+                  />
+                }
+              />
+              <Area
+                type="monotone"
+                dataKey={oiChart.key('openInterest') as string}
+                stroke={oiChart.color(theme.primary)}
+                fill={`url(#${symbol}-oi-fill)`}
+                strokeWidth={2}
+                dot={false}
+                isAnimationActive={false}
+              />
+            </AreaChart>
+          </Chart.Root>
+        </ResponsiveContainer>
+      </Box>
+    </ChartCard>
+  );
+};
+
+const SymbolFundingCard = ({
+  symbol,
+  chartRows,
+  window,
+}: {
+  symbol: string;
+  chartRows: DerivativesChartRow[];
+  window: ChartWindow;
+}) => {
+  const theme = SYMBOL_THEMES[symbol];
+  const symbolLabel = getSymbolLabel(symbol);
+
+  const fundingChartConfig = useMemo(
+    () => ({
+      data: chartRows,
+      series: [{ name: 'funding', color: theme.primary }],
+    }),
+    [chartRows, theme.primary],
+  );
+
+  const fundingChart = useChart(fundingChartConfig as never);
+
+  return (
+    <ChartCard
+      title={`${symbolLabel} Funding`}
+      description="Positive values mean longs pay shorts."
+    >
+      <Box h="280px">
+        <ResponsiveContainer width="100%" height="100%">
+          <Chart.Root chart={fundingChart}>
+            <BarChart data={fundingChart.data}>
+              <CartesianGrid
+                stroke={fundingChart.color('border')}
+                vertical={false}
+              />
+              <ReferenceLine
+                y={0}
+                stroke={fundingChart.color('gray.600')}
+                strokeDasharray="4 4"
+              />
+              <TimeSeriesXAxis
+                startTimestamp={window.startTimestamp}
+                endTimestamp={window.endTimestamp}
+                tickCount={5}
+                minTickGap={36}
+              />
+              <YAxis tickFormatter={(value) => `${value} bps`} />
+              <Tooltip
+                cursor={false}
+                content={
+                  <Chart.Tooltip
+                    labelFormatter={formatTimeSeriesTooltipTimestamp}
+                  />
+                }
+              />
+              <Bar
+                dataKey={fundingChart.key('funding') as string}
+                isAnimationActive={false}
+              >
+                {fundingChart.data.map((entry, idx) => (
+                  <Cell
+                    key={`${symbol}:${entry.timestamp}:${idx}`}
+                    fill={
+                      entry.funding >= 0
+                        ? fundingChart.color(theme.primary)
+                        : fundingChart.color(theme.primaryNegative)
+                    }
+                  />
+                ))}
+              </Bar>
+            </BarChart>
+          </Chart.Root>
+        </ResponsiveContainer>
+      </Box>
+    </ChartCard>
+  );
+};
+
+const SymbolLiquidationCard = ({
+  symbol,
+  chartRows,
+  window,
+}: {
+  symbol: string;
+  chartRows: DerivativesChartRow[];
+  window: ChartWindow;
+}) => {
+  const theme = SYMBOL_THEMES[symbol];
+  const symbolLabel = getSymbolLabel(symbol);
+
+  const liquidationChartConfig = useMemo(
+    () => ({
+      data: chartRows,
+      series: [
+        { name: 'longLiquidations', color: theme.primaryNegative },
+        { name: 'shortLiquidations', color: theme.secondary },
+      ],
+    }),
+    [chartRows, theme.primaryNegative, theme.secondary],
+  );
+
+  const liquidationChart = useChart(liquidationChartConfig as never);
+
+  return (
+    <ChartCard
+      title={`${symbolLabel} Liquidation Pressure`}
+      description="Long liquidations are below zero, short liquidations are above zero."
+    >
+      <Box h="320px">
+        <ResponsiveContainer width="100%" height="100%">
+          <Chart.Root chart={liquidationChart}>
+            <BarChart data={liquidationChart.data}>
+              <CartesianGrid
+                stroke={liquidationChart.color('border')}
+                vertical={false}
+              />
+              <ReferenceLine
+                y={0}
+                stroke={liquidationChart.color('gray.600')}
+                strokeDasharray="4 4"
+              />
+              <TimeSeriesXAxis
+                startTimestamp={window.startTimestamp}
+                endTimestamp={window.endTimestamp}
+                tickCount={5}
+                minTickGap={28}
+              />
+              <YAxis tickFormatter={formatAxisCompact} />
+              <Tooltip
+                cursor={false}
+                content={
+                  <Chart.Tooltip
+                    labelFormatter={formatTimeSeriesTooltipTimestamp}
+                  />
+                }
+              />
+              <Legend />
+              <Bar
+                dataKey={liquidationChart.key('longLiquidations') as string}
+                name={`${symbolLabel} long liq`}
+                fill={liquidationChart.color(theme.primaryNegative)}
+                isAnimationActive={false}
+              />
+              <Bar
+                dataKey={liquidationChart.key('shortLiquidations') as string}
+                name={`${symbolLabel} short liq`}
+                fill={liquidationChart.color(theme.secondary)}
+                isAnimationActive={false}
+              />
+            </BarChart>
+          </Chart.Root>
+        </ResponsiveContainer>
+      </Box>
+    </ChartCard>
+  );
+};
+
+type DashboardViewModel = ReturnType<typeof buildDerivativesDashboardViewModel>;
+
+export const DerivativesDashboardView = ({
+  dashboard,
+  chartWindow,
+}: {
+  dashboard: DashboardViewModel;
+  chartWindow: ChartWindow;
+}) => {
+  const {
+    chartDataBySymbol,
+    metricsBySymbol,
+    noDetailData,
+    noSummaryData,
+    overviewRows,
+    showSkeleton,
+  } = dashboard;
+
+  if (showSkeleton) return <DashboardSkeleton />;
+  if (noSummaryData) {
+    return (
+      <EmptyState
+        icon={FiBarChart2}
+        title="No derivatives data found"
+        description="There are no BTC or ETH derivatives rows for the selected time window and interval."
+      />
+    );
+  }
+
+  return (
+    <>
+      {noDetailData ? (
+        <EmptyState
+          icon={FiBarChart2}
+          title="No chart data for BTC and ETH"
+          description="Try another interval or a wider time window."
+        />
+      ) : (
+        <>
+          <SimpleGrid columns={{ base: 1, lg: 2 }} gap={4} mb={6}>
+            {FIXED_SYMBOLS.map((symbol) => (
+              <SymbolMetricsCard
+                key={symbol}
+                title={`${getSymbolLabel(symbol)} Snapshot`}
+                metrics={metricsBySymbol[symbol]}
+              />
+            ))}
+          </SimpleGrid>
+          <SimpleGrid columns={{ base: 1, lg: 2 }} gap={4} mb={6}>
+            {FIXED_SYMBOLS.map((symbol) => (
+              <SymbolPriceCard
+                key={`${symbol}:price`}
+                symbol={symbol}
+                chartRows={chartDataBySymbol[symbol].prices}
+                window={chartWindow}
+              />
+            ))}
+          </SimpleGrid>
+          <SimpleGrid columns={{ base: 1, lg: 2 }} gap={4} mb={6}>
+            {FIXED_SYMBOLS.map((symbol) => (
+              <SymbolOpenInterestCard
+                key={`${symbol}:oi`}
+                symbol={symbol}
+                chartRows={chartDataBySymbol[symbol].derivatives}
+                window={chartWindow}
+              />
+            ))}
+          </SimpleGrid>
+          <SimpleGrid columns={{ base: 1, lg: 2 }} gap={4} mb={6}>
+            {FIXED_SYMBOLS.map((symbol) => (
+              <SymbolFundingCard
+                key={`${symbol}:funding`}
+                symbol={symbol}
+                chartRows={chartDataBySymbol[symbol].derivatives}
+                window={chartWindow}
+              />
+            ))}
+          </SimpleGrid>
+          <SimpleGrid columns={{ base: 1, lg: 2 }} gap={4} mb={6}>
+            {FIXED_SYMBOLS.map((symbol) => (
+              <SymbolLiquidationCard
+                key={`${symbol}:liq`}
+                symbol={symbol}
+                chartRows={chartDataBySymbol[symbol].derivatives}
+                window={chartWindow}
+              />
+            ))}
+          </SimpleGrid>
+        </>
+      )}
+
+      <Card.Root
+        bg="gray.900"
+        borderColor="gray.800"
+        borderWidth="1px"
+        size="sm"
+      >
+        <Card.Header>
+          <Heading size="md">BTC / ETH Overview</Heading>
+          <Text mt={1} color="gray.500" fontSize="sm">
+            One row per symbol for the selected interval and window.
+          </Text>
+        </Card.Header>
+        <Card.Body>
+          <Box overflowX="auto">
+            <Table.Root size="sm">
+              <Table.Header>
+                <Table.Row>
+                  <Table.ColumnHeader>Symbol</Table.ColumnHeader>
+                  <Table.ColumnHeader textAlign="right">OI</Table.ColumnHeader>
+                  <Table.ColumnHeader textAlign="right">
+                    OI Δ
+                  </Table.ColumnHeader>
+                  <Table.ColumnHeader textAlign="right">
+                    Funding
+                  </Table.ColumnHeader>
+                  <Table.ColumnHeader textAlign="right">
+                    Long Liq
+                  </Table.ColumnHeader>
+                  <Table.ColumnHeader textAlign="right">
+                    Short Liq
+                  </Table.ColumnHeader>
+                  <Table.ColumnHeader>Pressure</Table.ColumnHeader>
+                  <Table.ColumnHeader>Updated</Table.ColumnHeader>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {overviewRows.map(({ symbol, metrics, bias }) => (
+                  <Table.Row key={symbol}>
+                    <Table.Cell>
+                      <Text fontWeight="semibold">
+                        {getSymbolLabel(symbol)}
+                      </Text>
+                    </Table.Cell>
+                    <Table.Cell textAlign="right">
+                      {formatCompact(metrics.currentOpenInterest)}
+                    </Table.Cell>
+                    <Table.Cell textAlign="right">
+                      <Text color={getValueColor(metrics.oiChangePct)}>
+                        {formatPercent(metrics.oiChangePct)}
+                      </Text>
+                    </Table.Cell>
+                    <Table.Cell textAlign="right">
+                      <Text color={getFundingColor(metrics.currentFundingRate)}>
+                        {formatFunding(metrics.currentFundingRate)}
+                      </Text>
+                    </Table.Cell>
+                    <Table.Cell textAlign="right">
+                      {formatCompact(metrics.sumLiqLong)}
+                    </Table.Cell>
+                    <Table.Cell textAlign="right">
+                      {formatCompact(metrics.sumLiqShort)}
+                    </Table.Cell>
+                    <Table.Cell>
+                      <Badge colorPalette={bias.tone}>{bias.label}</Badge>
+                    </Table.Cell>
+                    <Table.Cell>{formatFullTime(metrics.lastTs)}</Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table.Root>
+          </Box>
+        </Card.Body>
+      </Card.Root>
+    </>
+  );
+};