[PROTO-1375] Proto dash QoL (modernization + bug fixes + performance) (…

…#6442)

.circleci/config.yml

@@ -175,7 +175,7 @@ jobs:
                 "https://circleci.com/api/v2/pipeline/$pipeline_id/workflow" \
                 --header "Circle-Token: $CIRCLE_DAILY_DEPLOY_API_TOKEN" | jq -r '.items[] | select(.name=="release") | .id')
 
-              # Fetch the "deploy-prod-foundation-nodes-trigger" job
+              # Fetch the "deploy-foundation-nodes-trigger" job
               job_id=$(curl --request GET \
                 "https://circleci.com/api/v2/workflow/$workflow_id/job" \
                 --header "Circle-Token: $CIRCLE_DAILY_DEPLOY_API_TOKEN" | jq -r '.items[] | select(.name=="deploy-foundation-nodes-trigger" and .status=="on_hold") | .id')

.circleci/src/jobs/commit-audius-docker-compose-and-notify.yml

@@ -97,7 +97,7 @@ steps:
           OLD_VERSION=$(echo ${NEW_VERSION} | awk -F. '{$NF = $NF - 1;} 1' | sed 's/ /./g')
 
           # Generate diff for audius-protocol repo commits from last release to HEAD (we're on the new release branch thanks to the checkout step)
-          GIT_DIFF=$(git log --pretty=format:'%an - %s [<https://github.com/AudiusProject/audius-protocol/commit/%H|%h>]' --abbrev-commit origin/release-v$OLD_VERSION..HEAD -- mediorum packages/discovery-provider packages/identity-service comms monitoring/healthz | sed 's/"/\\"/g' | tr -d '\r' | sed ':a;N;$!ba;s/\n/=DELIM@/g')
+          GIT_DIFF=$(git log --pretty=format:'%an - %s [<https://github.com/AudiusProject/audius-protocol/commit/%H|%h>]' --abbrev-commit origin/release-v$OLD_VERSION..HEAD -- mediorum packages/discovery-provider packages/identity-service comms monitoring/healthz protocol-dashboard | sed 's/"/\\"/g' | tr -d '\r' | sed ':a;N;$!ba;s/\n/=DELIM@/g')
           json_content="{ \"blocks\": ["
           json_content+="{ \"type\": \"header\", \"text\": { \"type\": \"plain_text\", \"text\": \"New Protocol Release (v$NEW_VERSION)\n\" } },"
           audius_protocol_commit_blocks=$(generate_json_content "$GIT_DIFF")

protocol-dashboard/.npmrc

@@ -0,0 +1,3 @@
+# TODO: Remove legacy-peer-deps when all peerDependency conflicts
+# have been resolved in the dependency tree
+legacy-peer-deps=true

protocol-dashboard/package.json

@@ -8,40 +8,39 @@
     "@apollo/client": "3.3.7",
     "@audius/sdk": "3.0.11-beta.9",
     "@audius/stems": "0.3.10",
-    "@reduxjs/toolkit": "1.4.0",
+    "@reduxjs/toolkit": "1.9.7",
     "@self.id/3box-legacy": "0.3.0",
     "@self.id/core": "0.4.1",
+    "@tanstack/react-query": "5.0.5",
+    "@tanstack/react-query-devtools": "5.1.0",
     "chart.js": "2.9.3",
     "clsx": "1.1.1",
-    "connected-react-router": "6.8.0",
     "dayjs": "1.8.36",
     "graphql": "15.5.0",
-    "history": "4.7.2",
     "identicon.js": "2.3.3",
     "lodash": "4.17.20",
     "numeral": "2.0.6",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-chartjs-2": "2.10.0",
     "react-country-flag": "3.0.2",
     "react-custom-scrollbars": "4.2.1",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-helmet": "6.1.0",
     "react-lottie": "1.2.3",
     "react-markdown": "5.0.3",
-    "react-redux": "7.2.1",
-    "react-router-dom": "5.2.0",
+    "react-redux": "8.1.3",
+    "react-router-dom": "6.17.0",
     "react-spinners": "0.5.12",
     "react-spring": "8.0.25",
     "react-virtualized": "9.22.2",
-    "redux-thunk": "2.3.0",
+    "redux-thunk": "2.4.2",
     "remark-gfm": "1.0.0",
     "semver": "6.3.0",
     "simplebar-react": "3.0.0-beta.5",
     "url-join": "4.0.1",
     "vite": "4.4.9"
   },
   "scripts": {
-    "publish-scripts": "./scripts/publishScripts.sh",
     "configure-local-env": "node ./scripts/configureEnv.cjs dev",
     "configure-stage-env": "node ./scripts/configureEnv.cjs stage",
     "configure-prod-env": "node ./scripts/configureEnv.cjs prod",
@@ -83,20 +82,20 @@
   "devDependencies": {
     "@openzeppelin/test-helpers": "0.5.6",
     "@pinata/sdk": "1.1.13",
+    "@tanstack/eslint-plugin-query": "5.0.5",
     "@types/3box": "1.22.0",
     "@types/bn.js": "5.1.2",
     "@types/classnames": "2.2.10",
-    "@types/history": "5.0.0",
     "@types/jest": "24.9.1",
     "@types/lodash": "4.14.160",
     "@types/node": "12.0.10",
     "@types/numeral": "0.0.28",
-    "@types/react": "17.0.2",
-    "@types/react-dom": "16.8.4",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.14",
     "@types/react-helmet": "5.0.16",
     "@types/react-lottie": "1.2.5",
-    "@types/react-redux": "7.1.9",
-    "@types/react-router-dom": "5.1.5",
+    "@types/react-redux": "7.1.28",
+    "@types/react-router-dom": "5.3.3",
     "@types/react-tooltip": "3.11.0",
     "@types/react-virtualized": "9.21.10",
     "@types/semver": "6.2.1",
@@ -115,7 +114,7 @@
     "path-browserify": "1.0.1",
     "postcss": "8.4.14",
     "prettier": "1.19.1",
-    "redux-devtools-extension": "2.13.8",
+    "redux-devtools-extension": "2.13.9",
     "setimmediate": "1.0.5",
     "stream-browserify": "3.0.0",
     "stream-http": "3.2.0",
@@ -125,11 +124,11 @@
     "typescript": "5.2.2",
     "url": "0.11.0",
     "util": "0.12.4",
-    "vite-plugin-node-polyfills": "^0.15.0",
-    "vite-plugin-svgr": "^4.1.0",
-    "vite-plugin-top-level-await": "^1.3.1",
-    "vite-plugin-wasm": "^3.2.2",
-    "vite-tsconfig-paths": "^4.2.1"
+    "vite-plugin-node-polyfills": "0.15.0",
+    "vite-plugin-svgr": "4.1.0",
+    "vite-plugin-top-level-await": "1.3.1",
+    "vite-plugin-wasm": "3.2.2",
+    "vite-tsconfig-paths": "4.2.1"
   },
   "resolutions": {
     "bn.js": "5.1.2"

protocol-dashboard/scripts/updateBuild.cjs

@@ -74,8 +74,8 @@ const run = async () => {
   try {
     await updateGABuild()
     const cid = await pinGABuild()
-    await pinFromFs(cid)
-    fs.writeFileSync(`./build_cid.txt`, cid)
+    const { IpfsHash } = await pinFromFs(cid)
+    fs.writeFileSync(`./build_cid.txt`, IpfsHash)
     process.exit()
   } catch (err) {
     console.log(err)

protocol-dashboard/src/App.tsx

@@ -1,9 +1,9 @@
 import { ApolloProvider } from '@apollo/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { useEffect, useState } from 'react'
 import { Provider, useSelector } from 'react-redux'
-import { ConnectedRouter } from 'connected-react-router'
-import { Switch, Route } from 'react-router'
-import { createHashHistory } from 'history'
+import { Routes, Route, HashRouter } from 'react-router-dom'
 
 import Header from 'components/Header'
 import Home from 'containers/Home'
@@ -28,19 +28,24 @@ import Proposal from 'containers/Proposal'
 import { createStyles } from 'utils/mobile'
 import { getDidGraphError } from 'store/api/hooks'
 import UnregisteredNode from 'containers/UnregisteredNode'
+import { RouteHistoryProvider } from './providers/RouteHistoryContext'
+
 const styles = createStyles({ desktopStyles, mobileStyles })
-const history = createHashHistory()
-const store = createStore(history)
+const store = createStore()
+const queryClient = new QueryClient()
 
 const Root = () => (
   <Provider store={store}>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
   </Provider>
 )
 
 const App = () => {
   //  If the client fails, set it to the backup client
-  const [appolloClient, setApolloClient] = useState(client)
+  const [apolloClient, setApolloClient] = useState(client)
   const didClientError = useSelector(getDidGraphError)
   useEffect(() => {
     if (didClientError) {
@@ -51,83 +56,67 @@ const App = () => {
     }
   }, [didClientError])
   return (
-    <Provider store={store}>
-      <ApolloProvider client={appolloClient}>
-        <ConnectedRouter history={history}>
+    <ApolloProvider client={apolloClient}>
+      <HashRouter>
+        <RouteHistoryProvider>
           <div className={styles.appContainer}>
             <Header />
             <div className={styles.appContent}>
-              <Switch>
-                <Route path={routes.HOME} exact component={Home} />
-                <Route path={routes.SERVICES} exact component={Services} />
+              <Routes>
+                <Route path={routes.HOME} element={<Home />} />
+                <Route path={routes.SERVICES} element={<Services />} />
                 <Route
                   path={routes.SERVICES_UNREGISTERED_DISCOVERY_NODE}
-                  component={UnregisteredNode}
+                  element={<UnregisteredNode />}
                 />
                 <Route
                   path={routes.SERVICES_DISCOVERY_PROVIDER}
-                  exact
-                  component={DiscoveryProviders}
+                  element={<DiscoveryProviders />}
                 />
                 <Route
                   path={routes.SERVICES_DISCOVERY_PROVIDER_NODE}
-                  exact
-                  component={Node}
+                  element={<Node />}
                 />
                 <Route
                   path={routes.SERVICES_UNREGISTERED_CONTENT_NODE}
-                  component={UnregisteredNode}
+                  element={<UnregisteredNode />}
                 />
                 <Route
                   path={routes.SERVICES_CONTENT}
-                  exact
-                  component={ContentNodes}
-                />
-                <Route
-                  path={routes.SERVICES_CONTENT_NODE}
-                  exact
-                  component={Node}
+                  element={<ContentNodes />}
                 />
+                <Route path={routes.SERVICES_CONTENT_NODE} element={<Node />} />
                 <Route
                   path={routes.SERVICES_SERVICE_PROVIDERS}
-                  exact
-                  component={ServiceOperators}
+                  element={<ServiceOperators />}
                 />
                 <Route
                   path={routes.SERVICES_USERS}
-                  exact
-                  component={ServiceUsers}
-                />
-                <Route
-                  path={routes.SERVICES_ACCOUNT_USER}
-                  exact
-                  component={User}
+                  element={<ServiceUsers />}
                 />
+                <Route path={routes.SERVICES_ACCOUNT_USER} element={<User />} />
                 <Route
                   path={routes.SERVICES_ACCOUNT_OPERATOR}
-                  exact
-                  component={User}
+                  element={<User />}
                 />
-                <Route path={routes.GOVERNANCE} exact component={Governance} />
+                <Route path={routes.GOVERNANCE} element={<Governance />} />
                 <Route
                   path={routes.GOVERNANCE_PROPOSAL}
-                  exact
-                  component={Proposal}
+                  element={<Proposal />}
                 />
-                <Route path={routes.ANALYTICS} exact component={Analytics} />
-                <Route path={routes.API} exact component={API} />
+                <Route path={routes.ANALYTICS} element={<Analytics />} />
+                <Route path={routes.API} element={<API />} />
                 <Route
                   path={routes.API_LEADERBOARD}
-                  exact
-                  component={APILeaderboard}
+                  element={<APILeaderboard />}
                 />
-                <Route component={NotFound} />
-              </Switch>
+                <Route path="*" element={<NotFound />} />
+              </Routes>
             </div>
           </div>
-        </ConnectedRouter>
-      </ApolloProvider>
-    </Provider>
+        </RouteHistoryProvider>
+      </HashRouter>
+    </ApolloProvider>
   )
 }
 

protocol-dashboard/src/components/AppBar/AppBar.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useCallback } from 'react'
+import BN from 'bn.js'
 import Button from 'components/Button'
 import { Position } from 'components/Tooltip'
 import ConnectMetaMaskModal from 'components/ConnectMetaMaskModal'
@@ -20,7 +21,6 @@ import DisplayAudio from 'components/DisplayAudio'
 import UserImage from 'components/UserImage'
 import useOpenLink from 'hooks/useOpenLink'
 import getActiveStake from 'utils/activeStake'
-import { Utils } from '@audius/sdk/dist/legacy.js'
 
 const styles = createStyles({ desktopStyles, mobileStyles })
 
@@ -75,7 +75,7 @@ const Misconfigured = ({
 
 const UserAccountSnippet = ({ wallet }: UserAccountSnippetProps) => {
   const { user } = useUser({ wallet })
-  const activeStake = user ? getActiveStake(user) : Utils.toBN('0')
+  const activeStake = user ? getActiveStake(user) : new BN('0')
 
   const pushRoute = usePushRoute()
   const onClickUser = useCallback(() => {

protocol-dashboard/src/components/ConfirmTransactionModal/ConfirmTransactionModal.tsx

@@ -155,15 +155,16 @@ export const Delegating: React.FC<DelegatingProps> = props => {
 
 type StandaloneBoxProps = {
   className?: string
+  children: ReactNode
 }
-export const StandaloneBox: React.FC<StandaloneBoxProps> = props => {
+export const StandaloneBox = ({ className, children }: StandaloneBoxProps) => {
   return (
     <Box
       className={clsx(styles.topBox, styles.standalone, {
-        [props.className!]: !!props.className
+        [className!]: !!className
       })}
     >
-      {props.children}
+      {children}
     </Box>
   )
 }
@@ -174,7 +175,7 @@ type ToOperatorProps = {
   name: string
   wallet: Address
 }
-export const ToOperator: React.FC<ToOperatorProps> = props => {
+export const ToOperator = (props: ToOperatorProps) => {
   return (
     <Box
       className={clsx(styles.bottomBox, {
@@ -193,13 +194,14 @@ export const ToOperator: React.FC<ToOperatorProps> = props => {
   )
 }
 
-type BoxProps = { className?: string }
-export const Box: React.FC<BoxProps> = props => {
+type BoxProps = {
+  className?: string
+  children: ReactNode
+}
+export const Box = ({ className, children }: BoxProps) => {
   return (
-    <div
-      className={clsx(styles.box, { [props.className!]: !!props.className })}
-    >
-      {props.children}
+    <div className={clsx(styles.box, { [className!]: !!className })}>
+      {children}
     </div>
   )
 }

protocol-dashboard/src/components/DelegateStakeModal/DelegateStakeModal.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react'
+import BN from 'bn.js'
 import clsx from 'clsx'
-import { Utils } from '@audius/sdk/dist/legacy.js'
 import { ButtonType } from '@audius/stems'
 
 import { useDelegateStake } from 'store/actions/delegateStake'
@@ -42,13 +42,13 @@ const DelegateStakeModal: React.FC<DelegateStakeModalProps> = ({
   onClose
 }: DelegateStakeModalProps) => {
   const { min, max, user } = useUserDelegation(serviceOperatorWallet)
-  const [stakingBN, setStakingBN] = useState(Utils.toBN('0'))
+  const [stakingBN, setStakingBN] = useState(new BN('0'))
   const [stakingAmount, setStakingAmount] = useState('')
 
   useEffect(() => {
     if (!isOpen) {
       setStakingAmount('')
-      setStakingBN(Utils.toBN('0'))
+      setStakingBN(new BN('0'))
     }
   }, [isOpen, setStakingAmount, setStakingBN])