0xFableOrg · ultraviolet10 · Mar 13, 2024 · Mar 4, 2024 · Mar 4, 2024 · Mar 4, 2024
diff --git a/packages/webapp/.eslintrc.cjs b/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"]
+				]
+			}
+		]
 	},
 }
 

diff --git a/packages/webapp/.prettierrc.json b/packages/webapp/.prettierrc.json
@@ -4,5 +4,6 @@
     "singleQuote": false,
     "tabWidth": 4,
     "useTabs": false,
-    "printWidth": 120
+    "printWidth": 120,
+    "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/packages/webapp/.vscode/settings.json b/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"]
 }
diff --git a/packages/webapp/Makefile b/packages/webapp/Makefile
@@ -32,5 +32,6 @@ check:
 
 # Runs prettier formatting across webapp files with specified file extensions.
 format: 
+	pnpm eslint . --fix
 	pnpm prettier --write "**/*.{js,jsx,ts,tsx,json,css}"
 .PHONY: format
diff --git a/packages/webapp/package.json b/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,8 +51,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"
     }

diff --git a/packages/webapp/src/actions/concede.ts b/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"
 
 // =================================================================================================
 

diff --git a/packages/webapp/src/actions/defend.ts b/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"
 
 // =================================================================================================
 

diff --git a/packages/webapp/src/actions/drawCard.ts b/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"
 
 // =================================================================================================
 

diff --git a/packages/webapp/src/actions/endTurn.ts b/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"
 
 // =================================================================================================
 

diff --git a/packages/webapp/src/actions/errors.ts b/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

diff --git a/packages/webapp/src/actions/joinGame.ts b/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"
 
 // =================================================================================================
 
@@ -85,7 +84,8 @@ async function joinGameImpl(args: JoinGameArgs): Promise<boolean> {
     if (gameStatus < GameStatus.JOINED) {
         // we can skip the join step if already performed
         const promise = doJoinGameTransaction(args, privateInfo.saltHash)
-        if (gameID === null) await promise // gameID starts null and the call will set it
+        if (gameID === null)
+            await promise // gameID starts null and the call will set it
         else checkFresh(await freshWrap(promise))
     }
 

diff --git a/packages/webapp/src/actions/libContractWrite.ts b/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}. */

diff --git a/packages/webapp/src/actions/playCard.ts b/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"
 
 // =================================================================================================
 

diff --git a/packages/webapp/src/chain.ts b/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. */

diff --git a/packages/webapp/src/components/cards/boardCard.tsx b/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 {
@@ -12,14 +12,14 @@ const BoardCard = forwardRef<HTMLDivElement, BoardCardProps>(({ id }, ref) => {
 
     return (
         <div
-            className="relative w-full h-full"
+            className="relative h-full w-full"
             ref={ref}
             onMouseEnter={() => setShowCardName(true)}
             onMouseLeave={() => setShowCardName(false)}
         >
             <Image
                 alt={`${id}`}
-                className="pointer-events-none rounded-xl border select-none"
+                className="pointer-events-none select-none rounded-xl border"
                 src={testCards[id]?.image}
                 width={200}
                 height={200}
@@ -29,19 +29,19 @@ const BoardCard = forwardRef<HTMLDivElement, BoardCardProps>(({ id }, ref) => {
             />
             {showCardName && (
                 <>
-                    <div className="flex w-full justify-between p-2 absolute top-0 left-0 right-0">
-                        <div className="flex items-center justify-center h-8 w-8 rounded-full bg-yellow-400 text-gray-900 font-bold text-lg select-none">
+                    <div className="absolute left-0 right-0 top-0 flex w-full justify-between p-2">
+                        <div className="flex h-8 w-8 select-none items-center justify-center rounded-full bg-yellow-400 text-lg font-bold text-gray-900">
                             {`${testCards[id]?.attack}`}
                         </div>
-                        <div className="flex items-center justify-center h-8 w-8 rounded-full bg-red-600 text-gray-900 font-bold text-lg select-none">
+                        <div className="flex h-8 w-8 select-none items-center justify-center rounded-full bg-red-600 text-lg font-bold text-gray-900">
                             {`${testCards[id]?.defense}`}
                         </div>
                     </div>
 
                     <span
-                        className={`absolute w-[90%] bottom-0 left-1/2 transform -translate-x-1/2 font-serif text-[14px] font-bold text-slate-200 text-center pb-2.5 select-none truncate transition-opacity duration-1000 ${
+                        className={`absolute bottom-0 left-1/2 w-[90%] -translate-x-1/2 transform select-none truncate pb-2.5 text-center font-serif text-[14px] font-bold text-slate-200 transition-opacity duration-1000 ${
                             showCardName ? "opacity-100" : "opacity-0"
-                        } hover:whitespace-normal hover:overflow-visible`}
+                        } hover:overflow-visible hover:whitespace-normal`}
                     >
                         {`${testCards[id]?.name}`}
                     </span>

diff --git a/packages/webapp/src/components/cards/cardContainer.tsx b/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
@@ -49,7 +51,7 @@ const CardContainer: React.FC<BaseCardProps> = ({ id, handHovered, placement, ca
     }
     return (
         <div
-            className={`${"shadow-2xl z-[50] flex  max-w-[24rem] cursor-pointer flex-col items-center justify-evenly rounded-lg bg-gray-900 transform translateY-[-50%]"}`}
+            className={`${"translateY-[-50%] z-[50] flex  max-w-[24rem] transform cursor-pointer flex-col items-center justify-evenly rounded-lg bg-gray-900 shadow-2xl"}`}
             style={sortableStyle}
             ref={setNodeRef}
             {...attributes}

diff --git a/packages/webapp/src/components/cards/draggedCard.tsx b/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 {
@@ -11,7 +12,7 @@ const DraggedCard = forwardRef<HTMLImageElement, DraggedCardProps>(({ id }, ref)
         <>
             <Image
                 alt={`${id}`}
-                className="pointer-events-none rounded-xl border select-none"
+                className="pointer-events-none select-none rounded-xl border"
                 src={testCards[id]?.image}
                 width={200}
                 height={200}