chore: housekeeping, DX, and linting

.eslintrc.json

@@ -5,10 +5,12 @@
 		"next/core-web-vitals",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
+		"plugin:import/recommended",
+    "plugin:import/typescript",
     "prettier", // Disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier.
     "plugin:prettier/recommended" // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always used last.
   ],
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["prettier", "import", "simple-import-sort", "@typescript-eslint"],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module",
@@ -20,7 +22,15 @@
     "@typescript-eslint/ban-ts-comment": "off",
 		"@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-var-requires": "off",
-    "react/react-in-jsx-scope": "off" // Next.js includes it by default
+    "react/react-in-jsx-scope": "off", // Next.js includes it by default
+		"prettier/prettier": "warn",
+		"import/first": "error",
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error",
+    "import/no-named-as-default": "error",
+    "import/no-unresolved": "warn",
+		"simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "warn"
   },
 	"overrides": [
 		// Turn off prop type errors for Next.js pages, due to complexity with TS

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit "${1}"

commitlint.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+	// See https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional
+	extends: ['@commitlint/config-conventional'],
+}

components/AppFooter.tsx

@@ -3,6 +3,7 @@ import _debounce from 'lodash/debounce'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
+
 import DiscordIconSvg from '../public/discord_circle_black.svg'
 import GithubIconSvg from '../public/github_circle_black.svg'
 import TwitterIconSvg from '../public/twitter_circle_black.svg'

components/AppHeader.tsx

@@ -2,6 +2,7 @@ import MenuIcon from '@mui/icons-material/Menu'
 import { AppBar, Box, Button, Chip, Container, IconButton, Menu, MenuItem, Toolbar, Typography } from '@mui/material'
 import Link from 'next/link'
 import { useState } from 'react'
+
 import styles from './AppHeader.styles'
 import ConnectedAccount from './ConnectedAccount'
 

components/AppLayout.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+
 import AppFooter from './AppFooter'
 import AppHeader from './AppHeader'
 

components/ConnectedAccount.tsx

@@ -1,6 +1,7 @@
 import { Avatar, Box, Button, IconButton, Menu, MenuItem, Typography } from '@mui/material'
 import Link from 'next/link'
 import { useState } from 'react'
+
 import formatAddress from '../utils/formatAddress'
 import styles from './ConnectedAccount.styles'
 import { useWeb3 } from './Web3Provider'

components/CovalentInsights.tsx

@@ -3,6 +3,7 @@ import { Box, Button, Grid, Paper, Typography } from '@mui/material'
 import Link from 'next/link'
 import PropTypes from 'prop-types'
 import web3 from 'web3'
+
 import { NFT_CONTRACT_ADDRESS } from '../constants/contracts'
 import { NETWORK_CURRENCY, NETWORK_EXPLORER } from '../constants/networks'
 import formatAddress from '../utils/formatAddress'

components/ListNftDialog.tsx

@@ -14,6 +14,7 @@ import {
 import PropTypes from 'prop-types'
 import { useState } from 'react'
 import web3 from 'web3'
+
 import { NETWORK_CURRENCY } from '../constants/networks'
 import { update } from '../utils/http'
 import Notification from './Notification'

components/NFTCard.tsx

@@ -1,6 +1,7 @@
 import QueueMusicIcon from '@mui/icons-material/QueueMusic'
 import { Box, Button, Card, CardActions, CardContent, CardMedia, Chip, IconButton, Typography } from '@mui/material'
 import Link from 'next/link'
+
 import { NETWORK_CURRENCY } from '../constants/networks'
 import OneIcon from '../public/harmony_icon.svg'
 import formatAddress from '../utils/formatAddress'

components/ProjectCard.tsx

@@ -1,6 +1,7 @@
 import QueueMusicIcon from '@mui/icons-material/QueueMusic'
 import { Box, Button, Card, CardActions, CardContent, Chip, Typography } from '@mui/material'
 import Link from 'next/link'
+
 import type { IProjectDoc } from '../models/project.model'
 import styles from './ProjectCard.styles'
 

components/ProjectDetails/ProjectDetails.container.tsx

@@ -1,5 +1,6 @@
 import { Box, Tab, Tabs } from '@mui/material'
 import { ReactNode, SyntheticEvent, useEffect, useState } from 'react'
+
 import Notification from '../../components/Notification'
 import ProjectDetails from '../../components/ProjectDetails/ProjectDetails'
 import StemQueue from '../../components/StemQueue/StemQueue'

components/ProjectDetails/ProjectDetails.tsx

@@ -26,6 +26,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { Fragment, useState } from 'react'
 import web3 from 'web3'
+
 import ImageOptimized from '../../components/ImageOptimized'
 import Notification from '../../components/Notification'
 import StemUploadDialog from '../../components/StemUploadDialog'

components/StemCard.tsx

@@ -2,6 +2,7 @@ import AudioFileIcon from '@mui/icons-material/AudioFile'
 import { Box, Button, Card, CardActions, CardContent, Typography } from '@mui/material'
 import Link from 'next/link'
 import PropTypes from 'prop-types'
+
 import formatAddress from '../utils/formatAddress'
 import formatStemName from '../utils/formatStemName'
 import styles from './StemCard.styles'

components/StemDropzone.tsx

@@ -2,6 +2,7 @@ import { Check, CloudUpload } from '@mui/icons-material'
 import { Box, Typography } from '@mui/material'
 import { useMemo } from 'react'
 import { useDropzone } from 'react-dropzone'
+
 import styles from './StemDropzone.styles'
 
 const baseStyle = {

components/StemPlayer.tsx

@@ -3,6 +3,7 @@ import { Box, Button, ButtonGroup, Grid, Typography } from '@mui/material'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import WaveSurfer from 'wavesurfer.js'
+
 import type { IStemDoc } from '../models/stem.model'
 import formatAddress from '../utils/formatAddress'
 import formatStemName from '../utils/formatStemName'

components/StemQueue/StemQueue.tsx

@@ -4,6 +4,7 @@ import { Strategy, ZkIdentity } from '@zk-kit/identity'
 import { utils } from 'ethers'
 import dynamic from 'next/dynamic'
 import { useState } from 'react'
+
 import type { IProjectDoc } from '../../models/project.model'
 import { IStemDoc } from '../../models/stem.model'
 import { IUserIdentity } from '../../models/user.model'
@@ -16,6 +17,7 @@ import styles from './StemQueue.styles'
 const StemPlayer = dynamic(() => import('../StemPlayer'), { ssr: false })
 const generateMerkleProof = require('@zk-kit/protocols').generateMerkleProof
 const Semaphore = require('@zk-kit/protocols').Semaphore
+
 const IDENTITY_MSG =
 	"Sign this message to register for this Arbor project's anonymous voting group. You are signing to create your anonymous identity with Semaphore."
 

components/StemUploadDialog.tsx

@@ -20,6 +20,7 @@ import {
 	Typography,
 } from '@mui/material'
 import { useState } from 'react'
+
 import logoBinary from '../lib/logoBinary'
 import type { IProjectDoc } from '../models/project.model'
 import { post, update } from '../utils/http'

components/Web3Fallback.tsx

@@ -12,6 +12,7 @@ import {
 } from '@mui/material'
 import NextLink from 'next/link'
 import PropTypes from 'prop-types'
+
 import CoinbaseIcon from '../public/coinbasewallet_icon.png'
 import EthereumIcon from '../public/ethereum_icon.png'
 import MetaMaskIcon from '../public/metamask_icon.png'

components/Web3Provider.onboard.tsx

@@ -7,6 +7,7 @@ import { Contract } from 'ethers'
 import type { NFTStorage } from 'nft.storage'
 import type { ReactNode } from 'react'
 import { createContext, useContext, useState } from 'react'
+
 import { collectionsContract, stemQueueContract } from '../constants/contracts'
 import { NETWORK_HEX, NETWORK_NAME } from '../constants/networks'
 import type { IUserDoc } from '../models/user.model'

components/Web3Provider.tsx

@@ -3,6 +3,7 @@ import { Contract, providers } from 'ethers'
 import type { NFTStorage } from 'nft.storage'
 import type { ReactNode } from 'react'
 import { createContext, useContext, useState } from 'react'
+
 import { collectionsContract, stemQueueContract } from '../constants/contracts'
 import { NETWORK_CURRENCY, NETWORK_EXPLORER, NETWORK_HEX, NETWORK_NAME, NETWORK_RPC } from '../constants/networks'
 import type { IUserDoc } from '../models/user.model'

next.config.js

@@ -1,4 +1,10 @@
 /** @type {import('next').NextConfig} */
+
+// eslint-disable-next-line
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+	enabled: process.env.ANALYZE === 'true',
+})
+
 const nextConfig = {
 	reactStrictMode: true,
 	env: {
@@ -40,4 +46,4 @@ const nextConfig = {
 	},
 }
 
-module.exports = nextConfig
+module.exports = withBundleAnalyzer(nextConfig)

package.json

@@ -6,9 +6,10 @@
     "dev": "next dev",
     "stage": "NODE_ENV=test next build && next start",
     "build": "next build",
+    "build:analyze": "ANALYZE=true yarn build",
     "start": "next start",
     "test": "echo \"No tests to run\"",
-		"lint:code": "next lint",
+    "lint:code": "next lint",
     "lint:code:fix": "next lint --fix",
     "lint:formatting": "prettier . --check",
     "lint:formatting:fix": "prettier . --write",
@@ -19,13 +20,21 @@
     "circuits:test": "cd circuits && jest ./tests/*.test.ts",
     "hardhat:node": "cd web3 && hardhat node",
     "contracts:compile": "cd web3 && hardhat compile",
-		"contracts:clearDestDir": "rm -rf contracts/*",
+    "contracts:clearDestDir": "rm -rf contracts/*",
     "contracts:copyArtifacts": "cp web3/artifacts/contracts/ArborAudioCollections.sol/ArborAudioCollections.json web3/artifacts/contracts/StemQueue.sol/StemQueue.json contracts/",
-		"contracts:recompile": "yarn contracts:compile && yarn contracts:clearDestDir && yarn contracts:copyArtifacts",
+    "contracts:recompile": "yarn contracts:compile && yarn contracts:clearDestDir && yarn contracts:copyArtifacts",
     "contracts:deploy": "cd web3 && hardhat deploy",
     "contracts:test": "cd web3 && hardhat test",
     "report-gas": "REPORT_GAS=true hardhat test"
   },
+  "engines": {
+    "node": ">=16"
+  },
+  "nextBundleAnalysis": {
+    "budget": null,
+    "budgetPercentIncreaseRed": 20,
+    "showDetails": true
+  },
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
@@ -66,6 +75,9 @@
     "web3": "^1.7.4"
   },
   "devDependencies": {
+    "@commitlint/cli": "^17.2.0",
+    "@commitlint/config-conventional": "^17.2.0",
+    "@next/bundle-analyzer": "^13.0.1",
     "@nomiclabs/hardhat-ethers": "^2.0.6",
     "@nomiclabs/hardhat-waffle": "^2.0.3",
     "@semaphore-protocol/contracts": "^2.0.0",
@@ -83,7 +95,9 @@
     "eslint": "^8.16.0",
     "eslint-config-next": "^12.3.1",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
     "ethereum-waffle": "^3.4.4",
     "hardhat": "^2.9.9",
     "hardhat-dependency-compiler": "^1.1.3",

pages/_app.tsx

@@ -1,9 +1,11 @@
+import '../styles/globals.css'
+
 import type { AppProps } from 'next/app'
 import NextNProgress from 'nextjs-progressbar'
+
 import AppLayout from '../components/AppLayout'
 import ArborThemeProvider from '../components/ArborThemeProvider'
 import { Web3Provider } from '../components/Web3Provider'
-import '../styles/globals.css'
 
 // Allow New Relic APM
 require('../newrelic')

pages/api/nfts/[id].ts

@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
+
 import { INftDoc, Nft } from '../../../models/nft.model'
 import dbConnect from '../../../utils/db'
 import { update } from '../../../utils/http'

pages/api/nfts/index.ts

@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
+
 import { INft, INftDoc, Nft } from '../../../models/nft.model'
 import dbConnect from '../../../utils/db'
 import { update } from '../../../utils/http'

pages/api/projects/[id].ts

@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
+
 import { IProjectDoc, Project } from '../../../models/project.model'
 import dbConnect from '../../../utils/db'
 

pages/api/projects/index.ts

@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
+
 import { IProject, IProjectDoc, Project } from '../../../models/project.model'
 import dbConnect from '../../../utils/db'
 import { update } from '../../../utils/http'

pages/api/stems/[id].ts

@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
+
 import { IStemDoc, Stem } from '../../../models/stem.model'
 import dbConnect from '../../../utils/db'
 

pages/api/stems/index.ts

@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
+
 import type { IStemDoc } from '../../../models/stem.model'
 import { Stem } from '../../../models/stem.model'
 import dbConnect from '../../../utils/db'

pages/api/users/[id].ts

@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
+
 import type { IUser } from '../../../models/user.model'
 import { User } from '../../../models/user.model'
 import dbConnect from '../../../utils/db'

pages/api/users/index.ts

@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
+
 import { IUser, User } from '../../../models/user.model'
 import dbConnect from '../../../utils/db'
 

pages/api/voting-groups.ts

@@ -1,4 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
+
 import type { IVotingGroupDoc } from '../../models/votingGroup.model'
 import { VotingGroup } from '../../models/votingGroup.model'
 import dbConnect from '../../utils/db'

pages/index.tsx

@@ -3,6 +3,7 @@ import { Box, Button, Container, Grid, List, ListItem, ListItemIcon, Typography
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import Link from 'next/link'
+
 import styles from '../styles/Home.styles'
 
 const Home: NextPage = () => {

pages/nfts/[id].tsx

@@ -7,6 +7,7 @@ import { useRouter } from 'next/router'
 import PropTypes from 'prop-types'
 import { useState } from 'react'
 import web3 from 'web3'
+
 import ImageOptimized from '../../components/ImageOptimized'
 import ListNftDialog from '../../components/ListNftDialog'
 import Notification from '../../components/Notification'

pages/nfts/index.tsx

@@ -2,6 +2,7 @@ import { Box, Container, Grid, Typography } from '@mui/material'
 import type { GetServerSideProps, NextPage } from 'next'
 import Head from 'next/head'
 import PropTypes from 'prop-types'
+
 import NFTCard from '../../components/NFTCard'
 import type { INftDoc } from '../../models/nft.model'
 import { indexStyles as styles } from '../../styles/Stems.styles'

pages/projects/[id].tsx

@@ -1,6 +1,7 @@
 import { Container } from '@mui/material'
 import type { GetServerSideProps, NextPage } from 'next'
 import Head from 'next/head'
+
 import ProjectDetailsContainer from '../../components/ProjectDetails/ProjectDetails.container'
 import type { IProjectDoc } from '../../models/project.model'
 import { get } from '../../utils/http'

pages/projects/index.tsx

@@ -3,6 +3,7 @@ import type { GetServerSideProps, NextPage } from 'next'
 import Head from 'next/head'
 import Link from 'next/link'
 import PropTypes from 'prop-types'
+
 import ProjectCard from '../../components/ProjectCard'
 import { IProjectDoc } from '../../models/project.model'
 import { indexStyles as styles } from '../../styles/Projects.styles'

pages/projects/new.tsx

@@ -3,6 +3,7 @@ import type { NextPage } from 'next'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
+
 import Notification from '../../components/Notification'
 import TagsInput from '../../components/TagsInput'
 import { useWeb3 } from '../../components/Web3Provider'

pages/stats/index.tsx

@@ -3,6 +3,7 @@ import type { GetServerSideProps, NextPage } from 'next'
 import Head from 'next/head'
 import Link from 'next/link'
 import PropTypes from 'prop-types'
+
 import CovalentInsights from '../../components/CovalentInsights'
 import { NFT_CONTRACT_ADDRESS } from '../../constants/contracts'
 import { NETWORK_EXPLORER, NETWORK_ID, NETWORK_NAME } from '../../constants/networks'