RED-113: Dependabot explorer: web3-utils Prototype Pollution vulnerability

package.json

@@ -41,7 +41,7 @@
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.9",
     "@types/socket.io": "2.1.11",
-    "axios": "1.4.0",
+    "axios": "1.6.0",
     "bn.js": "5.2.1",
     "body-parser": "1.19.2",
     "classnames": "2.3.2",
@@ -50,7 +50,7 @@
     "cors": "2.8.5",
     "decimal.js": "10.4.3",
     "dotenv": "16.3.1",
-    "ejs": "3.1.9",
+    "ejs": "3.1.10",
     "ethers": "5.7.2",
     "fast-stable-stringify": "1.0.0",
     "fastify": "4.20.0",
@@ -62,9 +62,9 @@
     "lodash": "4.17.21",
     "moment": "2.29.4",
     "morgan": "1.9.1",
-    "next": "13.3.4",
+    "next": "13.5.6",
     "node-cron": "3.0.2",
-    "node-sass": "7.0.3",
+    "node-sass": "9.0.0",
     "nodemon": "^2.0.20",
     "point-of-view": "4.6.0",
     "qs": "6.11.0",
@@ -78,7 +78,7 @@
     "swr": "1.3.0",
     "ts-node": "10.9.1",
     "ts-node-dev": "2.0.0",
-    "web3": "4.0.2"
+    "web3": "4.8.0"
   },
   "devDependencies": {
     "@types/fastify-cors": "2.1.0",

src/frontend/components/ClientOnlyTooltip.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react'
+import ReactTooltip from 'react-tooltip'
+
+/**
+ * ClientOnlyTooltip is a React component that renders a tooltip using ReactTooltip.
+ * It ensures that the tooltip is only mounted and rendered on the client side after the component has mounted.
+ * This is useful for components that rely on window or document objects, which are not available during server-side rendering.
+ *
+ * @param {Object} props - The properties passed to the component.
+ * @param {string} props.id - The unique identifier for the tooltip, used for accessibility and linking the tooltip with its trigger.
+ * @param {string} props.backgroundColor - The background color of the tooltip.
+ * @param {string} props.effect - The effect used to display the tooltip, e.g., 'float', 'solid'.
+ * @returns {JSX.Element} The tooltip component, which renders conditionally based on whether the component is mounted.
+ */
+const ClientOnlyTooltip = ({ id, backgroundColor, effect }): JSX.Element => {
+  const [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, [])
+
+  return (
+    <>
+      {isMounted && (
+          <ReactTooltip id={id} effect={effect} backgroundColor={backgroundColor} />
+      )}
+    </>
+  )
+}
+
+export default ClientOnlyTooltip;

src/frontend/components/ContentLayout/ContentLayout.tsx

@@ -7,7 +7,7 @@ import { Icon } from '../Icon'
 
 import styles from './ContentLayout.module.scss'
 import { Breadcrumb } from '../Breadcrumb'
-import ReactTooltip from 'react-tooltip'
+import ClientOnlyTooltip from '../ClientOnlyTooltip'
 
 interface ContentLayoutProps {
   className?: string
@@ -46,7 +46,7 @@ export const ContentLayout: React.FC<ContentLayoutProps> = ({
           </Button>
         )}
         {breadcrumbItems && breadcrumbItems.length > 0 && <Breadcrumb items={breadcrumbItems || []} />}
-        <ReactTooltip effect="solid" backgroundColor="#6610f2" id="back" />
+        <ClientOnlyTooltip effect="solid" backgroundColor="#6610f2" id="back" />
       </div>
       <div className={styles.titleWrapper}>
         {typeof title === 'string' ? <div className={styles.title}>{title}</div> : title}

src/frontend/components/Footer/Footer.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
-import ReactTooltip from 'react-tooltip'
+import ClientOnlyTooltip from '../ClientOnlyTooltip'
 
 import { Icon, iconTypes } from '../Icon'
 import { Spacer } from '../Spacer'
@@ -71,7 +71,7 @@ export const Footer: React.FC = () => {
               <Icon name={social.iconName as keyof typeof iconTypes} color="black" />
             </a>
           ))}
-          <ReactTooltip effect="solid" backgroundColor="#6610f2" id="fsb" />
+          <ClientOnlyTooltip effect="solid" backgroundColor="#6610f2" id="fsb" />
         </div>
       </div>
     </div>

src/frontend/components/Pagination/Pagination.tsx

@@ -58,10 +58,10 @@ export const Pagination: React.FC<PaginationProps> = (props) => {
       >
         <Icon name="arrow_left" color={currentPage === 1 ? 'disabled' : 'black'} />
       </Button>
-      {paginationRange.map((pageNumber) => {
+      {paginationRange.map((pageNumber, index) => {
         if (pageNumber === DOTS) {
           return (
-            <div className={styles.label} key={pageNumber}>
+            <div className={styles.label} key={`dots-${index}`}>
               &#8230;
             </div>
           )

src/frontend/components/PaginationPrevNext/PaginationPrevNext.tsx

@@ -5,7 +5,7 @@ import { Button } from '../Button'
 import { Icon } from '../Icon'
 
 import styles from './PaginationPrevNext.module.scss'
-import ReactTooltip from 'react-tooltip'
+import ClientOnlyTooltip from '../ClientOnlyTooltip'
 
 export interface PaginationPrevNextProps {
   page: number | string
@@ -40,8 +40,8 @@ export const PaginationPrevNext: React.FC<PaginationPrevNextProps> = (props) =>
       >
         <Icon name="arrow_right" size="small" color="black" />
       </Button>
-      <ReactTooltip effect="solid" backgroundColor="#6610f2" id="prev" />
-      <ReactTooltip effect="solid" backgroundColor="#6610f2" id="nex" />
+      <ClientOnlyTooltip id="prev" backgroundColor="#6610f2" effect="solid" />
+      <ClientOnlyTooltip id="next" backgroundColor="#6610f2" effect="solid" />
     </div>
   )
 }

src/frontend/dashboard/Dashboard/Dashboard.tsx

@@ -42,11 +42,11 @@ export const Dashboard: React.FC = () => {
   return (
     <div className={styles.Dashboard}>
       <Spacer space="32" />
-      <session>
-        <SearchBox mode={cycles[0]?.cycleRecord['mode']} />
-      </session>
+      <div>
+      <SearchBox mode={cycles[0]?.cycleRecord['mode']} />
+      </div>
       <Spacer space="48" />
-      <session>
+      <section>
         <CardDetail
           totalCycles={cyclesList[0]?.key}
           totalNodes={cyclesList[0]?.activeNodes}
@@ -60,18 +60,18 @@ export const Dashboard: React.FC = () => {
           totalSHM={totalSHM}
           totalStakedSHM={totalStakedSHM}
         />
-      </session>
+      </section>
       <Spacer space="48" />
       <section>
         <ChartDetail validatorStats={validatorStats} transactionStats={transactionStats} />
       </section>
       <Spacer space="48" />
-      <session>
+      <section>
         <div className={styles.tableGrid}>
           <LatestCycle cycles={cycles} />
           <LatestTransactions transactions={transactions} />
         </div>
-      </session>
+      </section>
       <Spacer space="48" />
     </div>
   )

src/frontend/dashboard/NetworkMode/NetworkMode.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import styles from './NetworkMode.module.scss'
 import ReactTooltip from 'react-tooltip'
 import { Modes } from '../../types/modes'
+import ClientOnlyTooltip from '../../components/ClientOnlyTooltip'
 
 interface ModeComponentProps {
   mode: Modes | undefined
@@ -51,7 +52,8 @@ const getColorAndTooltip = (mode: Modes | undefined): ModeData => {
   if (mode) {
     return modeData[mode as Modes]
   }
-  return { color: '', tooltipContent: '' }
+  // Provide default values for color and tooltipContent when mode is undefined
+  return { color: '#cccccc', tooltipContent: 'No mode selected' }
 }
 
 const NetworkMode: React.FC<ModeComponentProps> = ({ mode }) => {
@@ -75,7 +77,7 @@ const NetworkMode: React.FC<ModeComponentProps> = ({ mode }) => {
         data-tip={tooltipContent}
         data-for="tooltip"
       ></div>
-      <ReactTooltip id="tooltip" place="top" type="dark" effect="solid" />
+      <ClientOnlyTooltip id="tooltip" backgroundColor="#6610f2" effect="solid" />
     </div>
   )
 }

src/pages/_document.tsx

@@ -1,6 +1,8 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import Script from 'next/script'
 import { config } from './../config/index'
+import React from 'react'
+
 
 export default class MyDocument extends Document {
   render(): JSX.Element {