Optimize payload size for price feeds pages

Author: cprussin

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,

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

@@ -1,49 +1,93 @@
+"use client";
+
 import { Skeleton } from "@pythnetwork/component-library/Skeleton";
 import clsx from "clsx";
 import { type ComponentProps, type ReactNode, Fragment } from "react";
 
 import styles from "./index.module.scss";
+import { usePriceFeeds } from "../../hooks/use-price-feeds";
+import { omitKeys } from "../../omit-keys";
 
-type OwnProps =
-  | { isLoading: true; compact?: boolean | undefined }
-  | ({
+type OwnProps = { compact?: boolean | undefined } & (
+  | { isLoading: true }
+  | {
       isLoading?: false;
       symbol: string;
-      icon: ReactNode;
-    } & (
-      | { compact: true }
-      | {
-          compact?: false;
-          description: string;
-        }
-    ));
+    }
+);
 
 type Props = Omit<ComponentProps<"div">, keyof OwnProps> & OwnProps;
 
-export const PriceFeedTag = ({ className, ...props }: Props) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { compact, ...propsWithoutCompact } = props;
+export const PriceFeedTag = (props: Props) => {
+  return props.isLoading ? (
+    <PriceFeedTagImpl {...props} />
+  ) : (
+    <LoadedPriceFeedTag {...props} />
+  );
+};
+
+const LoadedPriceFeedTag = ({
+  symbol,
+  ...props
+}: Props & { isLoading?: false }) => {
+  const feed = usePriceFeeds().get(symbol);
+  if (feed) {
+    const [firstPart, ...rest] = feed.displaySymbol.split("/");
+    return (
+      <PriceFeedTagImpl
+        description={feed.description}
+        feedName={[firstPart ?? "", ...rest]}
+        icon={feed.icon}
+        {...props}
+      />
+    );
+  } else {
+    throw new NoSuchFeedError(symbol);
+  }
+};
+
+type OwnImplProps = { compact?: boolean | undefined } & (
+  | { isLoading: true }
+  | {
+      isLoading?: false;
+      feedName: [string, ...string[]];
+      icon: ReactNode;
+      description: string;
+    }
+);
+
+type ImplProps = Omit<ComponentProps<"div">, keyof OwnImplProps> & OwnImplProps;
+
+const PriceFeedTagImpl = ({ className, compact, ...props }: ImplProps) => {
   return (
     <div
       className={clsx(styles.priceFeedTag, className)}
-      data-compact={props.compact ? "" : undefined}
+      data-compact={compact ? "" : undefined}
       data-loading={props.isLoading ? "" : undefined}
-      {...propsWithoutCompact}
+      {...omitKeys(props, ["feedName", "icon", "description"])}
     >
       {props.isLoading ? (
         <Skeleton fill className={styles.icon} />
       ) : (
         <div className={styles.icon}>{props.icon}</div>
       )}
       <div className={styles.nameAndDescription}>
-        {props.isLoading ? (
-          <div className={styles.name}>
+        <div className={styles.name}>
+          {props.isLoading ? (
             <Skeleton width={30} />
-          </div>
-        ) : (
-          <FeedName className={styles.name} symbol={props.symbol} />
-        )}
-        {!props.compact && (
+          ) : (
+            <>
+              <span className={styles.firstPart}>{props.feedName[0]}</span>
+              {props.feedName.slice(1).map((part, i) => (
+                <Fragment key={i}>
+                  <span className={styles.divider}>/</span>
+                  <span className={styles.part}>{part}</span>
+                </Fragment>
+              ))}
+            </>
+          )}
+        </div>
+        {!compact && (
           <div className={styles.description}>
             {props.isLoading ? (
               <Skeleton width={50} />
@@ -57,22 +101,9 @@ export const PriceFeedTag = ({ className, ...props }: Props) => {
   );
 };
 
-type OwnFeedNameProps = { symbol: string };
-type FeedNameProps = Omit<ComponentProps<"div">, keyof OwnFeedNameProps> &
-  OwnFeedNameProps;
-
-const FeedName = ({ symbol, className, ...props }: FeedNameProps) => {
-  const [firstPart, ...parts] = symbol.split("/");
-
-  return (
-    <div className={clsx(styles.priceFeedName, className)} {...props}>
-      <span className={styles.firstPart}>{firstPart}</span>
-      {parts.map((part, i) => (
-        <Fragment key={i}>
-          <span className={styles.divider}>/</span>
-          <span className={styles.part}>{part}</span>
-        </Fragment>
-      ))}
-    </div>
-  );
-};
+class NoSuchFeedError extends Error {
+  constructor(symbol: string) {
+    super(`No feed exists named ${symbol}`);
+    this.name = "NoSuchFeedError";
+  }
+}