From 6017046ce19187a66fd0c04aae19c71ec58839f8 Mon Sep 17 00:00:00 2001 From: Connor Prussin Date: Wed, 1 Jan 2025 12:00:26 -0800 Subject: [PATCH] feat(known-publishers): add LTP to known publisher list --- .../src/components/PriceFeed/publishers.tsx | 4 +-- .../src/components/Publisher/layout.tsx | 5 ++-- .../src/components/Publisher/performance.tsx | 4 +-- .../PublisherIcon/index.module.scss | 7 +++++ .../src/components/PublisherIcon/index.tsx | 27 +++++++++++++++++++ .../src/components/Publishers/index.tsx | 4 +-- apps/insights/src/components/Root/index.tsx | 4 +-- apps/staking/src/known-publishers.ts | 5 ++++ apps/staking/src/publisher-icons/ltp.svg | 6 +++++ .../known-publishers/src/icons/dark/ltp.svg | 7 +++++ .../known-publishers/src/icons/light/ltp.svg | 7 +++++ .../src/icons/monochrome/ltp.svg | 6 +++++ packages/known-publishers/src/index.tsx | 15 ++++++++--- 13 files changed, 88 insertions(+), 13 deletions(-) create mode 100644 apps/insights/src/components/PublisherIcon/index.module.scss create mode 100644 apps/insights/src/components/PublisherIcon/index.tsx create mode 100644 apps/staking/src/publisher-icons/ltp.svg create mode 100644 packages/known-publishers/src/icons/dark/ltp.svg create mode 100644 packages/known-publishers/src/icons/light/ltp.svg create mode 100644 packages/known-publishers/src/icons/monochrome/ltp.svg diff --git a/apps/insights/src/components/PriceFeed/publishers.tsx b/apps/insights/src/components/PriceFeed/publishers.tsx index 616b27a63f..7cab4e455a 100644 --- a/apps/insights/src/components/PriceFeed/publishers.tsx +++ b/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: , }), }; })} diff --git a/apps/insights/src/components/Publisher/layout.tsx b/apps/insights/src/components/Publisher/layout.tsx index c3f79c8e18..629c42a402 100644 --- a/apps/insights/src/components/Publisher/layout.tsx +++ b/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: , })} /> diff --git a/apps/insights/src/components/Publisher/performance.tsx b/apps/insights/src/components/Publisher/performance.tsx index 91e56f7efb..9087c85bc4 100644 --- a/apps/insights/src/components/Publisher/performance.tsx +++ b/apps/insights/src/components/Publisher/performance.tsx @@ -5,7 +5,6 @@ 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"; @@ -13,6 +12,7 @@ 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: , })} /> ), diff --git a/apps/insights/src/components/PublisherIcon/index.module.scss b/apps/insights/src/components/PublisherIcon/index.module.scss new file mode 100644 index 0000000000..b984bd80bf --- /dev/null +++ b/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; +} diff --git a/apps/insights/src/components/PublisherIcon/index.tsx b/apps/insights/src/components/PublisherIcon/index.tsx new file mode 100644 index 0000000000..5c470734a3 --- /dev/null +++ b/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>; +}; + +export const PublisherIcon = ({ knownPublisher }: Props) => { + if ("dark" in knownPublisher.icon) { + const { dark: Dark, light: Light } = knownPublisher.icon; + return ( + <> + + + + ); + } else { + const Icon = + "color" in knownPublisher.icon + ? knownPublisher.icon.color + : knownPublisher.icon.monochrome; + return ; + } +}; diff --git a/apps/insights/src/components/Publishers/index.tsx b/apps/insights/src/components/Publishers/index.tsx index 8e97fc136c..027577dc92 100644 --- a/apps/insights/src/components/Publishers/index.tsx +++ b/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: , }), }; }, diff --git a/apps/insights/src/components/Root/index.tsx b/apps/insights/src/components/Root/index.tsx index 6ef9c3a0aa..aa94f1056b 100644 --- a/apps/insights/src/components/Root/index.tsx +++ b/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: , }), }; })} diff --git a/apps/staking/src/known-publishers.ts b/apps/staking/src/known-publishers.ts index c8580c792b..77ff1415c1 100644 --- a/apps/staking/src/known-publishers.ts +++ b/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, + }, }; diff --git a/apps/staking/src/publisher-icons/ltp.svg b/apps/staking/src/publisher-icons/ltp.svg new file mode 100644 index 0000000000..c90d6e741a --- /dev/null +++ b/apps/staking/src/publisher-icons/ltp.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/known-publishers/src/icons/dark/ltp.svg b/packages/known-publishers/src/icons/dark/ltp.svg new file mode 100644 index 0000000000..876c6c43c9 --- /dev/null +++ b/packages/known-publishers/src/icons/dark/ltp.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/known-publishers/src/icons/light/ltp.svg b/packages/known-publishers/src/icons/light/ltp.svg new file mode 100644 index 0000000000..181b8d0df5 --- /dev/null +++ b/packages/known-publishers/src/icons/light/ltp.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/known-publishers/src/icons/monochrome/ltp.svg b/packages/known-publishers/src/icons/monochrome/ltp.svg new file mode 100644 index 0000000000..c90d6e741a --- /dev/null +++ b/packages/known-publishers/src/icons/monochrome/ltp.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/known-publishers/src/index.tsx b/packages/known-publishers/src/index.tsx index 90cbf9d865..774c2f6f9e 100644 --- a/packages/known-publishers/src/index.tsx +++ b/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