chore(suite): replace react-helmet with react-helmet-async

trezor · Apr 24, 2024 · 245ca14 · 245ca14
1 parent 2baa27f
commit 245ca14
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 90 deletions.
diff --git a/packages/suite-desktop-ui/package.json b/packages/suite-desktop-ui/package.json
@@ -27,6 +27,7 @@
         "@trezor/utils": "workspace:*",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-helmet-async": "^2.0.4",
         "react-markdown": "^9.0.1",
         "react-redux": "8.0.7",
         "react-router-dom": "^5.2.0",

diff --git a/packages/suite-desktop-ui/src/Main.tsx b/packages/suite-desktop-ui/src/Main.tsx
@@ -1,5 +1,6 @@
 import { Provider as ReduxProvider } from 'react-redux';
 import { Router as RouterProvider } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
 
 import { createRoot } from 'react-dom/client';
 import { init as initSentry } from '@sentry/electron/renderer';
@@ -34,37 +35,42 @@ import * as STORAGE from 'src/actions/suite/constants/storageConstants';
 import { DesktopUpdater } from './support/DesktopUpdater';
 import { AppRouter } from './support/Router';
 import { TorLoadingScreen } from './support/screens/TorLoadingScreen';
+import { StrictMode } from 'react';
 
 const Main = () => {
     useTor();
     useDebugLanguageShortcut();
     const formattersConfig = useFormattersConfig();
 
     return (
-        <ConnectedThemeProvider>
-            <RouterProvider history={history}>
-                <ModalContextProvider>
-                    <ErrorBoundary>
-                        <Autodetect />
-                        <Resize />
-                        <Protocol />
-                        <OnlineStatus />
-                        <RouterHandler />
-                        <ConnectedIntlProvider>
-                            <FormatterProvider config={formattersConfig}>
-                                <DesktopUpdater>
-                                    <Metadata />
-                                    <ToastContainer />
-                                    <Preloader>
-                                        <AppRouter />
-                                    </Preloader>
-                                </DesktopUpdater>
-                            </FormatterProvider>
-                        </ConnectedIntlProvider>
-                    </ErrorBoundary>
-                </ModalContextProvider>
-            </RouterProvider>
-        </ConnectedThemeProvider>
+        <StrictMode>
+            <HelmetProvider>
+                <ConnectedThemeProvider>
+                    <RouterProvider history={history}>
+                        <ModalContextProvider>
+                            <ErrorBoundary>
+                                <Autodetect />
+                                <Resize />
+                                <Protocol />
+                                <OnlineStatus />
+                                <RouterHandler />
+                                <ConnectedIntlProvider>
+                                    <FormatterProvider config={formattersConfig}>
+                                        <DesktopUpdater>
+                                            <Metadata />
+                                            <ToastContainer />
+                                            <Preloader>
+                                                <AppRouter />
+                                            </Preloader>
+                                        </DesktopUpdater>
+                                    </FormatterProvider>
+                                </ConnectedIntlProvider>
+                            </ErrorBoundary>
+                        </ModalContextProvider>
+                    </RouterProvider>
+                </ConnectedThemeProvider>
+            </HelmetProvider>
+        </StrictMode>
     );
 };
 

diff --git a/packages/suite-web/package.json b/packages/suite-web/package.json
@@ -22,7 +22,7 @@
         "cypress-real-events": "^1.11.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "react-helmet": "^6.1.0",
+        "react-helmet-async": "^2.0.4",
         "react-redux": "8.0.7",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
@@ -44,7 +44,6 @@
         "@types/cypress-image-snapshot": "^3.1.8",
         "@types/react": "18.2.79",
         "@types/react-dom": "18.2.19",
-        "@types/react-helmet": "^6.1.11",
         "@types/react-router": "^5.1.20",
         "@types/react-router-dom": "^5.1.7",
         "chrome-remote-interface": "^0.33.0",

diff --git a/packages/suite-web/src/Main.tsx b/packages/suite-web/src/Main.tsx
@@ -25,6 +25,8 @@ import { ModalContextProvider } from 'src/support/suite/ModalContext';
 import AppRouter from './support/Router';
 import { useCypress } from './support/useCypress';
 import { FormatterProvider } from '@suite-common/formatters';
+import { HelmetProvider } from 'react-helmet-async';
+import { StrictMode } from 'react';
 
 const Main = () => {
     useCypress();
@@ -33,28 +35,32 @@ const Main = () => {
     const formattersConfig = useFormattersConfig();
 
     return (
-        <ConnectedThemeProvider>
-            <RouterProvider history={history}>
-                <ModalContextProvider>
-                    <ErrorBoundary>
-                        <Autodetect />
-                        <Resize />
-                        <Protocol />
-                        <OnlineStatus />
-                        <RouterHandler />
-                        <ConnectedIntlProvider>
-                            <FormatterProvider config={formattersConfig}>
-                                <Metadata />
-                                <ToastContainer />
-                                <Preloader>
-                                    <AppRouter />
-                                </Preloader>
-                            </FormatterProvider>
-                        </ConnectedIntlProvider>
-                    </ErrorBoundary>
-                </ModalContextProvider>
-            </RouterProvider>
-        </ConnectedThemeProvider>
+        <StrictMode>
+            <HelmetProvider>
+                <ConnectedThemeProvider>
+                    <RouterProvider history={history}>
+                        <ModalContextProvider>
+                            <ErrorBoundary>
+                                <Autodetect />
+                                <Resize />
+                                <Protocol />
+                                <OnlineStatus />
+                                <RouterHandler />
+                                <ConnectedIntlProvider>
+                                    <FormatterProvider config={formattersConfig}>
+                                        <Metadata />
+                                        <ToastContainer />
+                                        <Preloader>
+                                            <AppRouter />
+                                        </Preloader>
+                                    </FormatterProvider>
+                                </ConnectedIntlProvider>
+                            </ErrorBoundary>
+                        </ModalContextProvider>
+                    </RouterProvider>
+                </ConnectedThemeProvider>
+            </HelmetProvider>
+        </StrictMode>
     );
 };
 

diff --git a/packages/suite-web/src/support/Router.tsx b/packages/suite-web/src/support/Router.tsx
@@ -144,10 +144,6 @@ const components: Record<PageName, LazyExoticComponent<ComponentType<any>>> = {
 };
 
 const AppRouter = () => (
-    // inititating strict mode higher would throw an error from react-helmet
-    // TODO: replace react-helmet with a maintained alternative
-    // strict mode is commented out because of its interplay with compose errors in send form
-    // <StrictMode>
     <Suspense fallback={<BundleLoader />}>
         <Switch>
             {routes.map(route => (
@@ -160,7 +156,6 @@ const AppRouter = () => (
             ))}
         </Switch>
     </Suspense>
-    // </StrictMode>
 );
 
 export default memo(AppRouter);
diff --git a/packages/suite/package.json b/packages/suite/package.json
@@ -94,7 +94,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-focus-lock": "^2.9.7",
-        "react-helmet": "^6.1.0",
+        "react-helmet-async": "^2.0.4",
         "react-hook-form": "^7.50.1",
         "react-intl": "^6.6.2",
         "react-markdown": "^9.0.1",

diff --git a/packages/suite/src/components/suite/Metadata.tsx b/packages/suite/src/components/suite/Metadata.tsx
@@ -1,5 +1,5 @@
 import { SUITE_URL } from '@trezor/urls';
-import Helmet from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 import { useIntl } from 'react-intl';
 import messages from 'src/support/messages';
 

diff --git a/yarn.lock b/yarn.lock
@@ -10959,6 +10959,7 @@ __metadata:
     "@types/react-dom": "npm:18.2.19"
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
+    react-helmet-async: "npm:^2.0.4"
     react-markdown: "npm:^9.0.1"
     react-redux: "npm:8.0.7"
     react-router-dom: "npm:^5.2.0"
@@ -11018,7 +11019,6 @@ __metadata:
     "@types/cypress-image-snapshot": "npm:^3.1.8"
     "@types/react": "npm:18.2.79"
     "@types/react-dom": "npm:18.2.19"
-    "@types/react-helmet": "npm:^6.1.11"
     "@types/react-router": "npm:^5.1.20"
     "@types/react-router-dom": "npm:^5.1.7"
     chrome-remote-interface: "npm:^0.33.0"
@@ -11028,7 +11028,7 @@ __metadata:
     cypress-real-events: "npm:^1.11.0"
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
-    react-helmet: "npm:^6.1.0"
+    react-helmet-async: "npm:^2.0.4"
     react-redux: "npm:8.0.7"
     react-router: "npm:^5.2.0"
     react-router-dom: "npm:^5.2.0"
@@ -11146,7 +11146,7 @@ __metadata:
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
     react-focus-lock: "npm:^2.9.7"
-    react-helmet: "npm:^6.1.0"
+    react-helmet-async: "npm:^2.0.4"
     react-hook-form: "npm:^7.50.1"
     react-intl: "npm:^6.6.2"
     react-markdown: "npm:^9.0.1"
@@ -12521,15 +12521,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-helmet@npm:^6.1.11":
-  version: 6.1.11
-  resolution: "@types/react-helmet@npm:6.1.11"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10/e329d8ad82c365fec7dd7d91c8b6d167faac30cef0d9f1e27d7e895172a0ebfa65829fb4acabbe79283b01cbbe5840a845caeb50148ceef6f3fad42b3c2c4bdc
-  languageName: node
-  linkType: hard
-
 "@types/react-qr-reader@npm:^2.1.7":
   version: 2.1.7
   resolution: "@types/react-qr-reader@npm:2.1.7"
@@ -33413,10 +33404,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-fast-compare@npm:^3.1.1":
-  version: 3.2.0
-  resolution: "react-fast-compare@npm:3.2.0"
-  checksum: 10/26ed35d425f197f04c85d572eac943d901a2713335b79483d4f3f94ee5caf97f20678f89bedd385ace9b1637890c88fc5442d732bad0871135643d9703312cd7
+"react-fast-compare@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "react-fast-compare@npm:3.2.2"
+  checksum: 10/a6826180ba75cefba1c8d3ac539735f9b627ca05d3d307fe155487f5d0228d376dac6c9708d04a283a7b9f9aee599b637446635b79c8c8753d0b4eece56c125c
   languageName: node
   linkType: hard
 
@@ -33463,17 +33454,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-helmet@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "react-helmet@npm:6.1.0"
+"react-helmet-async@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "react-helmet-async@npm:2.0.4"
   dependencies:
-    object-assign: "npm:^4.1.1"
-    prop-types: "npm:^15.7.2"
-    react-fast-compare: "npm:^3.1.1"
-    react-side-effect: "npm:^2.1.0"
+    invariant: "npm:^2.2.4"
+    react-fast-compare: "npm:^3.2.2"
+    shallowequal: "npm:^1.1.0"
   peerDependencies:
-    react: ">=16.3.0"
-  checksum: 10/eff25231384bb0a229870a0552839953a59af17f0ff5e8bca1b8c8fdf19a329e4c00c7fa2fcedc8be5d73f5c7bebb30cf9a32ea58efc7c8f726a10dba51f48a2
+    react: ^16.6.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/8f18cb27e8f5821811d715906b5fe279d4ce7e1e0ef1a565d90d64db386d2e4676fe7f4182d27393eccf7b03ace7d65fb4c406f945d43de3b57acaaa54711831
   languageName: node
   linkType: hard
 
@@ -33978,15 +33969,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-side-effect@npm:^2.1.0":
-  version: 2.1.2
-  resolution: "react-side-effect@npm:2.1.2"
-  peerDependencies:
-    react: ^16.3.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/8c31aaec5b383d942ff1775b12c45022239d1250d1a00a238bac3c07e0fe266c71991e2814ae16a5d9b855bcd96ba95817d48ab3f34738f0bb32036ebb1abb1a
-  languageName: node
-  linkType: hard
-
 "react-smooth@npm:^4.0.0":
   version: 4.0.0
   resolution: "react-smooth@npm:4.0.0"
@@ -35833,7 +35815,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shallowequal@npm:1.1.0":
+"shallowequal@npm:1.1.0, shallowequal@npm:^1.1.0":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"
   checksum: 10/f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00