Merge pull request #2473 from pyth-network/cprussin/ui-104-trademark-notice

feat(insights): implement new disclaimer banners

apps/insights/src/components/PriceFeed/chart-page.module.scss

@@ -8,3 +8,28 @@
     overflow: hidden;
   }
 }
+
+.disclaimer {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: theme.spacing(1);
+  padding: theme.spacing(3);
+
+  .disclaimerIcon {
+    flex: none;
+    color: theme.color("states", "info", "icon");
+    font-size: theme.spacing(6);
+  }
+
+  .disclaimerBody {
+    @include theme.text("sm", "normal");
+
+    color: theme.color("paragraph");
+    padding: 0 theme.spacing(2);
+    line-height: 150%;
+
+    b {
+      font-weight: theme.font-weight("semibold");
+    }
+  }
+}

apps/insights/src/components/PriceFeed/chart-page.tsx

@@ -1,4 +1,6 @@
+import { Info } from "@phosphor-icons/react/dist/ssr/Info";
 import { Card } from "@pythnetwork/component-library/Card";
+import { Link } from "@pythnetwork/component-library/Link";
 import { notFound } from "next/navigation";
 
 import { Chart } from "./chart";
@@ -24,8 +26,40 @@ export const ChartPage = async ({ params }: Props) => {
       <div className={styles.chart}>
         <Chart symbol={symbol} feedId={feed.product.price_account} />
       </div>
+      <Disclaimer symbol={symbol} displaySymbol={feed.product.display_symbol} />
     </Card>
   ) : (
     notFound()
   );
 };
+
+type DisclaimerProps = {
+  displaySymbol: string;
+  symbol: string;
+};
+
+const Disclaimer = ({ displaySymbol, symbol }: DisclaimerProps) => {
+  return NEW_YORK_FED_SYMBOLS.has(symbol) ? (
+    <div className={styles.disclaimer}>
+      <Info className={styles.disclaimerIcon} weight="fill" />
+      <p className={styles.disclaimerBody}>
+        The <b>{displaySymbol}</b> is subject to the Terms of Use posted at{" "}
+        <Link target="_blank" rel="noreferrer" href="https://newyorkfed.org">
+          newyorkfed.org
+        </Link>
+        . The New York Fed is not responsible for publication of the{" "}
+        <b>{displaySymbol}</b> by <b>Pyth Network</b> or its publishers, does
+        not sanction or endorse any particular republication, and has no
+        liability for your use.
+      </p>
+    </div>
+  ) : null; // eslint-disable-line unicorn/no-null
+};
+
+const NEW_YORK_FED_SYMBOLS = new Set([
+  "Rates.SOFR",
+  "Rates.EFFR",
+  "Rates.OBFR",
+  "Rates.BGCR",
+  "Rates.TGCR",
+]);

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

@@ -72,6 +72,7 @@ export const ComingSoonList = ({ comingSoonSymbols }: Props) => {
     () =>
       filteredFeeds.map(({ symbol }) => ({
         id: symbol,
+        href: `/price-feeds/${encodeURIComponent(symbol)}`,
         data: {
           priceFeedName: <PriceFeedTag compact symbol={symbol} />,
           assetClass: <AssetClassTag symbol={symbol} />,

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

@@ -86,24 +86,4 @@
       @include theme.max-width;
     }
   }
-
-  .trademarkDisclaimer {
-    margin-top: theme.spacing(6);
-    width: 100%;
-    padding: theme.spacing(4);
-    display: flex;
-    flex-flow: column nowrap;
-    gap: theme.spacing(4);
-    color: theme.color("foreground");
-    font-size: theme.font-size("sm");
-
-    @include theme.max-width;
-
-    .trademarkDisclaimerHeader {
-      @include theme.text("lg", "medium");
-
-      color: theme.color("heading");
-      margin-bottom: theme.spacing(2);
-    }
-  }
 }

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

@@ -124,32 +124,6 @@ export const PriceFeeds = async () => {
           />
         </UnstyledTabPanel>
       </UnstyledTabs>
-      <div className={styles.trademarkDisclaimer}>
-        <h3 className={styles.trademarkDisclaimerHeader}>
-          Trademark Disclaimer
-        </h3>
-        <p>
-          This website may display ticker symbols, product names, and other
-          identifiers that are trademarks, service marks or trade names of third
-          parties. Such display is for informational purposes only and does not
-          constitute any claim of ownership thereof by Pyth Data Association or
-          any of its subsidiaries and other affiliates (collectively,
-          &quot;Association&quot;) or any sponsorship or endorsement by
-          Association of any associated products or services, and should not be
-          construed as indicating any affiliation, sponsorship or other
-          connection between Association and the third-party owners of such
-          identifiers. Any such third-party identifiers associated with
-          financial data are made solely to identify the relevant financial
-          products for which price data is made available via the website. All
-          trademarks, service marks, logos, product names, trade names and
-          company names mentioned on the website are the property of their
-          respective owners and are protected by trademark and other
-          intellectual property laws. Association makes no representations or
-          warranties with respect to any such identifiers or any data or other
-          information associated therewith and reserves the right to modify or
-          remove any such displays at its discretion.
-        </p>
-      </div>
     </div>
   );
 };
@@ -179,7 +153,6 @@ const FeaturedFeeds = ({
         icon={<Star />}
         feeds={featuredFeeds}
         showPrices
-        linkFeeds
       />
     </YesterdaysPricesProvider>
     <FeaturedFeedsCard
@@ -217,7 +190,6 @@ type FeaturedFeedsCardProps<T extends ElementType> = Omit<
   "children"
 > & {
   showPrices?: boolean | undefined;
-  linkFeeds?: boolean | undefined;
   feeds: FeaturedFeed[];
 };
 
@@ -232,7 +204,6 @@ type FeaturedFeed = {
 
 const FeaturedFeedsCard = <T extends ElementType>({
   showPrices,
-  linkFeeds,
   feeds,
   ...props
 }: FeaturedFeedsCardProps<T>) => (
@@ -242,9 +213,7 @@ const FeaturedFeedsCard = <T extends ElementType>({
         <Card
           key={feed.product.price_account}
           variant="tertiary"
-          {...(linkFeeds && {
-            href: `/price-feeds/${encodeURIComponent(feed.symbol)}`,
-          })}
+          href={`/price-feeds/${encodeURIComponent(feed.symbol)}`}
         >
           <div className={styles.feedCardContents}>
             <PriceFeedTag symbol={feed.symbol} />

apps/insights/src/components/Root/footer.module.scss

@@ -17,7 +17,6 @@
     @include theme.breakpoint("sm") {
       flex-flow: row nowrap;
       align-items: center;
-      margin-bottom: theme.spacing(12);
     }
 
     .main {
@@ -44,7 +43,7 @@
 
       .divider {
         display: none;
-        background-color: theme.color("border");
+        background-color: theme.color("background", "secondary");
         width: 1px;
 
         @include theme.breakpoint("sm") {
@@ -85,11 +84,41 @@
     }
   }
 
+  .trademarkDisclaimer {
+    @include theme.max-width;
+
+    .trademarkDisclaimerContent {
+      padding-top: theme.spacing(6);
+      padding-bottom: theme.spacing(6);
+      border-top: 1px solid theme.color("background", "secondary");
+      border-bottom: 1px solid theme.color("background", "secondary");
+      color: theme.color("muted");
+
+      @include theme.breakpoint("sm") {
+        padding-top: theme.spacing(12);
+        padding-bottom: theme.spacing(12);
+      }
+
+      .trademarkDisclaimerHeader {
+        @include theme.text("sm", "medium");
+
+        margin-bottom: theme.spacing(2);
+      }
+
+      .trademarkDisclaimerBody {
+        @include theme.text("xs", "normal");
+
+        line-height: 150%;
+      }
+    }
+  }
+
   .bottomContent {
     display: flex;
     gap: theme.spacing(6);
     flex-flow: column nowrap;
     justify-content: space-between;
+    margin-top: theme.spacing(6);
 
     @include theme.max-width;
 

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

@@ -38,6 +38,34 @@ export const Footer = () => (
         ))}
       </div>
     </div>
+    <div className={styles.trademarkDisclaimer}>
+      <div className={styles.trademarkDisclaimerContent}>
+        <h3 className={styles.trademarkDisclaimerHeader}>
+          TRADEMARK DISCLAIMER
+        </h3>
+        <p className={styles.trademarkDisclaimerBody}>
+          This website may display ticker symbols, product names, and other
+          identifiers that are trademarks, service marks or trade names of third
+          parties. Such display is for informational purposes only and does not
+          constitute any claim of ownership thereof by Pyth Data Association or
+          any of its subsidiaries and other affiliates (collectively,
+          &quot;Association&quot;) or any sponsorship or endorsement by
+          Association of any associated products or services, and should not be
+          construed as indicating any affiliation, sponsorship or other
+          connection between Association and the third-party owners of such
+          identifiers. Any such third-party identifiers associated with
+          financial data are made solely to identify the relevant financial
+          products for which price data is made available via the website. All
+          trademarks, service marks, logos, product names, trade names and
+          company names mentioned on the website are the property of their
+          respective owners and are protected by trademark and other
+          intellectual property laws. Association makes no representations or
+          warranties with respect to any such identifiers or any data or other
+          information associated therewith and reserves the right to modify or
+          remove any such displays at its discretion.
+        </p>
+      </div>
+    </div>
     <div className={styles.bottomContent}>
       <small className={styles.copyright}>© 2025 Pyth Data Association</small>
       <div className={styles.legal}>