feat(refactor): Modal close refactor, helmet async, rm react-scroll

.licenserc.json

@@ -7,5 +7,5 @@
     "/* Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors",
     "SPDX-License-Identifier: GPL-3.0-only */"
   ],
-  "ignore": ["testdata", "npm", "public/", "Dockerfile", "src/config/validators/"]
+  "ignore": ["testdata", "npm", "public/", "Dockerfile", "packages/app/src/config/validators/"]
 }

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",
@@ -41,6 +40,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@tanstack/react-query": "^5.62.15",
     "@w3ux/hooks": "^1.4.0",
     "@w3ux/utils": "^1.2.0",

packages/app/package.json

@@ -4,19 +4,18 @@
   "type": "module",
   "license": "GPL-3.0-only",
   "scripts": {
-    "build": "npx tsc && vite build --base '/'",
+    "build": "npx tsc && npx vite build --base '/'",
     "clear": "rm -rf build dist tsconfig.tsbuildinfo",
     "reset": "yarn run clear &&  rm -rf node_modules yarn.lock && yarn",
-    "dev": "vite",
-    "preview": "vite preview",
+    "dev": "npx vite",
+    "preview": "npx vite preview",
     "test": "vitest",
     "visualizer": "vite-bundle-visualizer"
   },
   "dependencies": {
     "@dotlottie/player-component": "^2.7.12",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@ledgerhq/hw-transport-webhid": "^6.30.0",
     "@polkadot-api/merkleize-metadata": "^1.1.12",
@@ -47,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:*",
@@ -73,6 +71,7 @@
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-svg-core": "*",
+    "@fortawesome/free-solid-svg-icons": "*",
     "@tanstack/react-query": "*",
     "eslint": "*",
     "react": "*",

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 />

packages/app/src/library/Modal/Title.tsx

@@ -4,13 +4,12 @@
 import type { IconProp } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import type { AnyJson } from '@w3ux/types'
-import CrossSVG from 'assets/svg/icons/cross.svg?react'
 import { useHelp } from 'contexts/Help'
 import type { FunctionComponent, SVGProps } from 'react'
 import type { CSSProperties } from 'styled-components'
 import { ButtonHelp } from 'ui-buttons'
 import { ModalTitle } from 'ui-core/overlay'
-import { useOverlay } from 'ui-overlay'
+import { Close } from 'ui-overlay'
 import { TitleWrapper } from './Wrappers'
 
 interface TitleProps {
@@ -31,7 +30,6 @@ export const Title = ({
   style,
 }: TitleProps) => {
   const { openHelp } = useHelp()
-  const { setModalStatus } = useOverlay().modal
 
   const graphic = Svg ? (
     <Svg style={{ width: '1.5rem', height: '1.5rem' }} />
@@ -40,23 +38,21 @@ export const Title = ({
   ) : null
 
   return (
-    <TitleWrapper $fixed={fixed || false} style={{ ...style }}>
-      <div>
-        {graphic}
-        {title && (
-          <ModalTitle>
-            {title}
-            {helpKey ? (
-              <ButtonHelp marginLeft onClick={() => openHelp(helpKey)} />
-            ) : null}
-          </ModalTitle>
-        )}
-      </div>
-      <div>
-        <button type="button" onClick={() => setModalStatus('closing')}>
-          <CrossSVG style={{ width: '1.25rem', height: '1.25rem' }} />
-        </button>
-      </div>
-    </TitleWrapper>
+    <>
+      <Close />
+      <TitleWrapper $fixed={fixed || false} style={{ ...style }}>
+        <div>
+          {graphic}
+          {title && (
+            <ModalTitle>
+              {title}
+              {helpKey ? (
+                <ButtonHelp marginLeft onClick={() => openHelp(helpKey)} />
+              ) : null}
+            </ModalTitle>
+          )}
+        </div>
+      </TitleWrapper>
+    </>
   )
 }

packages/app/src/library/Modal/Wrappers.ts

@@ -44,18 +44,6 @@ export const TitleWrapper = styled.div<{ $fixed: boolean }>`
         margin-right: 0.9rem;
       }
     }
-
-    &:last-child {
-      button {
-        position: absolute;
-        top: 1.5rem;
-        right: 1.5rem;
-        opacity: 0.25;
-        &:hover {
-          opacity: 1;
-        }
-      }
-    }
   }
 `
 
@@ -106,19 +94,3 @@ export const StatWrapper = styled.div`
     }
   }
 `
-
-export const CloseWrapper = styled.div`
-  position: absolute;
-  right: 1.5rem;
-  top: 1.5rem;
-  z-index: 2;
-
-  > button {
-    opacity: 0.4;
-    transition: opacity var(--transition-duration) ease-in-out;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-`

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'
 

packages/app/src/library/SideMenu/index.tsx

@@ -8,12 +8,12 @@ import { capitalizeFirstLetter } from '@w3ux/utils'
 import DiscordSVG from 'assets/svg/brands/discord.svg?react'
 import LogoGithubSVG from 'assets/svg/brands/github.svg?react'
 import BookSVG from 'assets/svg/icons/book.svg?react'
-import CogOutlineSVG from 'assets/svg/icons/cogOutline.svg?react'
+import CogSVG from 'assets/svg/icons/cog.svg?react'
 import EnvelopeSVG from 'assets/svg/icons/envelope.svg?react'
 import LanguageSVG from 'assets/svg/icons/language.svg?react'
 import LogoSVG from 'assets/svg/icons/logo.svg?react'
-import MoonOutlineSVG from 'assets/svg/icons/moonOutline.svg?react'
-import SunnyOutlineSVG from 'assets/svg/icons/sunnyOutline.svg?react'
+import MoonOutlineSVG from 'assets/svg/icons/moon.svg?react'
+import SunnyOutlineSVG from 'assets/svg/icons/sun.svg?react'
 import { PageWidthMediumThreshold, SideMenuMaximisedWidth } from 'consts'
 import { useApi } from 'contexts/Api'
 import { useHelp } from 'contexts/Help'
@@ -176,7 +176,7 @@ export const SideMenu = () => {
             onClick={() => openModal({ key: 'Settings' })}
             aria-label="Settings"
           >
-            <CogOutlineSVG width="1.3em" height="1.3em" />
+            <CogSVG width="1.3em" height="1.3em" />
           </button>
           <button
             type="button"

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>

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>

packages/app/src/overlay/modals/BalanceTest/index.tsx

@@ -7,10 +7,9 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts'
 import { useNetwork } from 'contexts/Network'
 import { useBatchCall } from 'hooks/useBatchCall'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { Close } from 'library/Modal/Close'
 import { SubmitTx } from 'library/SubmitTx'
 import { ModalPadding, ModalTitle } from 'ui-core/overlay'
-import { useOverlay } from 'ui-overlay'
+import { Close, useOverlay } from 'ui-overlay'
 
 export const BalanceTest = () => {
   const {

packages/app/src/overlay/modals/Bond/index.tsx

@@ -14,12 +14,11 @@ import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
 import { BondFeedback } from 'library/Form/Bond/BondFeedback'
 import { Warning } from 'library/Form/Warning'
-import { Close } from 'library/Modal/Close'
 import { SubmitTx } from 'library/SubmitTx'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ModalPadding, ModalTitle, ModalWarnings } from 'ui-core/overlay'
-import { useOverlay } from 'ui-overlay'
+import { Close, useOverlay } from 'ui-overlay'
 import { planckToUnitBn } from 'utils'
 
 export const Bond = () => {

packages/app/src/overlay/modals/ChangePoolRoles/index.tsx

@@ -6,11 +6,10 @@ import { useActiveAccounts } from 'contexts/ActiveAccounts'
 import { useNetwork } from 'contexts/Network'
 import { useBondedPools } from 'contexts/Pools/BondedPools'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
-import { Close } from 'library/Modal/Close'
 import { SubmitTx } from 'library/SubmitTx'
 import { useTranslation } from 'react-i18next'
 import { ModalPadding, ModalTitle } from 'ui-core/overlay'
-import { useOverlay } from 'ui-overlay'
+import { Close, useOverlay } from 'ui-overlay'
 import { RoleChange } from './RoleChange'
 import { Wrapper } from './Wrapper'
 

packages/app/src/overlay/modals/ClaimReward/index.tsx

@@ -11,12 +11,11 @@ import { useSignerWarnings } from 'hooks/useSignerWarnings'
 import { useSubmitExtrinsic } from 'hooks/useSubmitExtrinsic'
 import { ActionItem } from 'library/ActionItem'
 import { Warning } from 'library/Form/Warning'
-import { Close } from 'library/Modal/Close'
 import { SubmitTx } from 'library/SubmitTx'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ModalPadding, ModalTitle, ModalWarnings } from 'ui-core/overlay'
-import { useOverlay } from 'ui-overlay'
+import { Close, useOverlay } from 'ui-overlay'
 
 export const ClaimReward = () => {
   const { t } = useTranslation('modals')