Add import and style sorting config + capabilities.

Makefile

@@ -43,7 +43,7 @@ check:
 # Performs code formatting for the webapp files and contracts in their respective directories.
 format:
 	cd packages/webapp && make format
-	cd packages/contract && make format
+	cd packages/contracts && make format
 .PHONY: format
 
 # ==================================================================================================

packages/webapp/.eslintrc.cjs

@@ -1,32 +1,65 @@
 /** @type {import("eslint").Linter.Config} */
 const config = {
-	extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
-	parser: "@typescript-eslint/parser",
-	parserOptions: {
-		project: "./tsconfig.json",
-	},
-	plugins: ["@typescript-eslint"],
-	root: true,
-	ignorePatterns: ["node_modules", "src/hooks/useScrollBox.ts"],
-	rules: {
-		"@typescript-eslint/no-unsafe-argument": "off",
-		"@typescript-eslint/restrict-template-expressions": "off",
-		"react/no-unescaped-entities": "off",
-		"@typescript-eslint/no-empty-function": "off",
-		"@typescript-eslint/no-explicit-any": "off",
-		"@typescript-eslint/ban-ts-comment": "off",
+    extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        project: "./tsconfig.json",
+        sourceType: "module",
+        ecmaVersion: "latest",
+    },
+    plugins: ["@typescript-eslint", "simple-import-sort"],
+    root: true,
+    ignorePatterns: ["node_modules", "src/generated.ts"],
+    rules: {
+        "@typescript-eslint/no-unsafe-argument": "off",
+        "@typescript-eslint/restrict-template-expressions": "off",
+        "react/no-unescaped-entities": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "no-restricted-imports": "off",
+        "@typescript-eslint/no-restricted-imports": [
+            "error",
+            {
+                patterns: ["./*", "../*"],
+            },
+        ],
 
-		"no-unused-vars": "off",
-		"@typescript-eslint/no-unused-vars": [
-			"warn",
-			{
-				// ignore unused args that start with underscore
-				argsIgnorePattern: "^_",
-				varsIgnorePattern: "^_",
-				caughtErrorsIgnorePattern: "^_",
-			},
-		],
-	},
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": [
+            "warn",
+            {
+                // ignore unused args that start with underscore
+                argsIgnorePattern: "^_",
+                varsIgnorePattern: "^_",
+                caughtErrorsIgnorePattern: "^_",
+            },
+        ],
+        "import/first": "error",
+        "import/newline-after-import": "error",
+        "import/no-duplicates": "error",
+        "simple-import-sort/imports": [
+            "error",
+            {
+                groups: [
+                    // Packages. `react` related packages come first.
+                    ["^react", "^next"],
+                    // External packages.
+                    ["^@?\\w"],
+                    // Custom group for src/ prefixed imports
+                    ["^src/"],
+                    // Parent imports. Put `..` last.
+                    ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+                    // Other relative imports. Put same-folder imports and `.` last.
+                    ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+                    // Style imports.
+                    ["^.+\\.s?css$"],
+                    // Side effect imports.
+                    ["^\\u0000"],
+                ],
+            },
+        ],
+    },
 }
 
 module.exports = config

packages/webapp/.prettierrc.json

@@ -4,5 +4,6 @@
     "singleQuote": false,
     "tabWidth": 4,
     "useTabs": false,
-    "printWidth": 120
+    "printWidth": 120,
+    "plugins": ["prettier-plugin-tailwindcss"]
 }

packages/webapp/.vscode/settings.json

@@ -1,4 +1,8 @@
 {
     "javascript.validate.enable": false,
-    "typescript.validate.enable": false
+    "typescript.validate.enable": false,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    },
+    "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
 }

packages/webapp/Makefile

@@ -26,11 +26,12 @@ lint:
 
 # Runs code quality checks.
 check: 
-	pnpm eslint .
+	make lint
 	pnpm prettier --check "src/**/*.{js,jsx,ts,tsx,json,css}"
 .PHONY: check
 
 # Runs prettier formatting across webapp files with specified file extensions.
 format: 
-	pnpm prettier --write "**/*.{js,jsx,ts,tsx,json,css}"
+	pnpm eslint . --fix
+	pnpm prettier --write "**/*.{js,jsx,ts,tsx,json,css,cjs,mjs}"
 .PHONY: format

packages/webapp/next.config.mjs

@@ -9,57 +9,57 @@ const require = createRequire(import.meta.url)
 
 /** @type {import("next").NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+    reactStrictMode: true,
 
-  /**
-   * If you have the "experimental: { appDir: true }" setting enabled, then you
-   * must comment the below `i18n` config out.
-   *
-   * @see https://github.com/vercel/next.js/issues/41980
-   */
-  i18n: {
-    locales: ["en"],
-    defaultLocale: "en",
-  },
-  eslint: {
-    // Warning: This allows production builds to successfully complete even if
-    // your project has ESLint errors.
-    ignoreDuringBuilds: true,
-  },
-  experimental: {
-    // Currently broken in Next 13.3.0: https://github.com/pmndrs/swc-jotai/issues/6
-    // Unlike what is suggested, also broken when I downgrade to Next 13.2.3 and Next 13.1.6.
-    swcPlugins: [
-      // ['@swc-jotai/react-refresh', {}],
-      // ["@swc-jotai/debug-label", {}]
-    ]
-  },
-  webpack(config, { dev, isServer }) {
-    // prevent node-gyp from failing because "can't resolve fs"
-    config.resolve.fallback = {
-      ...config.resolve.fallback,
-      fs: false,
-      net: false,
-      tls: false,
-      readline: false
-    }
+    /**
+     * If you have the "experimental: { appDir: true }" setting enabled, then you
+     * must comment the below `i18n` config out.
+     *
+     * @see https://github.com/vercel/next.js/issues/41980
+     */
+    i18n: {
+        locales: ["en"],
+        defaultLocale: "en",
+    },
+    eslint: {
+        // Warning: This allows production builds to successfully complete even if
+        // your project has ESLint errors.
+        ignoreDuringBuilds: true,
+    },
+    experimental: {
+        // Currently broken in Next 13.3.0: https://github.com/pmndrs/swc-jotai/issues/6
+        // Unlike what is suggested, also broken when I downgrade to Next 13.2.3 and Next 13.1.6.
+        swcPlugins: [
+            // ['@swc-jotai/react-refresh', {}],
+            // ["@swc-jotai/debug-label", {}]
+        ],
+    },
+    webpack(config, { dev, isServer }) {
+        // prevent node-gyp from failing because "can't resolve fs"
+        config.resolve.fallback = {
+            ...config.resolve.fallback,
+            fs: false,
+            net: false,
+            tls: false,
+            readline: false,
+        }
 
-    config.experiments = {
-      ...config.experiments,
-      topLevelAwait: true // enable await at top-level in modules
-    }
+        config.experiments = {
+            ...config.experiments,
+            topLevelAwait: true, // enable await at top-level in modules
+        }
 
-    // This would be great, but is sadly disallowed by Next, because they hate freedom.
-    // https://nextjs.org/docs/messages/improper-devtool
-    // Having this would enable parsing hook names in the React DevTools.
-    // config.devtool = "cheap-module-source-map"
-    return config
-  },
-  // This hack makes it possible to use the Jotai devtools
-  // Sources:
-  //   https://github.com/jotaijs/jotai-devtools/issues/47
-  //   https://github.com/martpie/next-transpile-modules/releases/tag/the-end
-  transpilePackages: ['jotai-devtools']
+        // This would be great, but is sadly disallowed by Next, because they hate freedom.
+        // https://nextjs.org/docs/messages/improper-devtool
+        // Having this would enable parsing hook names in the React DevTools.
+        // config.devtool = "cheap-module-source-map"
+        return config
+    },
+    // This hack makes it possible to use the Jotai devtools
+    // Sources:
+    //   https://github.com/jotaijs/jotai-devtools/issues/47
+    //   https://github.com/martpie/next-transpile-modules/releases/tag/the-end
+    transpilePackages: ["jotai-devtools"],
 }
 
 // // This hack makes it possible to use the Jotai devtools
@@ -68,4 +68,4 @@ const nextConfig = {
 //   "jotai-devtools",
 // ])
 // export default withTranspileModules(nextConfig)
-export default nextConfig
+export default nextConfig

packages/webapp/package.json

@@ -19,14 +19,14 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "connectkit": "^1.5.3",
-        "eslint-config-prettier": "^9.1.0",
         "jotai": "^2.4.3",
         "jotai-devtools": "^0.7.0",
         "lodash": "^4.17.21",
         "lucide-react": "^0.309.0",
         "next": "^13.5.6",
         "next-themes": "^0.2.1",
         "next-transpile-modules": "^10.0.1",
+        "prettier": "^3.2.5",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-icons": "^4.11.0",
@@ -52,8 +52,11 @@
         "autoprefixer": "^10.4.16",
         "eslint": "^8.52.0",
         "eslint-config-next": "^13.5.6",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-simple-import-sort": "^12.0.0",
         "postcss": "^8.4.31",
-        "prettier": "2.8.8",
+        "prettier-plugin-tailwindcss": "^0.5.11",
         "tailwindcss": "^3.3.3",
         "typescript": "^5.2.2"
     }

packages/webapp/postcss.config.cjs

@@ -1,8 +1,8 @@
 const config = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
 }
 
-module.exports = config
+module.exports = config

packages/webapp/postcss.config.mjs

@@ -1,6 +1,6 @@
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
 }

packages/webapp/src/actions/concede.ts

@@ -1,9 +1,9 @@
 import { defaultErrorHandling } from "src/actions/errors"
-import { checkFresh, freshWrap } from "src/store/checkFresh"
 import { contractWriteThrowing } from "src/actions/libContractWrite"
 import { Address } from "src/chain"
 import { deployment } from "src/deployment"
 import { gameABI } from "src/generated"
+import { checkFresh, freshWrap } from "src/store/checkFresh"
 
 // =================================================================================================
 

packages/webapp/src/actions/defend.ts

@@ -1,9 +1,9 @@
 import { defaultErrorHandling } from "src/actions/errors"
-import { checkFresh, freshWrap } from "src/store/checkFresh"
 import { contractWriteThrowing } from "src/actions/libContractWrite"
 import { Address } from "src/chain"
 import { deployment } from "src/deployment"
 import { gameABI } from "src/generated"
+import { checkFresh, freshWrap } from "src/store/checkFresh"
 
 // =================================================================================================
 

packages/webapp/src/actions/drawCard.ts

@@ -8,10 +8,12 @@
 import { defaultErrorHandling } from "src/actions/errors"
 import { contractWriteThrowing } from "src/actions/libContractWrite"
 import { Address, type HexString } from "src/chain"
+import { CancellationHandler } from "src/components/modals/loadingModal"
+import { DRAW_CARD_PROOF_TIMEOUT } from "src/constants"
 import { deployment } from "src/deployment"
 import { packCards } from "src/game/fableProofs"
 import { gameABI } from "src/generated"
-import { getOrInitPrivateInfo, setPrivateInfo } from "src/store/write"
+import { checkFresh, freshWrap } from "src/store/checkFresh"
 import {
     getCards,
     getCurrentPlayerAddress,
@@ -21,12 +23,10 @@ import {
     getPlayerAddress,
 } from "src/store/read"
 import { GameStep, PrivateInfo } from "src/store/types"
-import { FAKE_PROOF, proveInWorker, SHOULD_GENERATE_PROOFS } from "src/utils/zkproofs"
-import { bigintToHexString } from "src/utils/js-utils"
+import { getOrInitPrivateInfo, setPrivateInfo } from "src/store/write"
 import { mimcHash } from "src/utils/hashing"
-import { DRAW_CARD_PROOF_TIMEOUT } from "src/constants"
-import { CancellationHandler } from "src/components/modals/loadingModal"
-import { checkFresh, freshWrap } from "src/store/checkFresh"
+import { bigintToHexString } from "src/utils/js-utils"
+import { FAKE_PROOF, proveInWorker, SHOULD_GENERATE_PROOFS } from "src/utils/zkproofs"
 
 // =================================================================================================
 

packages/webapp/src/actions/endTurn.ts

@@ -10,9 +10,9 @@ import { contractWriteThrowing } from "src/actions/libContractWrite"
 import { Address } from "src/chain"
 import { deployment } from "src/deployment"
 import { gameABI } from "src/generated"
+import { checkFresh, freshWrap } from "src/store/checkFresh"
 import { getCurrentPlayerAddress, getGameData, getGameID, getPlayerAddress } from "src/store/read"
 import { GameStep } from "src/store/types"
-import { checkFresh, freshWrap } from "src/store/checkFresh"
 
 // =================================================================================================
 

packages/webapp/src/actions/errors.ts

@@ -12,9 +12,8 @@ import { ContractFunctionRevertedError, UserRejectedRequestError } from "viem"
 
 import { ContractWriteError } from "src/actions/libContractWrite"
 import { GIT_ISSUES } from "src/constants"
-import { setError } from "src/store/write"
-
 import { StaleError } from "src/store/checkFresh"
+import { setError } from "src/store/write"
 import { TimeoutError } from "src/utils/errors"
 import { ProofCancelled, ProofError, ProofTimeoutError } from "src/utils/zkproofs/proofs"