Merge branch 'main' of github.com:pyth-network/pyth-crosschain into t…

…b/hermes/add_twap_endpoints_to_client_sdk

apps/insights/package.json

@@ -41,7 +41,6 @@
     "nuqs": "catalog:",
     "react": "catalog:",
     "react-aria": "catalog:",
-    "react-aria-components": "catalog:",
     "react-dom": "catalog:",
     "recharts": "catalog:",
     "superjson": "catalog:",

apps/insights/src/components/PriceFeed/price-components-card.tsx

@@ -2,10 +2,14 @@
 
 import { Card } from "@pythnetwork/component-library/Card";
 import { Paginator } from "@pythnetwork/component-library/Paginator";
-import { type RowConfig, Table } from "@pythnetwork/component-library/Table";
-import { type ReactNode, Suspense, useMemo } from "react";
+import { Switch } from "@pythnetwork/component-library/Switch";
+import {
+  type RowConfig,
+  type SortDescriptor,
+  Table,
+} from "@pythnetwork/component-library/Table";
+import { type ReactNode, Suspense, useMemo, useState } from "react";
 import { useFilter, useCollator } from "react-aria";
-import type { SortDescriptor } from "react-aria-components";
 
 import { useQueryParamFilterPagination } from "../../use-query-param-filter-pagination";
 import { FormattedNumber } from "../FormattedNumber";
@@ -30,6 +34,7 @@ type PriceComponent = {
   deviationScore: number;
   stalledPenalty: number;
   stalledScore: number;
+  isTest: boolean;
 };
 
 export const PriceComponentsCard = ({
@@ -53,6 +58,16 @@ const ResolvedPriceComponentsCard = ({
 }: Props) => {
   const collator = useCollator();
   const filter = useFilter({ sensitivity: "base", usage: "search" });
+  const [includeTestComponents, setIncludeTestComponents] = useState(false);
+
+  const filteredPriceComponents = useMemo(
+    () =>
+      includeTestComponents
+        ? priceComponents
+        : priceComponents.filter((component) => !component.isTest),
+    [includeTestComponents, priceComponents],
+  );
+
   const {
     search,
     sortDescriptor,
@@ -67,7 +82,7 @@ const ResolvedPriceComponentsCard = ({
     numPages,
     mkPageLink,
   } = useQueryParamFilterPagination(
-    priceComponents,
+    filteredPriceComponents,
     (priceComponent, search) =>
       filter.contains(priceComponent.id, search) ||
       (priceComponent.publisherNameAsString !== undefined &&
@@ -178,6 +193,8 @@ const ResolvedPriceComponentsCard = ({
 
   return (
     <PriceComponentsCardContents
+      includeTestComponents={includeTestComponents}
+      setIncludeTestComponents={setIncludeTestComponents}
       numResults={numResults}
       search={search}
       sortDescriptor={sortDescriptor}
@@ -203,6 +220,8 @@ type PriceComponentsCardProps = Pick<
     | { isLoading: true }
     | {
         isLoading?: false;
+        includeTestComponents: boolean;
+        setIncludeTestComponents: (newValue: boolean) => void;
         numResults: number;
         search: string;
         sortDescriptor: SortDescriptor;
@@ -234,6 +253,18 @@ const PriceComponentsCardContents = ({
   <Card
     className={className}
     title="Price components"
+    toolbar={
+      <Switch
+        {...(props.isLoading
+          ? { isPending: true }
+          : {
+              isSelected: props.includeTestComponents,
+              onChange: props.setIncludeTestComponents,
+            })}
+      >
+        Show test components
+      </Switch>
+    }
     {...(!props.isLoading && {
       footer: (
         <Paginator

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

@@ -31,6 +31,7 @@ export const PriceComponents = async ({ children, params }: Props) => {
           id: ranking.publisher,
           publisherNameAsString: lookupPublisher(ranking.publisher)?.name,
           score: ranking.final_score,
+          isTest: ranking.cluster === "pythtest-conformance",
           name: (
             <div className={styles.publisherName}>
               <PublisherTag publisherKey={ranking.publisher} />

apps/insights/src/components/PriceFeed/price-feed-select.module.scss

@@ -86,6 +86,7 @@
           border-color 100ms linear,
           outline-color 100ms linear,
           color 100ms linear;
+        background-color: transparent;
 
         &[data-hovered] {
           border-color: theme.color("forms", "input", "hover", "border");

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

@@ -1,20 +1,22 @@
 "use client";
 
 import { DropdownCaretDown } from "@pythnetwork/component-library/DropdownCaretDown";
-import { type ReactNode, useMemo, useState } from "react";
-import { useCollator, useFilter } from "react-aria";
 import {
-  Select,
-  Button,
-  Popover,
-  Dialog,
+  Virtualizer,
+  ListLayout,
+} from "@pythnetwork/component-library/Virtualizer";
+import { Button } from "@pythnetwork/component-library/unstyled/Button";
+import { Dialog } from "@pythnetwork/component-library/unstyled/Dialog";
+import {
   ListBox,
   ListBoxItem,
-  UNSTABLE_Virtualizer as Virtualizer,
-  UNSTABLE_ListLayout as ListLayout,
-  TextField,
-  Input,
-} from "react-aria-components";
+} from "@pythnetwork/component-library/unstyled/ListBox";
+import { Popover } from "@pythnetwork/component-library/unstyled/Popover";
+import { SearchField } from "@pythnetwork/component-library/unstyled/SearchField";
+import { Select } from "@pythnetwork/component-library/unstyled/Select";
+import { Input } from "@pythnetwork/component-library/unstyled/TextField";
+import { type ReactNode, useMemo, useState } from "react";
+import { useCollator, useFilter } from "react-aria";
 
 import styles from "./price-feed-select.module.scss";
 
@@ -62,7 +64,7 @@ export const PriceFeedSelect = ({ children, feeds }: Props) => {
       </Button>
       <Popover placement="bottom start" className={styles.popover ?? ""}>
         <Dialog aria-label="Price Feeds" className={styles.dialog ?? ""}>
-          <TextField
+          <SearchField
             value={search}
             onChange={setSearch}
             className={styles.searchField ?? ""}
@@ -74,7 +76,7 @@ export const PriceFeedSelect = ({ children, feeds }: Props) => {
               className={styles.searchInput ?? ""}
               placeholder="Symbol, asset class, or key"
             />
-          </TextField>
+          </SearchField>
           <Virtualizer layout={new ListLayout()}>
             <ListBox
               items={filteredFeeds}

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

@@ -1,10 +1,10 @@
 "use client";
 
-import { Tabs as TabsComponent } from "@pythnetwork/component-library/Tabs";
+import { TabList } from "@pythnetwork/component-library/TabList";
 import {
-  UnstyledTabPanel,
-  UnstyledTabs,
-} from "@pythnetwork/component-library/UnstyledTabs";
+  TabPanel as UnstyledTabPanel,
+  Tabs as UnstyledTabs,
+} from "@pythnetwork/component-library/unstyled/Tabs";
 import { useSelectedLayoutSegment, usePathname } from "next/navigation";
 import { useMemo, type ComponentProps } from "react";
 
@@ -18,13 +18,10 @@ export const TabRoot = (
   return <UnstyledTabs selectedKey={tabId} {...props} />;
 };
 
-type TabsProps = Omit<
-  ComponentProps<typeof TabsComponent>,
-  "pathname" | "items"
-> & {
+type TabsProps = Omit<ComponentProps<typeof TabList>, "pathname" | "items"> & {
   slug: string;
   items: (Omit<
-    ComponentProps<typeof TabsComponent>["items"],
+    ComponentProps<typeof TabList>["items"],
     "href" | "id"
   >[number] & {
     segment: string | undefined;
@@ -42,7 +39,7 @@ export const Tabs = ({ slug, items, ...props }: TabsProps) => {
     }));
   }, [items, slug]);
 
-  return <TabsComponent pathname={pathname} items={mappedItems} {...props} />;
+  return <TabList pathname={pathname} items={mappedItems} {...props} />;
 };
 
 export const TabPanel = ({

apps/insights/src/components/PriceFeeds/price-feeds-card.tsx

@@ -7,11 +7,14 @@ import { Card } from "@pythnetwork/component-library/Card";
 import { Paginator } from "@pythnetwork/component-library/Paginator";
 import { SearchInput } from "@pythnetwork/component-library/SearchInput";
 import { Select } from "@pythnetwork/component-library/Select";
-import { type RowConfig, Table } from "@pythnetwork/component-library/Table";
+import {
+  type RowConfig,
+  type SortDescriptor,
+  Table,
+} from "@pythnetwork/component-library/Table";
 import { useQueryState, parseAsString } from "nuqs";
 import { type ReactNode, Suspense, useCallback, useMemo } from "react";
 import { useFilter, useCollator } from "react-aria";
-import type { SortDescriptor } from "react-aria-components";
 
 import { useQueryParamFilterPagination } from "../../use-query-param-filter-pagination";
 import { SKELETON_WIDTH } from "../LivePrices";

apps/insights/src/components/Publishers/publishers-card.tsx

@@ -5,10 +5,13 @@ import { Badge } from "@pythnetwork/component-library/Badge";
 import { Card } from "@pythnetwork/component-library/Card";
 import { Paginator } from "@pythnetwork/component-library/Paginator";
 import { SearchInput } from "@pythnetwork/component-library/SearchInput";
-import { type RowConfig, Table } from "@pythnetwork/component-library/Table";
+import {
+  type RowConfig,
+  type SortDescriptor,
+  Table,
+} from "@pythnetwork/component-library/Table";
 import { type ReactNode, Suspense, useMemo } from "react";
 import { useFilter, useCollator } from "react-aria";
-import type { SortDescriptor } from "react-aria-components";
 
 import { useQueryParamFilterPagination } from "../../use-query-param-filter-pagination";
 import { NoResults } from "../NoResults";

apps/insights/src/components/Publishers/semicircle-meter.tsx

@@ -1,11 +1,11 @@
 "use client";
 
+import { Meter } from "@pythnetwork/component-library/unstyled/Meter";
 import dynamic from "next/dynamic";
 import { type ComponentProps, Suspense } from "react";
-import { Meter } from "react-aria-components";
 import { PolarAngleAxis, RadialBar } from "recharts";
 
-export { Label } from "react-aria-components";
+export { Label } from "@pythnetwork/component-library/unstyled/Label";
 
 const RadialBarChart = dynamic(
   () => import("recharts").then((recharts) => recharts.RadialBarChart),

apps/insights/src/components/Root/nav-link.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { Link } from "@pythnetwork/component-library/unstyled/Link";
 import { useSelectedLayoutSegment } from "next/navigation";
 import type { ReactNode } from "react";
-import { Link } from "react-aria-components";
 
 type Props = {
   href: string;

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

@@ -2,20 +2,20 @@
 
 import { MainNavTabs as MainNavTabsComponent } from "@pythnetwork/component-library/MainNavTabs";
 import {
-  UnstyledTabPanel,
-  UnstyledTabs,
-} from "@pythnetwork/component-library/UnstyledTabs";
+  TabPanel as UnstyledTabPanel,
+  Tabs,
+} from "@pythnetwork/component-library/unstyled/Tabs";
 import { useSelectedLayoutSegment, usePathname } from "next/navigation";
 import { type ComponentProps } from "react";
 
 import { type VariantArg, LayoutTransition } from "../LayoutTransition";
 
 export const TabRoot = (
-  props: Omit<ComponentProps<typeof UnstyledTabs>, "selectedKey">,
+  props: Omit<ComponentProps<typeof Tabs>, "selectedKey">,
 ) => {
   const tabId = useSelectedLayoutSegment() ?? "";
 
-  return <UnstyledTabs selectedKey={tabId} {...props} />;
+  return <Tabs selectedKey={tabId} {...props} />;
 };
 
 export const MainNavTabs = (

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

@@ -1,8 +1,8 @@
 "use client";
 
 import { Skeleton } from "@pythnetwork/component-library/Skeleton";
+import { Meter } from "@pythnetwork/component-library/unstyled/Meter";
 import type { CSSProperties } from "react";
-import { Meter } from "react-aria-components";
 
 import styles from "./index.module.scss";
 

apps/insights/src/use-query-param-filter-pagination.ts

@@ -1,6 +1,7 @@
 "use client";
 
 import { useLogger } from "@pythnetwork/app-logger";
+import type { SortDescriptor } from "@pythnetwork/component-library/unstyled/Table";
 import { usePathname } from "next/navigation";
 import {
   parseAsString,
@@ -10,7 +11,6 @@ import {
   createSerializer,
 } from "nuqs";
 import { useCallback, useMemo } from "react";
-import type { SortDescriptor } from "react-aria-components";
 
 export const useQueryParamFilterPagination = <T>(
   items: T[],

packages/component-library/package.json

@@ -22,6 +22,7 @@
     "test:types": "tsc"
   },
   "peerDependencies": {
+    "next": "catalog:",
     "react": "catalog:"
   },
   "dependencies": {
@@ -51,10 +52,12 @@
     "css-loader": "catalog:",
     "eslint": "catalog:",
     "jest": "catalog:",
+    "next": "catalog:",
     "postcss": "catalog:",
     "postcss-loader": "catalog:",
     "prettier": "catalog:",
     "react": "catalog:",
+    "react-dom": "catalog:",
     "sass": "catalog:",
     "sass-loader": "catalog:",
     "storybook": "catalog:",

packages/component-library/src/Breadcrumbs/index.tsx

@@ -9,9 +9,9 @@ import styles from "./index.module.scss";
 import { Button } from "../Button/index.js";
 import { Link } from "../Link/index.js";
 import {
-  UnstyledBreadcrumbs,
-  UnstyledBreadcrumb,
-} from "../UnstyledBreadcrumbs/index.js";
+  Breadcrumbs as UnstyledBreadcrumbs,
+  Breadcrumb,
+} from "../unstyled/Breadcrumbs/index.js";
 
 type OwnProps = {
   label: string;
@@ -37,7 +37,7 @@ export const Breadcrumbs = ({ label, className, items, ...props }: Props) => (
       {...props}
     >
       {(item) => (
-        <UnstyledBreadcrumb className={styles.breadcrumb ?? ""}>
+        <Breadcrumb className={styles.breadcrumb ?? ""}>
           {"href" in item ? (
             <>
               {item.href === "/" ? (
@@ -65,7 +65,7 @@ export const Breadcrumbs = ({ label, className, items, ...props }: Props) => (
           ) : (
             <div className={styles.current}>{item.label}</div>
           )}
-        </UnstyledBreadcrumb>
+        </Breadcrumb>
       )}
     </UnstyledBreadcrumbs>
   </nav>

packages/component-library/src/Button/index.tsx

@@ -7,8 +7,8 @@ import type {
 } from "react";
 
 import styles from "./index.module.scss";
-import { UnstyledButton } from "../UnstyledButton/index.js";
-import { UnstyledLink } from "../UnstyledLink/index.js";
+import { Button as UnstyledButton } from "../unstyled/Button/index.js";
+import { Link } from "../unstyled/Link/index.js";
 
 export const VARIANTS = [
   "primary",
@@ -38,10 +38,10 @@ export type Props<T extends ElementType> = Omit<
   OwnProps;
 
 export const Button = (
-  props: Props<typeof UnstyledButton> | Props<typeof UnstyledLink>,
+  props: Props<typeof UnstyledButton> | Props<typeof Link>,
 ) =>
   "href" in props ? (
-    <UnstyledLink {...buttonProps(props)} />
+    <Link {...buttonProps(props)} />
   ) : (
     <UnstyledButton {...buttonProps(props)} />
   );