feat(component-library): add symbol pair tag

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

@@ -3,6 +3,7 @@ import { Breadcrumbs } from "@pythnetwork/component-library/Breadcrumbs";
 import { Button } from "@pythnetwork/component-library/Button";
 import { Skeleton } from "@pythnetwork/component-library/Skeleton";
 import { StatCard } from "@pythnetwork/component-library/StatCard";
+import { SymbolPairTag } from "@pythnetwork/component-library/SymbolPairTag";
 import { Suspense } from "react";
 
 import { Cluster } from "../../services/pyth";
@@ -16,7 +17,6 @@ import {
   YesterdaysPricesProvider,
 } from "../PriceFeedChangePercent";
 import { PriceFeedIcon } from "../PriceFeedIcon";
-import { PriceFeedTag } from "../PriceFeedTag";
 import { PriceName } from "../PriceName";
 import { getFeed } from "./get-feed";
 import styles from "./header.module.scss";
@@ -93,7 +93,7 @@ const PriceFeedHeaderImpl = (props: PriceFeedHeaderImplProps) => (
                 })),
             })}
       >
-        <PriceFeedTag
+        <SymbolPairTag
           {...(props.isLoading
             ? { isLoading: true }
             : {
@@ -108,7 +108,7 @@ const PriceFeedHeaderImpl = (props: PriceFeedHeaderImplProps) => (
               })}
         />
       </PriceFeedSelect>
-      <PriceFeedTag
+      <SymbolPairTag
         className={styles.priceFeedTag}
         {...(props.isLoading
           ? { isLoading: true }

apps/insights/src/components/PriceFeed/price-feed-select.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { DropdownCaretDown } from "@pythnetwork/component-library/DropdownCaretDown";
+import { SymbolPairTag } from "@pythnetwork/component-library/SymbolPairTag";
 import {
-  Virtualizer,
   ListLayout,
+  Virtualizer,
 } from "@pythnetwork/component-library/Virtualizer";
 import { Button } from "@pythnetwork/component-library/unstyled/Button";
 import { Dialog } from "@pythnetwork/component-library/unstyled/Dialog";
@@ -20,9 +21,8 @@ import { matchSorter } from "match-sorter";
 import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
 
-import styles from "./price-feed-select.module.scss";
 import { AssetClassBadge } from "../AssetClassBadge";
-import { PriceFeedTag } from "../PriceFeedTag";
+import styles from "./price-feed-select.module.scss";
 
 type Props = {
   className: string | undefined;
@@ -111,7 +111,7 @@ const ResolvedPriceFeedSelect = ({
                     }
                     prefetch={false}
                   >
-                    <PriceFeedTag
+                    <SymbolPairTag
                       displaySymbol={displaySymbol}
                       description={description}
                       icon={icon}

apps/insights/src/components/PriceFeeds/coming-soon-list.tsx

@@ -3,14 +3,14 @@
 import { NoResults } from "@pythnetwork/component-library/NoResults";
 import { SearchInput } from "@pythnetwork/component-library/SearchInput";
 import { Select } from "@pythnetwork/component-library/Select";
+import { SymbolPairTag } from "@pythnetwork/component-library/SymbolPairTag";
 import { Table } from "@pythnetwork/component-library/Table";
 import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
 import { useCollator, useFilter } from "react-aria";
 
 import styles from "./coming-soon-list.module.scss";
 import { AssetClassBadge } from "../AssetClassBadge";
-import { PriceFeedTag } from "../PriceFeedTag";
 
 type Props = {
   comingSoonFeeds: {
@@ -65,7 +65,7 @@ export const ComingSoonList = ({ comingSoonFeeds }: Props) => {
           href: `/price-feeds/${encodeURIComponent(symbol)}`,
           data: {
             priceFeedName: (
-              <PriceFeedTag
+              <SymbolPairTag
                 description={description}
                 displaySymbol={displaySymbol}
                 icon={icon}

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

@@ -8,6 +8,7 @@ import { Button } from "@pythnetwork/component-library/Button";
 import type { Props as CardProps } from "@pythnetwork/component-library/Card";
 import { Card } from "@pythnetwork/component-library/Card";
 import { StatCard } from "@pythnetwork/component-library/StatCard";
+import { SymbolPairTag } from "@pythnetwork/component-library/SymbolPairTag";
 import { TabList } from "@pythnetwork/component-library/TabList";
 import {
   TabPanel as UnstyledTabPanel,
@@ -30,7 +31,6 @@ import {
   PriceFeedChangePercent,
 } from "../PriceFeedChangePercent";
 import { PriceFeedIcon } from "../PriceFeedIcon";
-import { PriceFeedTag } from "../PriceFeedTag";
 
 const PRICE_FEEDS_ANCHOR = "priceFeeds";
 
@@ -260,7 +260,7 @@ const FeaturedFeedsCard = <T extends ElementType>({
           href={`/price-feeds/${encodeURIComponent(feed.symbol)}`}
         >
           <div className={styles.feedCardContents}>
-            <PriceFeedTag
+            <SymbolPairTag
               displaySymbol={feed.product.display_symbol}
               description={feed.product.description}
               icon={

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

@@ -8,6 +8,7 @@ import { NoResults } from "@pythnetwork/component-library/NoResults";
 import { Paginator } from "@pythnetwork/component-library/Paginator";
 import { SearchInput } from "@pythnetwork/component-library/SearchInput";
 import { Select } from "@pythnetwork/component-library/Select";
+import { SymbolPairTag } from "@pythnetwork/component-library/SymbolPairTag";
 import type {
   RowConfig,
   SortDescriptor,
@@ -30,7 +31,6 @@ import {
   LiveValue,
   SKELETON_WIDTH,
 } from "../LivePrices";
-import { PriceFeedTag } from "../PriceFeedTag";
 import { PriceName } from "../PriceName";
 import styles from "./price-feeds-card.module.scss";
 
@@ -137,7 +137,7 @@ const ResolvedPriceFeedsCard = ({ priceFeeds, ...props }: Props) => {
               <LiveConfidence feedKey={key} cluster={Cluster.Pythnet} />
             ),
             priceFeedName: (
-              <PriceFeedTag
+              <SymbolPairTag
                 description={description}
                 displaySymbol={displaySymbol}
                 icon={icon}
@@ -296,7 +296,7 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
     <EntityList
       label="Price Feeds"
       className={styles.entityList ?? ""}
-      headerLoadingSkeleton={<PriceFeedTag isLoading />}
+      headerLoadingSkeleton={<SymbolPairTag isLoading />}
       fields={[
         { id: "assetClass", name: "Asset Class" },
         { id: "priceFeedId", name: "Price Feed ID" },
@@ -331,7 +331,7 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
           name: "PRICE FEED",
           isRowHeader: true,
           alignment: "left",
-          loadingSkeleton: <PriceFeedTag isLoading />,
+          loadingSkeleton: <SymbolPairTag isLoading />,
           allowsSorting: true,
         },
         {

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

@@ -7,6 +7,7 @@ import { EntityList } from "@pythnetwork/component-library/EntityList";
 import { Link } from "@pythnetwork/component-library/Link";
 import type { Variant as NoResultsVariant } from "@pythnetwork/component-library/NoResults";
 import { NoResults } from "@pythnetwork/component-library/NoResults";
+import { SymbolPairTag } from "@pythnetwork/component-library/SymbolPairTag";
 import { Table } from "@pythnetwork/component-library/Table";
 import { lookup } from "@pythnetwork/known-publishers";
 import { notFound } from "next/navigation";
@@ -25,7 +26,6 @@ import {
   ExplainAverage,
 } from "../Explanations";
 import { PriceFeedIcon } from "../PriceFeedIcon";
-import { PriceFeedTag } from "../PriceFeedTag";
 import { PublisherIcon } from "../PublisherIcon";
 import { PublisherTag } from "../PublisherTag";
 import { Ranking } from "../Ranking";
@@ -365,7 +365,7 @@ const TopFeedsCard = ({
       <TopFeedsTable
         label={`${title} Feeds`}
         publisherScoreWidth={PUBLISHER_SCORE_WIDTH}
-        nameLoadingSkeleton={<PriceFeedTag isLoading />}
+        nameLoadingSkeleton={<SymbolPairTag isLoading />}
         {...(props.isLoading
           ? { isLoading: true }
           : {

apps/insights/src/components/Publisher/price-feeds.tsx

@@ -1,3 +1,4 @@
+import { SymbolPairTag } from "@pythnetwork/component-library/SymbolPairTag";
 import { notFound } from "next/navigation";
 
 import { getPriceFeeds } from "./get-price-feeds";
@@ -7,7 +8,6 @@ import { AssetClassBadge } from "../AssetClassBadge";
 import type { PriceComponent } from "../PriceComponentsCard";
 import { PriceComponentsCard } from "../PriceComponentsCard";
 import { PriceFeedIcon } from "../PriceFeedIcon";
-import { PriceFeedTag } from "../PriceFeedTag";
 
 type Props = {
   params: Promise<{
@@ -36,7 +36,7 @@ export const PriceFeeds = async ({ params }: Props) => {
       priceFeeds={feeds.map(({ ranking, feed, status }) => ({
         symbol: feed.symbol,
         name: (
-          <PriceFeedTag
+          <SymbolPairTag
             displaySymbol={feed.product.display_symbol}
             description={feed.product.description}
             icon={
@@ -80,7 +80,7 @@ const PriceFeedsCard = (props: PriceFeedsCardProps) => (
   <PriceComponentsCard
     label="Price Feeds"
     searchPlaceholder="Feed symbol"
-    nameLoadingSkeleton={<PriceFeedTag isLoading />}
+    nameLoadingSkeleton={<SymbolPairTag isLoading />}
     extraColumns={[
       {
         id: "assetClassBadge",

apps/insights/src/components/Publisher/top-feeds-table.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { EntityList } from "@pythnetwork/component-library/EntityList";
+import { SymbolPairTag } from "@pythnetwork/component-library/SymbolPairTag";
 import type { RowConfig } from "@pythnetwork/component-library/Table";
 import { Table } from "@pythnetwork/component-library/Table";
 import type { ReactNode } from "react";
@@ -11,7 +12,6 @@ import type { Cluster } from "../../services/pyth";
 import type { Status } from "../../status";
 import { AssetClassBadge } from "../AssetClassBadge";
 import { usePriceComponentDrawer } from "../PriceComponentDrawer";
-import { PriceFeedTag } from "../PriceFeedTag";
 import { Score } from "../Score";
 
 type Props =
@@ -53,7 +53,7 @@ const ResolvedTopFeedsTable = ({
     () =>
       feeds.map((feed) => ({
         name: (
-          <PriceFeedTag
+          <SymbolPairTag
             displaySymbol={feed.displaySymbol}
             description={feed.description}
             icon={feed.icon}

apps/insights/src/components/Root/search-button.tsx

@@ -8,6 +8,7 @@ import { NoResults } from "@pythnetwork/component-library/NoResults";
 import { SearchButton as SearchButtonComponent } from "@pythnetwork/component-library/SearchButton";
 import { SearchInput } from "@pythnetwork/component-library/SearchInput";
 import { SingleToggleGroup } from "@pythnetwork/component-library/SingleToggleGroup";
+import { SymbolPairTag } from "@pythnetwork/component-library/SymbolPairTag";
 import {
   ListLayout,
   Virtualizer,
@@ -25,7 +26,6 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { Cluster, ClusterToName } from "../../services/pyth";
 import { AssetClassBadge } from "../AssetClassBadge";
-import { PriceFeedTag } from "../PriceFeedTag";
 import { PublisherTag } from "../PublisherTag";
 import { Score } from "../Score";
 import styles from "./search-button.module.scss";
@@ -241,7 +241,7 @@ const SearchDialogContents = ({
               >
                 <div className={styles.smallScreen}>
                   {result.type === ResultType.PriceFeed ? (
-                    <PriceFeedTag
+                    <SymbolPairTag
                       className={styles.itemTag}
                       displaySymbol={result.displaySymbol}
                       description={result.description}
@@ -316,7 +316,7 @@ const SearchDialogContents = ({
                   </div>
                   {result.type === ResultType.PriceFeed ? (
                     <>
-                      <PriceFeedTag
+                      <SymbolPairTag
                         displaySymbol={result.displaySymbol}
                         description={result.description}
                         icon={result.icon}

packages/component-library/package.json

@@ -74,6 +74,7 @@
     "autoprefixer": "catalog:",
     "babel-plugin-react-compiler": "catalog:",
     "copyfiles": "catalog:",
+    "cryptocurrency-icons": "catalog:",
     "css-loader": "catalog:",
     "eslint": "catalog:",
     "jest": "catalog:",

apps/insights/src/components/PriceFeedTag/index.module.scss → packages/component-library/src/SymbolPairTag/index.module.scss

@@ -1,6 +1,6 @@
-@use "@pythnetwork/component-library/theme";
+@use "../theme";
 
-.priceFeedTag {
+.symbolPairTag {
   display: flex;
   flex-flow: row nowrap;
   gap: theme.spacing(3);

packages/component-library/src/SymbolPairTag/index.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CryptoIcon from "cryptocurrency-icons/svg/color/btc.svg";
+
+import { SymbolPairTag as SymbolPairTagComponent } from "./index.jsx";
+const meta = {
+  component: SymbolPairTagComponent,
+  argTypes: {
+    isLoading: {
+      control: "boolean",
+      table: {
+        category: "State",
+      },
+    },
+    icon: {
+      description: "The icon to display",
+      disable: true,
+    },
+    displaySymbol: {
+      control: "text",
+    },
+    description: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof SymbolPairTagComponent>;
+export default meta;
+
+export const SymbolPairTag = {
+  args: {
+    displaySymbol: "BTC/USD",
+    isLoading: false,
+    icon: <CryptoIcon width="100%" height="100%" viewBox="0 0 32 32" />,
+    description: "Bitcoin",
+  },
+} satisfies StoryObj<typeof SymbolPairTagComponent>;

apps/insights/src/components/PriceFeedTag/index.tsx → packages/component-library/src/SymbolPairTag/index.tsx

@@ -1,10 +1,12 @@
-import { Skeleton } from "@pythnetwork/component-library/Skeleton";
+'use client';
+
 import clsx from "clsx";
 import type { ComponentProps, ReactNode } from "react";
 import { Fragment } from "react";
 
 import styles from "./index.module.scss";
-import { omitKeys } from "../../omit-keys";
+import { Skeleton } from "../Skeleton/index.jsx";
+import { omitKeys } from "../omit-keys";
 
 type OwnProps =
   | { isLoading: true }
@@ -17,9 +19,9 @@ type OwnProps =
 
 type Props = Omit<ComponentProps<"div">, keyof OwnProps> & OwnProps;
 
-export const PriceFeedTag = ({ className, ...props }: Props) => (
+export const SymbolPairTag = ({ className, ...props }: Props) => (
   <div
-    className={clsx(styles.priceFeedTag, className)}
+    className={clsx(styles.symbolPairTag, className)}
     data-loading={props.isLoading ? "" : undefined}
     {...omitKeys(props, ["displaySymbol", "description", "isLoading"])}
   >
@@ -33,7 +35,7 @@ export const PriceFeedTag = ({ className, ...props }: Props) => (
         {props.isLoading ? (
           <Skeleton width={30} />
         ) : (
-          <FeedName displaySymbol={props.displaySymbol} />
+          <SymbolName displaySymbol={props.displaySymbol} />
         )}
       </div>
       <div className={styles.description}>
@@ -47,7 +49,7 @@ export const PriceFeedTag = ({ className, ...props }: Props) => (
   </div>
 );
 
-const FeedName = ({ displaySymbol }: { displaySymbol: string }) => {
+const SymbolName = ({ displaySymbol }: { displaySymbol: string }) => {
   const [firstPart, ...rest] = displaySymbol.split("/");
   return (
     <>

packages/component-library/src/omit-keys.ts

@@ -0,0 +1,6 @@
+export const omitKeys = (obj: Record<string, unknown>, keys: string[]) => {
+  const omitSet = new Set(keys);
+  return Object.fromEntries(
+    Object.entries(obj).filter(([key]) => !omitSet.has(key)),
+  );
+};