fix(insights): when feeds aren't trading, show last valid price

Author: cprussin

apps/insights/src/components/LivePrices/index.tsx

@@ -2,6 +2,7 @@
 
 import { PlusMinus } from "@phosphor-icons/react/dist/ssr/PlusMinus";
 import type { PriceData, PriceComponent } from "@pythnetwork/client";
+import { PriceStatus } from "@pythnetwork/client";
 import { Skeleton } from "@pythnetwork/component-library/Skeleton";
 import type { ReactNode } from "react";
 import { useMemo } from "react";
@@ -39,9 +40,13 @@ const LiveAggregatePrice = ({
   cluster: Cluster;
 }) => {
   const { prev, current } = useLivePriceData(cluster, feedKey);
-  return (
-    <Price current={current?.aggregate.price} prev={prev?.aggregate.price} />
-  );
+  if (current === undefined) {
+    return <Price />;
+  } else if (current.status === PriceStatus.Trading) {
+    return <Price current={current.price} prev={prev?.price} />;
+  } else {
+    return <Price current={current.previousPrice} />;
+  }
 };
 
 const LiveComponentPrice = ({
@@ -101,7 +106,16 @@ const LiveAggregateConfidence = ({
   cluster: Cluster;
 }) => {
   const { current } = useLivePriceData(cluster, feedKey);
-  return <Confidence confidence={current?.aggregate.confidence} />;
+  return (
+    <Confidence
+      confidence={
+        current &&
+        (current.status === PriceStatus.Trading
+          ? current.confidence
+          : current.previousConfidence)
+      }
+    />
+  );
 };
 
 const LiveComponentConfidence = ({
@@ -153,7 +167,13 @@ export const LiveLastUpdated = ({
   });
   const formattedTimestamp = useMemo(() => {
     if (current) {
-      const timestamp = new Date(Number(current.timestamp * 1000n));
+      const timestamp = new Date(
+        Number(
+          (current.status === PriceStatus.Trading
+            ? current.timestamp
+            : current.previousTimestamp) * 1000n,
+        ),
+      );
       return isToday(timestamp)
         ? formatterWithoutDate.format(timestamp)
         : formatterWithDate.format(timestamp);

apps/insights/src/components/PriceFeed/Chart/chart.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { PriceStatus } from "@pythnetwork/client";
 import { useLogger } from "@pythnetwork/component-library/useLogger";
 import { useResizeObserver, useMountEffect } from "@react-hookz/web";
 import {
@@ -81,28 +82,35 @@ const useChartElem = (symbol: string, feedId: string) => {
       return;
     }
 
-    // Update last data point
-    const { price, confidence } = livePriceData.aggregate;
     const timestampMs = startOfResolution(
       new Date(Number(livePriceData.timestamp) * 1000),
       resolution,
     );
 
     const time = (timestampMs / 1000) as UTCTimestamp;
 
-    const priceData: LineData = { time, value: price };
-    const confidenceHighData: LineData = { time, value: price + confidence };
-    const confidenceLowData: LineData = { time, value: price - confidence };
+    if (livePriceData.status === PriceStatus.Trading) {
+      // Update last data point
+      const { price, confidence } = livePriceData.aggregate;
 
-    const lastDataPoint = chartRef.current.price.data().at(-1);
+      const priceData: LineData = { time, value: price };
+      const confidenceHighData: LineData = { time, value: price + confidence };
+      const confidenceLowData: LineData = { time, value: price - confidence };
 
-    if (lastDataPoint && lastDataPoint.time > priceData.time) {
-      return;
-    }
+      const lastDataPoint = chartRef.current.price.data().at(-1);
+
+      if (lastDataPoint && lastDataPoint.time > priceData.time) {
+        return;
+      }
 
-    chartRef.current.confidenceHigh.update(confidenceHighData);
-    chartRef.current.confidenceLow.update(confidenceLowData);
-    chartRef.current.price.update(priceData);
+      chartRef.current.confidenceHigh.update(confidenceHighData);
+      chartRef.current.confidenceLow.update(confidenceLowData);
+      chartRef.current.price.update(priceData);
+    } else {
+      chartRef.current.price.update({ time, value: undefined });
+      chartRef.current.confidenceHigh.update({ time, value: undefined });
+      chartRef.current.confidenceLow.update({ time, value: undefined });
+    }
   }, [livePriceData, resolution]);
 
   function maybeResetVisibleRange() {

apps/insights/src/components/PriceFeedChangePercent/index.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { PriceStatus } from "@pythnetwork/client";
 import { StateType, useData } from "@pythnetwork/component-library/useData";
 import type { ComponentProps } from "react";
 import { createContext, use } from "react";
@@ -109,15 +110,19 @@ const PriceFeedChangePercentLoaded = ({
 }: PriceFeedChangePercentLoadedProps) => {
   const { current } = useLivePriceData(Cluster.Pythnet, feedKey);
 
-  return current === undefined ? (
-    <ChangePercent className={className} isLoading />
-  ) : (
-    <ChangePercent
-      className={className}
-      currentValue={current.aggregate.price}
-      previousValue={priorPrice}
-    />
-  );
+  if (current === undefined) {
+    return <ChangePercent className={className} isLoading />;
+  } else if (current.status === PriceStatus.Trading) {
+    return (
+      <ChangePercent
+        className={className}
+        currentValue={current.aggregate.price}
+        previousValue={priorPrice}
+      />
+    );
+  } else {
+    return "-";
+  }
 };
 
 class YesterdaysPricesNotInitializedError extends Error {

apps/insights/src/services/clickhouse.ts

@@ -377,6 +377,7 @@ export const getHistoricalPrices = async ({
             AND publisher = {publisher: String}
             AND symbol = {symbol: String}
             AND version = 2
+            AND status = 1
           WHERE
             publishTime >= toDateTime({from: UInt32})
             AND publishTime < toDateTime({to: UInt32})