feat: make price formatting feed-exponent aware

Author: fhqvst

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

@@ -43,9 +43,17 @@ const LiveAggregatePrice = ({
   if (current === undefined) {
     return <Price />;
   } else if (current.status === PriceStatus.Trading) {
-    return <Price current={current.price} prev={prev?.price} />;
+    return (
+      <Price
+        current={current.price}
+        prev={prev?.price}
+        exponent={current.exponent}
+      />
+    );
   } else {
-    return <Price current={current.previousPrice} />;
+    return (
+      <Price current={current.previousPrice} exponent={current.exponent} />
+    );
   }
 };
 
@@ -63,15 +71,24 @@ const LiveComponentPrice = ({
     feedKey,
     publisherKey,
   );
-  return <Price current={current?.latest.price} prev={prev?.latest.price} />;
+  const { current: priceData } = useLivePriceData(cluster, feedKey);
+  return (
+    <Price
+      current={current?.latest.price}
+      prev={prev?.latest.price}
+      exponent={priceData?.exponent}
+    />
+  );
 };
 
 const Price = ({
   prev,
   current,
+  exponent,
 }: {
   prev?: number | undefined;
   current?: number | undefined;
+  exponent?: number | undefined;
 }) =>
   current === undefined ? (
     <Skeleton width={SKELETON_WIDTH} />
@@ -80,7 +97,7 @@ const Price = ({
       className={styles.price}
       data-direction={prev ? getChangeDirection(prev, current) : "flat"}
     >
-      <FormattedPriceValue n={current} />
+      <FormattedPriceValue n={current} exponent={exponent} />
     </span>
   );
 
@@ -114,6 +131,7 @@ const LiveAggregateConfidence = ({
           ? current.confidence
           : current.previousConfidence)
       }
+      exponent={current?.exponent}
     />
   );
 };
@@ -128,24 +146,42 @@ const LiveComponentConfidence = ({
   cluster: Cluster;
 }) => {
   const { current } = useLivePriceComponent(cluster, feedKey, publisherKey);
-  return <Confidence confidence={current?.latest.confidence} />;
+  const { current: priceData } = useLivePriceData(cluster, feedKey);
+  return (
+    <Confidence
+      confidence={current?.latest.confidence}
+      exponent={priceData?.exponent}
+    />
+  );
 };
 
-const Confidence = ({ confidence }: { confidence?: number | undefined }) => (
+const Confidence = ({
+  confidence,
+  exponent,
+}: {
+  confidence?: number | undefined;
+  exponent?: number | undefined;
+}) => (
   <span className={styles.confidence}>
     <PlusMinus className={styles.plusMinus} />
     {confidence === undefined ? (
       <Skeleton width={SKELETON_WIDTH} />
     ) : (
       <span>
-        <FormattedPriceValue n={confidence} />
+        <FormattedPriceValue n={confidence} exponent={exponent} />
       </span>
     )}
   </span>
 );
 
-const FormattedPriceValue = ({ n }: { n: number }) => {
-  const formatter = usePriceFormatter();
+const FormattedPriceValue = ({
+  n,
+  exponent,
+}: {
+  n: number;
+  exponent?: number | undefined;
+}) => {
+  const formatter = usePriceFormatter(exponent);
 
   return useMemo(() => formatter.format(n), [n, formatter]);
 };

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

@@ -69,7 +69,6 @@ const useChartElem = (symbol: string, feedId: string) => {
   const chartContainerRef = useRef<HTMLDivElement | null>(null);
   const chartRef = useRef<ChartRefContents | undefined>(undefined);
   const isBackfilling = useRef(false);
-  const priceFormatter = usePriceFormatter();
   const abortControllerRef = useRef<AbortController | undefined>(undefined);
   // Lightweight charts has [a
   // bug](https://github.com/tradingview/lightweight-charts/issues/1649) where
@@ -79,6 +78,9 @@ const useChartElem = (symbol: string, feedId: string) => {
   const whitespaceData = useRef<Set<WhitespaceData>>(new Set());
 
   const { current: livePriceData } = useLivePriceData(Cluster.Pythnet, feedId);
+  const priceFormatter = usePriceFormatter(livePriceData?.exponent, {
+    useSubscript: false,
+  });
 
   const didResetVisibleRange = useRef(false);
   const didLoadInitialData = useRef(false);
@@ -370,6 +372,17 @@ const useChartElem = (symbol: string, feedId: string) => {
     });
   }, [quickSelectWindow, resolution, fetchHistoricalData]);
 
+  // Update the chart's price formatter when the exponent becomes available
+  useEffect(() => {
+    if (chartRef.current && livePriceData?.exponent !== undefined) {
+      chartRef.current.chart.applyOptions({
+        localization: {
+          priceFormatter: priceFormatter.format,
+        },
+      });
+    }
+  }, [livePriceData?.exponent, priceFormatter]);
+
   return { chartRef, chartContainerRef };
 };
 

apps/insights/src/hooks/use-price-formatter.ts

@@ -1,17 +1,45 @@
 import { useCallback, useMemo } from "react";
 import { useNumberFormatter } from "react-aria";
 
-export const usePriceFormatter = () => {
+export const usePriceFormatter = (
+  exponent?: number,
+  options?: { useSubscript?: boolean },
+) => {
+  // Calculate the number of decimal places based on the exponent
+  // The exponent represents the power of 10, so -8 means 8 decimal places
+  const decimals = exponent === undefined ? undefined : Math.abs(exponent);
+  const useSubscript = options?.useSubscript ?? true;
+
   const bigNumberFormatter = useNumberFormatter({ maximumFractionDigits: 2 });
   const smallNumberFormatter = useNumberFormatter({
     maximumSignificantDigits: 6,
   });
+  const exponentBasedFormatter = useNumberFormatter({
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  });
+
   const format = useCallback(
-    (n: number) =>
-      n >= 1000
-        ? bigNumberFormatter.format(n)
-        : formatToSubscriptNumber(smallNumberFormatter.format(n)),
-    [bigNumberFormatter, smallNumberFormatter],
+    (n: number) => {
+      // If we have an exponent, use exponent-based formatting
+      if (decimals !== undefined) {
+        const formatted = exponentBasedFormatter.format(n);
+        return useSubscript ? formatToSubscriptNumber(formatted) : formatted;
+      }
+      // Otherwise, fall back to the old behavior
+      if (n >= 1000) {
+        return bigNumberFormatter.format(n);
+      }
+      const formatted = smallNumberFormatter.format(n);
+      return useSubscript ? formatToSubscriptNumber(formatted) : formatted;
+    },
+    [
+      bigNumberFormatter,
+      smallNumberFormatter,
+      exponentBasedFormatter,
+      decimals,
+      useSubscript,
+    ],
   );
   return useMemo(() => ({ format }), [format]);
 };