feat: upgrade react@19 and next@15

apps/cow-fi/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.

apps/cowswap-frontend/src/common/hooks/useCancelOrder/useSendOnChainCancellation.test.tsx

@@ -4,7 +4,7 @@ import { COW, NATIVE_CURRENCIES } from '@cowprotocol/common-const'
 import { useWalletInfo } from '@cowprotocol/wallet'
 import { BigNumber } from '@ethersproject/bignumber'
 
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 import { useTransactionAdder } from 'legacy/state/enhancedTransactions/hooks'
 import { Order } from 'legacy/state/orders/actions'

apps/cowswap-frontend/src/common/hooks/useSafeMemo.test.ts

@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react'
 import { SupportedChainId as ChainId } from '@cowprotocol/cow-sdk'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 import { useSafeMemo } from './useSafeMemo'
 
@@ -38,7 +38,7 @@ describe('useSafeMemo() to avoid redundant actuation of hooks', () => {
     let memoCalls = 0
     let updatesCount = 3
 
-    const { result } = renderHook(() => {
+    renderHook(() => {
       const [state, setState] = useState(createStaticObject())
 
       const memoized = useSafeMemo(() => {
@@ -55,14 +55,13 @@ describe('useSafeMemo() to avoid redundant actuation of hooks', () => {
     })
 
     expect(memoCalls).toBe(1)
-    expect(result.all.length).toBe(4)
   })
 
   it('Should execute memo on each setState() call using regular useMemo()', () => {
     let memoCalls = 0
     let updatesCount = 3
 
-    const { result } = renderHook(() => {
+    renderHook(() => {
       const [state, setState] = useState(createStaticObject())
       const { inputCurrency, outputCurrency, inputAmount, outputAmount, address } = state
 
@@ -80,6 +79,5 @@ describe('useSafeMemo() to avoid redundant actuation of hooks', () => {
     })
 
     expect(memoCalls).toBe(4)
-    expect(result.all.length).toBe(4)
   })
 })

apps/cowswap-frontend/src/modules/limitOrders/hooks/useHandleOrderPlacement.test.ts

@@ -1,6 +1,6 @@
 import { useIsBundlingSupported } from '@cowprotocol/wallet'
 
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 import { PriceImpact } from 'legacy/hooks/usePriceImpact'
 
@@ -99,7 +99,7 @@ describe('useHandleOrderPlacement', () => {
 
         updateLimitOrdersState({ recipient })
       },
-      { wrapper: WithModalProvider }
+      { wrapper: WithModalProvider },
     )
 
     // Assert
@@ -111,7 +111,7 @@ describe('useHandleOrderPlacement', () => {
     // Act
     const { result } = renderHook(
       () => useHandleOrderPlacement(tradeContextMock, priceImpactMock, defaultLimitOrdersSettings, tradeConfirmActions),
-      { wrapper: WithModalProvider }
+      { wrapper: WithModalProvider },
     )
     await result.current()
 

apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/hooks/useOrdersTableTokenApprove.test.ts

@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 
 import { WETH_SEPOLIA } from '@cowprotocol/common-const'
 
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 import { useTradeApproveCallback } from 'common/containers/TradeApprove'
 

apps/cowswap-frontend/src/modules/usdAmount/hooks/useUsdAmount.test.tsx

@@ -4,7 +4,7 @@ import { ReactNode } from 'react'
 import { WETH_GNOSIS_CHAIN } from '@cowprotocol/common-const'
 import { CurrencyAmount, Fraction } from '@uniswap/sdk-core'
 
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import { JotaiTestProvider } from 'test-utils'
 
 import { useUsdAmount } from './useUsdAmount'
@@ -43,7 +43,7 @@ describe('useUsdAmount', () => {
       () => {
         return useUsdAmount(ONE_WETH)
       },
-      { wrapper: TestComponent }
+      { wrapper: TestComponent },
     )
 
     expect(result.current.value?.toExact()).toBe(WETH_RAW_PRICE_STATE?.price?.toFixed(0))

apps/explorer/src/test/hooks/useDecomposedPath.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import { MemoryRouter } from 'react-router'
 import { useDecomposedPath, usePathPrefix, usePathSuffix } from 'state/network'
 

apps/explorer/src/test/hooks/useSafeState.hooks.test.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
 
+import { act } from '@testing-library/react'
 import useSafeState from 'hooks/useSafeState'
 import ReactDOM from 'react-dom'
-import { act } from 'react-dom/test-utils'
-
+import { createRoot } from 'react-dom/client'
 
 interface TestComponentI {
   safeUpdate?: boolean
@@ -51,7 +51,10 @@ afterEach(() => {
 describe('Tests button click state change', () => {
   it('Renders and useSafeState works to change state', async () => {
     act(() => {
-      ReactDOM.render(<TestComponent safeUpdate />, container)
+      if (!container) return
+
+      const root = createRoot(container)
+      root.render(<TestComponent safeUpdate />)
     })
 
     const button = (container as HTMLDivElement).querySelector('#buttonTest')

apps/explorer/src/test/hooks/useSearchSubmit.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks'
+import { renderHook, act } from '@testing-library/react'
 import { LocationDescriptorObject } from 'history'
 import { useSearchSubmit } from 'hooks/useSearchSubmit'
 import { MemoryRouter, useLocation } from 'react-router-dom'
@@ -22,7 +22,7 @@ function runHook(query: string) {
     },
     {
       wrapper: ({ children }) => wrapperMemoryRouter({ children }),
-    }
+    },
   )
 
   act(() => {

apps/explorer/src/test/hooks/useTable.test.tsx

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks'
+import { act, renderHook } from '@testing-library/react'
 
 import { useTable } from '../../explorer/components/OrdersTableWidget/useTable'
 

package.json

@@ -62,7 +62,8 @@
   },
   "resolutions": {
     "@safe-global/safe-apps-provider/**/@safe-global/safe-apps-sdk": "^9.1.0",
-    "@web3-react/gnosis-safe/**/@safe-global/safe-apps-sdk": "^9.1.0"
+    "@web3-react/gnosis-safe/**/@safe-global/safe-apps-sdk": "^9.1.0",
+    "@types/react-dom": "npm:[email protected]"
   },
   "dependencies": {
     "@1inch/permit-signed-approvals-utils": "^1.4.10",
@@ -182,27 +183,27 @@
     "mui-color-input": "^2.0.1",
     "multicodec": "^3.0.1",
     "multihashes": "^4.0.2",
-    "next": "14.0.4",
+    "next": "15.0.3",
     "next-sitemap": "^4.2.3",
     "node-cache": "^5.1.0",
     "polished": "^4.0.5",
     "polyfill-object.fromentries": "^1.0.1",
     "popper-max-size-modifier": "^0.2.0",
     "qs": "^6.12.1",
-    "react": "18.2.0",
+    "react": "19.0.0-rc-66855b96-20241106",
     "react-appzi": "^1.0.4",
     "react-confetti": "^6.1.0",
     "react-copy-to-clipboard": "^5.0.2",
     "react-cytoscapejs": "^1.2.1",
     "react-device-detect": "^1.6.2",
-    "react-dom": "18.2.0",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-feather": "^2.0.10",
     "react-ga4": "^1.4.1",
     "react-helmet": "^6.1.0",
     "react-icons": "^5.2.1",
     "react-inlinesvg": "^3.0.1",
     "react-intersection-observer": "^9.10.1",
-    "react-is": "18.2.0",
+    "react-is": "19.0.0-rc-66855b96-20241106",
     "react-markdown": "^9.0.0",
     "react-popper": "^2.2.3",
     "react-redux": "^8.0.2",
@@ -262,7 +263,6 @@
     "@swc/core": "~1.3.85",
     "@swc/plugin-styled-components": "^1.5.67",
     "@testing-library/react": "14.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
     "@typechain/ethers-v5": "^10.2.0",
     "@types/clone-deep": "^4.0.1",
     "@types/cytoscape": "^3.19.4",
@@ -275,7 +275,7 @@
     "@types/node": "18.16.9",
     "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-cytoscapejs": "^1.2.2",
-    "@types/react-dom": "18.2.14",
+    "@types/react-dom": "npm:[email protected]",
     "@types/react-helmet": "^6.1.6",
     "@types/react-is": "18.2.2",
     "@types/react-router-hash-link": "^2.4.5",
@@ -300,7 +300,7 @@
     "babel-plugin-transform-import-meta": "^2.2.0",
     "cypress": "^12.16.0",
     "eslint": "~9.9.1",
-    "eslint-config-next": "14.2.7",
+    "eslint-config-next": "15.0.3",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-cypress": "^3.0.2",
     "eslint-plugin-import": "2.30.0",