chore(deps): Migrate to react 19

docs/package.json

@@ -26,8 +26,8 @@
     "docusaurus-theme-openapi-docs": "4.2.0",
     "ethers": "6.13.4",
     "prism-react-renderer": "2.4.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-icons": "5.4.0"
   },
   "scripts": {

locksmith/package.json

@@ -82,7 +82,7 @@
     "pdfmake": "0.2.15",
     "pg": "8.13.1",
     "rate-limiter-flexible": "5.0.4",
-    "react": "18.3.1",
+    "react": "19.0.0",
     "remark-html": "16.0.1",
     "remark-parse": "11.0.0",
     "satori": "0.12.0",

packages/crypto-icon/package.json

@@ -21,8 +21,8 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "repository": {
     "type": "git",
@@ -36,11 +36,11 @@
     "@storybook/addon-links": "8.4.6",
     "@storybook/react": "8.4.6",
     "@storybook/react-vite": "8.4.6",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
     "@vitejs/plugin-react": "4.3.4",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "storybook": "8.4.6",
     "tsup": "8.3.5",
     "tsx": "4.19.2",

packages/ui/lib/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode, ForwardedRef } from 'react'
+import type { ReactNode } from 'react'
 import type { SizeStyleProp } from '../../types'
 import { twMerge } from 'tailwind-merge'
 import { forwardRef } from 'react'
@@ -45,8 +45,8 @@ const VARIANTS_STYLES: Record<Variant, string> = {
     'bg-transparent text-black transition ease-in-out duration-300 text-brand-ui-primary disabled:text-brand-gray disabled:hover:text-brand-gray disabled:hover:bg-opacity-75 font-medium p-0',
 }
 
-export const Button = forwardRef(
-  (props: Props, ref: ForwardedRef<HTMLButtonElement>) => {
+export const Button = forwardRef<HTMLButtonElement, Props>(
+  function Button(props, ref) {
     let {
       children,
       size = 'medium',
@@ -84,14 +84,16 @@ export const Button = forwardRef(
           <Icon
             icon={SpinnerIcon}
             size={size}
-            className="animate-spin motion-reduce:invisible "
+            className="animate-spin motion-reduce:invisible"
           />
         ) : (
           iconLeft
         )}
-        <span> {children}</span>
+        {children && <span>{children}</span>}
         {!loading && iconRight}
       </Box>
     )
   }
 )
+
+Button.displayName = 'Button'

packages/ui/lib/components/Form/Combobox.tsx

@@ -354,7 +354,9 @@ export function Combobox({
                           {displayedOptions.map((option, index) => (
                             <li
                               key={`${option.value}-${index}`}
-                              ref={(el) => (optionsRef.current[index] = el)}
+                              ref={(el) => {
+                                optionsRef.current[index] = el
+                              }}
                               className={clsx(
                                 'flex cursor-pointer mx-2 rounded-sm items-center gap-2 py-2 px-3 text-base min-w-0',
                                 'hover:bg-ui-main-50',
@@ -402,10 +404,10 @@ export function Combobox({
                             query === '' &&
                             moreOptions.length > 0 && (
                               <li
-                                ref={(el) =>
-                                  (optionsRef.current[displayedOptions.length] =
-                                    el)
-                                }
+                                ref={(el) => {
+                                  optionsRef.current[displayedOptions.length] =
+                                    el
+                                }}
                                 className={clsx(
                                   'flex cursor-pointer mx-2 rounded-sm items-center justify-center gap-2 py-3 px-3 text-base font-semibold min-w-0',
                                   'hover:bg-ui-main-50 text-brand-ui-primary',

packages/ui/package.json

@@ -11,16 +11,22 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
+      "require": "./dist/index.umd.js",
+      "default": "./dist/index.es.js"
     },
     "./dist/style.css": {
       "import": "./dist/style.css",
-      "require": "./dist/style.css"
+      "require": "./dist/style.css",
+      "default": "./dist/style.css"
     },
     "./dist/unlock-tailwind-preset": {
-      "require": "./dist/unlock-tailwind-preset.js"
+      "require": "./dist/unlock-tailwind-preset.js",
+      "default": "./dist/unlock-tailwind-preset.js"
     }
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "version": "0.4.8",
   "scripts": {
     "preview": "yarn build && vite --config ./vite.config.ts src",
@@ -47,9 +53,14 @@
     "tailwindcss": "3.4.15"
   },
   "peerDependencies": {
-    "@headlessui/react": "2.2.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "@headlessui/react": "^2.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@headlessui/react": {
+      "optional": true
+    }
   },
   "repository": {
     "type": "git",
@@ -65,14 +76,14 @@
     "@storybook/addon-links": "8.4.6",
     "@storybook/react": "8.4.6",
     "@storybook/react-vite": "8.4.6",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
     "@unlock-protocol/unlock-js": "workspace:./packages/unlock-js",
     "@vitejs/plugin-react": "4.3.4",
     "autoprefixer": "10.4.20",
     "postcss": "8.4.49",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "storybook": "8.4.6",
     "tailwindcss": "3.4.15",
     "tsup": "8.3.5",

packages/ui/src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { Button } from './..'
+import { Button } from '../lib/components/Button/Button'
 import '../dist/style.css'
 
 function App() {

packages/ui/vite.config.ts

@@ -22,28 +22,67 @@ export default defineConfig({
       entry: path.resolve(__dirname, 'lib/index.tsx'),
       name: '@unlock-protocol/ui',
       fileName: (format) => `index.${format}.js`,
+      formats: isCDN ? ['umd'] : ['es'],
     },
     rollupOptions: {
-      external: isCDN ? Object.keys(peerDependencies) : external,
+      external: [
+        ...(isCDN ? Object.keys(peerDependencies) : external),
+        'react/jsx-runtime',
+      ],
       shimMissingExports: true,
       output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'jsxRuntime',
+        },
         assetFileNames: (assetInfo) => {
           if (assetInfo.name?.endsWith('.css')) {
             return 'style.css'
           }
-          // Return a default name if assetInfo.name is undefined
           return assetInfo.name ?? 'asset'
         },
+        exports: 'named',
+        ...(isCDN
+          ? {}
+          : {
+              preserveModules: true,
+              preserveModulesRoot: 'lib',
+              format: 'es',
+            }),
       },
     },
     sourcemap: true,
+    commonjsOptions: {
+      include: [/node_modules/],
+      requireReturnsDefault: 'auto',
+    },
   },
   plugins: [
     tsconfigPaths(),
-    react(),
+    react({
+      jsxRuntime: 'automatic',
+      jsxImportSource: 'react',
+      babel: {
+        plugins: [
+          ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }],
+        ],
+      },
+    }),
     svgr(),
     nodePolyfills({
       protocolImports: true,
     }),
   ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './lib'),
+    },
+  },
+  optimizeDeps: {
+    include: ['react', 'react-dom'],
+    esbuildOptions: {
+      target: 'es2020',
+    },
+  },
 })

unlock-app/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "peerDependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "dependencies": {
     "@airstack/airstack-react": "0.6.4",
@@ -77,7 +77,7 @@
     "@types/file-saver": "2.0.7",
     "@types/postmate": "1.5.4",
     "@types/qrcode.react": "1.0.5",
-    "@types/react": "18.3.12",
+    "@types/react": "19.0.2",
     "@types/react-google-recaptcha": "2.1.9",
     "@types/react-gtm-module": "2.0.4",
     "@types/remove-markdown": "0.3.4",
@@ -86,7 +86,7 @@
     "autoprefixer": "10.4.20",
     "jsdom": "25.0.1",
     "postcss": "8.4.49",
-    "react-test-renderer": "18.3.1",
+    "react-test-renderer": "19.0.0",
     "tailwindcss": "3.4.15",
     "vitest": "2.1.8",
     "vitest-fetch-mock": "0.4.2",

unlock-protocol-com/package.json

@@ -10,7 +10,7 @@
     "@tanstack/react-query": "5.62.11",
     "@testing-library/react": "16.1.0",
     "@types/node": "22.10.1",
-    "@types/react": "18.3.12",
+    "@types/react": "19.0.2",
     "@unlock-protocol/crypto-icon": "workspace:./packages/crypto-icon",
     "@unlock-protocol/tsconfig": "workspace:./packages/tsconfig",
     "@unlock-protocol/ui": "workspace:./packages/ui",
@@ -29,12 +29,12 @@
     "path-match": "1.2.4",
     "prettier": "3.4.1",
     "raw-loader": "4.0.2",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-ga": "3.3.1",
     "react-gtm-module": "2.0.11",
     "react-showdown": "2.3.1",
-    "react-test-renderer": "18.3.1",
+    "react-test-renderer": "19.0.0",
     "rss": "1.2.2",
     "showdown-highlight": "3.1.0",
     "tailwind-merge": "2.6.0",

unlock-protocol-com/src/components/pages/State/sections/chart.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react'
+import { useRef, useEffect } from 'react'
 import * as Plot from '@observablehq/plot'
 
 export function HistoricalChart({
@@ -7,7 +7,7 @@ export function HistoricalChart({
   supportedNetworks,
   viewFilter,
 }) {
-  const ref = useRef<HTMLInputElement>()
+  const ref = useRef<HTMLInputElement>(null)
   useEffect(() => {
     const barChart = Plot.plot({
       width: 1200,