fix: use reference price for market baseline (kuestcom#1333)

Upstream: fc2852b

Author: github-actions[bot]

docs/api-reference/schemas/openapi-price-reference.json

@@ -218,8 +218,9 @@
       "Source": {
         "type": "string",
         "enum": [
+          "binance",
           "chainlink",
-          "massive"
+          "pyth"
         ]
       },
       "LastFinal": {

src/app/[locale]/(platform)/event/[slug]/_components/EventLiveSeriesChart.tsx

@@ -13,13 +13,15 @@ import { useLiveSeriesPriceSnapshot } from '../_hooks/useLiveSeriesPriceSnapshot
 import { useLiveSeriesWebSocket } from '../_hooks/useLiveSeriesWebSocket'
 import {
   buildAxis,
+  classifyLiveSeriesReference,
   findLiveSeriesEvent,
   formatDateAtTimezone,
   formatTimeAtTimezone,
   formatUsd,
   getVisibleCountdownUnits,
   hexToRgba,
   inferIntervalMsFromSeriesSlug,
+  isCanonicalBinanceDailySnapshot,
   isUsEquityMarketOpen,
   LIVE_CHART_HEIGHT,
   LIVE_CHART_MARGIN_BOTTOM,
@@ -37,6 +39,7 @@ import {
   normalizeLiveChartPrice,
   normalizeSubscriptionSymbol,
   parseUtcDate,
+  requiresCanonicalBinanceDailyClose,
   resolveEventEndTimestamp,
   resolveLiveSeriesDisplayPrice,
   SERIES_KEY,
@@ -191,8 +194,7 @@ function EventLiveSeriesChartContent({
 
   const {
     referenceSnapshot,
-    baselinePrice,
-    setBaselinePrice,
+    referenceSnapshotStatus,
     persistedFallbackPrice: snapshotFallbackPrice,
   } = useLiveSeriesPriceSnapshot({
     config,
@@ -209,14 +211,20 @@ function EventLiveSeriesChartContent({
   const chartNowMs = isEventClosed ? endTimestamp : nowMs
 
   const persistedFallbackPrice = snapshotFallbackPrice
+  const seriesReferenceClassification = useMemo(
+    () => classifyLiveSeriesReference({
+      topic: config.topic,
+      activeWindowMinutes: config.active_window_minutes,
+    }),
+    [config.active_window_minutes, config.topic],
+  )
 
   const { data, status } = useLiveSeriesWebSocket({
     topic: config.topic,
     eventType: config.event_type,
     eventEndTimestamp: explicitEndTimestamp,
     subscriptionSymbol,
     isLiveView: isLiveView && !isEventClosed,
-    setBaselinePrice,
   })
 
   const isMarketClosed = useMemo(() => {
@@ -283,8 +291,16 @@ function EventLiveSeriesChartContent({
 
     return persistedFallbackPrice.price
   }, [endTimestamp, persistedFallbackPrice])
+  const hasCanonicalBinanceDailySnapshot = isCanonicalBinanceDailySnapshot(referenceSnapshot)
+  const requiresCanonicalBinanceClose = requiresCanonicalBinanceDailyClose({
+    snapshot: referenceSnapshot,
+    snapshotStatus: referenceSnapshotStatus,
+    seriesClassification: seriesReferenceClassification,
+  })
   const finalPrice = isEventClosed
-    ? referenceClosingPrice ?? latestReferencePriceBeforeEnd ?? persistedFallbackPriceBeforeEnd
+    ? requiresCanonicalBinanceClose
+      ? hasCanonicalBinanceDailySnapshot ? referenceClosingPrice : null
+      : referenceClosingPrice ?? latestReferencePriceBeforeEnd ?? persistedFallbackPriceBeforeEnd
     : null
 
   const fallbackCurrentPrice = useMemo(() => {
@@ -364,7 +380,7 @@ function EventLiveSeriesChartContent({
     }
 
     if (!isFinitePositivePrice(finalPrice)) {
-      return preCloseData
+      return requiresCanonicalBinanceClose ? [] : preCloseData
     }
 
     return [
@@ -374,7 +390,7 @@ function EventLiveSeriesChartContent({
         [SERIES_KEY]: finalPrice,
       },
     ].slice(-MAX_POINTS)
-  }, [closedFallbackData, data, endTimestamp, finalPrice, isEventClosed])
+  }, [closedFallbackData, data, endTimestamp, finalPrice, isEventClosed, requiresCanonicalBinanceClose])
 
   const renderData = useMemo(() => {
     if (!dataSource.length) {
@@ -441,11 +457,10 @@ function EventLiveSeriesChartContent({
     finalPrice,
     renderedPrice,
     fallbackCurrentPrice,
+    requiresCanonicalClose: requiresCanonicalBinanceClose,
   })
   const axisSourceData = renderData
-  const resolvedBaselinePrice = isEventClosed
-    ? referenceOpeningPrice
-    : baselinePrice ?? referenceOpeningPrice
+  const resolvedBaselinePrice = referenceOpeningPrice
   const precisionReferencePrice = currentPrice
     ?? resolvedBaselinePrice
     ?? referenceSnapshot?.latest_price

src/app/[locale]/(platform)/event/[slug]/_components/EventLiveSeriesChartHeader.tsx

@@ -185,8 +185,11 @@ export default function EventLiveSeriesChartHeader({
         <div className={cn('h-10 w-px bg-border', liveMarketHref ? 'block' : 'hidden sm:block')} />
         <div>
           <div
-            className="flex items-center gap-0.5 text-xs font-semibold whitespace-nowrap min-[360px]:gap-1 sm:gap-2"
-            style={{ color: liveColor }}
+            className={cn(
+              'flex items-center gap-0.5 text-xs font-semibold whitespace-nowrap min-[360px]:gap-1 sm:gap-2',
+              isEventClosed && 'text-foreground',
+            )}
+            style={isEventClosed ? undefined : { color: liveColor }}
           >
             <span>{priceStatusLabel}</span>
             {delta != null && (
@@ -210,8 +213,9 @@ export default function EventLiveSeriesChartHeader({
                 sm:text-[22px]
               `,
               liveMarketHref ? 'min-[360px]:text-[20px]' : 'min-[360px]:text-[18px]',
+              isEventClosed && 'text-foreground',
             )}
-            style={{ color: liveColor }}
+            style={isEventClosed ? undefined : { color: liveColor }}
           >
             {currentPrice != null
               ? <RollingValue value={formatUsd(currentPrice, headerPriceDisplayDigits)} />

src/app/[locale]/(platform)/event/[slug]/_hooks/useLiveSeriesPriceSnapshot.ts

@@ -1,6 +1,10 @@
-import type { LiveSeriesPriceSnapshot, PersistedLivePrice } from '../_utils/eventLiveSeriesChartUtils'
+import type {
+  LiveSeriesPriceSnapshot,
+  LiveSeriesPriceSnapshotStatus,
+  PersistedLivePrice,
+} from '../_utils/eventLiveSeriesChartUtils'
 import type { EventLiveChartConfig } from '@/types'
-import { useCallback, useMemo, useState, useSyncExternalStore } from 'react'
+import { useCallback, useMemo, useSyncExternalStore } from 'react'
 import {
   LIVE_DATA_RETENTION_MS,
   normalizeLiveChartPrice,
@@ -17,13 +21,13 @@ interface UseLiveSeriesPriceSnapshotOptions {
 
 export interface LiveSeriesPriceSnapshotResult {
   referenceSnapshot: LiveSeriesPriceSnapshot | null
-  baselinePrice: number | null
-  setBaselinePrice: React.Dispatch<React.SetStateAction<number | null>>
+  referenceSnapshotStatus: LiveSeriesPriceSnapshotStatus
   persistedFallbackPrice: PersistedLivePrice | null
 }
 
 interface LiveSeriesPriceSnapshotStoreSnapshot {
   referenceSnapshot: LiveSeriesPriceSnapshot | null
+  referenceSnapshotStatus: LiveSeriesPriceSnapshotStatus
   persistedFallbackPrice: PersistedLivePrice | null
 }
 
@@ -47,8 +51,12 @@ interface LiveSeriesPriceSnapshotRequest {
 const liveSeriesPriceSnapshotStores = new Map<string, LiveSeriesPriceSnapshotStoreEntry>()
 const liveSeriesPriceStorageKeyPrefix = 'kuest-live-last-price'
 const LIVE_SERIES_PRICE_SNAPSHOT_STORE_TTL_MS = 10 * 60 * 1000
+const BINANCE_CLOSE_FIRST_REFRESH_DELAY_MS = 65 * 1000
+const BINANCE_CLOSE_REFRESH_INTERVAL_MS = 10 * 1000
+const BINANCE_CLOSE_REFRESH_WINDOW_MS = 5 * 60 * 1000
 const EMPTY_LIVE_SERIES_PRICE_SNAPSHOT: LiveSeriesPriceSnapshotStoreSnapshot = {
   referenceSnapshot: null,
+  referenceSnapshotStatus: 'loading',
   persistedFallbackPrice: null,
 }
 
@@ -199,6 +207,13 @@ async function fetchLiveSeriesPriceSnapshot(
   const requestToken = entry.fetchToken + 1
   entry.fetchToken = requestToken
   entry.abortController = controller
+  if (entry.snapshot.referenceSnapshot == null) {
+    entry.snapshot = {
+      ...entry.snapshot,
+      referenceSnapshotStatus: 'loading',
+    }
+    notifyLiveSeriesPriceSnapshotStore(storeKey)
+  }
   entry.inflightFetch = (async function runLiveSeriesPriceSnapshotFetch() {
     try {
       const response = await fetch(`/api/price-reference/live-series?${buildLiveSeriesPriceSnapshotQuery(request).toString()}`, {
@@ -207,13 +222,18 @@ async function fetchLiveSeriesPriceSnapshot(
       })
 
       if (!response.ok) {
+        entry.snapshot = {
+          ...entry.snapshot,
+          referenceSnapshotStatus: 'unavailable',
+        }
         return
       }
 
       const payload = await response.json() as LiveSeriesPriceSnapshot
       entry.snapshot = {
         ...entry.snapshot,
         referenceSnapshot: payload,
+        referenceSnapshotStatus: 'ready',
       }
 
       const fallbackPrice = normalizeLiveChartPrice(
@@ -236,6 +256,10 @@ async function fetchLiveSeriesPriceSnapshot(
       }
     }
     catch {
+      entry.snapshot = {
+        ...entry.snapshot,
+        referenceSnapshotStatus: 'unavailable',
+      }
     }
     finally {
       if (entry.fetchToken === requestToken) {
@@ -260,12 +284,46 @@ function subscribeToLiveSeriesPriceSnapshot(
   const storeKey = buildLiveSeriesPriceSnapshotStoreKey(request)
   const entry = getLiveSeriesPriceSnapshotStoreEntry(storeKey)
   entry.listeners.add(onStoreChange)
+  let binanceCloseRefreshTimer: ReturnType<typeof setTimeout> | null = null
+  let isSubscribed = true
 
   if (syncPersistedLivePriceSnapshot(storeKey, request)) {
     onStoreChange()
   }
   void fetchLiveSeriesPriceSnapshot(storeKey, request)
 
+  async function refreshBinanceCloseUntilAvailable() {
+    if (!isSubscribed) {
+      return
+    }
+
+    await fetchLiveSeriesPriceSnapshot(storeKey, request)
+    const snapshot = entry.snapshot.referenceSnapshot
+    const eventEndTimestamp = request.explicitEndTimestamp
+    if (!isSubscribed
+      || (snapshot != null && snapshot.source !== 'binance')
+      || snapshot?.closing_price != null
+      || eventEndTimestamp == null
+      || Date.now() >= eventEndTimestamp + BINANCE_CLOSE_REFRESH_WINDOW_MS) {
+      return
+    }
+
+    binanceCloseRefreshTimer = setTimeout(
+      refreshBinanceCloseUntilAvailable,
+      BINANCE_CLOSE_REFRESH_INTERVAL_MS,
+    )
+  }
+
+  if (request.explicitEndTimestamp != null) {
+    const firstRefreshAtMs = request.explicitEndTimestamp + BINANCE_CLOSE_FIRST_REFRESH_DELAY_MS
+    if (Date.now() < request.explicitEndTimestamp + BINANCE_CLOSE_REFRESH_WINDOW_MS) {
+      binanceCloseRefreshTimer = setTimeout(
+        refreshBinanceCloseUntilAvailable,
+        Math.max(0, firstRefreshAtMs - Date.now()),
+      )
+    }
+  }
+
   function refreshSnapshotAfterResume() {
     if (document.hidden) {
       return
@@ -307,6 +365,10 @@ function subscribeToLiveSeriesPriceSnapshot(
   document.addEventListener('visibilitychange', handleVisibilityChange)
 
   return function unsubscribeFromLiveSeriesPriceSnapshot() {
+    isSubscribed = false
+    if (binanceCloseRefreshTimer) {
+      clearTimeout(binanceCloseRefreshTimer)
+    }
     entry.listeners.delete(onStoreChange)
     if (entry.listeners.size === 0 && entry.abortController) {
       entry.fetchToken += 1
@@ -385,20 +447,9 @@ export function useLiveSeriesPriceSnapshot({
     getServerSnapshot,
   )
 
-  const [baselinePrice, setBaselinePrice] = useState<number | null>(null)
-
-  const effectiveBaselinePrice = baselinePrice ?? (
-    typeof referenceSnapshot.referenceSnapshot?.opening_price === 'number'
-    && Number.isFinite(referenceSnapshot.referenceSnapshot.opening_price)
-    && referenceSnapshot.referenceSnapshot.opening_price > 0
-      ? referenceSnapshot.referenceSnapshot.opening_price
-      : null
-  )
-
   return {
     referenceSnapshot: referenceSnapshot.referenceSnapshot,
-    baselinePrice: effectiveBaselinePrice,
-    setBaselinePrice,
+    referenceSnapshotStatus: referenceSnapshot.referenceSnapshotStatus,
     persistedFallbackPrice: referenceSnapshot.persistedFallbackPrice,
   }
 }

src/app/[locale]/(platform)/event/[slug]/_hooks/useLiveSeriesWebSocket.ts

@@ -21,7 +21,6 @@ interface UseLiveSeriesWebSocketOptions {
   eventEndTimestamp: number | null
   subscriptionSymbol: string
   isLiveView: boolean
-  setBaselinePrice: React.Dispatch<React.SetStateAction<number | null>>
 }
 
 export function useLiveSeriesWebSocket({
@@ -30,7 +29,6 @@ export function useLiveSeriesWebSocket({
   eventEndTimestamp,
   subscriptionSymbol,
   isLiveView,
-  setBaselinePrice,
 }: UseLiveSeriesWebSocketOptions) {
   const { wsLiveDataUrl } = usePublicRuntimeConfig()
   const wsUrl = wsLiveDataUrl
@@ -185,8 +183,6 @@ export function useLiveSeriesWebSocket({
           transitionDurationMs,
         )
       })
-
-      setBaselinePrice(current => current ?? wsUpdatesForRender[0]?.price ?? null)
     }
 
     function handleError() {
@@ -259,7 +255,7 @@ export function useLiveSeriesWebSocket({
         })
       }
     }
-  }, [eventEndTimestamp, eventType, topic, isLiveView, wsUrl, subscriptionSymbol, setBaselinePrice])
+  }, [eventEndTimestamp, eventType, topic, isLiveView, wsUrl, subscriptionSymbol])
 
   return { data, status }
 }