rm react-scroll, helmet to async

polkadot-cloud · Jan 5, 2025 · c8acedb · c8acedb
1 parent d359566
commit c8acedb
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,6 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.2.25",
     "@types/react-helmet": "^6.1.11",
-    "@types/react-scroll": "^1.8.10",
     "@typescript-eslint/parser": "^8.19.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "@w3ux/types": "^1.0.0",

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -46,9 +46,8 @@
     "rc-slider": "^11.1.6",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^2.0.5",
     "react-router-dom": "^7.1.1",
-    "react-scroll": "^1.9.0",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.13",
     "styles": "workspace:*",

diff --git a/packages/app/src/Router.tsx b/packages/app/src/Router.tsx
@@ -21,6 +21,7 @@ import { Offline } from 'Offline'
 import { Overlays } from 'overlay'
 import { useEffect, useRef } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
+import { HelmetProvider } from 'react-helmet-async'
 import {
   HashRouter,
   Navigate,
@@ -70,24 +71,26 @@ const RouterInner = () => {
         <Prompt />
         <SideMenu />
         <Main ref={mainInterfaceRef}>
-          <Headers />
-          <ErrorBoundary FallbackComponent={ErrorFallbackRoutes}>
-            <Routes>
-              {PagesConfig.map((page, i) => (
+          <HelmetProvider>
+            <Headers />
+            <ErrorBoundary FallbackComponent={ErrorFallbackRoutes}>
+              <Routes>
+                {PagesConfig.map((page, i) => (
+                  <Route
+                    key={`main_interface_page_${i}`}
+                    path={page.hash}
+                    element={<PageWithTitle page={page} />}
+                  />
+                ))}
                 <Route
-                  key={`main_interface_page_${i}`}
-                  path={page.hash}
-                  element={<PageWithTitle page={page} />}
+                  key="main_interface_navigate"
+                  path="*"
+                  element={<Navigate to="/overview" />}
                 />
-              ))}
-              <Route
-                key="main_interface_navigate"
-                path="*"
-                element={<Navigate to="/overview" />}
-              />
-            </Routes>
-          </ErrorBoundary>
-          <MainFooter />
+              </Routes>
+            </ErrorBoundary>
+            <MainFooter />
+          </HelmetProvider>
         </Main>
       </Body>
       <Offline />

diff --git a/packages/app/src/library/PageWithTitle/index.tsx b/packages/app/src/library/PageWithTitle/index.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import type { PageItem } from 'common-types'
-import { Helmet } from 'react-helmet'
+import { Helmet } from 'react-helmet-async'
 import { useTranslation } from 'react-i18next'
 import { Page } from 'ui-core/base'
 

diff --git a/packages/app/src/overlay/canvas/CreatePool/index.tsx b/packages/app/src/overlay/canvas/CreatePool/index.tsx
@@ -13,7 +13,6 @@ import {
   CanvasTitleWrapper,
 } from 'overlay/canvas/Wrappers'
 import { useTranslation } from 'react-i18next'
-import { Element } from 'react-scroll'
 import { ButtonPrimary } from 'ui-buttons'
 import { useOverlay } from 'ui-overlay'
 
@@ -45,27 +44,22 @@ export const CreatePool = () => {
       </CanvasTitleWrapper>
 
       <CardWrapper className="canvas">
-        <Element name="metadata" style={{ position: 'absolute' }} />
         <PoolName section={1} />
       </CardWrapper>
 
       <CardWrapper className="canvas">
-        <Element name="nominate" style={{ position: 'absolute' }} />
         <Nominate bondFor="pool" section={2} />
       </CardWrapper>
 
       <CardWrapper className="canvas">
-        <Element name="roles" style={{ position: 'absolute' }} />
         <PoolRoles section={3} />
       </CardWrapper>
 
       <CardWrapper className="canvas">
-        <Element name="bond" style={{ position: 'absolute' }} />
         <Bond section={4} />
       </CardWrapper>
 
       <CardWrapper className="canvas">
-        <Element name="summary" style={{ position: 'absolute' }} />
         <Summary section={5} />
       </CardWrapper>
     </CanvasFullScreenWrapper>

diff --git a/packages/app/src/overlay/canvas/NominatorSetup/index.tsx b/packages/app/src/overlay/canvas/NominatorSetup/index.tsx
@@ -12,7 +12,6 @@ import {
   CanvasTitleWrapper,
 } from 'overlay/canvas/Wrappers'
 import { useTranslation } from 'react-i18next'
-import { Element } from 'react-scroll'
 import { ButtonPrimary } from 'ui-buttons'
 import { useOverlay } from 'ui-overlay'
 
@@ -44,22 +43,18 @@ export const NominatorSetup = () => {
       </CanvasTitleWrapper>
 
       <CardWrapper className="canvas">
-        <Element name="payee" style={{ position: 'absolute' }} />
         <Payee section={1} />
       </CardWrapper>
 
       <CardWrapper className="canvas">
-        <Element name="nominate" style={{ position: 'absolute' }} />
         <Nominate bondFor="nominator" section={2} />
       </CardWrapper>
 
       <CardWrapper className="canvas">
-        <Element name="bond" style={{ position: 'absolute' }} />
         <Bond section={3} />
       </CardWrapper>
 
       <CardWrapper className="canvas">
-        <Element name="summary" style={{ position: 'absolute' }} />
         <Summary section={4} />
       </CardWrapper>
     </CanvasFullScreenWrapper>

diff --git a/yarn.lock b/yarn.lock
@@ -3577,15 +3577,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-scroll@npm:^1.8.10":
-  version: 1.8.10
-  resolution: "@types/react-scroll@npm:1.8.10"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10c0/fd488a2446f3654c7594fa664a3592661d2685608717f80e32d3749f496974d20876bcb127522a69b8249c2f513895a84b89bf6eeb95442fc6f5e7023f6baaff
-  languageName: node
-  linkType: hard
-
 "@types/react@npm:*":
   version: 19.0.2
   resolution: "@types/react@npm:19.0.2"
@@ -4506,9 +4497,8 @@ __metadata:
     rc-slider: "npm:^11.1.6"
     react-chartjs-2: "npm:^5.2.0"
     react-dom: "npm:^18.2.0"
-    react-helmet: "npm:^6.1.0"
+    react-helmet-async: "npm:^2.0.5"
     react-router-dom: "npm:^7.1.1"
-    react-scroll: "npm:^1.9.0"
     rxjs: "npm:^7.8.1"
     styled-components: "npm:^6.1.13"
     styles: "workspace:*"
@@ -7277,6 +7267,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"invariant@npm:^2.2.4":
+  version: 2.2.4
+  resolution: "invariant@npm:2.2.4"
+  dependencies:
+    loose-envify: "npm:^1.0.0"
+  checksum: 10c0/5af133a917c0bcf65e84e7f23e779e7abc1cd49cb7fdc62d00d1de74b0d8c1b5ee74ac7766099fb3be1b05b26dfc67bab76a17030d2fe7ea2eef867434362dfc
+  languageName: node
+  linkType: hard
+
 "ip-address@npm:^9.0.5":
   version: 9.0.5
   resolution: "ip-address@npm:9.0.5"
@@ -7971,13 +7970,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.throttle@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "lodash.throttle@npm:4.1.1"
-  checksum: 10c0/14628013e9e7f65ac904fc82fd8ecb0e55a9c4c2416434b1dd9cf64ae70a8937f0b15376a39a68248530adc64887ed0fe2b75204b2c9ec3eea1cb2d66ddd125d
-  languageName: node
-  linkType: hard
-
 "log-symbols@npm:^6.0.0":
   version: 6.0.0
   resolution: "log-symbols@npm:6.0.0"
@@ -7988,7 +7980,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -9027,7 +9019,6 @@ __metadata:
     "@types/react": "npm:^18.3.3"
     "@types/react-dom": "npm:^18.2.25"
     "@types/react-helmet": "npm:^6.1.11"
-    "@types/react-scroll": "npm:^1.8.10"
     "@typescript-eslint/parser": "npm:^8.19.0"
     "@vitejs/plugin-react-swc": "npm:^3.7.0"
     "@w3ux/hooks": "npm:^1.4.0"
@@ -9382,24 +9373,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-fast-compare@npm:^3.1.1":
+"react-fast-compare@npm:^3.2.2":
   version: 3.2.2
   resolution: "react-fast-compare@npm:3.2.2"
   checksum: 10c0/0bbd2f3eb41ab2ff7380daaa55105db698d965c396df73e6874831dbafec8c4b5b08ba36ff09df01526caa3c61595247e3269558c284e37646241cba2b90a367
   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.5":
+  version: 2.0.5
+  resolution: "react-helmet-async@npm:2.0.5"
   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: 10c0/1d2831d9c3b4f5c91f020076aeb6502437a4788077d0c438421e466eb9633d5dc2aacedf7b779a970b807d61cf87793c5ff76ee3190a185d71c90b5cfb367e96
+    react: ^16.6.0 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/f390ea8bf13c2681850e5f8eb5b73d8613f407c245a5fd23e9db9b2cc14a3700dd1ce992d3966632886d1d613083294c2aeee009193f49dfa7d145d9f13ea2b0
   languageName: node
   linkType: hard
 
@@ -9465,28 +9455,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-scroll@npm:^1.9.0":
-  version: 1.9.0
-  resolution: "react-scroll@npm:1.9.0"
-  dependencies:
-    lodash.throttle: "npm:^4.1.1"
-    prop-types: "npm:^15.7.2"
-  peerDependencies:
-    react: ^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/bcaa045740351ba1373d2e3f236b1ff0d383e4e5efd43d87644c165a3c1c4988bd0361515c487688daf39c122b035c8a014fcd9184f51deb4a0d2c232ac5fb61
-  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: 10c0/5d934cae438f701ce646f566750ae6a445e99185ce1a026108f9db728147f7962a22ecf8db79ff26089953a3799b3607766904f4f10194ce42bcd5a1aa0215e8
-  languageName: node
-  linkType: hard
-
 "react@npm:^18.3.1":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
@@ -10050,7 +10018,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: 10c0/b926efb51cd0f47aa9bc061add788a4a650550bbe50647962113a4579b60af2abe7b62f9b02314acc6f97151d4cf87033a2b15fc20852fae306d1a095215396c