feat(insights): use the label "Yield" instead of "Price" for rates

Author: cprussin

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

@@ -31,6 +31,7 @@ import { StateType, useData } from "../../hooks/use-data";
 import { Cluster, ClusterToName } from "../../services/pyth";
 import type { Status } from "../../status";
 import { LiveConfidence, LivePrice, LiveComponentValue } from "../LivePrices";
+import { PriceName } from "../PriceName";
 import { Score } from "../Score";
 import { Status as StatusComponent } from "../Status";
 
@@ -48,6 +49,7 @@ type Props = {
   publisherKey: string;
   symbol: string;
   displaySymbol: string;
+  assetClass: string;
   feedKey: string;
   score: number | undefined;
   rank: number | undefined;
@@ -63,6 +65,7 @@ export const PriceComponentDrawer = ({
   onClose,
   symbol,
   displaySymbol,
+  assetClass,
   feedKey,
   score,
   rank,
@@ -135,13 +138,21 @@ export const PriceComponentDrawer = ({
       <div className={styles.stats}>
         <StatCard
           nonInteractive
-          header="Aggregate Price"
+          header={
+            <>
+              Aggregated <PriceName assetClass={assetClass} />
+            </>
+          }
           small
           stat={<LivePrice feedKey={feedKey} cluster={cluster} />}
         />
         <StatCard
           nonInteractive
-          header="Publisher Price"
+          header={
+            <>
+              Publisher <PriceName assetClass={assetClass} />
+            </>
+          }
           variant="primary"
           small
           stat={

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

@@ -30,6 +30,7 @@ import { EvaluationTime } from "../Explanations";
 import { FormattedNumber } from "../FormattedNumber";
 import { LivePrice, LiveConfidence, LiveComponentValue } from "../LivePrices";
 import { NoResults } from "../NoResults";
+import { PriceName } from "../PriceName";
 import rootStyles from "../Root/index.module.scss";
 import { Score } from "../Score";
 import { Status as StatusComponent } from "../Status";
@@ -45,6 +46,7 @@ type Props<T extends PriceComponent> = {
   searchPlaceholder: string;
   onPriceComponentAction: (component: T) => void;
   toolbarExtra?: ReactNode;
+  assetClass?: string | undefined;
 };
 
 type PriceComponent = {
@@ -279,6 +281,7 @@ type PriceComponentsCardProps<T extends PriceComponent> = Pick<
   | "label"
   | "searchPlaceholder"
   | "toolbarExtra"
+  | "assetClass"
 > &
   (
     | { isLoading: true }
@@ -369,7 +372,10 @@ export const PriceComponentsCardContents = <T extends PriceComponent>({
               },
             })}
             items={[
-              { id: "prices", children: "Prices" },
+              {
+                id: "prices",
+                children: <PriceName assetClass={props.assetClass} plural />,
+              },
               { id: "quality", children: "Quality" },
             ]}
           />
@@ -456,8 +462,9 @@ export const PriceComponentsCardContents = <T extends PriceComponent>({
 
 const otherColumns = ({
   metricsTime,
+  assetClass,
   ...props
-}: { metricsTime?: Date | undefined } & (
+}: { metricsTime?: Date | undefined; assetClass?: string | undefined } & (
   | { isLoading: true }
   | { isLoading?: false; showQuality: boolean }
 )) => {
@@ -500,8 +507,8 @@ const otherColumns = ({
                 DEVIATION SCORE
                 <Explain size="xs" title="Deviation">
                   <p>
-                    Deviation measures how close a publisher{"'"}s price is to
-                    what Pyth believes to be the true market price.
+                    Deviation measures how close a publisher{"'"}s quote is to
+                    what Pyth believes to be the true market quote.
                   </p>
                   {metricsTime && <EvaluationTime scoreTime={metricsTime} />}
                   <Button
@@ -527,7 +534,7 @@ const otherColumns = ({
                 <Explain size="xs" title="Stalled">
                   <p>
                     A feed is considered stalled if it is publishing the same
-                    value repeatedly for the price. This score component is
+                    value repeatedly for the quote. This score component is
                     reduced each time a feed is stalled.
                   </p>
                   {metricsTime && <EvaluationTime scoreTime={metricsTime} />}
@@ -584,7 +591,12 @@ const otherColumns = ({
         ]
       : [
           { id: "slot", name: "SLOT", alignment: "left" as const, width: 40 },
-          { id: "price", name: "PRICE", alignment: "left" as const, width: 40 },
+          {
+            id: "price",
+            name: <PriceName assetClass={assetClass} uppercase />,
+            alignment: "left" as const,
+            width: 40,
+          },
           {
             id: "confidence",
             name: "CONFIDENCE INTERVAL",

apps/insights/src/components/PriceFeed/layout.tsx

@@ -26,6 +26,7 @@ import {
   PriceFeedChangePercent,
 } from "../PriceFeedChangePercent";
 import { PriceFeedTag } from "../PriceFeedTag";
+import { PriceName } from "../PriceName";
 import { TabPanel, TabRoot, Tabs } from "../Tabs";
 
 type Props = {
@@ -110,7 +111,11 @@ export const PriceFeedLayout = async ({ children, params }: Props) => {
         <section className={styles.stats}>
           <StatCard
             variant="primary"
-            header="Aggregated Price"
+            header={
+              <>
+                Aggregated <PriceName assetClass={feed.product.asset_type} />
+              </>
+            }
             stat={
               <LivePrice
                 feedKey={feed.product.price_account}
@@ -158,7 +163,11 @@ export const PriceFeedLayout = async ({ children, params }: Props) => {
             }
           />
           <StatCard
-            header="1-Day Price Change"
+            header={
+              <>
+                1-Day <PriceName assetClass={feed.product.asset_type} /> Change
+              </>
+            }
             stat={
               <YesterdaysPricesProvider
                 feeds={{ [feed.symbol]: feed.product.price_account }}

apps/insights/src/components/PriceFeed/publishers-card.tsx

@@ -26,6 +26,7 @@ type Props = Omit<
   priceComponents: Publisher[];
   symbol: string;
   displaySymbol: string;
+  assetClass: string;
 };
 
 export const PublishersCard = ({
@@ -48,6 +49,7 @@ const ResolvedPublishersCard = ({
   priceComponents,
   symbol,
   displaySymbol,
+  assetClass,
   ...props
 }: Props) => {
   const logger = useLogger();
@@ -91,6 +93,7 @@ const ResolvedPublishersCard = ({
       <ResolvedPriceComponentsCard
         onPriceComponentAction={onPriceComponentAction}
         priceComponents={componentsFilteredByCluster}
+        assetClass={assetClass}
         toolbarExtra={
           <Switch
             isSelected={includeTestFeeds}
@@ -115,6 +118,7 @@ const ResolvedPublishersCard = ({
           cluster={selectedPublisher.cluster}
           firstEvaluation={selectedPublisher.firstEvaluation ?? new Date()}
           navigateHref={`/publishers/${ClusterToName[selectedPublisher.cluster]}/${selectedPublisher.publisherKey}`}
+          assetClass={assetClass}
           identifiesPublisher
         />
       )}

apps/insights/src/components/PriceFeed/publishers.tsx

@@ -52,6 +52,7 @@ export const Publishers = async ({ params }: Props) => {
       nameLoadingSkeleton={<PublisherTag isLoading />}
       symbol={symbol}
       displaySymbol={feed.product.display_symbol}
+      assetClass={feed.product.asset_type}
       priceComponents={publishers.map(
         ({ ranking, publisher, status, cluster, knownPublisher }) => ({
           id: `${publisher}-${ClusterToName[cluster]}`,

apps/insights/src/components/PriceFeeds/price-feeds-card.tsx

@@ -29,6 +29,7 @@ import {
 } from "../LivePrices";
 import { NoResults } from "../NoResults";
 import { PriceFeedTag } from "../PriceFeedTag";
+import { PriceName } from "../PriceName";
 import rootStyles from "../Root/index.module.scss";
 
 type Props = {
@@ -317,7 +318,7 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
         },
         {
           id: "price",
-          name: "PRICE",
+          name: <PriceName uppercase />,
           alignment: "right",
           width: 40,
           loadingSkeletonWidth: SKELETON_WIDTH,

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

@@ -0,0 +1,54 @@
+type Props = {
+  assetClass?: string | undefined;
+  uppercase?: boolean | undefined;
+  plural?: boolean | undefined;
+};
+
+export const PriceName = ({ assetClass, uppercase, plural }: Props) =>
+  getLabels(assetClass)[plural ? "plural" : "singular"][
+    uppercase ? "upcase" : "title"
+  ];
+
+const getLabels = (assetClass?: string | undefined) => {
+  if (assetClass === undefined) {
+    return LABELS.ambiguous;
+  } else {
+    const lowercaseAssetClass = assetClass.toLowerCase();
+    return lowercaseAssetClass in LABELS
+      ? LABELS[lowercaseAssetClass as keyof typeof LABELS]
+      : LABELS.default;
+  }
+};
+
+const LABELS = {
+  rates: {
+    plural: {
+      upcase: "YIELDS",
+      title: "Yields",
+    },
+    singular: {
+      upcase: "YIELD",
+      title: "Yield",
+    },
+  },
+  ambiguous: {
+    plural: {
+      upcase: "PRICES / YIELDS",
+      title: "Prices / Yields",
+    },
+    singular: {
+      upcase: "PRICE / YIELD",
+      title: "Price / Yield",
+    },
+  },
+  default: {
+    plural: {
+      upcase: "PRICES",
+      title: "Prices",
+    },
+    singular: {
+      upcase: "PRICE",
+      title: "Price",
+    },
+  },
+};

apps/insights/src/components/Publisher/layout.tsx

@@ -97,6 +97,7 @@ export const PublishersLayout = async ({ children, params }: Props) => {
         score: ranking?.final_score,
         rank: ranking?.final_rank,
         firstEvaluation: ranking?.first_ranking_time,
+        assetClass: feed.product.asset_type,
         status,
       }))}
     >

apps/insights/src/components/Publisher/price-feed-drawer-provider.tsx

@@ -40,6 +40,7 @@ type PriceFeed = {
   rank: number | undefined;
   status: Status;
   firstEvaluation: Date | undefined;
+  assetClass: string;
 };
 
 export const PriceFeedDrawerProvider = (
@@ -100,6 +101,7 @@ const PriceFeedDrawerProviderImpl = ({
           navigateHref={feedHref}
           title={<PriceFeedTag symbol={selectedFeed.symbol} />}
           cluster={cluster}
+          assetClass={selectedFeed.assetClass}
         />
       )}
     </PriceFeedDrawerContext>