Bump React and related dependencies, as well as styled-jsx

Some light typing tweaks were needed, but otherwise this was a clean
upgrade with fairly minimal non-version-bump dependency changes to boot.
The biggest one was a renaming of apollo-* packages to @apollo/.

background/redux-slices/utils.ts

@@ -87,7 +87,7 @@ export type BackgroundAsyncThunk<
   TypePrefix extends string,
   Returned,
   ThunkArg = void,
-  ThunkApiConfig = { extra: { main: Main } }
+  ThunkApiConfig extends AsyncThunkConfig = { extra: { main: Main } }
 > = ((
   payload: ThunkArg
 ) => BackgroundAsyncThunkAction<TypePrefix, Returned> & { payload: ThunkArg }) &

package.json

@@ -87,7 +87,7 @@
     "@tallyho/tally-ui": "0.0.1",
     "@tallyho/window-provider": "0.0.1",
     "buffer": "^6.0.3",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "sinon": "^14.0.1",
     "webext-options-sync": "^2.0.1",
     "webext-redux": "^2.1.7",
@@ -100,7 +100,7 @@
     "@babel/preset-typescript": "^7.15.0",
     "@babel/register": "^7.14.5",
     "@playwright/test": "^1.31",
-    "@redux-devtools/cli": "^1.0.7",
+    "@redux-devtools/cli": "^2.0.0",
     "@thesis-co/eslint-config": "^0.5.0",
     "@types/archiver": "^5.1.0",
     "@types/copy-webpack-plugin": "^8.0.0",
@@ -132,7 +132,7 @@
     "process": "^0.11.10",
     "size-plugin": "^2.0.2",
     "stream-browserify": "^3.0.0",
-    "styled-jsx": "^3.4.4",
+    "styled-jsx": "^5.1.2",
     "terser-webpack-plugin": "^5.1.1",
     "ts-loader": "^9.2.3",
     "typescript": "^5.0.4",

ui/components/Claim/ClaimDelegate.tsx

@@ -33,7 +33,7 @@ function CustomDelegatePanel({
   }, [dispatch, selectedDelegate.enteredBy])
 
   const handleAddressInputChange = useCallback(
-    (value) => {
+    (value: string) => {
       if (isAddress(value)) {
         setErrorMessage("")
         dispatch(chooseDelegate({ address: value, enteredBy: "custom" }))

ui/components/NFTs/NFTCollection.tsx

@@ -49,7 +49,7 @@ export default function NFTCollection(props: {
     [id, owner, network, dispatch]
   )
 
-  const intersectionCallback = useCallback(
+  const intersectionCallback = useCallback<IntersectionObserverCallback>(
     ([element]) => {
       if (element.isIntersecting && !wasUpdated) {
         // if collection doesn't have nfts then load some
@@ -79,7 +79,7 @@ export default function NFTCollection(props: {
     { threshold: 0.1 }
   )
 
-  const loadMoreCallback = useCallback(
+  const loadMoreCallback = useCallback<IntersectionObserverCallback>(
     ([element]) => {
       if (element.isIntersecting && !isUpdating) {
         if (hasNextPage) setIsUpdating(true) // if next page is known show loader

ui/index.ts

@@ -1,5 +1,5 @@
 import React, { ComponentType } from "react"
-import ReactDOM from "react-dom"
+import ReactDOM from "react-dom/client"
 import { Store } from "webext-redux"
 import { browser, newProxyStore } from "@tallyho/tally-background"
 import "./_locales/i18n"
@@ -25,10 +25,8 @@ export async function attachUIToRootElement(
 
   const backgroundStore = store ?? (await newProxyStore())
 
-  ReactDOM.render(
-    React.createElement(component, { store: backgroundStore }),
-    rootElement
-  )
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(React.createElement(component, { store: backgroundStore }))
 }
 
 export async function attachTabUIToRootElement(): Promise<void> {

ui/package.json

@@ -33,7 +33,7 @@
     "@tallyho/provider-bridge-shared": "0.0.1",
     "@tallyho/tally-background": "0.0.1",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "lodash": "^4.17.21",
     "classnames": "^2.3.1",
@@ -42,20 +42,19 @@
     "history": "^4.9.0",
     "i18next": "^21.8.10",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-i18next": "^11.17.2",
-    "react-qr-code": "^2.0.0",
-    "react-redux": "^7.2.4",
-    "react-router-dom": "^5.3.0",
-    "react-transition-group": "^4.4.2",
+    "react-qr-code": "2.0.11",
+    "react-redux": "^7.2.9",
+    "react-router-dom": "^5.3.4",
+    "react-transition-group": "^4.4.5",
     "redux": "^4.1.0",
     "webextension-polyfill": "^0.8.0",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@types/react-dom": "^17.0.9",
     "@types/react-transition-group": "^4.4.4",
     "@types/zxcvbn": "^4.4.1",
     "webext-redux": "^2.1.7"