diff --git a/apps/insights/src/components/PriceFeedIcon/index.tsx b/apps/insights/src/components/PriceFeedIcon/index.tsx index 9f0032c3af..efeb7ec0e6 100644 --- a/apps/insights/src/components/PriceFeedIcon/index.tsx +++ b/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 ; +}; + +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 ; + } else { + return Generic; + } }; diff --git a/apps/insights/src/components/PriceFeeds/index.tsx b/apps/insights/src/components/PriceFeeds/index.tsx index 25cc6a9750..2e8f50ef95 100644 --- a/apps/insights/src/components/PriceFeeds/index.tsx +++ b/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: , - id: feed.product.price_account, - displaySymbol: feed.product.display_symbol, - assetClass: feed.product.asset_type, exponent: feed.price.exponent, numQuoters: feed.price.numQuoters, }))} diff --git a/apps/insights/src/components/PriceName/index.tsx b/apps/insights/src/components/PriceName/index.tsx index d198422a5d..25d3b0d7be 100644 --- a/apps/insights/src/components/PriceName/index.tsx +++ b/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", diff --git a/apps/insights/src/components/Publisher/layout.tsx b/apps/insights/src/components/Publisher/layout.tsx index d67b818131..642250ef5e 100644 --- a/apps/insights/src/components/Publisher/layout.tsx +++ b/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: , - feedKey: feed.product.price_account, score: ranking?.final_score, rank: ranking?.final_rank, firstEvaluation: ranking?.first_ranking_time, - assetClass: feed.product.asset_type, status, }))} > diff --git a/apps/insights/src/components/Publisher/price-feed-drawer-provider.tsx b/apps/insights/src/components/Publisher/price-feed-drawer-provider.tsx index 51d91bd338..0a24cc456a 100644 --- a/apps/insights/src/components/Publisher/price-feed-drawer-provider.tsx +++ b/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]); diff --git a/apps/insights/src/components/Root/index.tsx b/apps/insights/src/components/Root/index.tsx index 0bac83c8f5..f9a72a7ea4 100644 --- a/apps/insights/src/components/Root/index.tsx +++ b/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: , + icon: ( + + ), description: feed.product.description, key: { [Cluster.Pythnet]: feed.product.price_account,