Add eslint to protocol dashboard

protocol-dashboard/.eslintrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es6: true },
+  extends: ['audius'],
+  plugins: ['react-refresh']
+}

protocol-dashboard/package.json

@@ -66,8 +66,8 @@
     "build": "NODE_OPTIONS=--max_old_space_size=8192 tsc -p ./tsconfig.node.json && vite build",
     "build:stage": "npm run configure-stage-env && ./node_modules/.bin/env-cmd -f .env.stage.local turbo run build",
     "build:prod": "npm run configure-prod-env && ./node_modules/.bin/env-cmd -f .env.prod.local turbo run build",
-    "lint": "npm run prettier:check",
-    "lint:fix": "npm run prettier:write",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint --fix src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "prettier:base": "prettier --parser typescript --single-quote --no-semi",
     "prettier:check": "npm run prettier:base -- --list-different \"src/**/*.{ts,tsx}\"",
     "prettier:write": "npm run prettier:base -- --write \"src/**/*.{ts,tsx}\"",
@@ -77,8 +77,9 @@
     "update-build:dev": "node ./scripts/updateBuild.cjs dev",
     "update-build:stage": "node ./scripts/updateBuild.cjs stage",
     "update-build:prod": "node ./scripts/updateBuild.cjs prod",
+    "typecheck": "tsc",
     "TODO - ADD TYPECHECK TO VERIFY: =========================": "",
-    "verify": "concurrently \"npm:lint:fix\""
+    "verify": "concurrently \"npm:lint\""
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -96,6 +97,8 @@
     ]
   },
   "devDependencies": {
+    "eslint": "8.55.0",
+    "eslint-plugin-react-refresh": "0.4.5",
     "@openzeppelin/test-helpers": "0.5.6",
     "@pinata/sdk": "1.1.13",
     "@tanstack/eslint-plugin-query": "5.0.5",

protocol-dashboard/src/App.tsx

@@ -1,35 +1,36 @@
+import { useEffect, useState } from 'react'
+
 import { ApolloProvider } from '@apollo/client'
+import { ThemeProvider as HarmonyThemeProvider } from '@audius/harmony'
 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 { Routes, Route, HashRouter } from 'react-router-dom'
-import { ThemeProvider as HarmonyThemeProvider } from '@audius/harmony'
 
 import Header from 'components/Header'
-import Home from 'containers/Home'
+import API from 'containers/API'
+import APILeaderboard from 'containers/APILeaderboard'
+import Analytics from 'containers/Analytics'
+import ContentNodes from 'containers/ContentNodes'
+import DiscoveryProviders from 'containers/DiscoveryProviders'
 import Governance from 'containers/Governance'
-import Services from 'containers/Services'
+import Home from 'containers/Home'
 import Node from 'containers/Node'
-import User from 'containers/User'
-import DiscoveryProviders from 'containers/DiscoveryProviders'
-import ContentNodes from 'containers/ContentNodes'
+import NotFound from 'containers/NotFound'
+import Proposal from 'containers/Proposal'
 import ServiceOperators from 'containers/ServiceOperators'
 import ServiceUsers from 'containers/ServiceUsers'
-import Analytics from 'containers/Analytics'
-import API from 'containers/API'
-import APILeaderboard from 'containers/APILeaderboard'
+import Services from 'containers/Services'
+import UnregisteredNode from 'containers/UnregisteredNode'
+import User from 'containers/User'
+import { getDidGraphError } from 'store/api/hooks'
+import { createStyles } from 'utils/mobile'
 import * as routes from 'utils/routes'
 
-import { client, getBackupClient, createStore } from './store'
 import desktopStyles from './App.module.css'
 import mobileStyles from './AppMobile.module.css'
-import NotFound from 'containers/NotFound'
-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'
+import { client, getBackupClient, createStore } from './store'
 
 const styles = createStyles({ desktopStyles, mobileStyles })
 const store = createStore()
@@ -58,7 +59,7 @@ const App = () => {
   }, [didClientError])
   return (
     <ApolloProvider client={apolloClient}>
-      <HarmonyThemeProvider theme="dark">
+      <HarmonyThemeProvider theme='dark'>
         <HashRouter>
           <RouteHistoryProvider>
             <div className={styles.appContainer}>
@@ -118,7 +119,7 @@ const App = () => {
                     path={routes.API_LEADERBOARD}
                     element={<APILeaderboard />}
                   />
-                  <Route path="*" element={<NotFound />} />
+                  <Route path='*' element={<NotFound />} />
                 </Routes>
               </div>
             </div>

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

@@ -1,35 +1,35 @@
-import { IconLink } from '@audius/stems'
-import Logo from 'assets/img/audiusLogoHorizontal.svg?react'
-import BN from 'bn.js'
-import clsx from 'clsx'
-import Button from 'components/Button'
-import { ConnectAudiusProfileModal } from 'components/ConnectAudiusProfileModal/ConnectAudiusProfileModal'
-import ConnectMetaMaskModal from 'components/ConnectMetaMaskModal'
-import UserImage from 'components/UserImage'
-import UserBadges from 'components/UserInfo/AudiusProfileBadges'
-import { useDashboardWalletUser } from 'hooks/useDashboardWalletUsers'
 import React, {
   ReactNode,
   useCallback,
   useEffect,
   useRef,
   useState
 } from 'react'
+
+import { IconLink } from '@audius/stems'
+import clsx from 'clsx'
 import { useLocation } from 'react-router-dom'
+
+import Logo from 'assets/img/audiusLogoHorizontal.svg?react'
+import Button from 'components/Button'
+import { ConnectAudiusProfileModal } from 'components/ConnectAudiusProfileModal/ConnectAudiusProfileModal'
+import ConnectMetaMaskModal from 'components/ConnectMetaMaskModal'
+import UserImage from 'components/UserImage'
+import UserBadges from 'components/UserInfo/AudiusProfileBadges'
+import { useDashboardWalletUser } from 'hooks/useDashboardWalletUsers'
 import { useAccount } from 'store/account/hooks'
 import { useEthBlockNumber } from 'store/cache/protocol/hooks'
 import { useUser } from 'store/cache/user/hooks'
 import { Address, Status } from 'types'
-import getActiveStake from 'utils/activeStake'
 import { usePushRoute } from 'utils/effects'
 import { formatShortWallet } from 'utils/format'
 import { useIsMobile, useModalControls } from 'utils/hooks'
 import { createStyles } from 'utils/mobile'
 import { accountPage, isCryptoPage } from 'utils/routes'
+
 import desktopStyles from './AppBar.module.css'
 import mobileStyles from './AppBarMobile.module.css'
 
-const env = import.meta.env.VITE_ENVIRONMENT
 const styles = createStyles({ desktopStyles, mobileStyles })
 
 const messages = {
@@ -92,7 +92,6 @@ const LoadingAccount = () => {
 
 const UserAccountSnippet = ({ wallet }: UserAccountSnippetProps) => {
   const { user, audiusProfile, status } = useUser({ wallet })
-  const activeStake = user ? getActiveStake(user) : new BN('0')
   const pushRoute = usePushRoute()
   const onClickUser = useCallback(() => {
     if (user) {
@@ -148,7 +147,7 @@ const ConnectAudiusProfileButton = ({ wallet }: { wallet: string }) => {
         iconClassName={styles.launchAppBtnIcon}
       />
       <ConnectAudiusProfileModal
-        action="connect"
+        action='connect'
         wallet={wallet}
         isOpen={isOpen}
         onClose={onClose}
@@ -164,15 +163,11 @@ const AppBar: React.FC<AppBarProps> = () => {
   const timeoutIdRef = useRef<NodeJS.Timeout>(null)
   const [isAudiusClientSetup, setIsAudiusClientSetup] = useState(false)
   const [isMisconfigured, setIsMisconfigured] = useState(false)
-  const [
-    isRetrievingAccountTimingOut,
-    setIsRetrievingAccountTimingOut
-  ] = useState(false)
+  const [isRetrievingAccountTimingOut, setIsRetrievingAccountTimingOut] =
+    useState(false)
   const [isAccountMisconfigured, setIsAccountMisconfigured] = useState(false)
-  const {
-    data: audiusProfileData,
-    status: audiusProfileDataStatus
-  } = useDashboardWalletUser(wallet)
+  const { data: audiusProfileData, status: audiusProfileDataStatus } =
+    useDashboardWalletUser(wallet)
   const hasConnectedAudiusAccount = audiusProfileData != null
   const ethBlock = useEthBlockNumber()
   const { pathname } = useLocation()
@@ -187,7 +182,7 @@ const AppBar: React.FC<AppBarProps> = () => {
 
     // This will hang forever if an extension is not picked (in the case where user has
     // both Phantom and MetaMask), hence the `retrievingAccountTimeOut` logic
-    const account = await window.aud.metaMaskAccountLoadedPromise
+    const ignoredAccount = await window.aud.metaMaskAccountLoadedPromise
     setIsAudiusClientSetup(true)
     setIsRetrievingAccountTimingOut(false)
     setIsMisconfigured(window.aud.isMisconfigured)
@@ -201,6 +196,7 @@ const AppBar: React.FC<AppBarProps> = () => {
         clearTimeout(timeoutIdRef.current)
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   let accountSnippetContent: ReactNode

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

@@ -1,13 +1,15 @@
 import React, { useCallback } from 'react'
+
 import { ButtonType } from '@audius/stems'
 
-import Modal from 'components/Modal'
-import Button from 'components/Button'
-import styles from './AudioRewardsModal.module.css'
 import apiLogo from 'assets/img/apiLogo.png'
+import Button from 'components/Button'
+import Modal from 'components/Modal'
 import useOpenLink from 'hooks/useOpenLink'
 import { AUDIUS_API_URL } from 'utils/routes'
 
+import styles from './AudioRewardsModal.module.css'
+
 const messages = {
   title: '$AUDIO REWARDS',
   apiLogo: 'Audius API Logo',

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

@@ -1,19 +1,21 @@
+import React from 'react'
+
 import clsx from 'clsx'
+import { HorizontalBar } from 'react-chartjs-2'
+
 import Dropdown from 'components/Dropdown'
+import Error from 'components/Error'
 import Loading from 'components/Loading'
 import Paper from 'components/Paper'
-import React from 'react'
-import { HorizontalBar } from 'react-chartjs-2'
+import { formatBucketText } from 'store/cache/analytics/hooks'
 import { formatShortNumber } from 'utils/format'
 // Custom draw fn
 import './draw'
+import { useIsMobile } from 'utils/hooks'
+import { createStyles } from 'utils/mobile'
 
 import desktopStyles from './BarChart.module.css'
 import mobileStyles from './BarChartMobile.module.css'
-import { createStyles } from 'utils/mobile'
-import { useIsMobile } from 'utils/hooks'
-import { formatBucketText } from 'store/cache/analytics/hooks'
-import Error from 'components/Error'
 
 const styles = createStyles({ desktopStyles, mobileStyles })
 
@@ -30,7 +32,7 @@ const colors = [
 ]
 
 const getData = (data: number[], isMobile: boolean) => ({
-  labels: data.map(d => formatShortNumber(d).toUpperCase()),
+  labels: data.map((d) => formatShortNumber(d).toUpperCase()),
   datasets: [
     {
       backgroundColor: colors,

protocol-dashboard/src/components/BarChart/draw.tsx

@@ -4,14 +4,14 @@
 // Stolen from
 // https://stackoverflow.com/questions/47186273/rounded-corners-on-chartjs-v-2-bar-charts-with-negative-values
 // @ts-ignore
-Chart.elements.Rectangle.prototype.draw = function() {
-  let ctx = this._chart.ctx
-  let vm = this._view
+Chart.elements.Rectangle.prototype.draw = function () {
+  const ctx = this._chart.ctx
+  const vm = this._view
   let left, right, top, bottom, signX, signY, borderSkipped, radius
   let borderWidth = vm.borderWidth
   // Set Radius Here
   // If radius is large enough to cause drawing errors a max radius is imposed
-  let cornerRadius = 2
+  const cornerRadius = 2
 
   if (!vm.horizontal) {
     // bar
@@ -37,15 +37,16 @@ Chart.elements.Rectangle.prototype.draw = function() {
   // adjust the sizes to fit if we're setting a stroke on the line
   if (borderWidth) {
     // borderWidth shold be less than bar width and bar height.
-    let barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom))
+    const barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom))
     borderWidth = borderWidth > barSize ? barSize : borderWidth
-    let halfStroke = borderWidth / 2
+    const halfStroke = borderWidth / 2
     // Adjust borderWidth when bar top position is near vm.base(zero).
-    let borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0)
-    let borderRight =
+    const borderLeft =
+      left + (borderSkipped !== 'left' ? halfStroke * signX : 0)
+    const borderRight =
       right + (borderSkipped !== 'right' ? -halfStroke * signX : 0)
-    let borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0)
-    let borderBottom =
+    const borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0)
+    const borderBottom =
       bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0)
     // not become a vertical line?
     if (borderLeft !== borderRight) {
@@ -67,15 +68,15 @@ Chart.elements.Rectangle.prototype.draw = function() {
   // Corner points, from bottom-left to bottom-right clockwise
   // | 1 2 |
   // | 0 3 |
-  let corners = [
+  const corners = [
     [left, bottom],
     [left, top],
     [right, top],
     [right, bottom]
   ]
 
   // Find first (starting) corner with fallback to 'bottom'
-  let borders = ['bottom', 'left', 'top', 'right']
+  const borders = ['bottom', 'left', 'top', 'right']
   let startCorner = borders.indexOf(borderSkipped, 0)
   if (startCorner === -1) {
     startCorner = 0
@@ -159,7 +160,7 @@ Chart.elements.Rectangle.prototype.draw = function() {
       ctx.lineTo(x_bl, y_bl - radius)
       ctx.quadraticCurveTo(x_bl, y_bl, x_bl + radius, y_bl)
     } else {
-      //Positive Value
+      // Positive Value
       ctx.moveTo(x + radius, y)
       ctx.lineTo(x + width - radius, y)
       ctx.quadraticCurveTo(x + width, y, x + width, y + radius)

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

@@ -1,10 +1,11 @@
 import React, { ReactNode } from 'react'
 
-import Paper from 'components/Paper'
-import styles from './Bounds.module.css'
-import { Address } from 'types'
 import DisplayAudio from 'components/DisplayAudio'
+import Paper from 'components/Paper'
 import { useUser } from 'store/cache/user/hooks'
+import { Address } from 'types'
+
+import styles from './Bounds.module.css'
 
 const messages = {
   minimumTotalStake: 'Min Allowed Stake',

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

@@ -1,13 +1,14 @@
 import React from 'react'
-import clsx from 'clsx'
-import styles from './Button.module.css'
 
 import {
   Button as StemButton,
   ButtonSize as StemButtonSize,
   ButtonProps as StemsButtonProps,
   ButtonType as StemsButtonType
 } from '@audius/stems'
+import clsx from 'clsx'
+
+import styles from './Button.module.css'
 
 export enum CustomButtonType {
   RED = 'RED',

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

@@ -1,6 +1,7 @@
-import cn from 'classnames'
 import { PropsWithChildren, ReactNode } from 'react'
 
+import cn from 'classnames'
+
 import styles from './CallToActionBanner.module.css'
 
 export type CallToActionBannerProps = PropsWithChildren<{
@@ -29,8 +30,8 @@ export const CallToActionBanner = ({
       <a
         className={cn(styles.ctaBanner)}
         href={href}
-        rel="noreferrer"
-        target="_blank"
+        rel='noreferrer'
+        target='_blank'
       >
         <div className={styles.content}>
           <Pill>{pillText}</Pill>