Optimize payload size for price feeds pages

Author: cprussin

apps/insights/src/app/layout.ts

@@ -1,4 +1,5 @@
 export { Root as default } from "../components/Root";
 export { metadata, viewport } from "../metadata";
 
+export const dynamic = 'error';
 export const revalidate = 3600;

apps/insights/src/app/price-feeds/[slug]/layout.ts

@@ -6,4 +6,5 @@ export const metadata: Metadata = {
   title: "Price Feeds",
 };
 
+export const dynamic = 'error';
 export const revalidate = 3600;

apps/insights/src/app/price-feeds/[slug]/page.ts

@@ -1,3 +1,4 @@
 export { ChartPage as default } from "../../../components/PriceFeed/chart-page";
 
+export const dynamic = 'error';
 export const revalidate = 3600;

apps/insights/src/app/price-feeds/[slug]/publishers/page.tsx

@@ -1,3 +1,4 @@
 export { Publishers as default } from "../../../../components/PriceFeed/publishers";
 
+export const dynamic = 'error';
 export const revalidate = 3600;

apps/insights/src/app/price-feeds/page.ts

@@ -6,4 +6,5 @@ export const metadata: Metadata = {
   title: "Price Feeds",
 };
 
+export const dynamic = 'error';
 export const revalidate = 3600;

apps/insights/src/app/publishers/[key]/layout.ts

@@ -6,4 +6,5 @@ export const metadata: Metadata = {
   title: "Publishers",
 };
 
+export const dynamic = 'error';
 export const revalidate = 3600;

apps/insights/src/app/publishers/[key]/page.ts

@@ -1,3 +1,4 @@
 export { Performance as default } from "../../../components/Publisher/performance";
 
+export const dynamic = 'error';
 export const revalidate = 3600;

apps/insights/src/app/publishers/[key]/price-feeds/page.ts

@@ -1,3 +1,4 @@
 export { PriceFeeds as default } from "../../../../components/Publisher/price-feeds";
 
+export const dynamic = 'error';
 export const revalidate = 3600;

apps/insights/src/app/publishers/page.ts

@@ -6,4 +6,5 @@ export const metadata: Metadata = {
   title: "Publishers",
 };
 
+export const dynamic = 'error';
 export const revalidate = 3600;

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

@@ -0,0 +1,29 @@
+import { Badge } from "@pythnetwork/component-library/Badge";
+import type { ComponentProps } from "react";
+
+import { usePriceFeeds } from "../../hooks/use-price-feeds";
+
+type Props = ComponentProps<typeof Badge> & {
+  symbol: string;
+};
+
+export const AssetClassTag = ({ symbol }: Props) => {
+  const feed = usePriceFeeds().get(symbol);
+
+  if (feed) {
+    return (
+      <Badge variant="neutral" style="outline" size="xs">
+        {feed.assetClass.toUpperCase()}
+      </Badge>
+    );
+  } else {
+    throw new NoSuchFeedError(symbol);
+  }
+};
+
+class NoSuchFeedError extends Error {
+  constructor(symbol: string) {
+    super(`No feed exists named ${symbol}`);
+    this.name = "NoSuchFeedError";
+  }
+}

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

@@ -13,7 +13,6 @@ import type { ReactNode } from "react";
 import styles from "./layout.module.scss";
 import { PriceFeedSelect } from "./price-feed-select";
 import { ReferenceData } from "./reference-data";
-import { toHex } from "../../hex";
 import { Cluster, getFeeds } from "../../services/pyth";
 import { FeedKey } from "../FeedKey";
 import {
@@ -26,7 +25,6 @@ import {
   YesterdaysPricesProvider,
   PriceFeedChangePercent,
 } from "../PriceFeedChangePercent";
-import { PriceFeedIcon } from "../PriceFeedIcon";
 import { PriceFeedTag } from "../PriceFeedTag";
 import { TabPanel, TabRoot, Tabs } from "../Tabs";
 
@@ -38,12 +36,12 @@ type Props = {
 };
 
 export const PriceFeedLayout = async ({ children, params }: Props) => {
-  const [{ slug }, fees] = await Promise.all([
+  const [{ slug }, feeds] = await Promise.all([
     params,
     getFeeds(Cluster.Pythnet),
   ]);
   const symbol = decodeURIComponent(slug);
-  const feed = fees.find((item) => item.symbol === symbol);
+  const feed = feeds.find((item) => item.symbol === symbol);
 
   return feed ? (
     <div className={styles.priceFeedLayout}>
@@ -64,22 +62,8 @@ export const PriceFeedLayout = async ({ children, params }: Props) => {
           </div>
         </div>
         <div className={styles.headerRow}>
-          <PriceFeedSelect
-            feeds={fees
-              .filter((feed) => feed.symbol !== symbol)
-              .map((feed) => ({
-                id: feed.symbol,
-                key: toHex(feed.product.price_account),
-                displaySymbol: feed.product.display_symbol,
-                icon: <PriceFeedIcon symbol={feed.symbol} />,
-                assetClass: feed.product.asset_type,
-              }))}
-          >
-            <PriceFeedTag
-              symbol={feed.product.display_symbol}
-              description={feed.product.description}
-              icon={<PriceFeedIcon symbol={feed.symbol} />}
-            />
+          <PriceFeedSelect>
+            <PriceFeedTag symbol={feed.symbol} />
           </PriceFeedSelect>
           <div className={styles.rightGroup}>
             <FeedKey

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { Badge } from "@pythnetwork/component-library/Badge";
 import { DropdownCaretDown } from "@pythnetwork/component-library/DropdownCaretDown";
 import {
   Virtualizer,
@@ -20,39 +19,43 @@ import { type ReactNode, useMemo, useState } from "react";
 import { useCollator, useFilter } from "react-aria";
 
 import styles from "./price-feed-select.module.scss";
+import { usePriceFeeds } from "../../hooks/use-price-feeds";
+import { AssetClassTag } from "../AssetClassTag";
 import { PriceFeedTag } from "../PriceFeedTag";
 
 type Props = {
   children: ReactNode;
-  feeds: {
-    id: string;
-    key: string;
-    displaySymbol: string;
-    icon: ReactNode;
-    assetClass: string;
-  }[];
 };
 
-export const PriceFeedSelect = ({ children, feeds }: Props) => {
+export const PriceFeedSelect = ({ children }: Props) => {
+  const feeds = usePriceFeeds();
   const collator = useCollator();
   const filter = useFilter({ sensitivity: "base", usage: "search" });
   const [search, setSearch] = useState("");
-  const sortedFeeds = useMemo(
-    () =>
-      feeds.sort((a, b) => collator.compare(a.displaySymbol, b.displaySymbol)),
-    [feeds, collator],
-  );
   const filteredFeeds = useMemo(
     () =>
       search === ""
-        ? sortedFeeds
-        : sortedFeeds.filter(
-            (feed) =>
-              filter.contains(feed.displaySymbol, search) ||
-              filter.contains(feed.assetClass, search) ||
-              filter.contains(feed.key, search),
-          ),
-    [sortedFeeds, search, filter],
+        ? feeds.entries()
+        : feeds
+            .entries()
+            .filter(
+              ([, { displaySymbol, assetClass, key }]) =>
+                filter.contains(displaySymbol, search) ||
+                filter.contains(assetClass, search) ||
+                filter.contains(key, search),
+            ),
+    [feeds, search, filter],
+  );
+  const sortedFeeds = useMemo(
+    () =>
+      // eslint-disable-next-line unicorn/no-useless-spread
+      [
+        ...filteredFeeds.map(([symbol, { displaySymbol }]) => ({
+          id: symbol,
+          displaySymbol,
+        })),
+      ].toSorted((a, b) => collator.compare(a.displaySymbol, b.displaySymbol)),
+    [filteredFeeds, collator],
   );
   return (
     <Select
@@ -80,22 +83,20 @@ export const PriceFeedSelect = ({ children, feeds }: Props) => {
           </SearchField>
           <Virtualizer layout={new ListLayout()}>
             <ListBox
-              items={filteredFeeds}
+              items={sortedFeeds}
               className={styles.listbox ?? ""}
               // eslint-disable-next-line jsx-a11y/no-autofocus
               autoFocus={false}
             >
-              {({ assetClass, id, displaySymbol, icon }) => (
+              {({ id, displaySymbol }) => (
                 <ListBoxItem
                   textValue={displaySymbol}
                   className={styles.priceFeed ?? ""}
                   href={`/price-feeds/${encodeURIComponent(id)}`}
-                  data-is-first={id === filteredFeeds[0]?.id ? "" : undefined}
+                  data-is-first={id === sortedFeeds[0]?.id ? "" : undefined}
                 >
-                  <PriceFeedTag compact symbol={displaySymbol} icon={icon} />
-                  <Badge variant="neutral" style="outline" size="xs">
-                    {assetClass.toUpperCase()}
-                  </Badge>
+                  <PriceFeedTag compact symbol={id} />
+                  <AssetClassTag symbol={id} />
                 </ListBoxItem>
               )}
             </ListBox>

apps/insights/src/components/PriceFeed/reference-data.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { Badge } from "@pythnetwork/component-library/Badge";
 import { Table } from "@pythnetwork/component-library/Table";
 import { useMemo } from "react";
 import { useCollator } from "react-aria";
 
 import styles from "./reference-data.module.scss";
+import { AssetClassTag } from "../AssetClassTag";
 import { LiveValue } from "../LivePrices";
 
 type Props = {
@@ -42,11 +42,7 @@ export const ReferenceData = ({ feed }: Props) => {
     () =>
       [
         ...Object.entries({
-          "Asset Type": (
-            <Badge variant="neutral" style="outline" size="xs">
-              {feed.assetClass.toUpperCase()}
-            </Badge>
-          ),
+          "Asset Type": <AssetClassTag symbol={feed.symbol} />,
           Base: feed.base,
           Description: feed.description,
           Symbol: feed.symbol,