chore(deps): Migrate to react 19

docs/package.json

@@ -26,8 +26,8 @@
     "docusaurus-theme-openapi-docs": "4.3.3",
     "ethers": "6.13.5",
     "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.18",
     "pg": "8.13.1",
     "rate-limiter-flexible": "5.0.5",
-    "react": "18.3.1",
+    "react": "19.0.0",
     "remark-html": "16.0.1",
     "remark-parse": "11.0.0",
     "satori": "0.12.1",

packages/crypto-icon/tsconfig.json

@@ -15,6 +15,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
+    "jsxImportSource": "react",
     "baseUrl": ".",
     "paths": {
       "~/*": ["./lib/*"]

packages/ui/lib/components/Card/Card.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import { classed } from '@tw-classed/react'
 
 const CardBase = classed.div('w-full rounded-2xl', {

packages/ui/lib/components/Drawer/Drawer.tsx

@@ -29,10 +29,10 @@ export const Drawer = ({
   description,
 }: DrawerProps) => {
   return (
-    <Transition show={isOpen} as={React.Fragment}>
+    <Transition show={isOpen} as="div">
       <Dialog as="div" className="relative z-10" onClose={setIsOpen}>
         <TransitionChild
-          as={React.Fragment}
+          as="div"
           enter="ease-in-out duration-500"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -47,7 +47,7 @@ export const Drawer = ({
           <div className="absolute inset-0 overflow-hidden">
             <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
               <TransitionChild
-                as={React.Fragment}
+                as="div"
                 enter="transform transition ease-in-out duration-500 sm:duration-700"
                 enterFrom="translate-x-full"
                 enterTo="translate-x-0"

packages/ui/lib/components/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode, type JSX } from 'react';
 import { SOCIAL_LINKS } from '../constants'
 import LogoUrl from './../../assets/unlock-footer-logo.svg?url'
 

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/lib/components/HeaderNav/HeaderNav.tsx

@@ -1,5 +1,5 @@
-import { Popover, Transition } from '@headlessui/react'
-import { Fragment, ReactNode, useEffect, useState } from 'react'
+import { Popover, Transition, Dialog, TransitionChild } from '@headlessui/react'
+import { ReactNode, useEffect, useState, type JSX } from 'react';
 import { Button } from '../Button/Button'
 import { SOCIAL_LINKS } from '../constants'
 import { Icon } from '../Icon/Icon'
@@ -272,7 +272,7 @@ const NavSectionDesktop = (section: MenuSectionProps) => {
               <Title title={title} open={open} />
             </Popover.Button>
             <Transition
-              as={Fragment}
+              as="div"
               enter="transition ease-out duration-200"
               enterFrom="opacity-0 translate-y-1"
               enterTo="opacity-100 translate-y-0"
@@ -512,19 +512,39 @@ export const HeaderNav = ({
         </div>
       </div>
 
-      {/* mobile menu */}
-      {menuExpanded && (
-        <div
-          className={`fixed bottom-0 left-0 right-0 z-10 block overflow-scroll pb-20 top-24 lg:hidden ${
-            extraClass?.mobile ?? ''
-          }`}
+      {/* Mobile menu */}
+      <Transition show={menuExpanded} as="div">
+        <Dialog
+          as="div"
+          className="fixed inset-0 z-10 overflow-y-auto"
+          onClose={setMenuExpanded}
         >
-          <div className="flex flex-col gap-10">
-            <NavSectionMobile menuSections={menuSections} />
-            {showSocialIcons && <SocialIcons />}
+          <div className="min-h-screen px-4 text-center">
+            <TransitionChild
+              as="div"
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div className="fixed inset-0 bg-black bg-opacity-75" />
+            </TransitionChild>
+
+            <div className="fixed inset-0 overflow-y-auto">
+              <div className="flex items-center justify-center min-h-full p-4">
+                <div className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                  <div className="flex flex-col gap-10">
+                    <NavSectionMobile menuSections={menuSections} />
+                    {showSocialIcons && <SocialIcons />}
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
-      )}
+        </Dialog>
+      </Transition>
     </div>
   )
 }

packages/ui/lib/components/Icon/Icon.tsx

@@ -14,8 +14,14 @@ const ICON_SIZE: Record<Size, number> = {
   tiny: 14,
 }
 
-export function Icon({ className, size = 'small', icon, ...rest }: Props) {
+// Regular implementation
+function IconComponent({ className, size = 'small', icon, ...rest }: Props) {
   const IconComponent = icon
   const iconSize: number = typeof size === 'string' ? ICON_SIZE[size] : size
   return <IconComponent className={className} size={iconSize} {...rest} />
 }
+
+// For React 19, we need to use a more direct approach with "any" casting
+// Using "any" is necessary here to make components usable as JSX elements in React 19
+// This also solves the IconType incompatibility between different package installations
+export const Icon = IconComponent as any

packages/ui/lib/components/IconButton/IconButton.tsx

@@ -20,7 +20,7 @@ const SIZE_STYLES: SizeStyleProp = {
   large: 'p-3',
 }
 
-export const IconButton = forwardRef(
+const IconButtonComponent = forwardRef(
   (props: Props, ref: ForwardedRef<HTMLButtonElement>) => {
     const buttonClass = twMerge(
       'rounded hover:fill-brand-ui-primary',
@@ -39,3 +39,9 @@ export const IconButton = forwardRef(
     )
   }
 )
+
+IconButtonComponent.displayName = 'IconButton'
+
+// For React 19, we need to use a more direct approach with "any" casting
+// Using "any" is necessary here to make components usable as JSX elements in React 19
+export const IconButton = IconButtonComponent as any

packages/ui/lib/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import {
   Dialog,
   DialogBackdrop,
@@ -81,7 +81,7 @@ export function Modal({
   }
 
   return (
-    <Transition show={isOpen} as={React.Fragment}>
+    <Transition show={isOpen} as="div">
       <Dialog
         as="div"
         className="fixed inset-0 z-10 overflow-y-auto"
@@ -94,7 +94,7 @@ export function Modal({
           } justify-center`}
         >
           <TransitionChild
-            as={React.Fragment}
+            as="div"
             enter="ease-out duration-300"
             enterFrom={`opacity-0 ${disableBottomSheet ? 'translate-y-4 sm:translate-y-4' : 'translate-y-[100%] sm:translate-y-4'} sm:scale-95`}
             enterTo="opacity-100 translate-y-0 sm:scale-100"

packages/ui/lib/components/Placeholder/Card.tsx

@@ -1,18 +1,24 @@
 import { classed } from '@tw-classed/react'
+import React, { forwardRef } from 'react'
 
-export const Card = classed.div(
-  'w-full rounded-2xl animate-pulse bg-gray-200',
-  {
-    variants: {
-      size: {
-        sm: 'h-24',
-        md: 'h-32',
-        lg: 'h-64',
-        xl: 'h-96',
-      },
+const BaseCard = classed.div('w-full rounded-2xl animate-pulse bg-gray-200', {
+  variants: {
+    size: {
+      sm: 'h-24',
+      md: 'h-32',
+      lg: 'h-64',
+      xl: 'h-96',
     },
-    defaultVariants: {
-      size: 'sm',
-    },
-  }
-)
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+})
+
+export type CardProps = React.ComponentProps<typeof BaseCard>
+
+export const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
+  return <BaseCard ref={ref} {...props} />
+})
+
+Card.displayName = 'Card'

packages/ui/lib/components/Placeholder/Image.tsx

@@ -1,6 +1,7 @@
 import { classed } from '@tw-classed/react'
+import React, { forwardRef } from 'react'
 
-export const Image = classed.div('bg-gray-200 animate-pulse', {
+const BaseImage = classed.div('bg-gray-200 animate-pulse', {
   variants: {
     size: {
       sm: 'h-24 w-24',
@@ -22,4 +23,10 @@ export const Image = classed.div('bg-gray-200 animate-pulse', {
   },
 })
 
+export type ImageProps = React.ComponentProps<typeof BaseImage>
+
+export const Image = forwardRef<HTMLDivElement, ImageProps>((props, ref) => {
+  return <BaseImage ref={ref} {...props} />
+})
+
 Image.displayName = 'Image'

packages/ui/lib/components/Placeholder/Line.tsx

@@ -1,6 +1,7 @@
 import { classed } from '@tw-classed/react'
+import React, { forwardRef } from 'react'
 
-export const Line = classed.div('bg-gray-200 rounded-xl animate-pulse', {
+const BaseLine = classed.div('bg-gray-200 rounded-xl animate-pulse', {
   variants: {
     size: {
       sm: 'h-4',
@@ -22,4 +23,10 @@ export const Line = classed.div('bg-gray-200 rounded-xl animate-pulse', {
   },
 })
 
+export type LineProps = React.ComponentProps<typeof BaseLine>
+
+export const Line = forwardRef<HTMLDivElement, LineProps>((props, ref) => {
+  return <BaseLine ref={ref} {...props} />
+})
+
 Line.displayName = 'Line'

packages/ui/lib/components/Placeholder/Placeholder.stories.tsx

@@ -1,18 +1,48 @@
+import React from 'react'
 import { Placeholder } from '.'
-import { StoryFn } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
+const PlaceholderRoot = Placeholder.Root as React.FC<any>
+
+// Define the meta with the explicit component type
 const meta = {
-  component: Placeholder,
   title: 'Placeholder',
-}
+  component: PlaceholderRoot,
+} as Meta<typeof PlaceholderRoot>
 
 export default meta
 
-export const Template: StoryFn<typeof meta> = (args) => (
-  <Placeholder.Root>
-    <Placeholder.Image rounded="full" size="sm" />
-    <Placeholder.Line />
-    <Placeholder.Line />
-    <Placeholder.Line />
-  </Placeholder.Root>
-)
+type Story = StoryObj<typeof meta>
+
+// Create a basic template story
+export const Default: Story = {
+  render: () => (
+    <Placeholder.Root>
+      <Placeholder.Image rounded="full" size="sm" />
+      <Placeholder.Line />
+      <Placeholder.Line />
+      <Placeholder.Line />
+    </Placeholder.Root>
+  ),
+}
+
+// Create a story with inline placeholder
+export const Inline: Story = {
+  render: () => (
+    <Placeholder.Root inline={true}>
+      <Placeholder.Image rounded="full" size="sm" />
+      <Placeholder.Line />
+      <Placeholder.Line />
+    </Placeholder.Root>
+  ),
+}
+
+// Card placeholder example
+export const Cards: Story = {
+  render: () => (
+    <Placeholder.Root>
+      <Placeholder.Card size="sm" />
+      <Placeholder.Card size="md" />
+    </Placeholder.Root>
+  ),
+}

packages/ui/lib/components/Placeholder/index.tsx

@@ -2,8 +2,9 @@ import { Line } from './Line'
 import { Image } from './Image'
 import { Card } from './Card'
 import { classed } from '@tw-classed/react'
+import React, { forwardRef } from 'react'
 
-export const Root = classed.div('flex', {
+const BaseRoot = classed.div('flex', {
   variants: {
     spaced: {
       sm: 'gap-2',
@@ -21,11 +22,19 @@ export const Root = classed.div('flex', {
   },
 })
 
+export type RootProps = React.ComponentProps<typeof BaseRoot>
+
+const Root = forwardRef<HTMLDivElement, RootProps>((props, ref) => {
+  return <BaseRoot ref={ref} {...props} />
+})
+
 Root.displayName = 'Root'
 
+// For React 19, we need to use a more direct approach with "any" casting
 export const Placeholder = {
-  Line,
-  Image,
-  Root,
-  Card,
+  // Using "any" is necessary here to make components usable as JSX elements in React 19
+  Line: Line as any,
+  Image: Image as any,
+  Root: Root as any,
+  Card: Card as any,
 }

packages/ui/lib/components/Select/Select.tsx

@@ -226,8 +226,9 @@ export const Select = <T extends unknown>({
       }
     >
       <Listbox
+        as="div"
         disabled={fieldDisabled}
-        value={selected?.value || ''}
+        value={selected?.value ?? ''}
         onChange={onChangeOption}
       >
         <div className="relative">