Merge pull request #2394 from pyth-network/cprussin/ui-43-fix-dash-equity-icon-using-dash-crypto-icon-incorrectly

fix(insights): ensure crypto icons are only used for cryptos

Author: cprussin

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

@@ -4,6 +4,7 @@ import type { ComponentProps } from "react";
 import { icons } from "./icons";
 
 type OwnProps = {
+  assetClass: string;
   symbol: string;
 };
 type Props = Omit<
@@ -12,12 +13,18 @@ type Props = Omit<
 > &
   OwnProps;
 
-export const PriceFeedIcon = ({ symbol, ...props }: Props) => {
-  const firstPart = symbol.split("/")[0];
-  const Icon =
-    firstPart && firstPart in icons
+export const PriceFeedIcon = ({ assetClass, symbol, ...props }: Props) => {
+  const Icon = getIcon(assetClass, symbol);
+  return <Icon width="100%" height="100%" viewBox="0 0 32 32" {...props} />;
+};
+
+const getIcon = (assetClass: string, symbol: string) => {
+  if (assetClass === "Crypto") {
+    const firstPart = symbol.split("/")[0];
+    return firstPart && firstPart in icons
       ? icons[firstPart as keyof typeof icons]
       : Generic;
-
-  return <Icon width="100%" height="100%" viewBox="0 0 32 32" {...props} />;
+  } else {
+    return Generic;
+  }
 };

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

@@ -25,7 +25,6 @@ import {
   YesterdaysPricesProvider,
   PriceFeedChangePercent,
 } from "../PriceFeedChangePercent";
-import { PriceFeedIcon } from "../PriceFeedIcon";
 import { PriceFeedTag } from "../PriceFeedTag";
 
 const PRICE_FEEDS_ANCHOR = "priceFeeds";
@@ -127,10 +126,6 @@ export const PriceFeeds = async () => {
           id={PRICE_FEEDS_ANCHOR}
           priceFeeds={priceFeeds.activeFeeds.map((feed) => ({
             symbol: feed.symbol,
-            icon: <PriceFeedIcon symbol={feed.product.display_symbol} />,
-            id: feed.product.price_account,
-            displaySymbol: feed.product.display_symbol,
-            assetClass: feed.product.asset_type,
             exponent: feed.price.exponent,
             numQuoters: feed.price.numQuoters,
           }))}

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

@@ -13,15 +13,14 @@ 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]
+    return assetClass in LABELS
+      ? LABELS[assetClass as keyof typeof LABELS]
       : LABELS.default;
   }
 };
 
 const LABELS = {
-  rates: {
+  Rates: {
     plural: {
       upcase: "YIELDS",
       title: "Yields",

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

@@ -38,7 +38,6 @@ import { FormattedDate } from "../FormattedDate";
 import { FormattedNumber } from "../FormattedNumber";
 import { FormattedTokens } from "../FormattedTokens";
 import { Meter } from "../Meter";
-import { PriceFeedIcon } from "../PriceFeedIcon";
 import { PublisherIcon } from "../PublisherIcon";
 import { PublisherKey } from "../PublisherKey";
 import { PublisherTag } from "../PublisherTag";
@@ -90,14 +89,9 @@ export const PublishersLayout = async ({ children, params }: Props) => {
       publisherKey={key}
       priceFeeds={priceFeeds.map(({ feed, ranking, status }) => ({
         symbol: feed.symbol,
-        displaySymbol: feed.product.display_symbol,
-        description: feed.product.description,
-        icon: <PriceFeedIcon symbol={feed.product.display_symbol} />,
-        feedKey: feed.product.price_account,
         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

@@ -3,7 +3,6 @@
 import { useLogger } from "@pythnetwork/app-logger";
 import { parseAsString, useQueryState } from "nuqs";
 import {
-  type ReactNode,
   type ComponentProps,
   Suspense,
   createContext,
@@ -12,6 +11,7 @@ import {
   use,
 } from "react";
 
+import { usePriceFeeds } from "../../hooks/use-price-feeds";
 import type { Cluster } from "../../services/pyth";
 import type { Status } from "../../status";
 import { PriceComponentDrawer } from "../PriceComponentDrawer";
@@ -32,15 +32,10 @@ type PriceFeedDrawerProviderProps = Omit<
 
 type PriceFeed = {
   symbol: string;
-  displaySymbol: string;
-  description: string;
-  icon: ReactNode;
-  feedKey: string;
   score: number | undefined;
   rank: number | undefined;
   status: Status;
   firstEvaluation: Date | undefined;
-  assetClass: string;
 };
 
 export const PriceFeedDrawerProvider = (
@@ -57,6 +52,7 @@ const PriceFeedDrawerProviderImpl = ({
   children,
   cluster,
 }: PriceFeedDrawerProviderProps) => {
+  const contextPriceFeeds = usePriceFeeds();
   const logger = useLogger();
   const [selectedSymbol, setSelectedSymbol] = useQueryState(
     "price-feed",
@@ -72,10 +68,22 @@ const PriceFeedDrawerProviderImpl = ({
     },
     [setSelectedSymbol, logger],
   );
-  const selectedFeed = useMemo(
-    () => priceFeeds.find((feed) => feed.symbol === selectedSymbol),
-    [selectedSymbol, priceFeeds],
-  );
+  const selectedFeed = useMemo(() => {
+    if (selectedSymbol === "") {
+      return;
+    } else {
+      const feed = priceFeeds.find((feed) => feed.symbol === selectedSymbol);
+      const contextFeed = contextPriceFeeds.get(selectedSymbol);
+
+      return feed === undefined || contextFeed === undefined
+        ? undefined
+        : {
+            ...feed,
+            ...contextFeed,
+            feedKey: contextFeed.key[cluster],
+          };
+    }
+  }, [selectedSymbol, priceFeeds, contextPriceFeeds, cluster]);
   const handleClose = useCallback(() => {
     updateSelectedSymbol("");
   }, [updateSelectedSymbol]);

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

@@ -81,7 +81,12 @@ const PriceFeedsProvider = async ({ children }: { children: ReactNode }) => {
       feed.symbol,
       {
         displaySymbol: feed.product.display_symbol,
-        icon: <PriceFeedIcon symbol={feed.product.display_symbol} />,
+        icon: (
+          <PriceFeedIcon
+            assetClass={feed.product.asset_type}
+            symbol={feed.product.display_symbol}
+          />
+        ),
         description: feed.product.description,
         key: {
           [Cluster.Pythnet]: feed.product.price_account,