feat(known-publishers): add LTP to known publisher list

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

@@ -1,10 +1,10 @@
 import { lookup as lookupPublisher } from "@pythnetwork/known-publishers";
 import { notFound } from "next/navigation";
-import { createElement } from "react";
 
 import { PublishersCard } from "./publishers-card";
 import { getRankings } from "../../services/clickhouse";
 import { getData } from "../../services/pyth";
+import { PublisherIcon } from "../PublisherIcon";
 
 type Props = {
   params: Promise<{
@@ -33,7 +33,7 @@ export const Publishers = async ({ params }: Props) => {
           stalledScore: ranking.stalled_score,
           ...(knownPublisher && {
             name: knownPublisher.name,
-            icon: createElement(knownPublisher.icon.color),
+            icon: <PublisherIcon knownPublisher={knownPublisher} />,
           }),
         };
       })}

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

@@ -13,7 +13,7 @@ import { InfoBox } from "@pythnetwork/component-library/InfoBox";
 import { StatCard } from "@pythnetwork/component-library/StatCard";
 import { lookup } from "@pythnetwork/known-publishers";
 import { notFound } from "next/navigation";
-import { type ReactNode, createElement } from "react";
+import type { ReactNode } from "react";
 
 import { ActiveFeedsCard } from "./active-feeds-card";
 import { ChartCard } from "./chart-card";
@@ -34,6 +34,7 @@ import { FormattedDate } from "../FormattedDate";
 import { FormattedNumber } from "../FormattedNumber";
 import { FormattedTokens } from "../FormattedTokens";
 import { Meter } from "../Meter";
+import { PublisherIcon } from "../PublisherIcon";
 import { PublisherKey } from "../PublisherKey";
 import { PublisherTag } from "../PublisherTag";
 import { SemicircleMeter } from "../SemicircleMeter";
@@ -93,7 +94,7 @@ export const PublishersLayout = async ({ children, params }: Props) => {
             publisherKey={key}
             {...(knownPublisher && {
               name: knownPublisher.name,
-              icon: createElement(knownPublisher.icon.color),
+              icon: <PublisherIcon knownPublisher={knownPublisher} />,
             })}
           />
         </div>

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

@@ -5,14 +5,14 @@ import { Card } from "@pythnetwork/component-library/Card";
 import { Table } from "@pythnetwork/component-library/Table";
 import { lookup } from "@pythnetwork/known-publishers";
 import { notFound } from "next/navigation";
-import { createElement } from "react";
 
 import { getRankingsWithData } from "./get-rankings-with-data";
 import styles from "./performance.module.scss";
 import { getPublishers } from "../../services/clickhouse";
 import { getTotalFeedCount } from "../../services/pyth";
 import { PriceFeedIcon } from "../PriceFeedIcon";
 import { PriceFeedTag } from "../PriceFeedTag";
+import { PublisherIcon } from "../PublisherIcon";
 import { PublisherTag } from "../PublisherTag";
 import { Ranking } from "../Ranking";
 import { Score } from "../Score";
@@ -101,7 +101,7 @@ export const Performance = async ({ params }: Props) => {
                     publisherKey={publisher.key}
                     {...(knownPublisher && {
                       name: knownPublisher.name,
-                      icon: createElement(knownPublisher.icon.color),
+                      icon: <PublisherIcon knownPublisher={knownPublisher} />,
                     })}
                   />
                 ),

apps/insights/src/components/PublisherIcon/index.module.scss

@@ -0,0 +1,7 @@
+html[data-theme="dark"] .lightIcon {
+  display: none;
+}
+
+html[data-theme="light"] .darkIcon {
+  display: none;
+}

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

@@ -0,0 +1,27 @@
+import "server-only";
+
+import type { lookup as lookupPublisher } from "@pythnetwork/known-publishers";
+
+import styles from "./index.module.scss";
+
+type Props = {
+  knownPublisher: NonNullable<ReturnType<typeof lookupPublisher>>;
+};
+
+export const PublisherIcon = ({ knownPublisher }: Props) => {
+  if ("dark" in knownPublisher.icon) {
+    const { dark: Dark, light: Light } = knownPublisher.icon;
+    return (
+      <>
+        <Dark className={styles.darkIcon} />
+        <Light className={styles.lightIcon} />
+      </>
+    );
+  } else {
+    const Icon =
+      "color" in knownPublisher.icon
+        ? knownPublisher.icon.color
+        : knownPublisher.icon.monochrome;
+    return <Icon />;
+  }
+};

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

@@ -6,7 +6,6 @@ import { Button } from "@pythnetwork/component-library/Button";
 import { Card } from "@pythnetwork/component-library/Card";
 import { StatCard } from "@pythnetwork/component-library/StatCard";
 import { lookup as lookupPublisher } from "@pythnetwork/known-publishers";
-import { createElement } from "react";
 
 import styles from "./index.module.scss";
 import { PublishersCard } from "./publishers-card";
@@ -19,6 +18,7 @@ import {
   getDistributedRewards,
 } from "../../services/staking";
 import { FormattedTokens } from "../FormattedTokens";
+import { PublisherIcon } from "../PublisherIcon";
 import { PublisherTag } from "../PublisherTag";
 import { SemicircleMeter, Label } from "../SemicircleMeter";
 import { TokenIcon } from "../TokenIcon";
@@ -162,7 +162,7 @@ export const Publishers = async () => {
                 medianScore: medianScore,
                 ...(knownPublisher && {
                   name: knownPublisher.name,
-                  icon: createElement(knownPublisher.icon.color),
+                  icon: <PublisherIcon knownPublisher={knownPublisher} />,
                 }),
               };
             },

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

@@ -2,7 +2,6 @@ import { lookup as lookupPublisher } from "@pythnetwork/known-publishers";
 import { Root as BaseRoot } from "@pythnetwork/next-root";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import type { ReactNode } from "react";
-import { createElement } from "react";
 
 import { Footer } from "./footer";
 import { Header } from "./header";
@@ -20,6 +19,7 @@ import { getPublishers } from "../../services/clickhouse";
 import { getData } from "../../services/pyth";
 import { LivePricesProvider } from "../LivePrices";
 import { PriceFeedIcon } from "../PriceFeedIcon";
+import { PublisherIcon } from "../PublisherIcon";
 
 type Props = {
   children: ReactNode;
@@ -51,7 +51,7 @@ export const Root = async ({ children }: Props) => {
             medianScore: publisher.medianScore,
             ...(knownPublisher && {
               name: knownPublisher.name,
-              icon: createElement(knownPublisher.icon.color),
+              icon: <PublisherIcon knownPublisher={knownPublisher} />,
             }),
           };
         })}

apps/staking/src/known-publishers.ts

@@ -1,6 +1,7 @@
 import blocksize from "./publisher-icons/blocksize.svg";
 import elfomo from "./publisher-icons/elfomo.svg";
 import finazon from "./publisher-icons/finazon.svg";
+import ltp from "./publisher-icons/ltp.svg";
 import sentio from "./publisher-icons/sentio.svg";
 import woo from "./publisher-icons/woo.svg";
 
@@ -25,4 +26,8 @@ export const KNOWN_PUBLISHERS = {
     name: "WOO",
     icon: woo,
   },
+  GUcFC3NBuVSf9rdQqW3t2sBcP6sEp269rtPxxGyvAHoM: {
+    name: "LTP",
+    icon: ltp,
+  },
 };

packages/known-publishers/src/index.tsx

@@ -1,9 +1,12 @@
 import finazonColor from "./icons/color/finazon.svg";
 import sentioColor from "./icons/color/sentio.svg";
 import wooColor from "./icons/color/woo.svg";
+import ltpDark from "./icons/dark/ltp.svg";
+import ltpLight from "./icons/light/ltp.svg";
 import blocksize from "./icons/monochrome/blocksize.svg";
 import elfomo from "./icons/monochrome/elfomo.svg";
 import finazonMonochrome from "./icons/monochrome/finazon.svg";
+import ltpMonochrome from "./icons/monochrome/ltp.svg";
 import sentioMonochrome from "./icons/monochrome/sentio.svg";
 import wooMonochrome from "./icons/monochrome/woo.svg";
 
@@ -12,7 +15,6 @@ export const knownPublishers = {
     name: "BLOCKSIZE",
     icon: {
       monochrome: blocksize,
-      color: blocksize,
     },
   },
   "89ijemG1TUL2kdV2RtCrhXzY5QhyKHsWqCmP5iobvLUF": {
@@ -33,7 +35,6 @@ export const knownPublishers = {
     name: "Elfomo",
     icon: {
       monochrome: elfomo,
-      color: elfomo,
     },
   },
   DANa2ZYtyUcSW8W8C25ZfscKdBra53npt2frmh7fUucf: {
@@ -43,7 +44,15 @@ export const knownPublishers = {
       color: wooColor,
     },
   },
-};
+  GUcFC3NBuVSf9rdQqW3t2sBcP6sEp269rtPxxGyvAHoM: {
+    name: "LTP",
+    icon: {
+      monochrome: ltpMonochrome,
+      dark: ltpDark,
+      light: ltpLight,
+    },
+  },
+} as const;
 
 export const lookup = (value: string) =>
   value in knownPublishers