pyth-network · cprussin · May 16, 2025
diff --git a/apps/entropy-explorer/next.config.js b/apps/entropy-explorer/next.config.js
@@ -1,4 +1,8 @@
 const config = {
+  experimental: {
+    reactCompiler: true,
+  },
+
   reactStrictMode: true,
 
   pageExtensions: ["ts", "tsx", "mdx"],

@@ -45,6 +45,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "autoprefixer": "catalog:",
+    "babel-plugin-react-compiler": "catalog:",
     "eslint": "catalog:",
     "jest": "catalog:",
     "postcss": "catalog:",

diff --git a/apps/entropy-explorer/src/components/Home/chain-select.tsx b/apps/entropy-explorer/src/components/Home/chain-select.tsx
@@ -96,7 +96,7 @@ const useResolvedProps = () => {
     textValue: chainTextValue,
     buttonLabel: viemChain?.name ?? "Chain",
     ...(viemChain && {
-      icon: () => <ChainIcon id={viemChain.id} />,
+      icon: <ChainIcon id={viemChain.id} />,
     }),
   };
 };

diff --git a/apps/entropy-explorer/src/components/Home/request-drawer.tsx b/apps/entropy-explorer/src/components/Home/request-drawer.tsx
@@ -65,7 +65,7 @@ const RequestDrawerBody = ({ request }: { request: Request }) => {
         label="Details"
         fill
         className={styles.details ?? ""}
-        stickyHeader
+        stickyHeader="top"
         columns={[
           {
             id: "field",
@@ -254,7 +254,7 @@ const CallbackFailedInfo = ({ request }: { request: CallbackErrorRequest }) => {
           <Button
             size="sm"
             variant="ghost"
-            beforeIcon={Question}
+            beforeIcon={<Question />}
             rounded
             hideText
             href="https://docs.pyth.network/entropy/debug-callback-failures"

@@ -1,12 +1,13 @@
 const config = {
-  reactStrictMode: true,
-
-  pageExtensions: ["ts", "tsx", "mdx"],
-
   experimental: {
     useCache: true,
+    reactCompiler: true,
   },
 
+  reactStrictMode: true,
+
+  pageExtensions: ["ts", "tsx", "mdx"],
+
   logging: {
     fetches: {
       fullUrl: true,

@@ -12,7 +12,7 @@
     "fix:lint:eslint": "eslint --fix .",
     "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
     "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_TBkf9EyQjQF37gs4Vk0sQKJj97kE vercel env pull",
-    "start:dev": "next dev --port 3003 --turbopack",
+    "start:dev": "next dev --port 3003",
     "start:prod": "next start --port 3003",
     "test:format": "prettier --check .",
     "test:lint:eslint": "eslint . --max-warnings 0",
@@ -58,6 +58,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "autoprefixer": "catalog:",
+    "babel-plugin-react-compiler": "catalog:",
     "eslint": "catalog:",
     "jest": "catalog:",
     "postcss": "catalog:",

@@ -17,7 +17,7 @@ export const Explain = ({ size, title, children }: Props) => (
       className={styles.trigger ?? ""}
       variant="ghost"
       size={size}
-      beforeIcon={(props) => <Info weight="fill" {...props} />}
+      beforeIcon={<Info weight="fill" />}
       rounded
       hideText
       alert={{

@@ -270,7 +270,7 @@ const HeadingExtra = ({ status, ...props }: HeadingExtraProps) => {
       <OpenButton
         variant="ghost"
         hideText
-        beforeIcon={ArrowSquareOut}
+        beforeIcon={<ArrowSquareOut />}
         rounded
         className={styles.ghostOpenButton ?? ""}
         {...props}

@@ -489,7 +489,7 @@ export const PriceComponentsCardContents = <
         label={label}
         fill
         rounded
-        stickyHeader
+        stickyHeader="appHeader"
         className={styles.table ?? ""}
         columns={[
           {

@@ -135,7 +135,7 @@ const PriceFeedHeaderImpl = (props: PriceFeedHeaderImplProps) => (
         <Button
           variant="outline"
           size="sm"
-          beforeIcon={ListDashes}
+          beforeIcon={<ListDashes />}
           isPending={props.isLoading}
           {...(!props.isLoading && {
             drawer: {

@@ -105,7 +105,7 @@ export const ReferenceData = ({ feed }: Props) => {
     <Table
       label="Reference Data"
       fill
-      stickyHeader
+      stickyHeader="top"
       className={styles.referenceData ?? ""}
       columns={[
         {

@@ -66,7 +66,7 @@ export const AssetClassTable = ({ numFeedsByAssetClass }: Props) => {
   return (
     <Table
       fill
-      stickyHeader
+      stickyHeader="top"
       label="Asset Classes"
       columns={[
         {

@@ -4,7 +4,6 @@
   display: flex;
   flex-flow: column nowrap;
   overflow: hidden;
-  height: 100%;
 
   .searchBar {
     width: 100%;

@@ -110,7 +110,7 @@ export const ComingSoonList = ({ comingSoonFeeds }: Props) => {
       </div>
       <Table
         fill
-        stickyHeader
+        stickyHeader="top"
         label="Coming Soon"
         className={styles.priceFeeds ?? ""}
         emptyState={

@@ -87,3 +87,7 @@
     }
   }
 }
+
+.comingSoonCard {
+  grid-template-rows: 1fr;
+}
@@ -195,7 +195,7 @@ const FeaturedFeeds = ({
           variant="outline"
           drawer={{
             fill: true,
-            className: styles.comingSoonCard ?? "",
+            bodyClassName: styles.comingSoonCard ?? "",
             title: (
               <>
                 <span>Coming Soon</span>

@@ -319,7 +319,7 @@ const PriceFeedsCardContents = ({ id, ...props }: PriceFeedsCardContents) => (
       rounded
       fill
       label="Price Feeds"
-      stickyHeader
+      stickyHeader="appHeader"
       className={styles.table ?? ""}
       columns={[
         {

@@ -494,7 +494,7 @@ const OisPoolCardImpl = (props: OisPoolCardImplProps) => (
             size="sm"
             href="https://staking.pyth.network"
             target="_blank"
-            beforeIcon={Browsers}
+            beforeIcon={<Browsers />}
           >
             Open Staking App
           </Button>
@@ -503,7 +503,7 @@ const OisPoolCardImpl = (props: OisPoolCardImplProps) => (
             size="sm"
             href="https://docs.pyth.network/home/oracle-integrity-staking"
             target="_blank"
-            beforeIcon={BookOpenText}
+            beforeIcon={<BookOpenText />}
           >
             Documentation
           </Button>

@@ -91,7 +91,7 @@ export const Publishers = async () => {
               target="_blank"
               size="sm"
               variant="outline"
-              afterIcon={ArrowSquareOut}
+              afterIcon={<ArrowSquareOut />}
             >
               Staking App
             </Button>

@@ -270,7 +270,7 @@ const PublishersCardContents = ({
           variant="outline"
           hideLabel
           options={CLUSTER_NAMES.map((id) => ({ id }))}
-          icon={Database}
+          icon={<Database />}
           {...(props.isLoading
             ? { isPending: true, buttonLabel: "Cluster" }
             : {
@@ -323,7 +323,7 @@ const PublishersCardContents = ({
       rounded
       fill
       label="Publishers"
-      stickyHeader
+      stickyHeader="appHeader"
       className={styles.table ?? ""}
       columns={[
         {

@@ -77,7 +77,7 @@ const SearchButtonImpl = (
     <Button
       className={styles.largeScreenSearchButton ?? ""}
       variant="outline"
-      beforeIcon={MagnifyingGlass}
+      beforeIcon={<MagnifyingGlass />}
       size="sm"
       rounded
       {...props}
@@ -88,7 +88,7 @@ const SearchButtonImpl = (
       className={styles.smallScreenSearchButton ?? ""}
       hideText
       variant="ghost"
-      beforeIcon={MagnifyingGlass}
+      beforeIcon={<MagnifyingGlass />}
       size="sm"
       rounded
       {...props}
@@ -249,7 +249,7 @@ const SearchDialogContents = ({
         </div>
         <Button
           className={styles.closeButton ?? ""}
-          beforeIcon={(props) => <XCircle weight="fill" {...props} />}
+          beforeIcon={<XCircle weight="fill" />}
           slot="close"
           hideText
           rounded

@@ -0,0 +1,6 @@
+const config = {
+  presets: ["@babel/preset-typescript"],
+  plugins: ["babel-plugin-react-compiler"],
+};
+
+export default config;
@@ -18,7 +18,8 @@
     "./theme": "./dist/esm/theme.scss"
   },
   "scripts": {
-    "build:esm": "tsc --project tsconfig.build.json --outDir ./dist/esm && echo '{\"type\":\"module\"}' > dist/esm/package.json",
+    "build:declarations": "tsc --project tsconfig.build.json --outDir ./dist/esm",
+    "build:esm": "babel src --out-dir ./dist/esm --extensions .ts && babel src --out-dir ./dist/esm --extensions .tsx --out-file-extension .jsx",
     "build:scss": "copyfiles -u 1 \"src/**/*.scss\" dist/esm",
     "build:storybook": "storybook build",
     "build:svg": "copyfiles -u 1 \"src/**/*.svg\" dist/esm",
@@ -53,6 +54,9 @@
     "swr": "catalog:"
   },
   "devDependencies": {
+    "@babel/cli": "catalog:",
+    "@babel/core": "catalog:",
+    "@babel/preset-typescript": "catalog:",
     "@cprussin/eslint-config": "catalog:",
     "@cprussin/jest-config": "catalog:",
     "@cprussin/prettier-config": "catalog:",
@@ -69,6 +73,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "autoprefixer": "catalog:",
+    "babel-plugin-react-compiler": "catalog:",
     "copyfiles": "catalog:",
     "css-loader": "catalog:",
     "eslint": "catalog:",

@@ -1,3 +1,5 @@
+"use client";
+
 import { GoogleAnalytics } from "@next/third-parties/google";
 import clsx from "clsx";
 import dynamic from "next/dynamic";

@@ -1,3 +1,5 @@
+"use client";
+
 import clsx from "clsx";
 import type { ComponentProps } from "react";
 

@@ -41,7 +41,7 @@ export const Breadcrumbs = ({ label, className, items, ...props }: Props) => (
                 <Button
                   size="xs"
                   variant="outline"
-                  beforeIcon={House}
+                  beforeIcon={<House />}
                   hideText
                   href="/"
                 >

@@ -19,6 +19,10 @@
   line-height: normal;
   -webkit-tap-highlight-color: transparent;
 
+  .icon {
+    display: grid;
+  }
+
   @each $size, $values in theme.$button-sizes {
     &[data-size="#{$size}"] {
       height: theme.map-get-strict($values, "height");
@@ -27,8 +31,7 @@
       font-size: theme.map-get-strict($values, "font-size");
 
       .icon {
-        width: theme.map-get-strict($values, "icon-size");
-        height: theme.map-get-strict($values, "icon-size");
+        font-size: theme.map-get-strict($values, "icon-size");
       }
 
       .text {

@@ -1,8 +1,19 @@
-import * as Icon from "@phosphor-icons/react/dist/ssr";
+import * as icons from "@phosphor-icons/react/dist/ssr";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Button as ButtonComponent, VARIANTS, SIZES } from "./index.jsx";
 
+const iconControl = {
+  control: "select",
+  options: Object.keys(icons),
+  mapping: Object.fromEntries(
+    Object.entries(icons).map(([iconName, Icon]) => [
+      iconName,
+      <Icon key={iconName} weights={new Map()} />,
+    ]),
+  ),
+} as const;
+
 const meta = {
   component: ButtonComponent,
   argTypes: {
@@ -45,17 +56,13 @@ const meta = {
       },
     },
     beforeIcon: {
-      control: "select",
-      options: Object.keys(Icon),
-      mapping: Icon,
+      ...iconControl,
       table: {
         category: "Contents",
       },
     },
     afterIcon: {
-      control: "select",
-      options: Object.keys(Icon),
-      mapping: Icon,
+      ...iconControl,
       table: {
         category: "Contents",
       },
-Original file line number
+Diff line change
@@ Expand Up / @@ -87,3 +87,7 @@ @@
         }
       }
     }
+    .comingSoonCard {
+      grid-template-rows: 1fr;
+    }