Update to react@19. Closes #1997

.github/workflows/dependabot-auto-approve-patch.yml

@@ -15,7 +15,6 @@ jobs:
           - graphql
           - dayjs
           - autoprefixer
-          - react-helmet-async
           - tailwindcss
           - '@glif/'
           - '@filecoin-station/core'

package.json

@@ -67,10 +67,9 @@
     "ms": "^2.1.3",
     "p-debounce": "^4.0.0",
     "prettier": "^3.5.1",
-    "react": "^18.3.1",
+    "react": "19.0.0",
     "react-chartjs-2": "^5.3.0",
-    "react-dom": "^18.3.1",
-    "react-helmet-async": "^2.0.5",
+    "react-dom": "19.0.0",
     "react-router": "^7.1.5",
     "split2": "^4.2.0",
     "vite-plugin-svgr": "^4.3.0",
@@ -83,8 +82,8 @@
     "@testing-library/react": "^16.2.0",
     "@types/mocha": "^10.0.10",
     "@types/node-fetch": "^2.6.12",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
     "@types/split2": "^4.2.3",
     "@types/tmp": "^0.2.6",
     "@typescript-eslint/eslint-plugin": "^5.62.0",

renderer/src/App.tsx

@@ -4,47 +4,43 @@ import Onboarding from 'src/pages/onboarding/Onboarding'
 import Dashboard from 'src/pages/dashboard/Dashboard'
 import Sentry from 'src/components/Sentry'
 import Plausible from 'src/components/Plausible'
-import { HelmetProvider, Helmet } from 'react-helmet-async'
 import { ROUTES } from 'src/lib/routes'
 import Layout from 'src/components/Layout'
 import Settings from 'src/pages/settings/Settings'
 import Wallet from 'src/pages/wallet/Wallet'
 import Modules from 'src/pages/modules/Modules'
 import { DialogProvider } from './components/DialogProvider'
 import { TooltipProvider } from '@radix-ui/react-tooltip'
+import type { JSX } from 'react'
 
 const App = ():JSX.Element => {
   return (
-    <HelmetProvider>
-      <Helmet>
-        <title>Filecoin Station</title>
-      </Helmet>
-      <Router>
-        <TooltipProvider delayDuration={200}>
-          <DialogProvider>
-            <Routes>
-              <Route path={ROUTES.onboarding} element={<Onboarding />} />
-              <Route
-                path="*"
-                element={
-                  <Layout>
-                    <Sentry />
-                    <Plausible />
-                    <Routes>
-                      <Route path={ROUTES.dashboard} element={<Dashboard />} />
-                      <Route path={ROUTES.wallet} element={<Wallet />} />
-                      <Route path={ROUTES.settings} element={<Settings />} />
-                      <Route path={ROUTES.modules} element={<Modules />} />
-                    </Routes>
-                  </Layout>
-                }
-              >
-              </Route>
-            </Routes>
-          </DialogProvider>
-        </TooltipProvider>
-      </Router>
-    </HelmetProvider>
+    <Router>
+      <title>Filecoin Station</title>
+      <TooltipProvider delayDuration={200}>
+        <DialogProvider>
+          <Routes>
+            <Route path={ROUTES.onboarding} element={<Onboarding />} />
+            <Route
+              path="*"
+              element={
+                <Layout>
+                  <Sentry />
+                  <Plausible />
+                  <Routes>
+                    <Route path={ROUTES.dashboard} element={<Dashboard />} />
+                    <Route path={ROUTES.wallet} element={<Wallet />} />
+                    <Route path={ROUTES.settings} element={<Settings />} />
+                    <Route path={ROUTES.modules} element={<Modules />} />
+                  </Routes>
+                </Layout>
+              }
+            >
+            </Route>
+          </Routes>
+        </DialogProvider>
+      </TooltipProvider>
+    </Router>
   )
 }
 

renderer/src/components/Plausible.tsx

@@ -1,14 +1,10 @@
-import { Helmet } from 'react-helmet-async'
-
 const Plausible = () => {
   return (
-    <Helmet>
-      <script
-        defer
-        data-domain="app.station.filecoin.io"
-        src="https://plausible.io/js/plausible.local.js"
-      />
-    </Helmet>
+    <script
+      defer
+      data-domain="app.station.filecoin.io"
+      src="https://plausible.io/js/plausible.local.js"
+    />
   )
 }
 

renderer/src/components/Transition.tsx

@@ -40,7 +40,7 @@ const Transition = <C extends ElementType = typeof DEFAULT_ELEMENT>({
   const Component = as || DEFAULT_ELEMENT
 
   const [shouldRender, setShouldRender] = useState(on)
-  const timeout = useRef<ReturnType<typeof setTimeout>>()
+  const timeout = useRef<ReturnType<typeof setTimeout>>(undefined)
 
   useEffect(() => {
     if (!on) {

renderer/src/hooks/StationWallet.tsx

@@ -34,8 +34,8 @@ const useWallet = (): Wallet => {
   const [walletTransactions, setWalletTransactions] = useState<FILTransaction[]>()
   const [processingTransaction, setProcessingTransaction] = useState<FILTransactionProcessing>()
 
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>()
-  const processingTxRef = useRef<typeof processingTransaction>()
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined)
+  const processingTxRef = useRef<typeof processingTransaction>(undefined)
   processingTxRef.current = processingTransaction
 
   const setTransactions = useCallback((

renderer/src/pages/dashboard/Dashboard.tsx

@@ -4,6 +4,7 @@ import ChartController from './ChartController'
 import useStationRewards from 'src/hooks/StationRewards'
 import RewardsInfo from './RewardsInfo'
 import { bigIntFilToNumber } from 'src/lib/utils'
+import type { JSX } from 'react'
 
 const Dashboard = (): JSX.Element => {
   const { historicalRewards, totalRewardsReceived, scheduledRewards } = useStationRewards()

renderer/src/pages/onboarding/Onboarding.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from 'react'
+import type { JSX } from 'react'
 import { useNavigate } from 'react-router'
 import { getOnboardingCompleted, setOnboardingCompleted } from 'src/lib/station-config'
 import Onboarding from 'src/components/Onboarding'

renderer/src/pages/wallet/TransactionHistory.tsx

@@ -18,7 +18,7 @@ const TransactionHistory = ({
   const [completeTransactions, setCompleteTransactions] = useState<
   Array<FILTransaction & { isNew?: boolean }>
   >()
-  const transactionsRef = useRef<string[]>()
+  const transactionsRef = useRef<string[]>(undefined)
 
   useEffect(() => {
     const complete = walletTransactions?.filter(tx => tx.status !== 'processing')