Update react version

package.json

@@ -11,36 +11,38 @@
     "@keplr-wallet/wc-client": "^0.11.3",
     "@terra-money/terra.js": "^3.1.8",
     "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^13.5.0",
     "@tharsis/address-converter": "^0.1.8",
     "@vercel/analytics": "^1.0.2",
+    "@vercel/speed-insights": "^1.0.11",
     "@walletconnect/client": "^1.8.0",
     "axios": "^0.26.0",
     "axios-retry": "^3.3.1",
     "bootstrap": "^5.1.3",
     "buffer": "^6.0.3",
     "compare-versions": "^5.0.1",
     "cosmjs-types": "^0.4.1",
-    "dotenv": "^16.0.0",
+    "dompurify": "^3.1.5",
+    "dotenv": "^16.4.5",
     "fuzzy-search": "^3.2.1",
-    "mathjs": "^10.4.3",
+    "mathjs": "^13.0.0",
+    "micromark": "^4.0.0",
+    "micromark-extension-gfm": "^3.0.0",
     "moment": "^2.29.2",
-    "parse-duration": "^1.0.2",
+    "parse-duration": "^1.1.0",
     "path": "^0.12.7",
     "qrcode.react": "^3.1.0",
-    "react": "^17.0.2",
-    "react-bootstrap": "^2.1.2",
-    "react-bootstrap-icons": "^1.8.3",
-    "react-copy-to-clipboard": "^5.0.4",
-    "react-countdown": "^2.3.2",
-    "react-dom": "^17.0.2",
-    "react-github-btn": "^1.2.1",
-    "react-markdown": "^8.0.5",
-    "react-moment": "^1.1.2",
-    "react-router-dom": "^6.2.1",
-    "react-select": "^5.2.2",
-    "remark-gfm": "^3.0.1",
+    "react": "^18.3.1",
+    "react-bootstrap": "^2.10.2",
+    "react-bootstrap-icons": "^1.11.4",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-countdown": "^2.3.5",
+    "react-dom": "^18.3.1",
+    "react-github-btn": "^1.4.0",
+    "react-moment": "^1.1.3",
+    "react-router-dom": "^6.2.31",
+    "react-select": "^5.8.0",
     "stream": "^0.0.2",
     "truncate-middle": "^1.0.6",
     "web-vitals": "^2.1.4"
@@ -71,13 +73,14 @@
     ]
   },
   "devDependencies": {
-    "@parcel/packager-raw-url": "^2.0.0",
-    "@parcel/transformer-webmanifest": "^2.0.0",
+    "@parcel/packager-raw-url": "^2.12.0",
+    "@parcel/transformer-webmanifest": "^2.12.0",
     "crypto-browserify": "^3.12.0",
-    "eslint": "^8.10.0",
+    "eslint": "^9.4.0",
     "events": "^3.3.0",
-    "parcel": "^2.0.0",
+    "parcel": "^2.12.0",
     "path-browserify": "^1.0.1",
-    "stream-browserify": "^3.0.0"
+    "stream-browserify": "^3.0.0",
+    "vm-browserify": "^1.1.2"
   }
-}
+}

src/components/App.css

@@ -196,6 +196,15 @@ code p{
   }
 }
 
+.table {
+    --bs-table-color-type: unset;
+    --bs-table-bg-type: unset;
+    --bs-table-color-state: unset;
+    --bs-table-bg-state: unset;
+    --bs-table-color: unset;
+    --bs-table-border-color: unset;
+}
+
 .dark-bar {
   background-color: #303030 !important;
 }

src/components/App.js

@@ -814,6 +814,7 @@ class App extends React.Component {
           )}
           {this.props.active === 'grants' && this.state.address && this.props.network.authzSupport && (
             <Grants
+              theme={this.props.theme}
               network={this.props.network}
               address={this.state.address}
               wallet={this.state.wallet}

src/components/Grants.js

@@ -20,7 +20,7 @@ import Address from './Address'
 import { authzSupportMessage } from '../utils/Helpers.mjs';
 
 function Grants(props) {
-  const { address, wallet, network, operators, validators, grants } = props
+  const { address, wallet, network, operators, validators, grants, theme } = props
   const [error, setError] = useState()
   const [showModal, setShowModal] = useState()
   const [grantsLoading, setGrantLoading] = useReducer(
@@ -252,10 +252,10 @@ function Grants(props) {
           <div className="d-lg-flex d-none position-absolute mx-auto justify-content-center align-self-center">
             <Nav fill variant="pillls" activeKey={filter.group} className={`${props.modal ? ' small' : ''}`} onSelect={(e) => setFilter({ ...filter, group: e })}>
               <Nav.Item>
-                <Nav.Link eventKey="granter" disabled={filteredGrants(grants, { ...filter, group: 'granter' }).length < 1}>Granted by me</Nav.Link>
+                <Nav.Link eventKey="granter" className={`${props.theme === 'dark' ? 'dark-link' : 'light-link'}`} disabled={filteredGrants(grants, { ...filter, group: 'granter' }).length < 1}>Granted by me</Nav.Link>
               </Nav.Item>
               <Nav.Item>
-                <Nav.Link eventKey="grantee" disabled={filteredGrants(grants, { ...filter, group: 'grantee' }).length < 1}>Granted to me</Nav.Link>
+                <Nav.Link eventKey="grantee" className={`${props.theme === 'dark' ? 'dark-link' : 'light-link'}`} disabled={filteredGrants(grants, { ...filter, group: 'grantee' }).length < 1}>Granted to me</Nav.Link>
               </Nav.Item>
             </Nav>
           </div>

src/components/ProposalDetails.js

@@ -1,13 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import Moment from 'react-moment';
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
+import {micromark} from 'micromark';
+import {gfm, gfmHtml} from 'micromark-extension-gfm';
+import DOMPurify from 'dompurify';
 
 import {
   Table,
   Tab,
   Nav
-} from 'react-bootstrap'
+} from 'react-bootstrap';
 
 import Coins from './Coins';
 import ProposalProgress from './ProposalProgress';
@@ -25,6 +26,28 @@ function ProposalDetails(props) {
   const { proposal_id, title, description } = proposal
 
   const fixDescription = description?.replace(/\\n/g, '  \n')
+
+  const transformHTMLString = (htmlString, isSpam) => {
+    let transformedString = htmlString;
+
+    // Transform headings
+    transformedString = transformedString.replace(/<h[2-6]>(.*?)<\/h[2-6]>/g, '<h6>$1</h6>');
+    transformedString = transformedString.replace(/<h1>(.*?)<\/h1>/g, '<h5>$1</h5>');
+
+    // Remove all <a> tags if proposal is spam
+    if (isSpam) {
+      transformedString = transformedString.replace(/<a[^>]*>(.*?)<\/a>/g, '<span>$1</span>');
+    }
+
+    // Apply table class
+    transformedString = transformedString.replace(/<table>/g, '<table class="table">');
+
+    return transformedString;
+  };
+
+  const htmlDescription = micromark(fixDescription, { extensions: [gfm()], htmlExtensions: [gfmHtml()] })
+  const sanitizedHtml = DOMPurify.sanitize(htmlDescription);
+  const transformedDescription = transformHTMLString(sanitizedHtml, proposal.isSpam);
 
   useEffect(() => {
     if(props.address !== props.wallet?.address && props.granters.includes(props.address)){
@@ -174,21 +197,7 @@ function ProposalDetails(props) {
               <div className="col">
                 <h5 className="mb-3">{title}</h5>
                 <div className='markdown-container'>
-                  <ReactMarkdown
-                    children={fixDescription}
-                    remarkPlugins={[remarkGfm]}
-                    disallowedElements={proposal.isSpam ? ['a'] : []}
-                    unwrapDisallowed={true}
-                    components={{
-                      h1: 'h5',
-                      h2: 'h6',
-                      h3: 'h6',
-                      h4: 'h6',
-                      h5: 'h6',
-                      h6: 'h6',
-                      table: ({node, ...props}) => <table className="table" {...props} />
-                    }}
-                  />
+                <div dangerouslySetInnerHTML={{ __html: transformedDescription }}></div>
                 </div>
               </div>
             </div>

src/components/Proposals.js

@@ -147,10 +147,10 @@ function Proposals(props) {
         <div className="d-lg-flex d-none position-absolute mx-auto justify-content-center align-self-center">
           <Nav fill variant="pillls" activeKey={filter.group} className={`${props.modal ? ' small' : ''}`} onSelect={(e) => setFilter({...filter, group: e})}>
             <Nav.Item>
-              <Nav.Link eventKey="voting" disabled={filteredProposals(proposals, {...filter, group: 'voting'}).length < 1}>Voting Period</Nav.Link>
+              <Nav.Link eventKey="voting" className={`${props.theme === 'dark' ? 'dark-link' : 'light-link'}`} disabled={filteredProposals(proposals, {...filter, group: 'voting'}).length < 1}>Voting Period</Nav.Link>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link eventKey="all">All Proposals</Nav.Link>
+              <Nav.Link eventKey="all" className={`${props.theme === 'dark' ? 'dark-link' : 'light-link'}`}>All Proposals</Nav.Link>
             </Nav.Item>
           </Nav>
         </div>

src/components/Validators.js

@@ -328,10 +328,10 @@ function Validators(props) {
         <div className={`${!props.modal && 'd-md-flex'} d-none justify-content-center align-self-center`}>
           <Nav fill variant="pillls" activeKey={filter.group} className={`flex-row${props.modal ? ' small' : ''}`} onSelect={(e) => setFilter({group: e})}>
             <Nav.Item>
-              <Nav.Link eventKey="delegated" disabled={filteredValidators(validators, {...filter, group: 'delegated'}).length < 1}>My Delegations</Nav.Link>
+              <Nav.Link eventKey="delegated" className={`${props.theme === 'dark' ? 'dark-link' : 'light-link'}`} disabled={filteredValidators(validators, {...filter, group: 'delegated'}).length < 1}>My Delegations</Nav.Link>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link eventKey="all">All Validators</Nav.Link>
+              <Nav.Link eventKey="all" className={`${props.theme === 'dark' ? 'dark-link' : 'light-link'}`}>All Validators</Nav.Link>
             </Nav.Item>
           </Nav>
         </div>

src/index.js

@@ -2,7 +2,7 @@ import Bugsnag from '@bugsnag/js'
 import BugsnagPluginReact from '@bugsnag/plugin-react'
 import React from 'react';
 
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import {
   BrowserRouter,
   Routes,
@@ -30,6 +30,10 @@ const app = (
   </React.StrictMode>
 )
 
+const container = document.getElementById('root')
+const root = createRoot(container);
+
+
 if (process.env.BUGSNAG_KEY) {
   Bugsnag.start({
     apiKey: process.env.BUGSNAG_KEY,
@@ -41,16 +45,15 @@ if (process.env.BUGSNAG_KEY) {
   const ErrorBoundary = Bugsnag.getPlugin('react')
     .createErrorBoundary(React)
 
-  ReactDOM.render(
+
+  root.render(
     <ErrorBoundary>
       {app}
     </ErrorBoundary>,
-    document.getElementById('root')
   );
 }else{
-  ReactDOM.render(
-    app,
-    document.getElementById('root')
+  root.render(
+    app
   );
 }
 
@@ -60,5 +63,8 @@ if (process.env.BUGSNAG_KEY) {
 reportWebVitals();
 
 import { inject } from '@vercel/analytics';
-
-inject();
+import { injectSpeedInsights } from '@vercel/speed-insights';
+
+injectSpeedInsights();
+inject();
+