diff --git a/apps/insights/src/components/PriceComponentsCard/index.tsx b/apps/insights/src/components/PriceComponentsCard/index.tsx index 2d6797f215..52bf59a06c 100644 --- a/apps/insights/src/components/PriceComponentsCard/index.tsx +++ b/apps/insights/src/components/PriceComponentsCard/index.tsx @@ -10,6 +10,7 @@ import { Select } from "@pythnetwork/component-library/Select"; import { SingleToggleGroup } from "@pythnetwork/component-library/SingleToggleGroup"; import { type RowConfig, + type ColumnConfig, type SortDescriptor, Table, } from "@pythnetwork/component-library/Table"; @@ -37,7 +38,7 @@ import { Status as StatusComponent } from "../Status"; const SCORE_WIDTH = 32; -type Props = { +type Props> = { className?: string | undefined; priceComponents: T[]; metricsTime?: Date | undefined; @@ -47,6 +48,8 @@ type Props = { onPriceComponentAction: (component: T) => void; toolbarExtra?: ReactNode; assetClass?: string | undefined; + extraColumns?: ColumnConfig[] | undefined; + nameWidth?: number | undefined; }; type PriceComponent = { @@ -63,11 +66,14 @@ type PriceComponent = { nameAsString: string; }; -export const PriceComponentsCard = ({ +export const PriceComponentsCard = < + U extends string, + T extends PriceComponent & Record, +>({ priceComponents, onPriceComponentAction, ...props -}: Props) => ( +}: Props) => ( }> ({ ); -export const ResolvedPriceComponentsCard = ({ +export const ResolvedPriceComponentsCard = < + U extends string, + T extends PriceComponent & Record, +>({ priceComponents, onPriceComponentAction, ...props -}: Props) => { +}: Props) => { const logger = useLogger(); const collator = useCollator(); const filter = useFilter({ sensitivity: "base", usage: "search" }); @@ -174,6 +183,12 @@ export const ResolvedPriceComponentsCard = ({ id: component.id, data: { name: component.name, + ...Object.fromEntries( + props.extraColumns?.map((column) => [ + column.id, + component[column.id], + ]) ?? [], + ), ...(showQuality ? { score: component.score !== undefined && ( @@ -228,7 +243,7 @@ export const ResolvedPriceComponentsCard = ({ onPriceComponentAction(component); }, })), - [paginatedItems, showQuality, onPriceComponentAction], + [paginatedItems, showQuality, onPriceComponentAction, props.extraColumns], ); const updateStatus = useCallback( @@ -273,8 +288,11 @@ export const ResolvedPriceComponentsCard = ({ ); }; -type PriceComponentsCardProps = Pick< - Props, +type PriceComponentsCardProps< + U extends string, + T extends PriceComponent & Record, +> = Pick< + Props, | "className" | "metricsTime" | "nameLoadingSkeleton" @@ -282,6 +300,8 @@ type PriceComponentsCardProps = Pick< | "searchPlaceholder" | "toolbarExtra" | "assetClass" + | "extraColumns" + | "nameWidth" > & ( | { isLoading: true } @@ -306,15 +326,20 @@ type PriceComponentsCardProps = Pick< } ); -export const PriceComponentsCardContents = ({ +export const PriceComponentsCardContents = < + U extends string, + T extends PriceComponent & Record, +>({ className, metricsTime, nameLoadingSkeleton, label, searchPlaceholder, toolbarExtra, + extraColumns, + nameWidth, ...props -}: PriceComponentsCardProps) => { +}: PriceComponentsCardProps) => { const collator = useCollator(); return ( ({ isRowHeader: true, loadingSkeleton: nameLoadingSkeleton, allowsSorting: true, + ...(nameWidth !== undefined && { width: nameWidth }), }, + ...(extraColumns ?? []), ...otherColumns(props), { id: "status", diff --git a/apps/insights/src/components/Publisher/price-feeds-card.tsx b/apps/insights/src/components/Publisher/price-feeds-card.tsx index 65272e8160..0ed6948383 100644 --- a/apps/insights/src/components/Publisher/price-feeds-card.tsx +++ b/apps/insights/src/components/Publisher/price-feeds-card.tsx @@ -5,6 +5,7 @@ import { type ComponentProps, useCallback } from "react"; import { useSelectPriceFeed } from "./price-feed-drawer-provider"; import { usePriceFeeds } from "../../hooks/use-price-feeds"; import type { Cluster } from "../../services/pyth"; +import { AssetClassTag } from "../AssetClassTag"; import { PriceComponentsCard } from "../PriceComponentsCard"; import { PriceFeedTag } from "../PriceFeedTag"; @@ -37,6 +38,15 @@ export const PriceFeedsCard = ({ return ( { const contextFeed = feeds.get(feed.symbol); if (contextFeed) { @@ -53,6 +63,7 @@ export const PriceFeedsCard = ({ publisherKey, name: , nameAsString: contextFeed.displaySymbol, + assetClass: , }; } else { throw new NoSuchFeedError(feed.symbol);