fix: run eslint imports sort on webapp files

packages/webapp/.eslintrc.cjs

@@ -3,9 +3,11 @@ const config = {
 	extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
 	parser: "@typescript-eslint/parser",
 	parserOptions: {
-		project: "./tsconfig.json",
-	},
-	plugins: ["@typescript-eslint"],
+    project: "./tsconfig.json",
+		"sourceType": "module",
+    "ecmaVersion": "latest",
+  },
+	plugins: ["@typescript-eslint", "simple-import-sort"],
 	root: true,
 	ignorePatterns: ["node_modules", "src/hooks/useScrollBox.ts"],
 	rules: {
@@ -26,6 +28,31 @@ const config = {
 				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",
+					],
+					// Internal packages.
+					["^@?\\w"],
+					// Parent imports. Put `..` last.
+					["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+					// Other relative imports. Put same-folder imports and `.` last.
+					["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+					// Style imports.
+					["^.+\\.s?css$"],
+					// Side effect imports.
+					["^\\u0000"]
+				]
+			}
+		]
 	},
 }
 

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/package.json

@@ -19,7 +19,6 @@
         "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",
@@ -52,6 +51,9 @@
         "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-plugin-tailwindcss": "^0.5.11",
         "tailwindcss": "^3.3.3",

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

@@ -8,15 +8,13 @@
  * @module actions/errors
  */
 
-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"
+import { ContractFunctionRevertedError, UserRejectedRequestError } from "viem"
 
 // =================================================================================================
 // ERRORS

packages/webapp/src/actions/joinGame.ts

@@ -5,16 +5,18 @@
  * @module action/joinGame
  */
 
-import { decodeEventLog } from "viem"
-
 import { defaultErrorHandling, FableRequestTimeout, InconsistentGameStateError } from "src/actions/errors"
 import { contractWriteThrowing } from "src/actions/libContractWrite"
 import { Address } from "src/chain"
+import { CancellationHandler } from "src/components/modals/loadingModal"
+import { DRAW_HAND_PROOF_TIMEOUT } from "src/constants"
 import { deployment } from "src/deployment"
+import { NUM_CARDS_FOR_PROOF } from "src/game/constants"
 import { drawInitialHand } from "src/game/drawInitialHand"
+import { packCards } from "src/game/fableProofs"
 import { gameABI } from "src/generated"
-import { waitForUpdate } from "src/store/update"
-import { getOrInitPrivateInfo, setGameID, setPrivateInfo } from "src/store/write"
+import { checkFresh, freshWrap } from "src/store/checkFresh"
+import { getPlayerHand } from "src/store/derive"
 import {
     getCards,
     getDeck,
@@ -26,13 +28,10 @@ import {
     isGameReadyToStart,
 } from "src/store/read"
 import { FetchedGameData, GameStatus, PlayerData, PrivateInfo } from "src/store/types"
-import { SHOULD_GENERATE_PROOFS, FAKE_PROOF, ProofOutput, proveInWorker } from "src/utils/zkproofs"
-import { NUM_CARDS_FOR_PROOF } from "src/game/constants"
-import { packCards } from "src/game/fableProofs"
-import { DRAW_HAND_PROOF_TIMEOUT } from "src/constants"
-import { CancellationHandler } from "src/components/modals/loadingModal"
-import { checkFresh, freshWrap } from "src/store/checkFresh"
-import { getPlayerHand } from "src/store/derive"
+import { waitForUpdate } from "src/store/update"
+import { getOrInitPrivateInfo, setGameID, setPrivateInfo } from "src/store/write"
+import { FAKE_PROOF, ProofOutput, proveInWorker,SHOULD_GENERATE_PROOFS } from "src/utils/zkproofs"
+import { decodeEventLog } from "viem"
 
 // =================================================================================================
 

packages/webapp/src/actions/libContractWrite.ts

@@ -4,6 +4,7 @@
  * @module ui/libContractWrite
  */
 
+import type { Address, Hash } from "src/chain"
 import {
     Abi,
     ContractFunctionExecutionError,
@@ -13,11 +14,8 @@ import {
     TransactionExecutionError,
     TransactionReceipt,
 } from "viem"
-
 import { prepareWriteContract, waitForTransaction, writeContract } from "wagmi/actions"
 
-import type { Address, Hash } from "src/chain"
-
 // =================================================================================================
 
 /** Arguments to {@link contractWrite}. */

packages/webapp/src/actions/playCard.ts

@@ -8,18 +8,18 @@
 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 { PLAY_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, getGameData, getGameID, 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 { PLAY_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/chain.ts

@@ -5,11 +5,10 @@
  */
 
 import { getDefaultConfig, getDefaultConnectors } from "connectkit"
+import { BurnerConnector } from "src/wagmi/BurnerConnector"
 import { type Chain, createConfig } from "wagmi"
 import { localhost } from "wagmi/chains"
 
-import { BurnerConnector } from "src/wagmi/BurnerConnector"
-
 // =================================================================================================
 
 /** The list of chains supported by the app. */

packages/webapp/src/components/cards/boardCard.tsx

@@ -1,6 +1,6 @@
-import { forwardRef, useState } from "react"
+import React, { forwardRef, useState } from "react"
 import Image from "next/image"
-import React from "react"
+
 import { testCards } from "src/utils/card-list"
 
 interface BoardCardProps {

packages/webapp/src/components/cards/cardContainer.tsx

@@ -1,12 +1,14 @@
 import React from "react"
-import { CardPlacement } from "src/store/types"
+
 import { useSortable } from "@dnd-kit/sortable"
-import DraggedCard from "./draggedCard"
-import BoardCard from "./boardCard"
-import HandCard from "./handCard"
 import { CSS } from "@dnd-kit/utilities"
+import { CardPlacement } from "src/store/types"
 import { convertStringToSafeNumber } from "src/utils/js-utils"
 
+import BoardCard from "./boardCard"
+import DraggedCard from "./draggedCard"
+import HandCard from "./handCard"
+
 interface BaseCardProps {
     id: string
     className?: string

packages/webapp/src/components/cards/draggedCard.tsx

@@ -1,5 +1,6 @@
-import Image from "next/image"
 import React, { forwardRef } from "react"
+import Image from "next/image"
+
 import { testCards } from "src/utils/card-list"
 
 interface DraggedCardProps {

packages/webapp/src/components/cards/handCard.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, useState } from "react"
 import Image from "next/image"
+
 import { testCards } from "src/utils/card-list"
 
 interface HandCardProps {

packages/webapp/src/components/collection/cardCollectionDisplay.tsx

@@ -1,7 +1,8 @@
 import React from "react"
 import Image from "next/image"
-import { Card } from "src/store/types"
+
 import { MintDeckModal } from "src/components/modals/mintDeckModal"
+import { Card } from "src/store/types"
 import { testCards } from "src/utils/card-list"
 
 interface CardCollectionDisplayProps {

packages/webapp/src/components/collection/deckList.tsx

@@ -1,7 +1,8 @@
 import React from "react"
+
 import Link from "src/components/link"
-import { Deck } from "src/store/types"
 import { Button } from "src/components/ui/button"
+import { Deck } from "src/store/types"
 
 interface DeckCollectionDisplayProps {
     decks: Deck[]

packages/webapp/src/components/collection/deckPanel.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from "react"
-import { Deck, Card } from "src/store/types"
 import Image from "next/image"
-import { testCards } from "src/utils/card-list"
+
 import { Button } from "src/components/ui/button"
+import { Card,Deck } from "src/store/types"
+import { testCards } from "src/utils/card-list"
 
 interface DeckConstructionPanelProps {
     deck: Deck

packages/webapp/src/components/collection/filterPanel.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import Image from "next/image"
+
 import { Card } from "src/store/types"
 
 interface FilterPanelProps {

packages/webapp/src/components/hand.tsx

@@ -1,11 +1,14 @@
 import { useEffect, useRef, useState } from "react"
 import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai"
-import useScrollBox from "../hooks/useScrollBox"
-import { SortableContext, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable"
+
+import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable"
+import { CancellationHandler } from "src/components/modals/loadingModal"
 import { CardPlacement } from "src/store/types"
-import CardContainer from "./cards/cardContainer"
 import { convertBigIntArrayToStringArray } from "src/utils/js-utils"
-import { CancellationHandler } from "src/components/modals/loadingModal"
+
+import useScrollBox from "../hooks/useScrollBox"
+
+import CardContainer from "./cards/cardContainer"
 
 const Hand = ({
     cards,

packages/webapp/src/components/lib/modal.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode, RefObject, useRef, useState } from "react"
+import { createPortal } from "react-dom"
 
 import { useIsMounted } from "src/hooks/useIsMounted"
 import { useErrorConfig } from "src/store/hooks"
-import { createPortal } from "react-dom"
 
 // =================================================================================================
 

packages/webapp/src/components/lib/modalElements.tsx

@@ -1,6 +1,7 @@
 // =================================================================================================
 
 import Image from "next/image"
+
 import { Button } from "src/components/ui/button"
 
 export const Spinner = () => {

packages/webapp/src/components/link.tsx

@@ -1,6 +1,6 @@
 import React from "react"
-import { useRouter } from "next/router"
 import Link from "next/link"
+import { useRouter } from "next/router"
 
 interface QueryParamLinkProps {
     children: React.ReactNode