update @types and packages that break @types

package.json

@@ -11,10 +11,10 @@
     "@jbx-protocol/juice-v1-token-terminal": "1.0.1",
     "@jbx-protocol/project-handles": "^2.0.0",
     "@jbx-protocol/ve-nft": "0.0.6",
-    "@lingui/cli": "^3.13.0",
-    "@lingui/detect-locale": "^3.13.0",
-    "@lingui/macro": "^3.13.0",
-    "@lingui/react": "^3.13.0",
+    "@lingui/cli": "^3.14.0",
+    "@lingui/detect-locale": "^3.14.0",
+    "@lingui/macro": "^3.14.0",
+    "@lingui/react": "^3.14.0",
     "@pinata/sdk": "^1.1.23",
     "@reduxjs/toolkit": "^1.6.2",
     "@sentry/react": "^6.18.2",
@@ -24,16 +24,16 @@
     "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.180",
     "@types/node": "^12.0.0",
-    "@types/react": "^17",
-    "@types/react-dom": "^17",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
     "@types/react-redux": "^7.1.16",
     "@typescript-eslint/eslint-plugin": "5.27.0",
     "@typescript-eslint/parser": "5.27.0",
     "@uniswap/sdk": "3.0.3",
     "@uniswap/sdk-core": "3.0.1",
     "@uniswap/v3-sdk": "3.8.2",
     "@walletconnect/web3-provider": "1.8.0",
-    "antd": "4.21.0",
+    "antd": "4.22.4",
     "autolinker": "^3.14.3",
     "axios": "0.27.2",
     "bnc-notify": "1.9.1",
@@ -57,7 +57,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.33.2",
-    "react-redux": "^7.2.2",
+    "react-redux": "^8.0.2",
     "recharts": "^2.1.2",
     "sass": "^1.52.1",
     "typescript": "4.4.3",

src/components/common/CoreAppWrapper/CoreAppWrapper.tsx

@@ -20,7 +20,9 @@ import useMobile from 'hooks/Mobile'
  * is still an issue, but the current structure allows opengraph and twitter
  * meta tags to be setup correctly.
  */
-export const AppWrapper: React.FC = ({ children }) => {
+export const AppWrapper: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   return (
     <React.StrictMode>
       <ReactQueryProvider>
@@ -39,7 +41,7 @@ export const AppWrapper: React.FC = ({ children }) => {
   )
 }
 
-const _Wrapper: React.FC = ({ children }) => {
+const _Wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const router = useRouter()
   if (router.asPath.match(/^\/#\//)) {
     redirectTo(router.asPath.replace('/#/', ''))

src/components/common/SEO/SEO.tsx

@@ -18,7 +18,7 @@ interface Props {
   children?: ReactNode
 }
 
-export const SEO: FC<Props> = ({
+export const SEO: FC<React.PropsWithChildren<Props>> = ({
   url,
   title,
   description,

src/pages/create/index.page.tsx

@@ -23,7 +23,7 @@ export default function V2CreatePage() {
 
 const { TabPane } = Tabs
 
-const TabText: React.FC = ({ children }) => {
+const TabText: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   return <span style={{ fontSize: 18 }}>{children}</span>
 }
 

src/pages/home/QAs.tsx

@@ -4,7 +4,9 @@ import React, { ReactNode } from 'react'
 import Link from 'next/link'
 import { helpPagePath } from 'utils/helpPageHelper'
 
-export const OverflowVideoLink: React.FC = ({ children }) => (
+export const OverflowVideoLink: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => (
   <ExternalLink href="https://youtu.be/9Mq5oDh0aBY">{children}</ExternalLink>
 )
 

src/pages/home/SectionHeading.tsx

@@ -1,10 +1,9 @@
 import useMobile from 'hooks/Mobile'
 import { CSSProperties } from 'react'
 
-export const SectionHeading: React.FC<{ style?: CSSProperties }> = ({
-  children,
-  style,
-}) => {
+export const SectionHeading: React.FC<
+  React.PropsWithChildren<{ style?: CSSProperties }>
+> = ({ children, style }) => {
   const isMobile = useMobile()
 
   return (

src/providers/NetworkProvider.tsx

@@ -11,7 +11,9 @@ import { readNetwork } from 'constants/networks'
 
 const KEY_SELECTED_WALLET = 'selectedWallet'
 
-export const NetworkProvider: React.FC = ({ children }) => {
+export const NetworkProvider: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   const router = useRouter()
   const { isDarkMode } = useContext(ThemeContext)
 

src/providers/ReactQueryProvider.tsx

@@ -4,7 +4,9 @@ import { ReactQueryDevtools } from 'react-query/devtools'
 
 const queryClient = new QueryClient()
 
-const ReactQueryProvider: React.FC = ({ children }) => (
+const ReactQueryProvider: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => (
   <QueryClientProvider client={queryClient}>
     {children}
     <ReactQueryDevtools initialIsOpen={false} />

src/providers/ThemeProvider.tsx

@@ -1,7 +1,9 @@
 import { ThemeContext } from 'contexts/themeContext'
 import { useJuiceTheme } from 'hooks/JuiceTheme'
 
-export const ThemeProvider: React.FC = ({ children }) => {
+export const ThemeProvider: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   const juiceTheme = useJuiceTheme()
 
   return (

src/providers/v1/UserProvider.tsx

@@ -4,7 +4,9 @@ import { useV1ContractLoader } from 'hooks/v1/V1ContractLoader'
 import { useGasPriceQuery } from 'hooks/GasPrice'
 import { useTransactor } from 'hooks/Transactor'
 
-export const V1UserProvider: React.FC = ({ children }) => {
+export const V1UserProvider: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   const contracts = useV1ContractLoader()
 
   const { data: gasPrice } = useGasPriceQuery('average')

src/providers/v1/V1CurrencyProvider.tsx

@@ -4,7 +4,9 @@ import React from 'react'
 
 import { V1_CURRENCY_CONTEXT } from 'constants/v1/currency'
 
-export const V1CurrencyProvider: React.FC = ({ children }) => {
+export const V1CurrencyProvider: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   return (
     <CurrencyContext.Provider value={V1_CURRENCY_CONTEXT}>
       {children}

src/providers/v2/UserProvider.tsx

@@ -4,7 +4,9 @@ import { useV2ContractLoader } from 'hooks/v2/V2ContractLoader'
 import { useGasPriceQuery } from 'hooks/GasPrice'
 import { useTransactor } from 'hooks/Transactor'
 
-export const V2UserProvider: React.FC = ({ children }) => {
+export const V2UserProvider: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   const contracts = useV2ContractLoader()
 
   const { data: gasPrice } = useGasPriceQuery('average')

src/providers/v2/V2CurrencyProvider.tsx

@@ -3,7 +3,9 @@ import React from 'react'
 
 import { V2_CURRENCY_CONTEXT } from 'constants/v2/currency'
 
-export const V2CurrencyProvider: React.FC = ({ children }) => {
+export const V2CurrencyProvider: React.FC<React.PropsWithChildren<unknown>> = ({
+  children,
+}) => {
   return (
     <CurrencyContext.Provider value={V2_CURRENCY_CONTEXT}>
       {children}