feat(insights): add publishers & price components from pythtest

Author: cprussin

apps/insights/src/app/publishers/[cluster]/[key]/error.ts

@@ -0,0 +1,3 @@
+"use client";
+
+export { Error as default } from "../../../../components/Error";

apps/insights/src/app/publishers/[key]/layout.ts renamed to apps/insights/src/app/publishers/[cluster]/[key]/layout.ts

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-export { PublishersLayout as default } from "../../../components/Publisher/layout";
+export { PublishersLayout as default } from "../../../../components/Publisher/layout";
 
 export const metadata: Metadata = {
   title: "Publishers",

apps/insights/src/app/publishers/[cluster]/[key]/page.ts

@@ -0,0 +1,4 @@
+export { Performance as default } from "../../../../components/Publisher/performance";
+
+export const dynamic = "error";
+export const revalidate = 3600;

apps/insights/src/app/publishers/[cluster]/[key]/price-feeds/page.ts

@@ -0,0 +1,4 @@
+export { PriceFeeds as default } from "../../../../../components/Publisher/price-feeds";
+
+export const dynamic = "error";
+export const revalidate = 3600;

apps/insights/src/app/publishers/[key]/error.ts

@@ -11,24 +11,32 @@ import {
   useLivePriceComponent,
   useLivePriceData,
 } from "../../hooks/use-live-price-data";
+import type { Cluster } from "../../services/pyth";
 
 export const SKELETON_WIDTH = 20;
 
 export const LivePrice = ({
-  feedKey,
   publisherKey,
+  ...props
 }: {
   feedKey: string;
   publisherKey?: string | undefined;
+  cluster: Cluster;
 }) =>
-  publisherKey ? (
-    <LiveComponentPrice feedKey={feedKey} publisherKey={publisherKey} />
+  publisherKey === undefined ? (
+    <LiveAggregatePrice {...props} />
   ) : (
-    <LiveAggregatePrice feedKey={feedKey} />
+    <LiveComponentPrice {...props} publisherKey={publisherKey} />
   );
 
-const LiveAggregatePrice = ({ feedKey }: { feedKey: string }) => {
-  const { prev, current } = useLivePriceData(feedKey);
+const LiveAggregatePrice = ({
+  feedKey,
+  cluster,
+}: {
+  feedKey: string;
+  cluster: Cluster;
+}) => {
+  const { prev, current } = useLivePriceData(cluster, feedKey);
   return (
     <Price current={current?.aggregate.price} prev={prev?.aggregate.price} />
   );
@@ -37,11 +45,17 @@ const LiveAggregatePrice = ({ feedKey }: { feedKey: string }) => {
 const LiveComponentPrice = ({
   feedKey,
   publisherKey,
+  cluster,
 }: {
   feedKey: string;
   publisherKey: string;
+  cluster: Cluster;
 }) => {
-  const { prev, current } = useLivePriceComponent(feedKey, publisherKey);
+  const { prev, current } = useLivePriceComponent(
+    cluster,
+    feedKey,
+    publisherKey,
+  );
   return <Price current={current?.latest.price} prev={prev?.latest.price} />;
 };
 
@@ -67,31 +81,40 @@ const Price = ({
 };
 
 export const LiveConfidence = ({
-  feedKey,
   publisherKey,
+  ...props
 }: {
   feedKey: string;
   publisherKey?: string | undefined;
+  cluster: Cluster;
 }) =>
   publisherKey === undefined ? (
-    <LiveAggregateConfidence feedKey={feedKey} />
+    <LiveAggregateConfidence {...props} />
   ) : (
-    <LiveComponentConfidence feedKey={feedKey} publisherKey={publisherKey} />
+    <LiveComponentConfidence {...props} publisherKey={publisherKey} />
   );
 
-const LiveAggregateConfidence = ({ feedKey }: { feedKey: string }) => {
-  const { current } = useLivePriceData(feedKey);
+const LiveAggregateConfidence = ({
+  feedKey,
+  cluster,
+}: {
+  feedKey: string;
+  cluster: Cluster;
+}) => {
+  const { current } = useLivePriceData(cluster, feedKey);
   return <Confidence confidence={current?.aggregate.confidence} />;
 };
 
 const LiveComponentConfidence = ({
   feedKey,
   publisherKey,
+  cluster,
 }: {
   feedKey: string;
   publisherKey: string;
+  cluster: Cluster;
 }) => {
-  const { current } = useLivePriceComponent(feedKey, publisherKey);
+  const { current } = useLivePriceComponent(cluster, feedKey, publisherKey);
   return <Confidence confidence={current?.latest.confidence} />;
 };
 
@@ -110,8 +133,14 @@ const Confidence = ({ confidence }: { confidence?: number | undefined }) => {
   );
 };
 
-export const LiveLastUpdated = ({ feedKey }: { feedKey: string }) => {
-  const { current } = useLivePriceData(feedKey);
+export const LiveLastUpdated = ({
+  feedKey,
+  cluster,
+}: {
+  feedKey: string;
+  cluster: Cluster;
+}) => {
+  const { current } = useLivePriceData(cluster, feedKey);
   const formatterWithDate = useDateFormatter({
     dateStyle: "short",
     timeStyle: "medium",
@@ -137,14 +166,16 @@ type LiveValueProps<T extends keyof PriceData> = {
   field: T;
   feedKey: string;
   defaultValue?: ReactNode | undefined;
+  cluster: Cluster;
 };
 
 export const LiveValue = <T extends keyof PriceData>({
   feedKey,
   field,
   defaultValue,
+  cluster,
 }: LiveValueProps<T>) => {
-  const { current } = useLivePriceData(feedKey);
+  const { current } = useLivePriceData(cluster, feedKey);
 
   return current !== undefined || defaultValue !== undefined ? (
     (current?.[field]?.toString() ?? defaultValue)
@@ -158,15 +189,17 @@ type LiveComponentValueProps<T extends keyof PriceComponent["latest"]> = {
   feedKey: string;
   publisherKey: string;
   defaultValue?: ReactNode | undefined;
+  cluster: Cluster;
 };
 
 export const LiveComponentValue = <T extends keyof PriceComponent["latest"]>({
   feedKey,
   field,
   publisherKey,
   defaultValue,
+  cluster,
 }: LiveComponentValueProps<T>) => {
-  const { current } = useLivePriceComponent(feedKey, publisherKey);
+  const { current } = useLivePriceComponent(cluster, feedKey, publisherKey);
 
   return current !== undefined || defaultValue !== undefined ? (
     (current?.latest[field].toString() ?? defaultValue)

apps/insights/src/app/publishers/[key]/page.ts

@@ -1,16 +1,17 @@
 @use "@pythnetwork/component-library/theme";
 
 .priceComponentDrawer {
-  display: grid;
-  grid-template-rows: repeat(2, max-content);
-  grid-template-columns: 100%;
-  gap: theme.spacing(10);
+  .testFeedMessage {
+    grid-column: span 2 / span 2;
+    margin-bottom: theme.spacing(10);
+  }
 
   .stats {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(2, 1fr);
     gap: theme.spacing(4);
+    margin-bottom: theme.spacing(10);
   }
 
   .spinner {

apps/insights/src/app/publishers/[key]/price-feeds/page.ts

@@ -1,6 +1,8 @@
+import { Flask } from "@phosphor-icons/react/dist/ssr/Flask";
 import { Button } from "@pythnetwork/component-library/Button";
 import { Card } from "@pythnetwork/component-library/Card";
 import { Drawer } from "@pythnetwork/component-library/Drawer";
+import { InfoBox } from "@pythnetwork/component-library/InfoBox";
 import { Select } from "@pythnetwork/component-library/Select";
 import { Spinner } from "@pythnetwork/component-library/Spinner";
 import { StatCard } from "@pythnetwork/component-library/StatCard";
@@ -45,28 +47,32 @@ type Props = {
   headingExtra?: ReactNode | undefined;
   publisherKey: string;
   symbol: string;
+  displaySymbol: string;
   feedKey: string;
   score: number | undefined;
   rank: number | undefined;
   status: Status;
-  navigateButtonText: string;
+  identifiesPublisher?: boolean | undefined;
   navigateHref: string;
   firstEvaluation: Date;
+  cluster: Cluster;
 };
 
 export const PriceComponentDrawer = ({
   publisherKey,
   onClose,
   symbol,
+  displaySymbol,
   feedKey,
   score,
   rank,
   title,
   status,
   headingExtra,
-  navigateButtonText,
   navigateHref,
   firstEvaluation,
+  cluster,
+  identifiesPublisher,
 }: Props) => {
   const goToPriceFeedPageOnClose = useRef<boolean>(false);
   const [isFeedDrawerOpen, setIsFeedDrawerOpen] = useState(true);
@@ -93,7 +99,7 @@ export const PriceComponentDrawer = ({
   const { selectedPeriod, setSelectedPeriod, evaluationPeriods } =
     useEvaluationPeriods(firstEvaluation);
   const scoreHistoryState = useData(
-    [Cluster.Pythnet, publisherKey, symbol, selectedPeriod],
+    [cluster, publisherKey, symbol, selectedPeriod],
     getScoreHistory,
   );
 
@@ -108,34 +114,54 @@ export const PriceComponentDrawer = ({
           <StatusComponent status={status} />
           <RouterProvider navigate={handleOpenFeed}>
             <Button size="sm" variant="outline" href={navigateHref}>
-              {navigateButtonText}
+              Open {identifiesPublisher ? "Publisher" : "Feed"}
             </Button>
           </RouterProvider>
         </>
       }
       isOpen={isFeedDrawerOpen}
       bodyClassName={styles.priceComponentDrawer}
     >
+      {cluster === Cluster.PythtestConformance && (
+        <InfoBox
+          icon={<Flask />}
+          header={`This publisher is in test`}
+          className={styles.testFeedMessage}
+        >
+          This is a test publisher. Its prices are not included in the Pyth
+          aggregate price for {displaySymbol}.
+        </InfoBox>
+      )}
       <div className={styles.stats}>
         <StatCard
           nonInteractive
           header="Aggregate Price"
           small
-          stat={<LivePrice feedKey={feedKey} />}
+          stat={<LivePrice feedKey={feedKey} cluster={cluster} />}
         />
         <StatCard
           nonInteractive
           header="Publisher Price"
           variant="primary"
           small
-          stat={<LivePrice feedKey={feedKey} publisherKey={publisherKey} />}
+          stat={
+            <LivePrice
+              feedKey={feedKey}
+              publisherKey={publisherKey}
+              cluster={cluster}
+            />
+          }
         />
         <StatCard
           nonInteractive
           header="Publisher Confidence"
           small
           stat={
-            <LiveConfidence feedKey={feedKey} publisherKey={publisherKey} />
+            <LiveConfidence
+              feedKey={feedKey}
+              publisherKey={publisherKey}
+              cluster={cluster}
+            />
           }
         />
         <StatCard
@@ -147,6 +173,7 @@ export const PriceComponentDrawer = ({
               feedKey={feedKey}
               publisherKey={publisherKey}
               field="publishSlot"
+              cluster={cluster}
             />
           }
         />