Merge pull request #2488 from pyth-network/cprussin/ui-24-update-dependencies

chore: update all app node dependencies

Author: cprussin

.envrc

@@ -1,7 +1 @@
-#!/usr/bin/env bash
-# the shebang is ignored, but nice for editors
-
-if ! has nix_direnv_version || ! nix_direnv_version 3.0.5; then
-    source_url "https://raw.githubusercontent.com/nix-community/nix-direnv/3.0.5/direnvrc" "sha256-RuwIS+QKFj/T9M2TFXScjBsLR6V3A17YVoEW/Q6AZ1w="
-fi
 use flake

apps/api-reference/jest.config.js

@@ -1 +1 @@
-export { nextjs as default } from "@cprussin/jest-config";
+export { nextjs as default } from "@cprussin/jest-config/next";

apps/api-reference/package.json

@@ -18,51 +18,51 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@amplitude/analytics-browser": "^2.9.0",
-    "@amplitude/plugin-autocapture-browser": "^0.9.0",
-    "@floating-ui/react": "^0.26.17",
-    "@headlessui/react": "^2.2.0",
-    "@heroicons/react": "^2.1.4",
-    "@next/third-parties": "^14.2.4",
+    "@amplitude/analytics-browser": "catalog:",
+    "@amplitude/plugin-autocapture-browser": "catalog:",
+    "@floating-ui/react": "catalog:",
+    "@headlessui/react": "catalog:",
+    "@heroicons/react": "catalog:",
+    "@next/third-parties": "catalog:",
     "@pythnetwork/client": "catalog:",
-    "@pythnetwork/pyth-sdk-solidity": "workspace:^",
-    "@solana/web3.js": "^1.95.1",
-    "@tanstack/react-query": "^5.45.1",
-    "bs58": "^5.0.0",
-    "clsx": "^2.1.1",
-    "connectkit": "^1.8.2",
-    "cryptocurrency-icons": "^0.18.1",
-    "framer-motion": "^11.3.8",
+    "@pythnetwork/pyth-sdk-solidity": "workspace:*",
+    "@solana/web3.js": "catalog:",
+    "@tanstack/react-query": "catalog:",
+    "bs58": "catalog:",
+    "clsx": "catalog:",
+    "connectkit": "catalog:",
+    "cryptocurrency-icons": "catalog:",
+    "framer-motion": "catalog:",
     "next": "catalog:",
-    "next-themes": "^0.3.0",
-    "pino": "^9.2.0",
+    "next-themes": "catalog:",
+    "pino": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
-    "react-markdown": "^9.0.1",
-    "shiki": "^1.7.0",
-    "viem": "^2.22.23",
-    "wagmi": "^2.10.4",
-    "zod": "^3.23.8"
+    "react-markdown": "catalog:",
+    "shiki": "catalog:",
+    "viem": "catalog:",
+    "wagmi": "catalog:",
+    "zod": "catalog:"
   },
   "devDependencies": {
-    "@axe-core/react": "^4.9.1",
+    "@axe-core/react": "catalog:",
     "@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",
+    "@svgr/webpack": "catalog:",
+    "@tailwindcss/forms": "catalog:",
+    "@types/jest": "catalog:",
+    "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^9.5.0",
-    "jest": "^29.7.0",
-    "postcss": "^8.4.38",
+    "autoprefixer": "catalog:",
+    "eslint": "catalog:",
+    "jest": "catalog:",
+    "postcss": "catalog:",
     "prettier": "catalog:",
-    "tailwindcss": "^3.4.4",
-    "typescript": "^5.5.2",
-    "vercel": "^34.2.7"
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:",
+    "vercel": "catalog:"
   }
 }

apps/api-reference/src/apis/evm/common.ts

@@ -1,12 +1,7 @@
 import { z } from "zod";
 
-import {
-  type ReadApi,
-  type WriteApi,
-  type NetworkInfo,
-  EvmApiType,
-  Language,
-} from "../../components/EvmApi";
+import type { ReadApi, WriteApi, NetworkInfo } from "../../components/EvmApi";
+import { EvmApiType, Language } from "../../components/EvmApi";
 import { singletonArray, safeFetch } from "../../zod-utils";
 
 export const readApi = <ParameterName extends string>(

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

@@ -1,7 +1,8 @@
 "use client";
 
 import { notFound } from "next/navigation";
-import { type ComponentProps, use } from "react";
+import type { ComponentProps } from "react";
+import { use } from "react";
 
 import * as apis from "../../../../apis";
 import { EvmApi } from "../../../../components/EvmApi";

apps/api-reference/src/browser-logger.ts

@@ -1,4 +1,5 @@
-import pino, { type Logger } from "pino";
+import type { Logger } from "pino";
+import pino from "pino";
 
 import { IS_PRODUCTION_BUILD } from "./isomorphic-config";
 

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

@@ -1,6 +1,7 @@
 import { Disclosure, DisclosurePanel } from "@headlessui/react";
 import { LazyMotion, AnimatePresence, m, domAnimation } from "framer-motion";
-import { type ComponentProps, type Ref, forwardRef } from "react";
+import type { ComponentProps, Ref } from "react";
+import { forwardRef } from "react";
 
 export { DisclosureButton as AccordionButton } from "@headlessui/react";
 

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

@@ -1,14 +1,13 @@
 "use client";
 
 import clsx from "clsx";
-import {
-  type ComponentProps,
-  type ElementType,
-  type MouseEvent,
-  type CSSProperties,
-  useState,
-  useCallback,
+import type {
+  ComponentProps,
+  ElementType,
+  MouseEvent,
+  CSSProperties,
 } from "react";
+import { useState, useCallback } from "react";
 
 const DEFAULT_GRADIENT_SIZE = "30rem";
 

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

@@ -1,8 +1,8 @@
 import { Transition } from "@headlessui/react";
 import { ClipboardDocumentIcon, CheckIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
-import { useMemo, useCallback, type HTMLAttributes } from "react";
-import { useEffect, useState } from "react";
+import type { HTMLAttributes } from "react";
+import { useMemo, useCallback, useEffect, useState } from "react";
 import type { OffsetOrPosition } from "shiki";
 
 import style from "./style.module.css";

apps/api-reference/src/components/Code/shiki.ts

@@ -1,22 +1,19 @@
-import {
-  type HighlighterCore,
-  type DecorationItem,
-  getHighlighterCore as shikiGetHighlighterCore,
-} from "shiki/core";
+import type { HighlighterCore, DecorationItem } from "shiki/core";
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
 import javascript from "shiki/langs/javascript.mjs";
 import json from "shiki/langs/json.mjs";
 import solidity from "shiki/langs/solidity.mjs";
 import darkPlus from "shiki/themes/dark-plus.mjs";
 import lightPlus from "shiki/themes/light-plus.mjs";
-import loadWasm from "shiki/wasm";
 
 import type { SupportedLanguage } from "./supported-language";
 
 export type Highlighter = {
   highlight: (
     lang: SupportedLanguage | undefined,
     code: string,
-    options?: HighlightOptions | undefined,
+    options?: HighlightOptions,
   ) => string;
 };
 
@@ -25,17 +22,17 @@ export type HighlightOptions = {
 };
 
 export const getHighlighter = async (): Promise<Highlighter> => {
-  const highlighterCore = await shikiGetHighlighterCore({
+  const highlighterCore = await createHighlighterCore({
     langs: [javascript, solidity, json],
     themes: [darkPlus, lightPlus],
-    loadWasm,
+    engine: createOnigurumaEngine(() => import("shiki/wasm")),
   });
 
   return {
     highlight: (
       lang: SupportedLanguage | undefined,
       code: string,
-      options?: HighlightOptions | undefined,
+      options?: HighlightOptions,
     ) => highlight(highlighterCore, lang, code, options),
   };
 };
@@ -44,7 +41,7 @@ const highlight = (
   highlighter: HighlighterCore,
   lang: SupportedLanguage | undefined,
   code: string,
-  options?: HighlightOptions | undefined,
+  options?: HighlightOptions,
 ) =>
   highlighter.codeToHtml(code, {
     lang: lang ?? "text",

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

@@ -1,8 +1,7 @@
 "use client";
 
+import type { ReactNode, RefObject } from "react";
 import {
-  type ReactNode,
-  type RefObject,
   createContext,
   useContext,
   useState,
@@ -48,7 +47,7 @@ const useHighlighter = () => {
 export const useHighlightedCode = (
   language: SupportedLanguage | undefined,
   code: string,
-  dimRange?: readonly [OffsetOrPosition, OffsetOrPosition] | undefined,
+  dimRange?: readonly [OffsetOrPosition, OffsetOrPosition],
 ) => {
   const highlighter = useHighlighter();
   const decorations = useMemo(

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

@@ -13,26 +13,26 @@ import { ArrowPathIcon } from "@heroicons/react/24/outline";
 import PythAbi from "@pythnetwork/pyth-sdk-solidity/abis/IPyth.json";
 import PythErrorsAbi from "@pythnetwork/pyth-sdk-solidity/abis/PythErrors.json";
 import { ChainIcon } from "connectkit";
-import {
-  type Dispatch,
-  type SetStateAction,
-  type ComponentProps,
-  type ElementType,
-  type SVGAttributes,
-  useState,
-  useCallback,
-  useMemo,
+import type {
+  Dispatch,
+  SetStateAction,
+  ComponentProps,
+  ElementType,
+  SVGAttributes,
 } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { useSwitchChain, useChainId, useConfig } from "wagmi";
 import { readContract } from "wagmi/actions";
 
 import type { Parameter } from "./parameter";
 import { ParameterInput } from "./parameter-input";
-import { type EvmApiType, RunButton } from "./run-button";
+import type { EvmApiType } from "./run-button";
+import { RunButton } from "./run-button";
 import { getLogger } from "../../browser-logger";
 import { getContractAddress } from "../../evm-networks";
 import { useIsMounted } from "../../use-is-mounted";
-import { type SupportedLanguage, Code } from "../Code";
+import type { SupportedLanguage } from "../Code";
+import { Code } from "../Code";
 import { ErrorTooltip } from "../ErrorTooltip";
 import { InlineLink } from "../InlineLink";
 import { Markdown } from "../Markdown";

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

@@ -8,25 +8,18 @@ import { ArrowPathIcon } from "@heroicons/react/24/outline";
 import base58 from "bs58";
 import clsx from "clsx";
 import Image from "next/image";
-import {
-  type ChangeEvent,
-  type Dispatch,
-  type SetStateAction,
-  useState,
-  useCallback,
-  useMemo,
-  useEffect,
-} from "react";
+import type { ChangeEvent, Dispatch, SetStateAction } from "react";
+import { useState, useCallback, useMemo, useEffect } from "react";
 
+import type { Parameter } from "./parameter";
 import {
-  type Parameter,
   PLACEHOLDERS,
   isValid,
   getValidationError,
   ParameterType,
 } from "./parameter";
+import type { PriceFeed } from "../../use-price-feed-list";
 import {
-  type PriceFeed,
   PriceFeedListContextType,
   usePriceFeedList,
 } from "../../use-price-feed-list";

apps/api-reference/src/components/EvmApi/parameter.ts

@@ -13,9 +13,9 @@ export enum ParameterType {
   IntArray,
 }
 
-export const TRANSFORMS: {
-  [paramType in ParameterType]?: (value: string) => unknown;
-} = {
+export const TRANSFORMS: Partial<
+  Record<ParameterType, (value: string) => unknown>
+> = {
   [ParameterType.PriceFeedIdArray]: (value) => [value],
   [ParameterType.HexArray]: (value) => [value],
   [ParameterType.IntArray]: (value) => [value],

apps/api-reference/src/components/EvmApi/run-button.tsx

@@ -9,7 +9,8 @@ import { ContractFunctionExecutionError } from "viem";
 import { useAccount, useConfig } from "wagmi";
 import { readContract, simulateContract, writeContract } from "wagmi/actions";
 
-import { type Parameter, TRANSFORMS } from "./parameter";
+import type { Parameter } from "./parameter";
+import { TRANSFORMS } from "./parameter";
 import { getContractAddress } from "../../evm-networks";
 import { useIsMounted } from "../../use-is-mounted";
 import { Button } from "../Button";

apps/api-reference/src/components/Header/nav-link.tsx

@@ -3,7 +3,8 @@
 import clsx from "clsx";
 import Link from "next/link";
 import { useSelectedLayoutSegment } from "next/navigation";
-import { type ComponentProps, useMemo } from "react";
+import type { ComponentProps } from "react";
+import { useMemo } from "react";
 
 const baseClasses = "font-semibold text-sm py-2 px-3";
 

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

@@ -1,12 +1,13 @@
+import type { InputProps } from "@headlessui/react";
 import {
   Field,
   Label,
   Description,
   Input as HeadlessUiInput,
-  type InputProps,
 } from "@headlessui/react";
 import clsx from "clsx";
-import { type Ref, type ReactNode, forwardRef } from "react";
+import type { Ref, ReactNode } from "react";
+import { forwardRef } from "react";
 
 import { ErrorTooltip } from "../ErrorTooltip";
 

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

@@ -1,4 +1,4 @@
-import { type ComponentProps } from "react";
+import type { ComponentProps } from "react";
 import MarkdownComponent from "react-markdown";
 
 import { MARKDOWN_COMPONENTS } from "../../markdown-components";

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

@@ -8,7 +8,8 @@ import {
   CloseButton,
 } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
-import { type ReactNode, Fragment } from "react";
+import type { ReactNode } from "react";
+import { Fragment } from "react";
 
 import { Button } from "../Button";
 

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

@@ -11,13 +11,8 @@ import {
   ChevronRightIcon,
 } from "@heroicons/react/24/outline";
 import clsx from "clsx";
-import {
-  type ReactNode,
-  type ChangeEvent,
-  useState,
-  useCallback,
-  useMemo,
-} from "react";
+import type { ReactNode, ChangeEvent } from "react";
+import { useState, useCallback, useMemo } from "react";
 
 import { Accordion, AccordionButton, AccordionPanel } from "../Accordion";