relayprotocol · ted-palmer · Sep 2, 2025 · Aug 26, 2025 · Sep 2, 2025 · Sep 2, 2025
diff --git a/.changeset/nice-numbers-invent.md b/.changeset/nice-numbers-invent.md
@@ -0,0 +1,7 @@
+---
+'@relayprotocol/relay-design-system': major
+'@relayprotocol/relay-kit-hooks': major
+'@relayprotocol/relay-kit-ui': major
+---
+
+Upgrade to React 19
diff --git a/demo/package.json b/demo/package.json
@@ -39,17 +39,17 @@
     "next": "latest",
     "next-remote-watch": "^1.0.0",
     "next-themes": "^0.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "usehooks-ts": "^3.1.0",
     "viem": ">=2.26.0",
     "wagmi": "^2.15.6"
   },
   "devDependencies": {
     "@dynamic-labs/types": "4.10.4",
     "@types/node": "^12.12.21",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "typescript": "5.4.5"
   }
 }
diff --git a/demo/pages/ui/chain.tsx b/demo/pages/ui/chain.tsx
@@ -46,8 +46,9 @@ const ChainWidgetPage: NextPage = () => {
   const { setWalletFilter } = useWalletFilter()
   const _switchWallet = useSwitchWallet()
   const userWallets = useUserWallets()
-  const wallets = useRef<Wallet<any>[]>()
-  const switchWallet = useRef<(walletId: string) => Promise<void>>()
+  const wallets = useRef<Wallet<any>[]>([])
+  const switchWallet =
+    useRef<(walletId: string) => Promise<void> | undefined>(undefined)
   const [wallet, setWallet] = useState<AdaptedWallet | undefined>()
   const [linkWalletPromise, setLinkWalletPromise] = useState<
     | {

diff --git a/demo/pages/ui/onramp.tsx b/demo/pages/ui/onramp.tsx
@@ -37,7 +37,7 @@ const OnrampPage: NextPage = () => {
   const { setShowAuthFlow } = useDynamicContext()
   const { setShowLinkNewWalletModal } = useDynamicModals()
   const userWallets = useUserWallets()
-  const wallets = useRef<Wallet<any>[]>()
+  const wallets = useRef<Wallet<any>[]>([])
   const linkedWallets = useMemo(() => {
     const _wallets = userWallets.reduce((linkedWallets, wallet) => {
       linkedWallets.push(convertToLinkedWallet(wallet))

diff --git a/demo/pages/ui/swap.tsx b/demo/pages/ui/swap.tsx
@@ -69,8 +69,9 @@ const SwapWidgetPage: NextPage = () => {
   const _switchWallet = useSwitchWallet()
   const { setShowLinkNewWalletModal } = useDynamicModals()
   const userWallets = useUserWallets()
-  const wallets = useRef<Wallet<any>[]>()
-  const switchWallet = useRef<(walletId: string) => Promise<void>>()
+  const wallets = useRef<Wallet<any>[]>([])
+  const switchWallet =
+    useRef<(walletId: string) => Promise<void> | undefined>(undefined)
   const [wallet, setWallet] = useState<AdaptedWallet | undefined>()
   const [linkWalletPromise, setLinkWalletPromise] = useState<
     | {

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@reservoir0x/relay-design-system",
+  "name": "@relayprotocol/relay-design-system",
   "description": "This package is auto-generated by Panda CSS",
   "version": "0.0.2",
   "type": "module",

diff --git a/packages/hooks/package.json b/packages/hooks/package.json
@@ -43,15 +43,15 @@
     "typescript-eslint": "^7.13.1"
   },
   "peerDependencies": {
-    "react": "^18.0",
-    "react-dom": "^18.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "viem": ">=2.26.0",
     "@tanstack/react-query": ">=5.0.0"
   },
   "dependencies": {
     "@relayprotocol/relay-sdk": "workspace:*",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "axios": "^1.7.2"
   },
   "keywords": [

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -61,8 +61,8 @@
   "peerDependencies": {
     "@moonpay/moonpay-react": "^1.8.3",
     "@tanstack/react-query": ">=5.0.0",
-    "react": "^18.0",
-    "react-dom": "^18.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "viem": ">=2.26.0",
     "wagmi": "^2.15.6"
   },
@@ -88,8 +88,8 @@
     "@relayprotocol/relay-design-system": "workspace:^",
     "@relayprotocol/relay-kit-hooks": "workspace:*",
     "@relayprotocol/relay-sdk": "workspace:*",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "axios": "^1.7.2",
     "dayjs": "^1.11.11",
     "framer-motion": "^11.2.10",

diff --git a/packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx b/packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx
@@ -277,7 +277,7 @@ type ChainFilterRowProps = {
   onClick?: (e: React.MouseEvent) => void
   tag?: string
   value: string
-  activeChainRef?: React.RefObject<HTMLButtonElement>
+  activeChainRef?: React.RefObject<HTMLButtonElement | null>
 }
 
 const ChainFilterRow: FC<ChainFilterRowProps> = ({

diff --git a/packages/ui/src/components/primitives/Dropdown.tsx b/packages/ui/src/components/primitives/Dropdown.tsx
@@ -86,7 +86,7 @@ type Props = {
 }
 
 const Dropdown = forwardRef<
-  ElementRef<typeof DropdownMenuPrimitive.Root>,
+  HTMLDivElement,
   ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> & Props
 >(({ children, trigger, contentProps, ...props }, forwardedRef) => {
   const [open, setOpen] = useState(false)

diff --git a/packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx b/packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx
@@ -79,7 +79,7 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
   onSetPrimaryWallet,
   onAnalyticEvent: _onAnalyticEvent,
   onSuccess
-}): JSX.Element => {
+}) => {
   const onAnalyticEvent = useCallback(
     (eventName: string, data?: any) => {
       try {

diff --git a/packages/ui/src/components/widgets/SwapWidget/index.tsx b/packages/ui/src/components/widgets/SwapWidget/index.tsx
@@ -124,7 +124,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
   onSwapSuccess,
   onSwapValidating,
   onSwapError
-}): JSX.Element => {
+}) => {
   const onAnalyticEvent = useCallback(
     (eventName: string, data?: any) => {
       try {

diff --git a/packages/ui/src/hooks/usePreviousValueChange.ts b/packages/ui/src/hooks/usePreviousValueChange.ts
@@ -5,7 +5,7 @@ export default <T>(
   enabled: boolean,
   onChange: (value: T) => void
 ) => {
-  const ref = useRef<T>()
+  const ref = useRef<T | undefined>(undefined)
 
   useEffect(() => {
     if (enabled && ref.current !== value) {

diff --git a/packages/ui/src/providers/RelayClientProvider.tsx b/packages/ui/src/providers/RelayClientProvider.tsx
@@ -14,7 +14,7 @@ export const RelayClientContext = createContext<RelayClient | null>(null)
 export const RelayClientProvider: FC<RelayClientProviderProps> = function ({
   children,
   options
-}: RelayClientProviderProps): JSX.Element {
+}: RelayClientProviderProps) {
   const [clientContext] = useState<RelayClient | null>(
     createClient({ ...options, uiVersion: UI_VERSION })
   )

diff --git a/packages/ui/src/providers/RelayKitProvider.tsx b/packages/ui/src/providers/RelayKitProvider.tsx
@@ -168,7 +168,7 @@ export const RelayKitProvider: FC<RelayKitProviderProps> = function ({
   children,
   options,
   theme
-}: RelayKitProviderProps): JSX.Element {
+}: RelayKitProviderProps) {
   const providerOptions = useMemo(
     () => ({
       appName: options.appName,