Merge pull request #2081 from cprussin/upgrade-next-and-react

chore: upgrade nextjs & react for all webapps

apps/api-reference/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/api-reference/package.json

@@ -21,7 +21,7 @@
     "@amplitude/analytics-browser": "^2.9.0",
     "@amplitude/plugin-autocapture-browser": "^0.9.0",
     "@floating-ui/react": "^0.26.17",
-    "@headlessui/react": "^2.0.4",
+    "@headlessui/react": "^2.2.0",
     "@heroicons/react": "^2.1.4",
     "@next/third-parties": "^14.2.4",
     "@pythnetwork/client": "^2.22.0",
@@ -33,11 +33,11 @@
     "connectkit": "^1.8.2",
     "cryptocurrency-icons": "^0.18.1",
     "framer-motion": "^11.3.8",
-    "next": "^14.2.4",
+    "next": "catalog:",
     "next-themes": "^0.3.0",
     "pino": "^9.2.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "catalog:",
+    "react-dom": "catalog:",
     "react-markdown": "^9.0.1",
     "shiki": "^1.7.0",
     "viem": "^2.21.32",
@@ -46,16 +46,16 @@
   },
   "devDependencies": {
     "@axe-core/react": "^4.9.1",
-    "@cprussin/eslint-config": "^3.0.0",
-    "@cprussin/jest-config": "^1.4.1",
-    "@cprussin/prettier-config": "^2.1.1",
-    "@cprussin/tsconfig": "^3.0.1",
+    "@cprussin/eslint-config": "catalog:",
+    "@cprussin/jest-config": "catalog:",
+    "@cprussin/prettier-config": "catalog:",
+    "@cprussin/tsconfig": "catalog:",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/forms": "^0.5.7",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.6",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "autoprefixer": "^10.4.19",
     "eslint": "^9.5.0",
     "jest": "^29.7.0",

apps/api-reference/src/app/price-feeds/[chain]/[method]/page.tsx

@@ -1,19 +1,20 @@
 "use client";
 
 import { notFound } from "next/navigation";
-import type { ComponentProps } from "react";
+import { type ComponentProps, use } from "react";
 
 import * as apis from "../../../../apis";
 import { EvmApi } from "../../../../components/EvmApi";
 
 type Props = {
-  params: {
+  params: Promise<{
     chain: string;
     method: string;
-  };
+  }>;
 };
 
-const Page = ({ params }: Props) => {
+const Page = (props: Props) => {
+  const params = use(props.params);
   const chain: (typeof apis)[keyof typeof apis] | undefined = isKeyOf(
     params.chain,
     apis,

apps/api-reference/src/components/Code/use-highlighted-code.tsx

@@ -2,7 +2,7 @@
 
 import {
   type ReactNode,
-  type MutableRefObject,
+  type RefObject,
   createContext,
   useContext,
   useState,
@@ -17,7 +17,7 @@ import type { SupportedLanguage } from "./supported-language";
 import { getLogger } from "../../browser-logger";
 
 const HighlighterContext = createContext<
-  undefined | MutableRefObject<undefined | Highlighter>
+  undefined | RefObject<undefined | Highlighter>
 >(undefined);
 
 export const HighlighterProvider = ({
@@ -25,7 +25,7 @@ export const HighlighterProvider = ({
 }: {
   children: ReactNode | ReactNode[];
 }) => {
-  const highlighterRef = useRef<undefined | Highlighter>();
+  const highlighterRef = useRef<undefined | Highlighter>(undefined);
   return (
     <HighlighterContext.Provider value={highlighterRef}>
       {children}

apps/api-reference/src/components/EvmApi/parameter-input.tsx

@@ -137,11 +137,8 @@ const PriceFeedListOptions = ({ priceFeedList }: PriceFeedListOptionsProps) => {
       </div>
     ) : (
       <ComboboxOptions className="h-80 overflow-y-auto py-1" modal={false}>
-        {({ option }) => {
-          // The `option` parameter is typed as `unknown` and we have to
-          // cast to get it to be correctly typed, see
-          // https://github.com/tailwindlabs/headlessui/issues/3326
-          const { feedId, name, description } = option as PriceFeed;
+        {({ option }: { option: PriceFeed }) => {
+          const { feedId, name, description } = option;
           return (
             <ComboboxOption
               key={feedId}

apps/api-reference/src/components/Markdown/index.tsx

@@ -1,4 +1,4 @@
-import { type ComponentProps, Fragment } from "react";
+import { type ComponentProps } from "react";
 import MarkdownComponent from "react-markdown";
 
 import { MARKDOWN_COMPONENTS } from "../../markdown-components";
@@ -12,7 +12,7 @@ export const Markdown = ({ inline, ...props }: Props) =>
     <MarkdownComponent
       components={{
         ...MARKDOWN_COMPONENTS,
-        p: ({ children }) => <Fragment>{children}</Fragment>,
+        p: ({ children }) => <>{children}</>,
       }}
       {...props}
     />

apps/api-reference/src/markdown-components.tsx

@@ -31,6 +31,9 @@ export const MARKDOWN_COMPONENTS = {
         </Code>
       );
     } else {
+      // @ts-expect-error react-markdown doesn't officially support react 19
+      // yet; there's no issues here in practice but the types don't currently
+      // unify
       return <pre {...props} />;
     }
   },

apps/staking/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/staking/package.json

@@ -13,7 +13,7 @@
     "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_3TIYzlYYncZx7wRtfmzG2YUsNzKp vercel env pull",
     "start:dev": "next dev --port 3001",
     "start:prod": "next start --port 3001",
-    "test:format": "jest --selectProjects format",
+    "test:format": "prettier --check .",
     "test:lint": "jest --selectProjects lint",
     "test:types": "tsc",
     "test:unit": "jest --selectProjects unit"
@@ -34,34 +34,35 @@
     "@solana/wallet-adapter-react-ui": "^0.9.35",
     "@solana/wallet-adapter-wallets": "0.19.10",
     "@solana/web3.js": "1.92.3",
+    "@vercel/functions": "^1.5.0",
     "bcp-47": "^2.1.0",
     "clsx": "^2.1.1",
     "dnum": "^2.13.1",
-    "framer-motion": "^11.3.8",
+    "framer-motion": "catalog:",
     "ip-range-check": "^0.2.0",
-    "next": "^14.2.5",
+    "next": "catalog:",
     "pino": "^9.3.2",
     "proxycheck-ts": "^0.0.11",
-    "react": "^18.3.1",
+    "react": "catalog:",
     "react-aria": "^3.34.3",
     "react-aria-components": "^1.3.3",
-    "react-dom": "^18.3.1",
-    "recharts": "^2.12.7",
+    "react-dom": "catalog:",
+    "recharts": "^2.13.2",
     "swr": "^2.2.5",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@axe-core/react": "^4.9.1",
-    "@cprussin/eslint-config": "^3.0.0",
-    "@cprussin/jest-config": "^1.4.1",
-    "@cprussin/prettier-config": "^2.1.1",
-    "@cprussin/tsconfig": "^3.0.1",
+    "@cprussin/eslint-config": "catalog:",
+    "@cprussin/jest-config": "catalog:",
+    "@cprussin/prettier-config": "catalog:",
+    "@cprussin/tsconfig": "catalog:",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/forms": "^0.5.7",
     "@types/jest": "^29.5.12",
     "@types/node": "^22.0.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "autoprefixer": "^10.4.19",
     "eslint": "^9.8.0",
     "jest": "^29.7.0",

apps/staking/src/components/ErrorMessage/index.tsx

@@ -49,6 +49,9 @@ const UnknownError = ({ error }: { error: unknown }) => {
         </div>
       </Button>
       <m.div
+        // @ts-expect-error the framer-motion types don't currently expose props
+        // like `className` correctly for some reason, even though this works
+        // correctly...
         className="overflow-hidden pt-1 opacity-60"
         initial={{ height: 0 }}
         animate={{ height: detailsOpen ? "auto" : 0 }}

apps/staking/src/components/Faq/index.tsx

@@ -60,6 +60,9 @@ export const Faq = ({ title, questions, className, ...props }: Props) => {
                 </Button>
               </dt>
               <m.dt
+                // @ts-expect-error the framer-motion types don't currently
+                // expose props like `className` correctly for some reason, even
+                // though this works correctly...
                 className="-mt-1 flex max-w-prose flex-col gap-4 overflow-hidden font-light"
                 initial={{ height: openItem === i ? "auto" : 0 }}
                 animate={{ height: openItem === i ? "auto" : 0 }}

apps/staking/src/middleware.ts

@@ -1,3 +1,4 @@
+import { type Geo, geolocation, ipAddress } from "@vercel/functions";
 import ipRangeCheck from "ip-range-check";
 import { type NextRequest, NextResponse } from "next/server";
 import ProxyCheck from "proxycheck-ts";
@@ -24,16 +25,18 @@ const proxyCheckClient = PROXYCHECK_API_KEY
   : undefined;
 
 export const middleware = async (request: NextRequest) => {
-  if (isIpAllowlisted(request)) {
+  const ip = ipAddress(request);
+  if (isIpAllowlisted(ip)) {
     return isBlockedSegment(request)
       ? rewrite(request, "/not-found")
       : undefined;
   } else {
-    if (await isProxyBlocked(request)) {
+    const geo = geolocation(request);
+    if (await isProxyBlocked(ip)) {
       return rewrite(request, VPN_BLOCKED_PATH);
-    } else if (isGovernanceOnlyRegion(request)) {
+    } else if (isGovernanceOnlyRegion(geo)) {
       return rewrite(request, GOVERNANCE_ONLY_PATH);
-    } else if (isRegionBlocked(request)) {
+    } else if (isRegionBlocked(geo)) {
       return rewrite(request, GEO_BLOCKED_PATH);
     } else if (isBlockedSegment(request)) {
       return rewrite(request, "/not-found");
@@ -46,19 +49,19 @@ export const middleware = async (request: NextRequest) => {
 const rewrite = (request: NextRequest, path: string) =>
   NextResponse.rewrite(new URL(path, request.url));
 
-const isIpAllowlisted = ({ ip }: NextRequest) =>
+const isIpAllowlisted = (ip: string | undefined) =>
   ip !== undefined &&
   IP_ALLOWLIST.some((allowedRange) => ipRangeCheck(ip, allowedRange));
 
-const isGovernanceOnlyRegion = ({ geo }: NextRequest) =>
-  geo?.country !== undefined &&
+const isGovernanceOnlyRegion = (geo: Geo) =>
+  geo.country !== undefined &&
   GOVERNANCE_ONLY_REGIONS.includes(geo.country.toLowerCase());
 
-const isRegionBlocked = ({ geo }: NextRequest) =>
-  geo?.country !== undefined &&
+const isRegionBlocked = (geo: Geo) =>
+  geo.country !== undefined &&
   BLOCKED_REGIONS.includes(geo.country.toLowerCase());
 
-const isProxyBlocked = async ({ ip }: NextRequest) => {
+const isProxyBlocked = async (ip: string | undefined) => {
   if (proxyCheckClient === undefined || ip === undefined) {
     return false;
   } else {

governance/xc_admin/packages/xc_admin_frontend/hooks/usePyth.ts

@@ -45,7 +45,7 @@ export type PriceRawConfig = {
 }
 
 export const usePyth = (): PythHookData => {
-  const connectionRef = useRef<Connection>()
+  const connectionRef = useRef<Connection | undefined>(undefined)
   const { cluster } = useContext(ClusterContext)
   const [isLoading, setIsLoading] = useState(true)
   const [rawConfig, setRawConfig] = useState<RawConfig>({ mappingAccounts: [] })

governance/xc_admin/packages/xc_admin_frontend/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

governance/xc_admin/packages/xc_admin_frontend/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@coral-xyz/anchor": "^0.29.0",
-    "@headlessui/react": "^1.7.7",
+    "@headlessui/react": "^2.2.0",
     "@pythnetwork/client": "^2.22.0",
     "@pythnetwork/solana-utils": "workspace:^",
     "@pythnetwork/xc-admin-common": "workspace:*",
@@ -32,10 +32,10 @@
     "copy-to-clipboard": "^3.3.3",
     "gsap": "^3.11.4",
     "message_buffer": "workspace:^",
-    "next": "^14.2.3",
+    "next": "catalog:",
     "next-seo": "^5.15.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "catalog:",
+    "react-dom": "catalog:",
     "react-hot-toast": "^2.4.0",
     "sharp": "^0.33.4",
     "use-debounce": "^9.0.2",
@@ -46,8 +46,8 @@
   "devDependencies": {
     "@svgr/webpack": "^6.3.1",
     "@types/node": "^18.11.18",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "autoprefixer": "^10.4.8",
     "eslint": "8.56.0",

governance/xc_admin/packages/xc_admin_frontend/turbo.json

@@ -12,11 +12,7 @@
       "cache": false
     },
     "start:dev": {
-      "dependsOn": [
-        "pull:env",
-        "@pythnetwork/hermes-client#build",
-        "@pythnetwork/solana-utils#build"
-      ],
+      "dependsOn": ["pull:env", "^build"],
       "persistent": true,
       "cache": false
     },

packages/component-library/.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import { sans } from "@pythnetwork/fonts";
 import { withThemeByClassName } from "@storybook/addon-themes";
 import type { Preview, Decorator } from "@storybook/react";
-import { useEffect } from "react";
+import { useEffect, type ComponentType } from "react";
 
 import "./tailwind.css";
 
@@ -14,9 +14,8 @@ const preview = {
 
 export default preview;
 
-const withRootClasses =
-  (...classes: string[]): Decorator =>
-  (storyFn) => {
+const withRootClasses = (...classes: string[]): Decorator => {
+  const WithRootClasses = (Story: ComponentType) => {
     useEffect(() => {
       const root = document.querySelector("html");
       const classList = classes
@@ -31,8 +30,10 @@ const withRootClasses =
         return;
       }
     }, []);
-    return storyFn();
+    return <Story />;
   };
+  return WithRootClasses;
+};
 
 export const decorators: Decorator[] = [
   withRootClasses("font-sans antialiased", sans.variable),

packages/component-library/package.json

@@ -13,7 +13,7 @@
     "test:types": "tsc"
   },
   "peerDependencies": {
-    "react": "^18.3.1"
+    "react": "catalog:"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -21,10 +21,10 @@
     "react-aria-components": "^1.4.0"
   },
   "devDependencies": {
-    "@cprussin/eslint-config": "^3.0.0",
-    "@cprussin/jest-config": "^1.4.1",
-    "@cprussin/prettier-config": "^2.1.1",
-    "@cprussin/tsconfig": "^3.0.1",
+    "@cprussin/eslint-config": "catalog:",
+    "@cprussin/jest-config": "catalog:",
+    "@cprussin/prettier-config": "catalog:",
+    "@cprussin/tsconfig": "catalog:",
     "@phosphor-icons/react": "^2.1.7",
     "@pythnetwork/fonts": "workspace:^",
     "@storybook/addon-essentials": "^8.3.5",
@@ -35,7 +35,7 @@
     "@storybook/react": "^8.3.5",
     "@tailwindcss/forms": "^0.5.9",
     "@types/jest": "^29.5.13",
-    "@types/react": "^18.3.11",
+    "@types/react": "catalog:",
     "autoprefixer": "^10.4.20",
     "css-loader": "^7.1.2",
     "eslint": "^9.12.0",

packages/fonts/package.json

@@ -12,13 +12,13 @@
     "test:types": "tsc"
   },
   "peerDependencies": {
-    "next": "^14.2.15"
+    "next": "catalog:"
   },
   "devDependencies": {
-    "@cprussin/eslint-config": "^3.0.0",
-    "@cprussin/jest-config": "^1.4.1",
-    "@cprussin/prettier-config": "^2.1.1",
-    "@cprussin/tsconfig": "^3.0.1",
+    "@cprussin/eslint-config": "catalog:",
+    "@cprussin/jest-config": "catalog:",
+    "@cprussin/prettier-config": "catalog:",
+    "@cprussin/tsconfig": "catalog:",
     "@types/jest": "^29.5.13",
     "eslint": "^9.12.0",
     "jest": "^29.7.0",

pnpm-workspace.yaml

@@ -29,3 +29,15 @@ packages:
   - "target_chains/ton/contracts"
   - "target_chains/ton/sdk/js"
   - "contract_manager"
+
+catalog:
+  "@cprussin/eslint-config": 3.0.0
+  "@cprussin/jest-config": 1.4.1
+  "@cprussin/prettier-config": 2.1.1
+  "@cprussin/tsconfig": 3.0.1
+  "@types/react-dom": npm:types-react-dom@rc
+  "@types/react": npm:types-react@rc
+  next: 15.0.2
+  react-dom: 19.0.0-rc-603e6108-20241029
+  react: 19.0.0-rc-603e6108-20241029
+  framer-motion: 11.11.10