From 2ac3cf7d4679b58b3155edeb5baa8a2ca2a7e5c6 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Mon, 4 Mar 2024 11:47:07 +0530
Subject: [PATCH 01/14] feat: style formatting with tailwind prettier plugin

---
 packages/webapp/.prettierrc.json              |  3 +-
 packages/webapp/package.json                  |  2 +-
 packages/webapp/src/actions/joinGame.ts       |  3 +-
 .../webapp/src/components/cards/boardCard.tsx | 14 ++--
 .../src/components/cards/cardContainer.tsx    |  2 +-
 .../src/components/cards/draggedCard.tsx      |  2 +-
 .../webapp/src/components/cards/handCard.tsx  | 16 ++---
 .../collection/cardCollectionDisplay.tsx      | 12 ++--
 .../src/components/collection/deckList.tsx    |  6 +-
 .../src/components/collection/deckPanel.tsx   | 16 ++---
 .../src/components/collection/filterPanel.tsx | 20 +++---
 packages/webapp/src/components/hand.tsx       | 12 ++--
 packages/webapp/src/components/lib/modal.tsx  |  2 +-
 .../src/components/lib/modalElements.tsx      |  4 +-
 .../src/components/modals/createGameModal.tsx |  4 +-
 .../modals/inGameMenuModalContent.tsx         |  2 +-
 .../src/components/modals/joinGameModal.tsx   |  4 +-
 .../src/components/modals/mintDeckModal.tsx   |  2 +-
 packages/webapp/src/components/navbar.tsx     |  6 +-
 .../webapp/src/components/playerBoard.tsx     | 12 ++--
 packages/webapp/src/pages/collection.tsx      |  8 +--
 packages/webapp/src/pages/index.tsx           |  6 +-
 packages/webapp/src/pages/play.tsx            | 10 +--
 pnpm-lock.yaml                                | 64 ++++++++++++++++++-
 24 files changed, 146 insertions(+), 86 deletions(-)

diff --git a/packages/webapp/.prettierrc.json b/packages/webapp/.prettierrc.json
index da298910..1367ec9a 100644
--- 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/package.json b/packages/webapp/package.json
index e373bebe..241f462a 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -53,7 +53,7 @@
         "eslint": "^8.52.0",
         "eslint-config-next": "^13.5.6",
         "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/joinGame.ts b/packages/webapp/src/actions/joinGame.ts
index c4a3c235..fbb1c6ed 100644
--- a/packages/webapp/src/actions/joinGame.ts
+++ b/packages/webapp/src/actions/joinGame.ts
@@ -85,7 +85,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/components/cards/boardCard.tsx b/packages/webapp/src/components/cards/boardCard.tsx
index 3c672e86..370218c4 100644
--- a/packages/webapp/src/components/cards/boardCard.tsx
+++ b/packages/webapp/src/components/cards/boardCard.tsx
@@ -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
index 6267b9ca..9c5fcfa1 100644
--- a/packages/webapp/src/components/cards/cardContainer.tsx
+++ b/packages/webapp/src/components/cards/cardContainer.tsx
@@ -49,7 +49,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
index bf136701..06a90ee7 100644
--- a/packages/webapp/src/components/cards/draggedCard.tsx
+++ b/packages/webapp/src/components/cards/draggedCard.tsx
@@ -11,7 +11,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}
diff --git a/packages/webapp/src/components/cards/handCard.tsx b/packages/webapp/src/components/cards/handCard.tsx
index 61ada527..18ad9240 100644
--- a/packages/webapp/src/components/cards/handCard.tsx
+++ b/packages/webapp/src/components/cards/handCard.tsx
@@ -16,8 +16,8 @@ const HandCard = forwardRef<HTMLDivElement, HandCardProps>(({ id, isDragging, ha
 
     return (
         <div
-            className={`flex flex-col w-full h-full ${
-                showingDetails ? "p-4 border-[1px] border-white rounded-xl" : null
+            className={`flex h-full w-full flex-col ${
+                showingDetails ? "rounded-xl border-[1px] border-white p-4" : null
             }`}
             style={{
                 zIndex: isDragging ? 1000 : 1,
@@ -36,10 +36,10 @@ const HandCard = forwardRef<HTMLDivElement, HandCardProps>(({ id, isDragging, ha
             <span
                 className={
                     showingDetails
-                        ? "font-serif overflow-hidden text-2xl font-bold text-slate-200 text-left text-clip max-w-[320px] select-none"
+                        ? "max-w-[320px] select-none overflow-hidden text-clip text-left font-serif text-2xl font-bold text-slate-200"
                         : handHovered
-                        ? "font-serif text-[14px] font-bold text-slate-200 text-left truncate select-none"
-                        : "hidden"
+                          ? "select-none truncate text-left font-serif text-[14px] font-bold text-slate-200"
+                          : "hidden"
                 }
             >
                 {testCards[id]?.name}
@@ -49,17 +49,17 @@ const HandCard = forwardRef<HTMLDivElement, HandCardProps>(({ id, isDragging, ha
                 src={testCards[id]?.image}
                 width={showingDetails ? 375 : 200}
                 height={showingDetails ? 375 : 200}
-                className="pointer-events-none rounded-xl border select-none"
+                className="pointer-events-none select-none rounded-xl border"
                 style={{
                     boxShadow: (cardHover && !isDetailsVisible) || cardGlow ? "0 0 10px 2px gold" : "none", // Adds golden glow when hovered
                 }}
             />
             {showingDetails && (
                 <>
-                    <p className="-mt-10 rounded-b-xl border border-t-0 bg-slate-900 font-mono font-semibold italic p-2 text-center select-none">
+                    <p className="-mt-10 select-none rounded-b-xl border border-t-0 bg-slate-900 p-2 text-center font-mono font-semibold italic">
                         {testCards[id]?.description}
                     </p>
-                    <hr className="w-full border-slate-500 mt-2" />
+                    <hr className="mt-2 w-full border-slate-500" />
                     <div className="flex w-full justify-between font-mono text-2xl">
                         <p className="select-none">⚔️ {testCards[id]?.attack}</p>
                         <p className="select-none">🛡 {testCards[id]?.defense}</p>
diff --git a/packages/webapp/src/components/collection/cardCollectionDisplay.tsx b/packages/webapp/src/components/collection/cardCollectionDisplay.tsx
index 0a2faadc..f3911809 100644
--- a/packages/webapp/src/components/collection/cardCollectionDisplay.tsx
+++ b/packages/webapp/src/components/collection/cardCollectionDisplay.tsx
@@ -23,9 +23,9 @@ const CardCollectionDisplay: React.FC<CardCollectionDisplayProps> = ({
 }) => {
     return (
         <>
-            <div className="col-span-7 flex rounded-xl border overflow-y-auto">
+            <div className="col-span-7 flex overflow-y-auto rounded-xl border">
                 {isHydrated && cards.length === 0 && (
-                    <div className="flex flex-row w-full justify-center items-center">
+                    <div className="flex w-full flex-row items-center justify-center">
                         <MintDeckModal />
                     </div>
                 )}
@@ -39,7 +39,7 @@ const CardCollectionDisplay: React.FC<CardCollectionDisplayProps> = ({
                                     selectedCards.some((c) => c.id === card.id)
                                         ? "shadow-highlight shadow-orange-300"
                                         : ""
-                                } hover:bg-slate-800 rounded-lg p-4 border-4 border-slate-900 grow w-[220px] max-w-[330px]`}
+                                } w-[220px] max-w-[330px] grow rounded-lg border-4 border-slate-900 p-4 hover:bg-slate-800`}
                                 onMouseEnter={() => setSelectedCard(card)}
                                 onClick={() => {
                                     if (isEditing) {
@@ -55,11 +55,11 @@ const CardCollectionDisplay: React.FC<CardCollectionDisplayProps> = ({
                                     height={256}
                                 />
                                 <div className="text-center">{card.lore.name}</div>
-                                <div className="flex items-end justify-between p-2 relative">
-                                    <div className="flex items-center justify-center h-8 w-8 rounded-full bg-yellow-400 text-gray-900 font-bold text-lg absolute bottom-[-16px]">
+                                <div className="relative flex items-end justify-between p-2">
+                                    <div className="absolute bottom-[-16px] flex h-8 w-8 items-center justify-center rounded-full bg-yellow-400 text-lg font-bold text-gray-900">
                                         {card.stats.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 absolute bottom-[-16px] right-3">
+                                    <div className="absolute bottom-[-16px] right-3 flex h-8 w-8 items-center justify-center rounded-full bg-red-600 text-lg font-bold text-gray-900">
                                         {card.stats.defense}
                                     </div>
                                 </div>
diff --git a/packages/webapp/src/components/collection/deckList.tsx b/packages/webapp/src/components/collection/deckList.tsx
index 0d6c312a..d85fdc10 100644
--- a/packages/webapp/src/components/collection/deckList.tsx
+++ b/packages/webapp/src/components/collection/deckList.tsx
@@ -10,12 +10,12 @@ interface DeckCollectionDisplayProps {
 
 const DeckCollectionDisplay: React.FC<DeckCollectionDisplayProps> = ({ decks, onDeckSelect }) => {
     return (
-        <div className="w-full flex flex-col items-center p-3">
+        <div className="flex w-full flex-col items-center p-3">
             {/* New Deck Button */}
             <div>
                 <Button
                     variant="secondary"
-                    className="border-2 border-yellow-500 normal-case hover:scale-105 font-fable text-xl hover:border-yellow-400"
+                    className="border-2 border-yellow-500 font-fable text-xl normal-case hover:scale-105 hover:border-yellow-400"
                 >
                     <Link href={"/collection?newDeck=true"}>New Deck →</Link>
                 </Button>
@@ -26,7 +26,7 @@ const DeckCollectionDisplay: React.FC<DeckCollectionDisplayProps> = ({ decks, on
                 <Button
                     variant="secondary"
                     width="full"
-                    className="border-2 border-yellow-500 normal-case hover:scale-105 font-fable text-xl hover:border-yellow-400"
+                    className="border-2 border-yellow-500 font-fable text-xl normal-case hover:scale-105 hover:border-yellow-400"
                     key={deckID}
                     onClick={() => onDeckSelect(deckID)}
                 >
diff --git a/packages/webapp/src/components/collection/deckPanel.tsx b/packages/webapp/src/components/collection/deckPanel.tsx
index 058f8ea2..63a4b7b4 100644
--- a/packages/webapp/src/components/collection/deckPanel.tsx
+++ b/packages/webapp/src/components/collection/deckPanel.tsx
@@ -42,31 +42,31 @@ const DeckConstructionPanel: React.FC<DeckConstructionPanelProps> = ({
     }
 
     return (
-        <div className="flex flex-col items-center w-full p-3 overflow-y-auto overflow-x-hidden">
+        <div className="flex w-full flex-col items-center overflow-y-auto overflow-x-hidden p-3">
             {/* Deck Name Input */}
-            <div className="flex flex-wrap gap-2 justify-center w-full">
+            <div className="flex w-full flex-wrap justify-center gap-2">
                 <input
                     type="text"
                     value={deckName}
                     onChange={handleDeckNameChange}
                     style={{ outline: deckNameValid ? "none" : "2px solid red" }}
-                    className="flex-shrink min-w-0 px-2 py-2 border rounded-md text-black bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent m-1.5 placeholder-gray-700 flex-basis[auto] max-w-full"
+                    className="flex-basis[auto] m-1.5 min-w-0 max-w-full flex-shrink rounded-md border bg-white px-2 py-2 text-black placeholder-gray-700 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
                     placeholder="Deck name"
                 />
             </div>
 
             {/* Save and Cancel Buttons */}
-            <div className="flex flex-wrap gap-2 justify-center w-full">
+            <div className="flex w-full flex-wrap justify-center gap-2">
                 <Button
                     variant="secondary"
-                    className="border-2 border-yellow-500 normal-case hover:scale-105 font-fable text-xl hover:border-yellow-400"
+                    className="border-2 border-yellow-500 font-fable text-xl normal-case hover:scale-105 hover:border-yellow-400"
                     onClick={handleSave}
                 >
                     ✓Save
                 </Button>
                 <Button
                     variant="secondary"
-                    className="border-2 border-yellow-500 normal-case hover:scale-105 font-fable text-xl hover:border-yellow-400"
+                    className="border-2 border-yellow-500 font-fable text-xl normal-case hover:scale-105 hover:border-yellow-400"
                     onClick={onCancel}
                 >
                     ✕Cancel
@@ -79,7 +79,7 @@ const DeckConstructionPanel: React.FC<DeckConstructionPanelProps> = ({
                     selectedCards.map((card, index) => (
                         <div
                             key={index}
-                            className="p-2 cursor-pointer hover:bg-gray-100"
+                            className="cursor-pointer p-2 hover:bg-gray-100"
                             onClick={() => onCardSelect(card)}
                         >
                             <div className="flex items-center space-x-3">
@@ -88,7 +88,7 @@ const DeckConstructionPanel: React.FC<DeckConstructionPanelProps> = ({
                                     alt="Card art"
                                     width={40}
                                     height={40}
-                                    className="object-cover rounded-full"
+                                    className="rounded-full object-cover"
                                 />
                                 <span className="font-medium">{card.lore.name}</span>
                             </div>
diff --git a/packages/webapp/src/components/collection/filterPanel.tsx b/packages/webapp/src/components/collection/filterPanel.tsx
index 5897943f..f3089936 100644
--- a/packages/webapp/src/components/collection/filterPanel.tsx
+++ b/packages/webapp/src/components/collection/filterPanel.tsx
@@ -27,27 +27,27 @@ const FilterPanel: React.FC<FilterPanelProps> = ({
     const cardFlavor = selectedCard?.lore.flavor || "Select a card to see its details"
 
     return (
-        <div className="flex col-span-3 rounded-xl border overflow-y-auto">
+        <div className="col-span-3 flex overflow-y-auto rounded-xl border">
             <div className="overflow-y-auto">
                 {/* Search */}
-                <h2 className="text-2xl font-bold text-white m-1.5">Search</h2>
+                <h2 className="m-1.5 text-2xl font-bold text-white">Search</h2>
                 <div>
                     <input
                         type="text"
                         onChange={handleInputChange}
-                        className="px-4 py-2 border rounded-md text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent m-1.5"
+                        className="m-1.5 rounded-md border px-4 py-2 text-gray-100 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
                         placeholder="Search by name"
                     />
                 </div>
 
                 {/* Effects */}
-                <h3 className="text-xl font-bold text-white m-1.5">Effects</h3>
+                <h3 className="m-1.5 text-xl font-bold text-white">Effects</h3>
                 <div className="flex flex-wrap gap-2">
                     {effects.map((effect, index) => (
                         <button
                             key={index}
                             onClick={() => handleEffectClick(index)}
-                            className={`text-white font-bold py-2 px-2 rounded m-1.5 ${
+                            className={`m-1.5 rounded px-2 py-2 font-bold text-white ${
                                 effectMap[effect] ? "bg-purple-900" : "bg-gray-500"
                             }`}
                         >
@@ -57,13 +57,13 @@ const FilterPanel: React.FC<FilterPanelProps> = ({
                 </div>
 
                 {/* Types */}
-                <h3 className="text-xl font-bold text-white m-1">Types</h3>
+                <h3 className="m-1 text-xl font-bold text-white">Types</h3>
                 <div className="flex flex-wrap gap-2">
                     {types.map((type, index) => (
                         <button
                             key={index}
                             onClick={() => handleTypeClick(index)}
-                            className={`text-white font-bold py-2 px-2 rounded m-1 ${
+                            className={`m-1 rounded px-2 py-2 font-bold text-white ${
                                 typeMap[type] ? "bg-purple-900" : "bg-gray-500"
                             }`}
                         >
@@ -76,12 +76,12 @@ const FilterPanel: React.FC<FilterPanelProps> = ({
 
                 {/* Selected Card Display */}
                 <div className="pb-5">
-                    <h2 className="text-3xl font-bold text-white m-1.5">Card details</h2>
-                    <div className="m-4 bg-slate-900/50 rounded-lg p-4 border-4 border-slate-900">
+                    <h2 className="m-1.5 text-3xl font-bold text-white">Card details</h2>
+                    <div className="m-4 rounded-lg border-4 border-slate-900 bg-slate-900/50 p-4">
                         <Image src="/card_art/0.jpg" alt={cardName} width={256} height={256} className="m-auto" />
                         <div className="text-center">{cardName}</div>
                     </div>
-                    <div className="text-center m-2">{cardFlavor}</div>
+                    <div className="m-2 text-center">{cardFlavor}</div>
                 </div>
             </div>
         </div>
diff --git a/packages/webapp/src/components/hand.tsx b/packages/webapp/src/components/hand.tsx
index f2724475..b38ff4d4 100644
--- a/packages/webapp/src/components/hand.tsx
+++ b/packages/webapp/src/components/hand.tsx
@@ -44,7 +44,7 @@ const Hand = ({
         <div
             className={`${className} ${
                 isLastCardGlowing ? "translate-y-0" : null
-            } py-4 flex flex-row items-center justify-evenly bottom-0 w-[95%] space-x-2`}
+            } bottom-0 flex w-[95%] flex-row items-center justify-evenly space-x-2 py-4`}
             ref={setNodeRef}
             onMouseEnter={() => {
                 setIsFocused(true)
@@ -55,14 +55,14 @@ const Hand = ({
         >
             {showLeftArrow && isFocused && (
                 <div
-                    className="absolute top-[55%] transform -translate-y-1/2 left-0 z-10 p-2 cursor-pointer"
+                    className="absolute left-0 top-[55%] z-10 -translate-y-1/2 transform cursor-pointer p-2"
                     onClick={scrollLeft}
                 >
-                    <AiOutlineLeft className="text-white text-[50px]" />
+                    <AiOutlineLeft className="text-[50px] text-white" />
                 </div>
             )}
             <div className={`relative w-[90%] overflow-x-hidden overflow-y-visible`}>
-                <div className="overflow-x-scroll no-scrollbar" ref={scrollWrapperRef}>
+                <div className="no-scrollbar overflow-x-scroll" ref={scrollWrapperRef}>
                     <div className="relative flex w-max">
                         <div className="flex flex-row items-end justify-center space-x-4 px-2">
                             <SortableContext items={range} strategy={horizontalListSortingStrategy}>
@@ -82,10 +82,10 @@ const Hand = ({
             </div>
             {showRightArrow && isFocused && (
                 <div
-                    className="absolute top-[55%] transform -translate-y-1/2 right-0 z-10 p-2 cursor-pointer"
+                    className="absolute right-0 top-[55%] z-10 -translate-y-1/2 transform cursor-pointer p-2"
                     onClick={scrollRight}
                 >
-                    <AiOutlineRight className="text-white text-[50px]" />
+                    <AiOutlineRight className="text-[50px] text-white" />
                 </div>
             )}
         </div>
diff --git a/packages/webapp/src/components/lib/modal.tsx b/packages/webapp/src/components/lib/modal.tsx
index cf118bae..a9b874b7 100644
--- a/packages/webapp/src/components/lib/modal.tsx
+++ b/packages/webapp/src/components/lib/modal.tsx
@@ -103,7 +103,7 @@ const ModalInner = ({ ctrl, children }: { ctrl: ModalController; children: React
                 onClick={state.surroundCloseable ? ctrl.close : undefined}
                 style={{ display: displayed ? "flex" : "none" }}
             >
-                <div className="modal-box border-white border cursor-default z-10">
+                <div className="modal-box z-10 cursor-default border border-white">
                     {state.closeable && (
                         <button className="btn btn-sm btn-circle absolute right-2 top-2" onClick={ctrl.close}>
                             ✕
diff --git a/packages/webapp/src/components/lib/modalElements.tsx b/packages/webapp/src/components/lib/modalElements.tsx
index 9e315eb7..95674911 100644
--- a/packages/webapp/src/components/lib/modalElements.tsx
+++ b/packages/webapp/src/components/lib/modalElements.tsx
@@ -5,7 +5,7 @@ import { Button } from "src/components/ui/button"
 
 export const Spinner = () => {
     return (
-        <div className="flex justify-center my-8">
+        <div className="my-8 flex justify-center">
             <Image height={80} width={80} src={"/img/spinner.svg"} alt="loading" />
         </div>
     )
@@ -18,7 +18,7 @@ export const ModalMenuButton = ({ display, label }: { display: () => void; label
         <Button
             variant="outline"
             onClick={display}
-            className="rounded-lg p-6 font-fable text-2xl border-green-900 border-2 h-16 hover:scale-105 hover:border-green-800 hover:border-3"
+            className="hover:border-3 h-16 rounded-lg border-2 border-green-900 p-6 font-fable text-2xl hover:scale-105 hover:border-green-800"
         >
             {label}
         </Button>
diff --git a/packages/webapp/src/components/modals/createGameModal.tsx b/packages/webapp/src/components/modals/createGameModal.tsx
index da174081..e77b7b86 100644
--- a/packages/webapp/src/components/modals/createGameModal.tsx
+++ b/packages/webapp/src/components/modals/createGameModal.tsx
@@ -42,7 +42,7 @@ export const CreateGameModal = () => {
             <DialogTrigger asChild>
                 <Button
                     variant="outline"
-                    className="rounded-lg p-6 font-fable text-2xl border-green-900 border-2 h-16 hover:scale-105 hover:border-green-800 hover:border-3"
+                    className="hover:border-3 h-16 rounded-lg border-2 border-green-900 p-6 font-fable text-2xl hover:scale-105 hover:border-green-800"
                 >
                     Create Game →
                 </Button>
@@ -189,7 +189,7 @@ const CreateGameModalContent: React.FC<CreateGameModalContentProps> = ({ loading
                         </div>
                     )}
                     {joined && (
-                        <div className="flex flex-col justify-center gap-4 items-center">
+                        <div className="flex flex-col items-center justify-center gap-4">
                             <Spinner />
                             {!allPlayersJoined && (
                                 <Button
diff --git a/packages/webapp/src/components/modals/inGameMenuModalContent.tsx b/packages/webapp/src/components/modals/inGameMenuModalContent.tsx
index 9909422f..5cf14e87 100644
--- a/packages/webapp/src/components/modals/inGameMenuModalContent.tsx
+++ b/packages/webapp/src/components/modals/inGameMenuModalContent.tsx
@@ -15,7 +15,7 @@ export const InGameMenuModalContent = ({ concede }: { concede?: () => void }) =>
         <>
             <DialogTitle className="font-fable">Game in progress!</DialogTitle>
             <DialogDescription>
-                <div className="flex justify-center gap-4 mt-4">
+                <div className="mt-4 flex justify-center gap-4">
                     <Link href="/play">
                         <Button className="font-fable" variant={"secondary"}>
                             Return to Game
diff --git a/packages/webapp/src/components/modals/joinGameModal.tsx b/packages/webapp/src/components/modals/joinGameModal.tsx
index 910cd306..6d0161ca 100644
--- a/packages/webapp/src/components/modals/joinGameModal.tsx
+++ b/packages/webapp/src/components/modals/joinGameModal.tsx
@@ -45,7 +45,7 @@ export const JoinGameModal = () => {
             <DialogTrigger asChild>
                 <Button
                     variant="outline"
-                    className="rounded-lg p-6 font-fable text-2xl border-green-900 border-2 h-16 hover:scale-105 hover:border-green-800 hover:border-3"
+                    className="hover:border-3 h-16 rounded-lg border-2 border-green-900 p-6 font-fable text-2xl hover:scale-105 hover:border-green-800"
                 >
                     Join Game →
                 </Button>
@@ -151,7 +151,7 @@ const JoinGameModalContent: React.FC<JoinGameModalContentProps> = ({ loading, se
                                 placeholder="Game ID"
                                 min={0}
                                 onChange={handleInputChange}
-                                className="mr-2 w-full max-w-xs text-white placeholder-gray-500 font-mono"
+                                className="mr-2 w-full max-w-xs font-mono text-white placeholder-gray-500"
                             />
                             <Button
                                 className="font-fable"
diff --git a/packages/webapp/src/components/modals/mintDeckModal.tsx b/packages/webapp/src/components/modals/mintDeckModal.tsx
index 0d0cfd9b..87a8ac74 100644
--- a/packages/webapp/src/components/modals/mintDeckModal.tsx
+++ b/packages/webapp/src/components/modals/mintDeckModal.tsx
@@ -21,7 +21,7 @@ export const MintDeckModal = ({ callback = () => {} }) => {
             <DialogTrigger asChild>
                 <Button
                     variant="outline"
-                    className="rounded-lg p-6 font-fable text-2xl border-green-900 border-2 h-16 hover:scale-105 hover:border-green-800 hover:border-3"
+                    className="hover:border-3 h-16 rounded-lg border-2 border-green-900 p-6 font-fable text-2xl hover:scale-105 hover:border-green-800"
                 >
                     Mint Deck →
                 </Button>
diff --git a/packages/webapp/src/components/navbar.tsx b/packages/webapp/src/components/navbar.tsx
index 2006f88c..b5f15b94 100644
--- a/packages/webapp/src/components/navbar.tsx
+++ b/packages/webapp/src/components/navbar.tsx
@@ -9,8 +9,8 @@ export const Navbar = () => {
             <NavigationMenuList>
                 <NavigationMenuItem>
                     <Link href="/">
-                        <Button variant="ghost" className="text-2xl normal-case text-white font-serif">
-                            <span className="text-red-400 font-mono font-light">0x</span>
+                        <Button variant="ghost" className="font-serif text-2xl normal-case text-white">
+                            <span className="font-mono font-light text-red-400">0x</span>
                             FABLE
                         </Button>
                     </Link>
@@ -20,7 +20,7 @@ export const Navbar = () => {
             <NavigationMenuList>
                 <NavigationMenuItem>
                     <Link href="/collection">
-                        <Button variant="ghost" className="text-xl normal-case text-white font-fable">
+                        <Button variant="ghost" className="font-fable text-xl normal-case text-white">
                             Collection
                         </Button>
                     </Link>
diff --git a/packages/webapp/src/components/playerBoard.tsx b/packages/webapp/src/components/playerBoard.tsx
index 500985e9..7c33b0f8 100644
--- a/packages/webapp/src/components/playerBoard.tsx
+++ b/packages/webapp/src/components/playerBoard.tsx
@@ -19,9 +19,9 @@ const PlayerBoard: React.FC<PlayerBoardProps> = ({ playerAddress, playedCards })
     const convertedCards = convertBigIntArrayToStringArray(playedCards)
     return (
         <div
-            className={`relative row-span-6 rounded-xl bg-base-300 shadow-inner overflow-hidden ${
+            className={`bg-base-300 relative row-span-6 overflow-hidden rounded-xl shadow-inner ${
                 playerAddress !== currentPlayerAddress
-                    ? `rounded-b-none border border-b-1`
+                    ? `border-b-1 rounded-b-none border`
                     : `rounded-t-none border border-t-0`
             }`}
             ref={setNodeRef}
@@ -31,15 +31,15 @@ const PlayerBoard: React.FC<PlayerBoardProps> = ({ playerAddress, playedCards })
             }}
         >
             <div className="relative flex flex-col items-center space-y-4">
-                <div className="flex flex-row p-2 space-x-3 self-start items-center">
-                    <p className="z-0 m-2 font-mono font-bold select-none px-2">
+                <div className="flex flex-row items-center space-x-3 self-start p-2">
+                    <p className="z-0 m-2 select-none px-2 font-mono font-bold">
                         {`🛡 ${shortenAddress(playerAddress)}`}
                     </p>
-                    <p className="z-0 m-3 font-mono font-bold select-none"> ♥️ 100 </p>
+                    <p className="z-0 m-3 select-none font-mono font-bold"> ♥️ 100 </p>
                 </div>
 
                 <div
-                    className={`absolute top-[100%] flex flex-row p-4 space-x-4 rounded-xl mx-4 items-center justify-center min-h-[220px] min-w-[95%] ${
+                    className={`absolute top-[100%] mx-4 flex min-h-[220px] min-w-[95%] flex-row items-center justify-center space-x-4 rounded-xl p-4 ${
                         playerActive ? "bg-green-700 opacity-50" : null
                     }`}
                 >
diff --git a/packages/webapp/src/pages/collection.tsx b/packages/webapp/src/pages/collection.tsx
index 4cc00f70..43439324 100644
--- a/packages/webapp/src/pages/collection.tsx
+++ b/packages/webapp/src/pages/collection.tsx
@@ -165,9 +165,9 @@ const Collection: FablePage = ({ isHydrated }) => {
             {jotaiDebug()}
             <main className="flex h-screen flex-col">
                 <Navbar />
-                <div className="mx-6 mb-6 grid grow grid-cols-12 gap-4 min-h-0">
+                <div className="mx-6 mb-6 grid min-h-0 grow grid-cols-12 gap-4">
                     {/* Left Panel - Search and Filters */}
-                    <div className="flex col-span-3 rounded-xl border overflow-y-auto">
+                    <div className="col-span-3 flex overflow-y-auto rounded-xl border">
                         <FilterPanel
                             effects={effects}
                             types={types}
@@ -181,7 +181,7 @@ const Collection: FablePage = ({ isHydrated }) => {
                     </div>
 
                     {/* Middle Panel - Card Collection Display */}
-                    <div className="col-span-7 flex rounded-xl border overflow-y-auto">
+                    <div className="col-span-7 flex overflow-y-auto rounded-xl border">
                         <CardCollectionDisplay
                             cards={cards}
                             isHydrated={isHydrated}
@@ -193,7 +193,7 @@ const Collection: FablePage = ({ isHydrated }) => {
                     </div>
 
                     {/* Right Panel - Deck List */}
-                    <div className="flex col-span-2 rounded-xl border overflow-y-auto">
+                    <div className="col-span-2 flex overflow-y-auto rounded-xl border">
                         {isEditing && currentDeck ? (
                             <DeckPanel
                                 deck={currentDeck}
diff --git a/packages/webapp/src/pages/index.tsx b/packages/webapp/src/pages/index.tsx
index 243e64eb..e81dcd4f 100644
--- a/packages/webapp/src/pages/index.tsx
+++ b/packages/webapp/src/pages/index.tsx
@@ -38,7 +38,7 @@ const Home: FablePage = ({ isHydrated }) => {
     const isWrongNetwork = !notConnected && !chainSupported
 
     return (
-        <main className="flex flex-col min-h-screen items-center justify-center">
+        <main className="flex min-h-screen flex-col items-center justify-center">
             <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
                 <h1 className="font-serif text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
                     <span className="font-mono font-light text-red-400">0x</span>FABLE
@@ -48,7 +48,7 @@ const Home: FablePage = ({ isHydrated }) => {
                     <div className="">
                         <Button
                             variant={"secondary"}
-                            className="border-2 border-yellow-500 normal-case hover:scale-105 font-fable text-xl hover:border-yellow-400"
+                            className="border-2 border-yellow-500 font-fable text-xl normal-case hover:scale-105 hover:border-yellow-400"
                             onClick={async () => setOpen(true)}
                         >
                             Connect Wallet
@@ -67,7 +67,7 @@ const Home: FablePage = ({ isHydrated }) => {
                             <Link href={"/collection"}>
                                 <Button
                                     variant="outline"
-                                    className="rounded-lg p-6 font-fable text-2xl border-green-900 border-2 h-16 hover:scale-105 hover:border-green-800 hover:border-3"
+                                    className="hover:border-3 h-16 rounded-lg border-2 border-green-900 p-6 font-fable text-2xl hover:scale-105 hover:border-green-800"
                                 >
                                     Collection →
                                 </Button>
diff --git a/packages/webapp/src/pages/play.tsx b/packages/webapp/src/pages/play.tsx
index c6688294..007f7660 100644
--- a/packages/webapp/src/pages/play.tsx
+++ b/packages/webapp/src/pages/play.tsx
@@ -229,7 +229,7 @@ const Play: FablePage = ({ isHydrated }) => {
                         cards={playerHand as readonly bigint[]}
                         setLoading={setLoading}
                         cancellationHandler={cancellationHandler}
-                        className={`absolute left-0 right-0 mx-auto z-[100] translate-y-1/2 transition-all duration-500 rounded-xl ease-in-out hover:translate-y-0`}
+                        className={`absolute left-0 right-0 z-[100] mx-auto translate-y-1/2 rounded-xl transition-all duration-500 ease-in-out hover:translate-y-0`}
                     />
                     <div className="grid-col-1 relative mx-6 mb-6 grid grow grid-rows-[6]">
                         <PlayerBoard playerAddress={opponentAddress} playedCards={opponentBattlefield} />
@@ -239,7 +239,7 @@ const Play: FablePage = ({ isHydrated }) => {
                                 {showDrawButton && (
                                     <Button
                                         variant={"secondary"}
-                                        className="absolute right-96 bottom-1/2 z-50 !translate-y-1/2 rounded-lg border-[.1rem] border-base-300 font-mono hover:scale-105"
+                                        className="border-base-300 absolute bottom-1/2 right-96 z-50 !translate-y-1/2 rounded-lg border-[.1rem] font-mono hover:scale-105"
                                         onClick={() => {
                                             toast.promise(doDrawCard, {
                                                 id: "DRAW_CARD_TOAST",
@@ -258,7 +258,7 @@ const Play: FablePage = ({ isHydrated }) => {
 
                                 <Button
                                     variant={"secondary"}
-                                    className="absolute right-48 bottom-1/2 z-50 !translate-y-1/2 rounded-lg border-[.1rem] border-base-300 font-mono hover:scale-105"
+                                    className="border-base-300 absolute bottom-1/2 right-48 z-50 !translate-y-1/2 rounded-lg border-[.1rem] font-mono hover:scale-105"
                                     disabled={cantEndTurn}
                                     onClick={doEndTurn}
                                 >
@@ -267,7 +267,7 @@ const Play: FablePage = ({ isHydrated }) => {
 
                                 <Button
                                     variant={"secondary"}
-                                    className="absolute right-4 bottom-1/2 z-50 !translate-y-1/2 rounded-lg border-[.1rem] border-base-300 font-mono hover:scale-105"
+                                    className="border-base-300 absolute bottom-1/2 right-4 z-50 !translate-y-1/2 rounded-lg border-[.1rem] font-mono hover:scale-105"
                                     disabled={cantConcede}
                                     onClick={doConcede}
                                 >
@@ -281,7 +281,7 @@ const Play: FablePage = ({ isHydrated }) => {
                             <>
                                 <Button
                                     variant={"secondary"}
-                                    className="absolute right-4 bottom-1/2 z-50 !translate-y-1/2 rounded-lg border-[.1rem] border-base-300 font-mono hover:scale-105"
+                                    className="border-base-300 absolute bottom-1/2 right-4 z-50 !translate-y-1/2 rounded-lg border-[.1rem] font-mono hover:scale-105"
                                     onClick={doShowResults}
                                 >
                                     SEE RESULTS & EXIT
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 916b12c6..ec1e6f2a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -193,9 +193,9 @@ importers:
       postcss:
         specifier: ^8.4.31
         version: 8.4.31
-      prettier:
-        specifier: 2.8.8
-        version: 2.8.8
+      prettier-plugin-tailwindcss:
+        specifier: ^0.5.11
+        version: 0.5.11(prettier@3.2.5)
       tailwindcss:
         specifier: ^3.3.3
         version: 3.3.3
@@ -11258,12 +11258,70 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /prettier-plugin-tailwindcss@0.5.11(prettier@3.2.5):
+    resolution: {integrity: sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 3.2.5
+    dev: true
+
   /prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     dev: true
 
+  /prettier@3.2.5:
+    resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /pretty-bytes@5.6.0:
     resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
     engines: {node: '>=6'}

From d1c302c85307d62f63b550b12f15c1b6c31370f7 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Mon, 4 Mar 2024 14:35:38 +0530
Subject: [PATCH 02/14] fix: run eslint imports sort on webapp files

---
 packages/webapp/.eslintrc.cjs                 |  33 +++++-
 packages/webapp/.vscode/settings.json         |   6 +-
 packages/webapp/package.json                  |   4 +-
 packages/webapp/src/actions/concede.ts        |   2 +-
 packages/webapp/src/actions/defend.ts         |   2 +-
 packages/webapp/src/actions/drawCard.ts       |  12 +--
 packages/webapp/src/actions/endTurn.ts        |   2 +-
 packages/webapp/src/actions/errors.ts         |   6 +-
 packages/webapp/src/actions/joinGame.ts       |  21 ++--
 .../webapp/src/actions/libContractWrite.ts    |   4 +-
 packages/webapp/src/actions/playCard.ts       |  12 +--
 packages/webapp/src/chain.ts                  |   3 +-
 .../webapp/src/components/cards/boardCard.tsx |   4 +-
 .../src/components/cards/cardContainer.tsx    |  10 +-
 .../src/components/cards/draggedCard.tsx      |   3 +-
 .../webapp/src/components/cards/handCard.tsx  |   1 +
 .../collection/cardCollectionDisplay.tsx      |   3 +-
 .../src/components/collection/deckList.tsx    |   3 +-
 .../src/components/collection/deckPanel.tsx   |   5 +-
 .../src/components/collection/filterPanel.tsx |   1 +
 packages/webapp/src/components/hand.tsx       |  11 +-
 packages/webapp/src/components/lib/modal.tsx  |   2 +-
 .../src/components/lib/modalElements.tsx      |   1 +
 packages/webapp/src/components/link.tsx       |   2 +-
 .../src/components/modals/createGameModal.tsx |  16 +--
 .../src/components/modals/gameEndedModal.tsx  |   6 +-
 .../components/modals/globalErrorModal.tsx    |   5 +-
 .../modals/inGameMenuModalContent.tsx         |   3 +-
 .../src/components/modals/joinGameModal.tsx   |  22 ++--
 .../src/components/modals/loadingModal.tsx    |   2 +-
 .../src/components/modals/mintDeckModal.tsx   |   4 +-
 packages/webapp/src/components/navbar.tsx     |   4 +-
 .../webapp/src/components/playerBoard.tsx     |   5 +-
 packages/webapp/src/components/ui/button.tsx  |   2 +-
 packages/webapp/src/components/ui/dialog.tsx  |   2 +-
 .../src/components/ui/navigation-menu.tsx     |   2 +-
 packages/webapp/src/components/ui/sonner.tsx  |   1 +
 packages/webapp/src/deployment.ts             |   2 +-
 packages/webapp/src/game/drawInitialHand.ts   |   4 +-
 packages/webapp/src/game/fableProofs.ts       |   2 +-
 packages/webapp/src/game/misc.ts              |   2 +-
 .../src/hooks/useCancellationHandler.ts       |   3 +-
 packages/webapp/src/hooks/useChainWrite.ts    |   4 +-
 packages/webapp/src/hooks/useDebug.ts         |   1 +
 packages/webapp/src/hooks/useDragEvents.ts    |   9 +-
 packages/webapp/src/hooks/useFableWrite.ts    |   6 +-
 packages/webapp/src/pages/_app.tsx            |  17 +--
 packages/webapp/src/pages/collection.tsx      |  22 ++--
 packages/webapp/src/pages/index.tsx           |   9 +-
 packages/webapp/src/pages/play.tsx            |  54 +++++-----
 packages/webapp/src/store/atoms.ts            |   2 +-
 packages/webapp/src/store/hooks.ts            |   1 -
 packages/webapp/src/store/network.ts          |   9 +-
 packages/webapp/src/store/setup.ts            |   5 +-
 packages/webapp/src/store/subscriptions.ts    |   9 +-
 packages/webapp/src/store/update.ts           |  21 ++--
 packages/webapp/src/store/write.ts            |   4 +-
 packages/webapp/src/utils/jotai.ts            |   2 +-
 packages/webapp/src/utils/react-utils.ts      |   2 +-
 .../webapp/src/utils/zkproofs/proofWorker.ts  |   2 +-
 packages/webapp/src/utils/zkproofs/proofs.ts  |   2 +-
 packages/webapp/src/wagmi/BurnerConnector.ts  |   8 +-
 packages/webapp/wagmi.config.ts               |   3 +-
 pnpm-lock.yaml                                | 102 +++++++++++++++---
 64 files changed, 324 insertions(+), 210 deletions(-)

diff --git a/packages/webapp/.eslintrc.cjs b/packages/webapp/.eslintrc.cjs
index 3d4bad6d..6e05e0c1 100644
--- 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/.vscode/settings.json b/packages/webapp/.vscode/settings.json
index f288ef4a..2f0fcb6b 100644
--- 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/package.json b/packages/webapp/package.json
index 241f462a..3f348273 100644
--- 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,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",
diff --git a/packages/webapp/src/actions/concede.ts b/packages/webapp/src/actions/concede.ts
index e15ac381..55d9805f 100644
--- 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
index 48d465a6..6bc9630a 100644
--- 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
index e21bcbae..46e40e88 100644
--- 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
index 14e3a24d..6d6829e8 100644
--- 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
index fe8fca64..56503cfd 100644
--- 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
index fbb1c6ed..72af0b54 100644
--- 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"
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/actions/libContractWrite.ts b/packages/webapp/src/actions/libContractWrite.ts
index 883352b2..3362aeca 100644
--- 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
index da37e81e..91f7a128 100644
--- 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
index 348f8eb3..6d4cd448 100644
--- 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
index 370218c4..ff7cdfb1 100644
--- 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 {
diff --git a/packages/webapp/src/components/cards/cardContainer.tsx b/packages/webapp/src/components/cards/cardContainer.tsx
index 9c5fcfa1..6ee89971 100644
--- 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
diff --git a/packages/webapp/src/components/cards/draggedCard.tsx b/packages/webapp/src/components/cards/draggedCard.tsx
index 06a90ee7..2f2e80bc 100644
--- 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 {
diff --git a/packages/webapp/src/components/cards/handCard.tsx b/packages/webapp/src/components/cards/handCard.tsx
index 18ad9240..5feb8f39 100644
--- a/packages/webapp/src/components/cards/handCard.tsx
+++ b/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 {
diff --git a/packages/webapp/src/components/collection/cardCollectionDisplay.tsx b/packages/webapp/src/components/collection/cardCollectionDisplay.tsx
index f3911809..ffec6b8c 100644
--- a/packages/webapp/src/components/collection/cardCollectionDisplay.tsx
+++ b/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 {
diff --git a/packages/webapp/src/components/collection/deckList.tsx b/packages/webapp/src/components/collection/deckList.tsx
index d85fdc10..89abdaa3 100644
--- a/packages/webapp/src/components/collection/deckList.tsx
+++ b/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[]
diff --git a/packages/webapp/src/components/collection/deckPanel.tsx b/packages/webapp/src/components/collection/deckPanel.tsx
index 63a4b7b4..c7bc2e32 100644
--- a/packages/webapp/src/components/collection/deckPanel.tsx
+++ b/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
diff --git a/packages/webapp/src/components/collection/filterPanel.tsx b/packages/webapp/src/components/collection/filterPanel.tsx
index f3089936..6e4e9931 100644
--- a/packages/webapp/src/components/collection/filterPanel.tsx
+++ b/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 {
diff --git a/packages/webapp/src/components/hand.tsx b/packages/webapp/src/components/hand.tsx
index b38ff4d4..e1412bb9 100644
--- a/packages/webapp/src/components/hand.tsx
+++ b/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,
diff --git a/packages/webapp/src/components/lib/modal.tsx b/packages/webapp/src/components/lib/modal.tsx
index a9b874b7..f2b91fd0 100644
--- a/packages/webapp/src/components/lib/modal.tsx
+++ b/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"
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/components/lib/modalElements.tsx b/packages/webapp/src/components/lib/modalElements.tsx
index 95674911..9626b739 100644
--- a/packages/webapp/src/components/lib/modalElements.tsx
+++ b/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 = () => {
diff --git a/packages/webapp/src/components/link.tsx b/packages/webapp/src/components/link.tsx
index 9cdc831b..581121f2 100644
--- a/packages/webapp/src/components/link.tsx
+++ b/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
diff --git a/packages/webapp/src/components/modals/createGameModal.tsx b/packages/webapp/src/components/modals/createGameModal.tsx
index e77b7b86..9d1195f7 100644
--- a/packages/webapp/src/components/modals/createGameModal.tsx
+++ b/packages/webapp/src/components/modals/createGameModal.tsx
@@ -1,20 +1,20 @@
-import { useRouter } from "next/router"
 import { useCallback, useEffect, useState } from "react"
-import { decodeEventLog } from "viem"
+import { useRouter } from "next/router"
 
-import { LoadingModalContent } from "src/components/modals/loadingModal"
+import { joinGame, reportInconsistentGameState } from "src/actions"
+import { concede } from "src/actions/concede"
 import { Spinner } from "src/components/lib/modalElements"
 import { InGameMenuModalContent } from "src/components/modals/inGameMenuModalContent"
+import { LoadingModalContent } from "src/components/modals/loadingModal"
+import { Button } from "src/components/ui/button"
+import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "src/components/ui/dialog"
 import { gameABI } from "src/generated"
+import { useCancellationHandler } from "src/hooks/useCancellationHandler"
 import { useGameWrite } from "src/hooks/useFableWrite"
 import * as store from "src/store/hooks"
-import { joinGame, reportInconsistentGameState } from "src/actions"
 import { GameStatus } from "src/store/types"
 import { navigate } from "src/utils/navigate"
-import { useCancellationHandler } from "src/hooks/useCancellationHandler"
-import { concede } from "src/actions/concede"
-import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "src/components/ui/dialog"
-import { Button } from "src/components/ui/button"
+import { decodeEventLog } from "viem"
 
 interface CreateGameModalContentProps {
     loading: string | null
diff --git a/packages/webapp/src/components/modals/gameEndedModal.tsx b/packages/webapp/src/components/modals/gameEndedModal.tsx
index 6926b3e5..ddacc728 100644
--- a/packages/webapp/src/components/modals/gameEndedModal.tsx
+++ b/packages/webapp/src/components/modals/gameEndedModal.tsx
@@ -1,10 +1,10 @@
-import { useRouter } from "next/router"
 import { useCallback, useState } from "react"
+import { useRouter } from "next/router"
 
+import { Button } from "src/components/ui/button"
+import { Dialog, DialogContent,DialogDescription, DialogTitle } from "src/components/ui/dialog"
 import { useGameData, useGameID } from "src/store/hooks"
 import { navigate } from "src/utils/navigate"
-import { Dialog, DialogDescription, DialogTitle, DialogContent } from "src/components/ui/dialog"
-import { Button } from "src/components/ui/button"
 
 /**
  * This modal is displayed in the "/play" page, when the game ends. It can be dismissed if the
diff --git a/packages/webapp/src/components/modals/globalErrorModal.tsx b/packages/webapp/src/components/modals/globalErrorModal.tsx
index 0b8bf72b..c63011c1 100644
--- a/packages/webapp/src/components/modals/globalErrorModal.tsx
+++ b/packages/webapp/src/components/modals/globalErrorModal.tsx
@@ -1,8 +1,9 @@
+import { useEffect, useState } from "react"
+
+import { Button } from "src/components/ui/button"
 import { ErrorConfig } from "src/store/types"
 
 import { Dialog, DialogContent, DialogTitle } from "../ui/dialog"
-import { Button } from "src/components/ui/button"
-import { useEffect, useState } from "react"
 
 /**
  * A modal displayed globally (setup in _app.tsx) whenever the errorConfig state is set to non-null.
diff --git a/packages/webapp/src/components/modals/inGameMenuModalContent.tsx b/packages/webapp/src/components/modals/inGameMenuModalContent.tsx
index 5cf14e87..7ee356c3 100644
--- a/packages/webapp/src/components/modals/inGameMenuModalContent.tsx
+++ b/packages/webapp/src/components/modals/inGameMenuModalContent.tsx
@@ -1,8 +1,9 @@
 import Link from "next/link"
 
-import { DialogDescription, DialogTitle } from "../ui/dialog"
 import { Button } from "src/components/ui/button"
 
+import { DialogDescription, DialogTitle } from "../ui/dialog"
+
 /**
  * This modal content is shared by both the {@link CreateGameModal} (for the game creator) and the
  * {@link JoinGameModal} (for the joiner), and is displayed when the game is in progress but the
diff --git a/packages/webapp/src/components/modals/joinGameModal.tsx b/packages/webapp/src/components/modals/joinGameModal.tsx
index 6d0161ca..8a093c7e 100644
--- a/packages/webapp/src/components/modals/joinGameModal.tsx
+++ b/packages/webapp/src/components/modals/joinGameModal.tsx
@@ -1,22 +1,22 @@
-import debounce from "lodash/debounce"
-import { useRouter } from "next/router"
 import React, { useEffect, useMemo, useState } from "react"
+import { useRouter } from "next/router"
+
+import debounce from "lodash/debounce"
+import { joinGame, reportInconsistentGameState } from "src/actions"
+import { concede } from "src/actions/concede"
 import { Spinner } from "src/components/lib/modalElements"
 import { InGameMenuModalContent } from "src/components/modals/inGameMenuModalContent"
-
-import * as store from "src/store/hooks"
-import { isStringPositiveInteger, parseBigIntOrNull } from "src/utils/js-utils"
 import { LoadingModalContent } from "src/components/modals/loadingModal"
-import { joinGame, reportInconsistentGameState } from "src/actions"
-import { setError } from "src/store/write"
+import { Button } from "src/components/ui/button"
+import { Input } from "src/components/ui/input"
+import { useCancellationHandler } from "src/hooks/useCancellationHandler"
+import * as store from "src/store/hooks"
 import { GameStatus } from "src/store/types"
+import { setError } from "src/store/write"
+import { isStringPositiveInteger, parseBigIntOrNull } from "src/utils/js-utils"
 import { navigate } from "src/utils/navigate"
-import { useCancellationHandler } from "src/hooks/useCancellationHandler"
-import { concede } from "src/actions/concede"
 
 import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "../ui/dialog"
-import { Button } from "src/components/ui/button"
-import { Input } from "src/components/ui/input"
 
 interface JoinGameModalContentProps {
     loading: string | null
diff --git a/packages/webapp/src/components/modals/loadingModal.tsx b/packages/webapp/src/components/modals/loadingModal.tsx
index 579eb8b5..24cbaa5b 100644
--- a/packages/webapp/src/components/modals/loadingModal.tsx
+++ b/packages/webapp/src/components/modals/loadingModal.tsx
@@ -1,8 +1,8 @@
 import { ReactNode, useCallback } from "react"
 
 import { Spinner } from "src/components/lib/modalElements"
-import { Dialog, DialogDescription, DialogTitle, DialogContent } from "src/components/ui/dialog"
 import { Button } from "src/components/ui/button"
+import { Dialog, DialogContent,DialogDescription, DialogTitle } from "src/components/ui/dialog"
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/components/modals/mintDeckModal.tsx b/packages/webapp/src/components/modals/mintDeckModal.tsx
index 87a8ac74..a169fecf 100644
--- a/packages/webapp/src/components/modals/mintDeckModal.tsx
+++ b/packages/webapp/src/components/modals/mintDeckModal.tsx
@@ -1,9 +1,9 @@
 import { useState } from "react"
 
-import { useDeckAirdropWrite } from "src/hooks/useFableWrite"
 import { LoadingModalContent } from "src/components/modals/loadingModal"
-import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "src/components/ui/dialog"
 import { Button } from "src/components/ui/button"
+import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "src/components/ui/dialog"
+import { useDeckAirdropWrite } from "src/hooks/useFableWrite"
 
 interface MintDeckModalContentProps {
     loading: string | null
diff --git a/packages/webapp/src/components/navbar.tsx b/packages/webapp/src/components/navbar.tsx
index b5f15b94..89f81527 100644
--- a/packages/webapp/src/components/navbar.tsx
+++ b/packages/webapp/src/components/navbar.tsx
@@ -1,7 +1,9 @@
 import Link from "next/link"
+
 import { ConnectKitButton } from "connectkit"
+import { NavigationMenu, NavigationMenuItem,NavigationMenuList } from "src/components/ui/navigation-menu"
+
 import { Button } from "./ui/button"
-import { NavigationMenu, NavigationMenuList, NavigationMenuItem } from "src/components/ui/navigation-menu"
 
 export const Navbar = () => {
     return (
diff --git a/packages/webapp/src/components/playerBoard.tsx b/packages/webapp/src/components/playerBoard.tsx
index 7c33b0f8..ccd37cec 100644
--- a/packages/webapp/src/components/playerBoard.tsx
+++ b/packages/webapp/src/components/playerBoard.tsx
@@ -1,7 +1,8 @@
-import * as store from "src/store/hooks"
-import { convertBigIntArrayToStringArray, shortenAddress } from "src/utils/js-utils"
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable"
+import * as store from "src/store/hooks"
 import { CardPlacement } from "src/store/types"
+import { convertBigIntArrayToStringArray, shortenAddress } from "src/utils/js-utils"
+
 import CardContainer from "./cards/cardContainer"
 
 interface PlayerBoardProps {
diff --git a/packages/webapp/src/components/ui/button.tsx b/packages/webapp/src/components/ui/button.tsx
index 0648de01..93b33424 100644
--- a/packages/webapp/src/components/ui/button.tsx
+++ b/packages/webapp/src/components/ui/button.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
+
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "src/utils/ui-utils"
 
 // ref: https://ui.shadcn.com/docs/components/button
diff --git a/packages/webapp/src/components/ui/dialog.tsx b/packages/webapp/src/components/ui/dialog.tsx
index dcdc5d8e..64eadc22 100644
--- a/packages/webapp/src/components/ui/dialog.tsx
+++ b/packages/webapp/src/components/ui/dialog.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
+
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
-
 import { cn } from "src/utils/ui-utils"
 
 const Dialog = DialogPrimitive.Root
diff --git a/packages/webapp/src/components/ui/navigation-menu.tsx b/packages/webapp/src/components/ui/navigation-menu.tsx
index 08458a2e..2fb7d0ec 100644
--- a/packages/webapp/src/components/ui/navigation-menu.tsx
+++ b/packages/webapp/src/components/ui/navigation-menu.tsx
@@ -1,8 +1,8 @@
 import * as React from "react"
+
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
 import { ChevronDown } from "lucide-react"
-
 import { cn } from "src/utils/ui-utils"
 
 // ref: https://ui.shadcn.com/docs/components/navigation-menu
diff --git a/packages/webapp/src/components/ui/sonner.tsx b/packages/webapp/src/components/ui/sonner.tsx
index bb08b5c0..3edc70b7 100644
--- a/packages/webapp/src/components/ui/sonner.tsx
+++ b/packages/webapp/src/components/ui/sonner.tsx
@@ -1,4 +1,5 @@
 import { useTheme } from "next-themes"
+
 import { Toaster as Sonner } from "sonner"
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
diff --git a/packages/webapp/src/deployment.ts b/packages/webapp/src/deployment.ts
index e97311e1..a47e0173 100644
--- a/packages/webapp/src/deployment.ts
+++ b/packages/webapp/src/deployment.ts
@@ -5,8 +5,8 @@
  * @module deployment
  */
 
-import type { Address } from "wagmi"
 import * as deployment_ from "contracts/out/deployment.json" assert { type: "json" }
+import type { Address } from "wagmi"
 
 export interface Deployment {
     CardsCollection: Address
diff --git a/packages/webapp/src/game/drawInitialHand.ts b/packages/webapp/src/game/drawInitialHand.ts
index 2e9601d7..681ec155 100644
--- a/packages/webapp/src/game/drawInitialHand.ts
+++ b/packages/webapp/src/game/drawInitialHand.ts
@@ -5,9 +5,9 @@
  */
 
 import { Hash } from "src/chain"
-import { mimcHash } from "src/utils/hashing"
-import { PrivateInfo } from "src/store/types"
 import { FELT_SIZE, INITIAL_HAND_SIZE, MAX_DECK_SIZE, MAX_HAND_SIZE } from "src/game/constants"
+import { PrivateInfo } from "src/store/types"
+import { mimcHash } from "src/utils/hashing"
 import { bigintToHexString, parseBigInt } from "src/utils/js-utils"
 
 // =================================================================================================
diff --git a/packages/webapp/src/game/fableProofs.ts b/packages/webapp/src/game/fableProofs.ts
index 68a77948..2b75cfee 100644
--- a/packages/webapp/src/game/fableProofs.ts
+++ b/packages/webapp/src/game/fableProofs.ts
@@ -6,8 +6,8 @@
  * @module game/fableProofs
  */
 
-import { packBytes } from "src/utils/zkproofs/proofs"
 import { FELT_SIZE, NUM_FELTS_FOR_CARDS } from "src/game/constants"
+import { packBytes } from "src/utils/zkproofs/proofs"
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/game/misc.ts b/packages/webapp/src/game/misc.ts
index e6ce7af7..6f80f403 100644
--- a/packages/webapp/src/game/misc.ts
+++ b/packages/webapp/src/game/misc.ts
@@ -1,8 +1,8 @@
 /**
  * Misc game logic helpers.
  */
-import { FetchedGameData, GameStep } from "src/store/types"
 import { Address } from "src/chain"
+import { FetchedGameData, GameStep } from "src/store/types"
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/hooks/useCancellationHandler.ts b/packages/webapp/src/hooks/useCancellationHandler.ts
index da193ef5..fcce13fd 100644
--- a/packages/webapp/src/hooks/useCancellationHandler.ts
+++ b/packages/webapp/src/hooks/useCancellationHandler.ts
@@ -4,9 +4,10 @@
  * @module hooks/useCancellationHandler
  */
 
-import { CancellationHandler } from "src/components/modals/loadingModal"
 import { useEffect, useRef } from "react"
 
+import { CancellationHandler } from "src/components/modals/loadingModal"
+
 // =================================================================================================
 
 /**
diff --git a/packages/webapp/src/hooks/useChainWrite.ts b/packages/webapp/src/hooks/useChainWrite.ts
index 2e24a8bc..5f55f380 100644
--- a/packages/webapp/src/hooks/useChainWrite.ts
+++ b/packages/webapp/src/hooks/useChainWrite.ts
@@ -1,6 +1,6 @@
-import { useContractWrite, usePrepareContractWrite, useWaitForTransaction } from "wagmi"
-import { type TransactionReceipt } from "viem"
 import { Address, Hash } from "src/chain"
+import { type TransactionReceipt } from "viem"
+import { useContractWrite, usePrepareContractWrite, useWaitForTransaction } from "wagmi"
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/hooks/useDebug.ts b/packages/webapp/src/hooks/useDebug.ts
index 1abb1621..41e940a5 100644
--- a/packages/webapp/src/hooks/useDebug.ts
+++ b/packages/webapp/src/hooks/useDebug.ts
@@ -1,4 +1,5 @@
 import { useDebugValue, useState } from "react"
+
 import { toString } from "src/utils/js-utils"
 
 // -------------------------------------------------------------------------------------------------
diff --git a/packages/webapp/src/hooks/useDragEvents.ts b/packages/webapp/src/hooks/useDragEvents.ts
index f5ded6c7..91c26a0e 100644
--- a/packages/webapp/src/hooks/useDragEvents.ts
+++ b/packages/webapp/src/hooks/useDragEvents.ts
@@ -1,10 +1,11 @@
-import { DragStartEvent, DragEndEvent, UniqueIdentifier } from "@dnd-kit/core"
+import { useCallback } from "react"
+
+import { DragEndEvent, DragStartEvent, UniqueIdentifier } from "@dnd-kit/core"
+import { playCard } from "src/actions/playCard"
+import { CancellationHandler } from "src/components/modals/loadingModal"
 import * as store from "src/store/hooks"
 import { CardPlacement } from "src/store/types"
-import { useCallback } from "react"
 import { extractCardID } from "src/utils/js-utils"
-import { CancellationHandler } from "src/components/modals/loadingModal"
-import { playCard } from "src/actions/playCard"
 
 function useDragEvents(
     setActiveId: (id: UniqueIdentifier | null) => void,
diff --git a/packages/webapp/src/hooks/useFableWrite.ts b/packages/webapp/src/hooks/useFableWrite.ts
index 13441ed7..753a6781 100644
--- a/packages/webapp/src/hooks/useFableWrite.ts
+++ b/packages/webapp/src/hooks/useFableWrite.ts
@@ -1,10 +1,8 @@
-import { type TransactionReceipt } from "viem"
-
+import { Hash } from "src/chain"
 import { deployment } from "src/deployment"
 import { cardsCollectionABI, deckAirdropABI, gameABI, inventoryABI } from "src/generated"
 import { useChainWrite, UseWriteResult } from "src/hooks/useChainWrite"
-
-import { Hash } from "src/chain"
+import { type TransactionReceipt } from "viem"
 
 // =================================================================================================
 // use<Contract>Write: just `useWrite` with the contract address and ABI already set.
diff --git a/packages/webapp/src/pages/_app.tsx b/packages/webapp/src/pages/_app.tsx
index 792fb2d4..17f69620 100644
--- a/packages/webapp/src/pages/_app.tsx
+++ b/packages/webapp/src/pages/_app.tsx
@@ -1,22 +1,25 @@
 // =================================================================================================
 
 // Must come first, so that can we can hook global members before they're used by imports.
-import "src/setup"
-import "src/store/setup"
-import { ConnectKitProvider } from "connectkit"
+import { ComponentType, useEffect } from "react"
 import { NextPage } from "next"
 import type { AppType } from "next/app"
 import Head from "next/head"
-import { useAccount, WagmiConfig } from "wagmi"
+import { useRouter } from "next/router"
+
+import { ConnectKitProvider } from "connectkit"
 import { ensureLocalAccountIndex, wagmiConfig } from "src/chain"
 import jotaiDebug from "src/components/lib/jotaiDebug"
 import { GlobalErrorModal } from "src/components/modals/globalErrorModal"
+import { Toaster } from "src/components/ui/sonner"
 import { useIsHydrated } from "src/hooks/useIsHydrated"
 import { useErrorConfig } from "src/store/hooks"
+import { useAccount, WagmiConfig } from "wagmi"
+
 import "src/styles/globals.css"
-import { useRouter } from "next/router"
-import { ComponentType, useEffect } from "react"
-import { Toaster } from "src/components/ui/sonner"
+
+import "src/setup"
+import "src/store/setup"
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/pages/collection.tsx b/packages/webapp/src/pages/collection.tsx
index 43439324..4eede447 100644
--- a/packages/webapp/src/pages/collection.tsx
+++ b/packages/webapp/src/pages/collection.tsx
@@ -1,23 +1,21 @@
-import debounce from "lodash/debounce"
+import React, { useEffect,useMemo, useState } from "react"
 import Head from "next/head"
+import { useRouter } from "next/router"
 
-import React, { useState, useMemo, useEffect } from "react"
-import { useAccount } from "wagmi"
-
+import debounce from "lodash/debounce"
+import { Address } from "src/chain"
+import CardCollectionDisplay from "src/components/collection/cardCollectionDisplay"
+import DeckList from "src/components/collection/deckList"
+import DeckPanel from "src/components/collection/deckPanel"
+import FilterPanel from "src/components/collection/filterPanel"
 import jotaiDebug from "src/components/lib/jotaiDebug"
 import { Navbar } from "src/components/navbar"
 import { deployment } from "src/deployment"
 import { useInventoryCardsCollectionGetCollection } from "src/generated"
-import { Deck, Card } from "src/store/types"
-import { Address } from "src/chain"
 import { FablePage } from "src/pages/_app"
-import { useRouter } from "next/router"
+import { Card,Deck } from "src/store/types"
 import { navigate } from "utils/navigate"
-
-import FilterPanel from "src/components/collection/filterPanel"
-import CardCollectionDisplay from "src/components/collection/cardCollectionDisplay"
-import DeckList from "src/components/collection/deckList"
-import DeckPanel from "src/components/collection/deckPanel"
+import { useAccount } from "wagmi"
 
 // NOTE(norswap & geniusgarlic): Just an example, when the game actually has effects & types,
 //   fetch those from the chain instead of hardcoding them here.
diff --git a/packages/webapp/src/pages/index.tsx b/packages/webapp/src/pages/index.tsx
index e81dcd4f..6f6578d3 100644
--- a/packages/webapp/src/pages/index.tsx
+++ b/packages/webapp/src/pages/index.tsx
@@ -1,16 +1,15 @@
 import { ConnectKitButton, useModal } from "connectkit"
-import { useAccount, useNetwork } from "wagmi"
-
 import { Address, chains } from "src/chain"
-import { deployment } from "src/deployment"
+import Link from "src/components/link"
 import { CreateGameModal } from "src/components/modals/createGameModal"
 import { JoinGameModal } from "src/components/modals/joinGameModal"
 import { MintDeckModal } from "src/components/modals/mintDeckModal"
+import { Button } from "src/components/ui/button"
+import { deployment } from "src/deployment"
 import { useGameInGame } from "src/generated"
 import { FablePage } from "src/pages/_app"
 import { useGameID } from "src/store/hooks"
-import { Button } from "src/components/ui/button"
-import Link from "src/components/link"
+import { useAccount, useNetwork } from "wagmi"
 
 const Home: FablePage = ({ isHydrated }) => {
     const { address } = useAccount()
diff --git a/packages/webapp/src/pages/play.tsx b/packages/webapp/src/pages/play.tsx
index 007f7660..045d53e1 100644
--- a/packages/webapp/src/pages/play.tsx
+++ b/packages/webapp/src/pages/play.tsx
@@ -1,44 +1,44 @@
 import { useCallback, useEffect, useState } from "react"
-
-import Hand from "src/components/hand"
-import { LoadingModal } from "src/components/modals/loadingModal"
-import { GameEndedModal } from "src/components/modals/gameEndedModal"
-import { Navbar } from "src/components/navbar"
-import * as store from "src/store/hooks"
-import { CardPlacement, GameStatus, GameStep } from "src/store/types"
-import { FablePage } from "src/pages/_app"
-import { Address } from "viem"
-import { readContract } from "wagmi/actions"
-import { deployment } from "src/deployment"
-import { gameABI } from "src/generated"
+import { createPortal } from "react-dom"
 import { useRouter } from "next/router"
-import { setError } from "src/store/write"
-import { DISMISS_BUTTON } from "src/actions/errors"
-import { navigate } from "src/utils/navigate"
-import { concede } from "src/actions/concede"
-import { drawCard } from "src/actions/drawCard"
-import { endTurn } from "src/actions/endTurn"
-import { currentPlayer, isEndingTurn } from "src/game/misc"
-import { useCancellationHandler } from "src/hooks/useCancellationHandler"
-import { usePlayerHand } from "src/store/hooks"
+
 import {
+    closestCenter,
+    defaultDropAnimationSideEffects,
     DndContext,
     DragOverlay,
     DropAnimation,
     MeasuringStrategy,
     MouseSensor,
     UniqueIdentifier,
-    closestCenter,
-    defaultDropAnimationSideEffects,
     useSensor,
     useSensors,
 } from "@dnd-kit/core"
-import PlayerBoard from "src/components/playerBoard"
-import { createPortal } from "react-dom"
-import useDragEvents from "src/hooks/useDragEvents"
+import { toast } from "sonner"
+import { concede } from "src/actions/concede"
+import { drawCard } from "src/actions/drawCard"
+import { endTurn } from "src/actions/endTurn"
+import { DISMISS_BUTTON } from "src/actions/errors"
 import CardContainer from "src/components/cards/cardContainer"
+import Hand from "src/components/hand"
+import { GameEndedModal } from "src/components/modals/gameEndedModal"
+import { LoadingModal } from "src/components/modals/loadingModal"
+import { Navbar } from "src/components/navbar"
+import PlayerBoard from "src/components/playerBoard"
 import { Button } from "src/components/ui/button"
-import { toast } from "sonner"
+import { deployment } from "src/deployment"
+import { currentPlayer, isEndingTurn } from "src/game/misc"
+import { gameABI } from "src/generated"
+import { useCancellationHandler } from "src/hooks/useCancellationHandler"
+import useDragEvents from "src/hooks/useDragEvents"
+import { FablePage } from "src/pages/_app"
+import * as store from "src/store/hooks"
+import { usePlayerHand } from "src/store/hooks"
+import { CardPlacement, GameStatus, GameStep } from "src/store/types"
+import { setError } from "src/store/write"
+import { navigate } from "src/utils/navigate"
+import { Address } from "viem"
+import { readContract } from "wagmi/actions"
 
 const Play: FablePage = ({ isHydrated }) => {
     const [gameID, setGameID] = store.useGameID()
diff --git a/packages/webapp/src/store/atoms.ts b/packages/webapp/src/store/atoms.ts
index 00c072a8..fa24bfe1 100644
--- a/packages/webapp/src/store/atoms.ts
+++ b/packages/webapp/src/store/atoms.ts
@@ -8,8 +8,8 @@
  */
 
 import { atom, getDefaultStore } from "jotai"
-import { Address } from "src/chain"
 import { atomWithStorage } from "jotai/utils"
+import { Address } from "src/chain"
 import * as derive from "src/store/derive"
 import type { ErrorConfig, FetchedGameData, PlayerData, PrivateInfo, PrivateInfoStore } from "src/store/types"
 import { GameStatus } from "src/store/types"
diff --git a/packages/webapp/src/store/hooks.ts b/packages/webapp/src/store/hooks.ts
index 65d36ea3..7a1a6a9c 100644
--- a/packages/webapp/src/store/hooks.ts
+++ b/packages/webapp/src/store/hooks.ts
@@ -8,7 +8,6 @@
  */
 
 import { useAtom, useAtomValue } from "jotai"
-
 import { Address } from "src/chain"
 import * as store from "src/store/atoms"
 import { ErrorConfig, FetchedGameData, GameStatus, PlayerData, PrivateInfo } from "src/store/types"
diff --git a/packages/webapp/src/store/network.ts b/packages/webapp/src/store/network.ts
index 6d9c1eaf..980b188f 100644
--- a/packages/webapp/src/store/network.ts
+++ b/packages/webapp/src/store/network.ts
@@ -5,13 +5,12 @@
  * @module store/network
  */
 
-import { readContract } from "wagmi/actions"
-
-import { gameABI, inventoryABI } from "src/generated"
+import { type Address } from "src/chain"
 import { deployment } from "src/deployment"
-import { type Fetched, throttledFetch } from "src/utils/throttledFetch"
+import { gameABI, inventoryABI } from "src/generated"
 import { type FetchedGameData } from "src/store/types"
-import { type Address } from "src/chain"
+import { type Fetched, throttledFetch } from "src/utils/throttledFetch"
+import { readContract } from "wagmi/actions"
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/store/setup.ts b/packages/webapp/src/store/setup.ts
index 9216e13d..5be957b8 100644
--- a/packages/webapp/src/store/setup.ts
+++ b/packages/webapp/src/store/setup.ts
@@ -7,11 +7,10 @@
  * @module store/setup
  */
 
-import { getAccount, watchAccount, watchNetwork } from "wagmi/actions"
-
+import { GAME_DATA_REFRESH_INTERVAL } from "src/constants"
 import * as store from "src/store/atoms"
 import { gameIDListener, refreshGameData, updateNetwork, updatePlayerAddress } from "src/store/update"
-import { GAME_DATA_REFRESH_INTERVAL } from "src/constants"
+import { getAccount, watchAccount, watchNetwork } from "wagmi/actions"
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/store/subscriptions.ts b/packages/webapp/src/store/subscriptions.ts
index 03087dcf..a55b6e2a 100644
--- a/packages/webapp/src/store/subscriptions.ts
+++ b/packages/webapp/src/store/subscriptions.ts
@@ -11,16 +11,15 @@
 
 // =================================================================================================
 
-import { Log } from "viem"
-import { getPublicClient } from "wagmi/actions"
-
+import { DISMISS_BUTTON } from "src/actions/errors"
 import { deployment } from "src/deployment"
 import { gameABI } from "src/generated"
 import * as store from "src/store/atoms"
 import { refreshGameData } from "src/store/update"
-import { format } from "src/utils/js-utils"
 import { setError } from "src/store/write"
-import { DISMISS_BUTTON } from "src/actions/errors"
+import { format } from "src/utils/js-utils"
+import { Log } from "viem"
+import { getPublicClient } from "wagmi/actions"
 
 // =================================================================================================
 // SUBSCRIPTION MANAGEMENT
diff --git a/packages/webapp/src/store/update.ts b/packages/webapp/src/store/update.ts
index 7b38eea7..ad175a70 100644
--- a/packages/webapp/src/store/update.ts
+++ b/packages/webapp/src/store/update.ts
@@ -6,22 +6,21 @@
 
 // =================================================================================================
 
-import { getBlock } from "viem/actions"
-import { getAccount, getNetwork, getPublicClient } from "wagmi/actions"
-
+import { contractWriteThrowing } from "src/actions/libContractWrite"
 import { AccountResult, Address, chains, NetworkResult, ZeroHash } from "src/chain"
-import { subscribeToGame } from "src/store/subscriptions"
+import { deployment } from "src/deployment"
+import { PROOF_CURVE_ORDER } from "src/game/constants"
+import { gameABI } from "src/generated"
 import * as store from "src/store/atoms"
 import * as net from "src/store/network"
-import { THROTTLED, ZOMBIE } from "src/utils/throttledFetch"
-import { formatTimestamp, parseBigInt } from "src/utils/js-utils"
+import { getGameStatus, getPlayerData } from "src/store/read"
+import { subscribeToGame } from "src/store/subscriptions"
 import { FetchedGameData, GameStatus } from "src/store/types"
 import { setError } from "src/store/write"
-import { contractWriteThrowing } from "src/actions/libContractWrite"
-import { deployment } from "src/deployment"
-import { gameABI } from "src/generated"
-import { PROOF_CURVE_ORDER } from "src/game/constants"
-import { getGameStatus, getPlayerData } from "src/store/read"
+import { formatTimestamp, parseBigInt } from "src/utils/js-utils"
+import { THROTTLED, ZOMBIE } from "src/utils/throttledFetch"
+import { getBlock } from "viem/actions"
+import { getAccount, getNetwork, getPublicClient } from "wagmi/actions"
 
 // =================================================================================================
 // CHANGE LISTENERS
diff --git a/packages/webapp/src/store/write.ts b/packages/webapp/src/store/write.ts
index 287b0646..27990683 100644
--- a/packages/webapp/src/store/write.ts
+++ b/packages/webapp/src/store/write.ts
@@ -5,13 +5,13 @@
  */
 
 import { Address } from "src/chain"
+import { PROOF_CURVE_ORDER } from "src/game/constants"
 import * as store from "src/store/atoms"
 import { ErrorConfig, PrivateInfo } from "src/store/types"
+import { mimcHash } from "src/utils/hashing"
 import { randomUint256 } from "src/utils/js-utils"
 
 import "src/utils/extensions"
-import { mimcHash } from "src/utils/hashing"
-import { PROOF_CURVE_ORDER } from "src/game/constants"
 
 const get = store.get
 const set = store.set
diff --git a/packages/webapp/src/utils/jotai.ts b/packages/webapp/src/utils/jotai.ts
index 880d62d7..539b8898 100644
--- a/packages/webapp/src/utils/jotai.ts
+++ b/packages/webapp/src/utils/jotai.ts
@@ -4,7 +4,7 @@
  * @module utils/jotai
  */
 
-import { atom, Atom } from "jotai"
+import { Atom, atom } from "jotai"
 import { isEqual } from "lodash"
 
 // =================================================================================================
diff --git a/packages/webapp/src/utils/react-utils.ts b/packages/webapp/src/utils/react-utils.ts
index 29cbc070..75c27b6d 100644
--- a/packages/webapp/src/utils/react-utils.ts
+++ b/packages/webapp/src/utils/react-utils.ts
@@ -6,7 +6,7 @@
 
 // =================================================================================================
 
-import { atom, type Atom, type Getter, type Setter, type WritableAtom } from "jotai"
+import { type Atom, atom, type Getter, type Setter, type WritableAtom } from "jotai"
 
 // =================================================================================================
 // Recreating (simplified) Jotai types
diff --git a/packages/webapp/src/utils/zkproofs/proofWorker.ts b/packages/webapp/src/utils/zkproofs/proofWorker.ts
index 27f983f8..1d7c42ea 100644
--- a/packages/webapp/src/utils/zkproofs/proofWorker.ts
+++ b/packages/webapp/src/utils/zkproofs/proofWorker.ts
@@ -4,7 +4,7 @@
  * Used from {@link proveInWorker}.
  */
 
-import { prove, type ProofInputs } from "src/utils/zkproofs/proofs"
+import { type ProofInputs,prove } from "src/utils/zkproofs/proofs"
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/utils/zkproofs/proofs.ts b/packages/webapp/src/utils/zkproofs/proofs.ts
index fa97eb4a..4b957b7c 100644
--- a/packages/webapp/src/utils/zkproofs/proofs.ts
+++ b/packages/webapp/src/utils/zkproofs/proofs.ts
@@ -4,8 +4,8 @@
  * @module utils/zkproofs/proofs
  */
 
-import { formatTimestamp } from "src/utils/js-utils"
 import { TimeoutError } from "src/utils/errors"
+import { formatTimestamp } from "src/utils/js-utils"
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const snarkjs = require("snarkjs")
diff --git a/packages/webapp/src/wagmi/BurnerConnector.ts b/packages/webapp/src/wagmi/BurnerConnector.ts
index 4203f05e..0fc6d602 100644
--- a/packages/webapp/src/wagmi/BurnerConnector.ts
+++ b/packages/webapp/src/wagmi/BurnerConnector.ts
@@ -2,13 +2,13 @@
  * Implementation of a Wagmi connector for a private key held in local browser storage.
  */
 
-import { Connector, ConnectorData, WalletClient } from "wagmi"
 import { Address } from "src/chain"
-import { PrivateKeyAccount, privateKeyToAccount } from "viem/accounts"
+import { AsyncLock } from "src/utils/asyncLock"
 import { createWalletClient, http } from "viem"
-import { localhost } from "wagmi/chains"
+import { PrivateKeyAccount, privateKeyToAccount } from "viem/accounts"
+import { Connector, ConnectorData, WalletClient } from "wagmi"
 import { connect, disconnect, getAccount } from "wagmi/actions"
-import { AsyncLock } from "src/utils/asyncLock"
+import { localhost } from "wagmi/chains"
 
 // =================================================================================================
 
diff --git a/packages/webapp/wagmi.config.ts b/packages/webapp/wagmi.config.ts
index 99988a41..efbfea49 100644
--- a/packages/webapp/wagmi.config.ts
+++ b/packages/webapp/wagmi.config.ts
@@ -1,6 +1,5 @@
 import { defineConfig } from "@wagmi/cli"
-import { react } from "@wagmi/cli/plugins"
-import { foundry } from "@wagmi/cli/plugins"
+import { foundry,react  } from "@wagmi/cli/plugins"
 
 export default defineConfig({
     out: "src/generated.ts",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec1e6f2a..94483294 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -96,9 +96,6 @@ importers:
       connectkit:
         specifier: ^1.5.3
         version: 1.5.3(@babel/core@7.23.2)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(viem@1.16.6)(wagmi@1.4.5)
-      eslint-config-prettier:
-        specifier: ^9.1.0
-        version: 9.1.0(eslint@8.52.0)
       jotai:
         specifier: ^2.4.3
         version: 2.4.3(@types/react@18.2.31)(react@18.2.0)
@@ -190,6 +187,15 @@ importers:
       eslint-config-next:
         specifier: ^13.5.6
         version: 13.5.6(eslint@8.52.0)(typescript@5.2.2)
+      eslint-config-prettier:
+        specifier: ^9.1.0
+        version: 9.1.0(eslint@8.52.0)
+      eslint-plugin-import:
+        specifier: ^2.29.1
+        version: 2.29.1(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.52.0)
+      eslint-plugin-simple-import-sort:
+        specifier: ^12.0.0
+        version: 12.0.0(eslint@8.52.0)
       postcss:
         specifier: ^8.4.31
         version: 8.4.31
@@ -208,6 +214,7 @@ packages:
   /@aashutoshrathi/word-wrap@1.2.6:
     resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
     engines: {node: '>=0.10.0'}
+    dev: true
 
   /@adraffy/ens-normalize@1.10.0:
     resolution: {integrity: sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q==}
@@ -1933,10 +1940,12 @@ packages:
     dependencies:
       eslint: 8.52.0
       eslint-visitor-keys: 3.4.3
+    dev: true
 
   /@eslint-community/regexpp@4.10.0:
     resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    dev: true
 
   /@eslint/eslintrc@2.1.2:
     resolution: {integrity: sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==}
@@ -1953,10 +1962,12 @@ packages:
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
       - supports-color
+    dev: true
 
   /@eslint/js@8.52.0:
     resolution: {integrity: sha512-mjZVbpaeMZludF2fsWLD0Z9gCref1Tk4i9+wddjRvpUNqqcndPkBD09N/Mapey0b3jaXbLm2kICwFv2E64QinA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
 
   /@ethersproject/abi@5.7.0:
     resolution: {integrity: sha512-351ktp42TiRcYB3H1OP8yajPeAQstMW/yCFokj/AthP9bLHzQFPlOrxOcwYEDkUAICmOHljvN4K39OMTMUa9RA==}
@@ -2340,13 +2351,16 @@ packages:
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
+    dev: true
 
   /@humanwhocodes/module-importer@1.0.1:
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
+    dev: true
 
   /@humanwhocodes/object-schema@2.0.1:
     resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
+    dev: true
 
   /@iden3/bigarray@0.0.2:
     resolution: {integrity: sha512-Xzdyxqm1bOFF6pdIsiHLLl3HkSLjbhqJHVyqaTxXt3RqXBEnmsUmEW47H7VOi/ak7TdkRpNkxjyK5Zbkm+y52g==}
@@ -4346,6 +4360,7 @@ packages:
 
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+    dev: true
 
   /@viem/anvil@0.0.5(debug@4.3.4):
     resolution: {integrity: sha512-aGgbwBNmCcxp08WcYwyL+n01HLLFYuhIczQLy6BPcomQ2CG4ngfTed8K73EOpsBTmvCxAcek0APcVS7UUWNALw==}
@@ -5003,11 +5018,13 @@ packages:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       acorn: 8.11.2
+    dev: true
 
   /acorn@8.11.2:
     resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
     engines: {node: '>=0.4.0'}
     hasBin: true
+    dev: true
 
   /aes-js@3.0.0:
     resolution: {integrity: sha512-H7wUZRn8WpTq9jocdxQ2c8x2sKo9ZVmzfRE13GiNJXfp7NcKYEdvl3vspKjXox6RIG2VtaRe4JFvxG4rqp2Zuw==}
@@ -5069,6 +5086,7 @@ packages:
       fast-json-stable-stringify: 2.1.0
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
+    dev: true
 
   /ajv@8.12.0:
     resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
@@ -5185,6 +5203,7 @@ packages:
 
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    dev: true
 
   /aria-hidden@1.2.3:
     resolution: {integrity: sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==}
@@ -6503,6 +6522,7 @@ packages:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
+    dev: true
 
   /css-color-keywords@1.0.0:
     resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==}
@@ -6925,6 +6945,7 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       esutils: 2.0.3
+    dev: true
 
   /dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
@@ -7311,8 +7332,8 @@ packages:
       '@typescript-eslint/parser': 6.8.0(eslint@8.52.0)(typescript@5.2.2)
       eslint: 8.52.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.52.0)
-      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.52.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.52.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.52.0)
       eslint-plugin-jsx-a11y: 6.7.1(eslint@8.52.0)
       eslint-plugin-react: 7.33.2(eslint@8.52.0)
       eslint-plugin-react-hooks: 4.6.0(eslint@8.52.0)
@@ -7329,7 +7350,7 @@ packages:
       eslint: '>=7.0.0'
     dependencies:
       eslint: 8.52.0
-    dev: false
+    dev: true
 
   /eslint-import-resolver-node@0.3.9:
     resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
@@ -7341,7 +7362,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.52.0):
+  /eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.52.0):
     resolution: {integrity: sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -7352,7 +7373,7 @@ packages:
       enhanced-resolve: 5.15.0
       eslint: 8.52.0
       eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.52.0)
-      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.52.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.52.0)
       fast-glob: 3.3.1
       get-tsconfig: 4.7.2
       is-core-module: 2.13.1
@@ -7389,13 +7410,13 @@ packages:
       debug: 3.2.7(supports-color@8.1.1)
       eslint: 8.52.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.52.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.52.0)
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /eslint-plugin-import@2.29.0(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.52.0):
-    resolution: {integrity: sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==}
+  /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.8.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.52.0):
+    resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
     engines: {node: '>=4'}
     peerDependencies:
       '@typescript-eslint/parser': '*'
@@ -7422,7 +7443,7 @@ packages:
       object.groupby: 1.0.1
       object.values: 1.1.7
       semver: 6.3.1
-      tsconfig-paths: 3.14.2
+      tsconfig-paths: 3.15.0
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -7488,6 +7509,14 @@ packages:
       string.prototype.matchall: 4.0.10
     dev: true
 
+  /eslint-plugin-simple-import-sort@12.0.0(eslint@8.52.0):
+    resolution: {integrity: sha512-8o0dVEdAkYap0Cn5kNeklaKcT1nUsa3LITWEuFk3nJifOoD+5JQGoyDUW2W/iPWwBsNBJpyJS9y4je/BgxLcyQ==}
+    peerDependencies:
+      eslint: '>=5.0.0'
+    dependencies:
+      eslint: 8.52.0
+    dev: true
+
   /eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -7502,10 +7531,12 @@ packages:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
+    dev: true
 
   /eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
 
   /eslint@8.52.0:
     resolution: {integrity: sha512-zh/JHnaixqHZsolRB/w9/02akBk9EPrOs9JwcTP2ek7yL5bVvXuRariiaAjjoJ5DvuwQ1WAE/HsMz+w17YgBCg==}
@@ -7552,6 +7583,7 @@ packages:
       text-table: 0.2.0
     transitivePeerDependencies:
       - supports-color
+    dev: true
 
   /espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
@@ -7560,6 +7592,7 @@ packages:
       acorn: 8.11.2
       acorn-jsx: 5.3.2(acorn@8.11.2)
       eslint-visitor-keys: 3.4.3
+    dev: true
 
   /esprima@1.2.2:
     resolution: {integrity: sha512-+JpPZam9w5DuJ3Q67SqsMGtiHKENSMRVoxvArfJZK01/BfLEObtZ6orJa/MtoGNR/rfMgp5837T41PAmTwAv/A==}
@@ -7577,12 +7610,14 @@ packages:
     engines: {node: '>=0.10'}
     dependencies:
       estraverse: 5.3.0
+    dev: true
 
   /esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
     engines: {node: '>=4.0'}
     dependencies:
       estraverse: 5.3.0
+    dev: true
 
   /estraverse@4.3.0:
     resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
@@ -7591,6 +7626,7 @@ packages:
   /estraverse@5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
+    dev: true
 
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@@ -7879,6 +7915,7 @@ packages:
 
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+    dev: true
 
   /fast-diff@1.3.0:
     resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
@@ -7896,6 +7933,7 @@ packages:
 
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+    dev: true
 
   /fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
@@ -7966,6 +8004,7 @@ packages:
     engines: {node: ^10.12.0 || >=12.0.0}
     dependencies:
       flat-cache: 3.1.1
+    dev: true
 
   /file-type@11.1.0:
     resolution: {integrity: sha512-rM0UO7Qm9K7TWTtA6AShI/t7H5BPjDeGVDaNyg9BjHAj3PysKy7+8C8D137R88jnR3rFJZQB/tFgydl5sN5m7g==}
@@ -8090,6 +8129,7 @@ packages:
     dependencies:
       locate-path: 6.0.0
       path-exists: 4.0.0
+    dev: true
 
   /find-up@6.3.0:
     resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
@@ -8106,6 +8146,7 @@ packages:
       flatted: 3.2.9
       keyv: 4.5.4
       rimraf: 3.0.2
+    dev: true
 
   /flat@5.0.2:
     resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==}
@@ -8114,6 +8155,7 @@ packages:
 
   /flatted@3.2.9:
     resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
+    dev: true
 
   /follow-redirects@1.15.3(debug@4.3.4):
     resolution: {integrity: sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==}
@@ -8437,6 +8479,7 @@ packages:
       minimatch: 3.1.2
       once: 1.4.0
       path-is-absolute: 1.0.1
+    dev: true
 
   /glob@8.1.0:
     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
@@ -8465,6 +8508,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       type-fest: 0.20.2
+    dev: true
 
   /globalthis@1.0.3:
     resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
@@ -8554,6 +8598,7 @@ packages:
 
   /graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+    dev: true
 
   /handle-thing@2.0.1:
     resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==}
@@ -8855,6 +8900,7 @@ packages:
   /ignore@5.2.4:
     resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
     engines: {node: '>= 4'}
+    dev: true
 
   /immutable@4.3.4:
     resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==}
@@ -8879,6 +8925,7 @@ packages:
   /imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
+    dev: true
 
   /indent-string@4.0.0:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
@@ -9089,6 +9136,7 @@ packages:
   /is-path-inside@3.0.3:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
+    dev: true
 
   /is-plain-obj@1.1.0:
     resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
@@ -9228,6 +9276,7 @@ packages:
 
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    dev: true
 
   /isobject@3.0.1:
     resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
@@ -9902,6 +9951,7 @@ packages:
     hasBin: true
     dependencies:
       argparse: 2.0.1
+    dev: true
 
   /jsbn@0.1.1:
     resolution: {integrity: sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==}
@@ -9923,6 +9973,7 @@ packages:
 
   /json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+    dev: true
 
   /json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
@@ -9939,6 +9990,7 @@ packages:
 
   /json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+    dev: true
 
   /json-schema-traverse@1.0.0:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
@@ -9950,6 +10002,7 @@ packages:
 
   /json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+    dev: true
 
   /json-stringify-safe@5.0.1:
     resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
@@ -10041,6 +10094,7 @@ packages:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
     dependencies:
       json-buffer: 3.0.1
+    dev: true
 
   /keyvaluestorage-interface@1.0.0:
     resolution: {integrity: sha512-8t6Q3TclQ4uZynJY9IGr2+SsIGwK9JHcO6ootkHCGA0CrQCRy+VkouYNO2xicET6b9al7QKzpebNow+gkpCL8g==}
@@ -10096,6 +10150,7 @@ packages:
     dependencies:
       prelude-ls: 1.2.1
       type-check: 0.4.0
+    dev: true
 
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
@@ -10178,6 +10233,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       p-locate: 5.0.0
+    dev: true
 
   /locate-path@7.2.0:
     resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
@@ -10215,6 +10271,7 @@ packages:
 
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+    dev: true
 
   /lodash.once@4.1.1:
     resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
@@ -10486,6 +10543,7 @@ packages:
 
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+    dev: true
 
   /negotiator@0.6.3:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
@@ -10846,6 +10904,7 @@ packages:
       levn: 0.4.1
       prelude-ls: 1.2.1
       type-check: 0.4.0
+    dev: true
 
   /ora@6.3.1:
     resolution: {integrity: sha512-ERAyNnZOfqM+Ao3RAvIXkYh5joP220yf59gVe2X/cI6SiCxIdi4c9HZKZD8R6q/RDXEje1THBju6iExiSsgJaQ==}
@@ -10904,6 +10963,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       yocto-queue: 0.1.0
+    dev: true
 
   /p-limit@4.0.0:
     resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
@@ -10923,6 +10983,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       p-limit: 3.1.0
+    dev: true
 
   /p-locate@6.0.0:
     resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
@@ -11036,6 +11097,7 @@ packages:
   /path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
+    dev: true
 
   /path-key@4.0.0:
     resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
@@ -11252,6 +11314,7 @@ packages:
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
+    dev: true
 
   /prepend-http@2.0.0:
     resolution: {integrity: sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==}
@@ -11445,6 +11508,7 @@ packages:
   /punycode@2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
+    dev: true
 
   /pure-rand@6.0.4:
     resolution: {integrity: sha512-LA0Y9kxMYv47GIPJy6MI84fqTd2HmYZI83W/kM/SkKfDlajnZYfmXFTxkbY+xSBPkLJxltMa9hIkmdc29eguMA==}
@@ -11980,6 +12044,7 @@ packages:
     hasBin: true
     dependencies:
       glob: 7.2.3
+    dev: true
 
   /rpc-websockets@7.6.1:
     resolution: {integrity: sha512-MmRGaJJvxTHSRxYPjJJqcj2zWnCetw7YbYbKlD0Yc7qVw6PsZhRJg1MI3mpWlpBs+4zO+urlNfLl9zLsdOD/gA==}
@@ -12222,10 +12287,12 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       shebang-regex: 3.0.0
+    dev: true
 
   /shebang-regex@3.0.0:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
+    dev: true
 
   /shell-quote@1.8.1:
     resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
@@ -12658,6 +12725,7 @@ packages:
   /strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
+    dev: true
 
   /strip-outer@1.0.1:
     resolution: {integrity: sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==}
@@ -12903,6 +12971,7 @@ packages:
 
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+    dev: true
 
   /thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
@@ -13010,8 +13079,8 @@ packages:
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
-  /tsconfig-paths@3.14.2:
-    resolution: {integrity: sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==}
+  /tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
     dependencies:
       '@types/json5': 0.0.29
       json5: 1.0.2
@@ -13051,6 +13120,7 @@ packages:
     engines: {node: '>= 0.8.0'}
     dependencies:
       prelude-ls: 1.2.1
+    dev: true
 
   /type-detect@4.0.8:
     resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
@@ -13060,6 +13130,7 @@ packages:
   /type-fest@0.20.2:
     resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
     engines: {node: '>=10'}
+    dev: true
 
   /type-fest@0.21.3:
     resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
@@ -13233,6 +13304,7 @@ packages:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
       punycode: 2.3.0
+    dev: true
 
   /url-parse-lax@3.0.0:
     resolution: {integrity: sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ==}
@@ -13741,6 +13813,7 @@ packages:
     hasBin: true
     dependencies:
       isexe: 2.0.0
+    dev: true
 
   /wildcard@2.0.1:
     resolution: {integrity: sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==}
@@ -13944,6 +14017,7 @@ packages:
   /yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
+    dev: true
 
   /yocto-queue@1.0.0:
     resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}

From 701f868cdc9f571a97f75b91a892d4bd9cd73057 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Mon, 4 Mar 2024 14:35:58 +0530
Subject: [PATCH 03/14] add eslint's `fix` to `make format` command

---
 packages/webapp/Makefile | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/webapp/Makefile b/packages/webapp/Makefile
index ddc8b88e..bdbd4e81 100644
--- 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
\ No newline at end of file

From 3a5640cb7003d0cc72854648175b4f354b8a0cca Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Thu, 7 Mar 2024 19:05:17 +0530
Subject: [PATCH 04/14] add back prettier, some other format changes

---
 packages/webapp/package.json                             | 1 +
 packages/webapp/src/actions/joinGame.ts                  | 2 +-
 packages/webapp/src/components/collection/deckPanel.tsx  | 2 +-
 packages/webapp/src/components/modals/gameEndedModal.tsx | 2 +-
 packages/webapp/src/components/modals/loadingModal.tsx   | 2 +-
 packages/webapp/src/components/navbar.tsx                | 2 +-
 packages/webapp/src/pages/collection.tsx                 | 4 ++--
 packages/webapp/src/utils/zkproofs/proofWorker.ts        | 2 +-
 packages/webapp/wagmi.config.ts                          | 2 +-
 pnpm-lock.yaml                                           | 4 +++-
 10 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/webapp/package.json b/packages/webapp/package.json
index 3f348273..a56c5857 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -26,6 +26,7 @@
         "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",
diff --git a/packages/webapp/src/actions/joinGame.ts b/packages/webapp/src/actions/joinGame.ts
index 72af0b54..66b4a152 100644
--- a/packages/webapp/src/actions/joinGame.ts
+++ b/packages/webapp/src/actions/joinGame.ts
@@ -30,7 +30,7 @@ import {
 import { FetchedGameData, GameStatus, PlayerData, PrivateInfo } from "src/store/types"
 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 { FAKE_PROOF, ProofOutput, proveInWorker, SHOULD_GENERATE_PROOFS } from "src/utils/zkproofs"
 import { decodeEventLog } from "viem"
 
 // =================================================================================================
diff --git a/packages/webapp/src/components/collection/deckPanel.tsx b/packages/webapp/src/components/collection/deckPanel.tsx
index c7bc2e32..20ced2c4 100644
--- a/packages/webapp/src/components/collection/deckPanel.tsx
+++ b/packages/webapp/src/components/collection/deckPanel.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import Image from "next/image"
 
 import { Button } from "src/components/ui/button"
-import { Card,Deck } from "src/store/types"
+import { Card, Deck } from "src/store/types"
 import { testCards } from "src/utils/card-list"
 
 interface DeckConstructionPanelProps {
diff --git a/packages/webapp/src/components/modals/gameEndedModal.tsx b/packages/webapp/src/components/modals/gameEndedModal.tsx
index ddacc728..75f2a549 100644
--- a/packages/webapp/src/components/modals/gameEndedModal.tsx
+++ b/packages/webapp/src/components/modals/gameEndedModal.tsx
@@ -2,7 +2,7 @@ import { useCallback, useState } from "react"
 import { useRouter } from "next/router"
 
 import { Button } from "src/components/ui/button"
-import { Dialog, DialogContent,DialogDescription, DialogTitle } from "src/components/ui/dialog"
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "src/components/ui/dialog"
 import { useGameData, useGameID } from "src/store/hooks"
 import { navigate } from "src/utils/navigate"
 
diff --git a/packages/webapp/src/components/modals/loadingModal.tsx b/packages/webapp/src/components/modals/loadingModal.tsx
index 24cbaa5b..46a4552b 100644
--- a/packages/webapp/src/components/modals/loadingModal.tsx
+++ b/packages/webapp/src/components/modals/loadingModal.tsx
@@ -2,7 +2,7 @@ import { ReactNode, useCallback } from "react"
 
 import { Spinner } from "src/components/lib/modalElements"
 import { Button } from "src/components/ui/button"
-import { Dialog, DialogContent,DialogDescription, DialogTitle } from "src/components/ui/dialog"
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "src/components/ui/dialog"
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/components/navbar.tsx b/packages/webapp/src/components/navbar.tsx
index 89f81527..b6846d10 100644
--- a/packages/webapp/src/components/navbar.tsx
+++ b/packages/webapp/src/components/navbar.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link"
 
 import { ConnectKitButton } from "connectkit"
-import { NavigationMenu, NavigationMenuItem,NavigationMenuList } from "src/components/ui/navigation-menu"
+import { NavigationMenu, NavigationMenuItem, NavigationMenuList } from "src/components/ui/navigation-menu"
 
 import { Button } from "./ui/button"
 
diff --git a/packages/webapp/src/pages/collection.tsx b/packages/webapp/src/pages/collection.tsx
index 4eede447..c5fed803 100644
--- a/packages/webapp/src/pages/collection.tsx
+++ b/packages/webapp/src/pages/collection.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect,useMemo, useState } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import Head from "next/head"
 import { useRouter } from "next/router"
 
@@ -13,7 +13,7 @@ import { Navbar } from "src/components/navbar"
 import { deployment } from "src/deployment"
 import { useInventoryCardsCollectionGetCollection } from "src/generated"
 import { FablePage } from "src/pages/_app"
-import { Card,Deck } from "src/store/types"
+import { Card, Deck } from "src/store/types"
 import { navigate } from "utils/navigate"
 import { useAccount } from "wagmi"
 
diff --git a/packages/webapp/src/utils/zkproofs/proofWorker.ts b/packages/webapp/src/utils/zkproofs/proofWorker.ts
index 1d7c42ea..78fa912c 100644
--- a/packages/webapp/src/utils/zkproofs/proofWorker.ts
+++ b/packages/webapp/src/utils/zkproofs/proofWorker.ts
@@ -4,7 +4,7 @@
  * Used from {@link proveInWorker}.
  */
 
-import { type ProofInputs,prove } from "src/utils/zkproofs/proofs"
+import { type ProofInputs, prove } from "src/utils/zkproofs/proofs"
 
 // =================================================================================================
 
diff --git a/packages/webapp/wagmi.config.ts b/packages/webapp/wagmi.config.ts
index efbfea49..ac586ee6 100644
--- a/packages/webapp/wagmi.config.ts
+++ b/packages/webapp/wagmi.config.ts
@@ -1,5 +1,5 @@
 import { defineConfig } from "@wagmi/cli"
-import { foundry,react  } from "@wagmi/cli/plugins"
+import { foundry, react } from "@wagmi/cli/plugins"
 
 export default defineConfig({
     out: "src/generated.ts",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 94483294..d9e96e65 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -117,6 +117,9 @@ importers:
       next-transpile-modules:
         specifier: ^10.0.1
         version: 10.0.1
+      prettier:
+        specifier: ^3.2.5
+        version: 3.2.5
       react:
         specifier: 18.2.0
         version: 18.2.0
@@ -11383,7 +11386,6 @@ packages:
     resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}
     engines: {node: '>=14'}
     hasBin: true
-    dev: true
 
   /pretty-bytes@5.6.0:
     resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}

From 645410665f45748a35f26d78d5c7813ef1f1f219 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Thu, 7 Mar 2024 19:10:24 +0530
Subject: [PATCH 05/14] add eslint rule for grouping `src` imports

---
 packages/webapp/.eslintrc.cjs                             | 4 +++-
 packages/webapp/src/actions/errors.ts                     | 3 ++-
 packages/webapp/src/actions/joinGame.ts                   | 3 ++-
 packages/webapp/src/actions/libContractWrite.ts           | 3 ++-
 packages/webapp/src/chain.ts                              | 3 ++-
 packages/webapp/src/components/cards/cardContainer.tsx    | 1 +
 packages/webapp/src/components/hand.tsx                   | 1 +
 packages/webapp/src/components/modals/createGameModal.tsx | 3 ++-
 packages/webapp/src/components/modals/joinGameModal.tsx   | 1 +
 packages/webapp/src/components/navbar.tsx                 | 1 +
 packages/webapp/src/components/playerBoard.tsx            | 1 +
 packages/webapp/src/components/ui/button.tsx              | 1 +
 packages/webapp/src/components/ui/dialog.tsx              | 1 +
 packages/webapp/src/components/ui/navigation-menu.tsx     | 1 +
 packages/webapp/src/hooks/useChainWrite.ts                | 3 ++-
 packages/webapp/src/hooks/useDragEvents.ts                | 1 +
 packages/webapp/src/hooks/useFableWrite.ts                | 3 ++-
 packages/webapp/src/pages/_app.tsx                        | 3 ++-
 packages/webapp/src/pages/collection.tsx                  | 5 +++--
 packages/webapp/src/pages/index.tsx                       | 3 ++-
 packages/webapp/src/pages/play.tsx                        | 5 +++--
 packages/webapp/src/store/atoms.ts                        | 1 +
 packages/webapp/src/store/hooks.ts                        | 1 +
 packages/webapp/src/store/network.ts                      | 3 ++-
 packages/webapp/src/store/setup.ts                        | 3 ++-
 packages/webapp/src/store/subscriptions.ts                | 5 +++--
 packages/webapp/src/wagmi/BurnerConnector.ts              | 5 +++--
 27 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/packages/webapp/.eslintrc.cjs b/packages/webapp/.eslintrc.cjs
index 6e05e0c1..ed6febc2 100644
--- a/packages/webapp/.eslintrc.cjs
+++ b/packages/webapp/.eslintrc.cjs
@@ -40,8 +40,10 @@ const config = {
 						"^react",
 						"^next",
 					],
-					// Internal packages.
+					// External packages.
 					["^@?\\w"],
+					// Custom group for src/ prefixed imports
+					["^src/"],
 					// Parent imports. Put `..` last.
 					["^\\.\\.(?!/?$)", "^\\.\\./?$"],
 					// Other relative imports. Put same-folder imports and `.` last.
diff --git a/packages/webapp/src/actions/errors.ts b/packages/webapp/src/actions/errors.ts
index 56503cfd..9dd4a0e8 100644
--- a/packages/webapp/src/actions/errors.ts
+++ b/packages/webapp/src/actions/errors.ts
@@ -8,13 +8,14 @@
  * @module actions/errors
  */
 
+import { ContractFunctionRevertedError, UserRejectedRequestError } from "viem"
+
 import { ContractWriteError } from "src/actions/libContractWrite"
 import { GIT_ISSUES } from "src/constants"
 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
index 66b4a152..e6485c14 100644
--- a/packages/webapp/src/actions/joinGame.ts
+++ b/packages/webapp/src/actions/joinGame.ts
@@ -5,6 +5,8 @@
  * @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"
@@ -31,7 +33,6 @@ import { FetchedGameData, GameStatus, PlayerData, PrivateInfo } from "src/store/
 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"
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/actions/libContractWrite.ts b/packages/webapp/src/actions/libContractWrite.ts
index 3362aeca..a2f48362 100644
--- a/packages/webapp/src/actions/libContractWrite.ts
+++ b/packages/webapp/src/actions/libContractWrite.ts
@@ -4,7 +4,6 @@
  * @module ui/libContractWrite
  */
 
-import type { Address, Hash } from "src/chain"
 import {
     Abi,
     ContractFunctionExecutionError,
@@ -16,6 +15,8 @@ import {
 } 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/chain.ts b/packages/webapp/src/chain.ts
index 6d4cd448..348f8eb3 100644
--- a/packages/webapp/src/chain.ts
+++ b/packages/webapp/src/chain.ts
@@ -5,10 +5,11 @@
  */
 
 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/cardContainer.tsx b/packages/webapp/src/components/cards/cardContainer.tsx
index 6ee89971..649cedcd 100644
--- a/packages/webapp/src/components/cards/cardContainer.tsx
+++ b/packages/webapp/src/components/cards/cardContainer.tsx
@@ -2,6 +2,7 @@ import React from "react"
 
 import { useSortable } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
+
 import { CardPlacement } from "src/store/types"
 import { convertStringToSafeNumber } from "src/utils/js-utils"
 
diff --git a/packages/webapp/src/components/hand.tsx b/packages/webapp/src/components/hand.tsx
index e1412bb9..22104d82 100644
--- a/packages/webapp/src/components/hand.tsx
+++ b/packages/webapp/src/components/hand.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react"
 import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai"
 
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable"
+
 import { CancellationHandler } from "src/components/modals/loadingModal"
 import { CardPlacement } from "src/store/types"
 import { convertBigIntArrayToStringArray } from "src/utils/js-utils"
diff --git a/packages/webapp/src/components/modals/createGameModal.tsx b/packages/webapp/src/components/modals/createGameModal.tsx
index 9d1195f7..df528c74 100644
--- a/packages/webapp/src/components/modals/createGameModal.tsx
+++ b/packages/webapp/src/components/modals/createGameModal.tsx
@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useState } from "react"
 import { useRouter } from "next/router"
 
+import { decodeEventLog } from "viem"
+
 import { joinGame, reportInconsistentGameState } from "src/actions"
 import { concede } from "src/actions/concede"
 import { Spinner } from "src/components/lib/modalElements"
@@ -14,7 +16,6 @@ import { useGameWrite } from "src/hooks/useFableWrite"
 import * as store from "src/store/hooks"
 import { GameStatus } from "src/store/types"
 import { navigate } from "src/utils/navigate"
-import { decodeEventLog } from "viem"
 
 interface CreateGameModalContentProps {
     loading: string | null
diff --git a/packages/webapp/src/components/modals/joinGameModal.tsx b/packages/webapp/src/components/modals/joinGameModal.tsx
index 8a093c7e..7d5aedb7 100644
--- a/packages/webapp/src/components/modals/joinGameModal.tsx
+++ b/packages/webapp/src/components/modals/joinGameModal.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from "react"
 import { useRouter } from "next/router"
 
 import debounce from "lodash/debounce"
+
 import { joinGame, reportInconsistentGameState } from "src/actions"
 import { concede } from "src/actions/concede"
 import { Spinner } from "src/components/lib/modalElements"
diff --git a/packages/webapp/src/components/navbar.tsx b/packages/webapp/src/components/navbar.tsx
index b6846d10..7b80d4db 100644
--- a/packages/webapp/src/components/navbar.tsx
+++ b/packages/webapp/src/components/navbar.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link"
 
 import { ConnectKitButton } from "connectkit"
+
 import { NavigationMenu, NavigationMenuItem, NavigationMenuList } from "src/components/ui/navigation-menu"
 
 import { Button } from "./ui/button"
diff --git a/packages/webapp/src/components/playerBoard.tsx b/packages/webapp/src/components/playerBoard.tsx
index ccd37cec..65b9b0aa 100644
--- a/packages/webapp/src/components/playerBoard.tsx
+++ b/packages/webapp/src/components/playerBoard.tsx
@@ -1,4 +1,5 @@
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable"
+
 import * as store from "src/store/hooks"
 import { CardPlacement } from "src/store/types"
 import { convertBigIntArrayToStringArray, shortenAddress } from "src/utils/js-utils"
diff --git a/packages/webapp/src/components/ui/button.tsx b/packages/webapp/src/components/ui/button.tsx
index 93b33424..83864f3d 100644
--- a/packages/webapp/src/components/ui/button.tsx
+++ b/packages/webapp/src/components/ui/button.tsx
@@ -2,6 +2,7 @@ import * as React from "react"
 
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+
 import { cn } from "src/utils/ui-utils"
 
 // ref: https://ui.shadcn.com/docs/components/button
diff --git a/packages/webapp/src/components/ui/dialog.tsx b/packages/webapp/src/components/ui/dialog.tsx
index 64eadc22..bdf9c265 100644
--- a/packages/webapp/src/components/ui/dialog.tsx
+++ b/packages/webapp/src/components/ui/dialog.tsx
@@ -2,6 +2,7 @@ import * as React from "react"
 
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
+
 import { cn } from "src/utils/ui-utils"
 
 const Dialog = DialogPrimitive.Root
diff --git a/packages/webapp/src/components/ui/navigation-menu.tsx b/packages/webapp/src/components/ui/navigation-menu.tsx
index 2fb7d0ec..2eb48144 100644
--- a/packages/webapp/src/components/ui/navigation-menu.tsx
+++ b/packages/webapp/src/components/ui/navigation-menu.tsx
@@ -3,6 +3,7 @@ import * as React from "react"
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
 import { ChevronDown } from "lucide-react"
+
 import { cn } from "src/utils/ui-utils"
 
 // ref: https://ui.shadcn.com/docs/components/navigation-menu
diff --git a/packages/webapp/src/hooks/useChainWrite.ts b/packages/webapp/src/hooks/useChainWrite.ts
index 5f55f380..8dd65125 100644
--- a/packages/webapp/src/hooks/useChainWrite.ts
+++ b/packages/webapp/src/hooks/useChainWrite.ts
@@ -1,7 +1,8 @@
-import { Address, Hash } from "src/chain"
 import { type TransactionReceipt } from "viem"
 import { useContractWrite, usePrepareContractWrite, useWaitForTransaction } from "wagmi"
 
+import { Address, Hash } from "src/chain"
+
 // =================================================================================================
 
 /**
diff --git a/packages/webapp/src/hooks/useDragEvents.ts b/packages/webapp/src/hooks/useDragEvents.ts
index 91c26a0e..436fb18b 100644
--- a/packages/webapp/src/hooks/useDragEvents.ts
+++ b/packages/webapp/src/hooks/useDragEvents.ts
@@ -1,6 +1,7 @@
 import { useCallback } from "react"
 
 import { DragEndEvent, DragStartEvent, UniqueIdentifier } from "@dnd-kit/core"
+
 import { playCard } from "src/actions/playCard"
 import { CancellationHandler } from "src/components/modals/loadingModal"
 import * as store from "src/store/hooks"
diff --git a/packages/webapp/src/hooks/useFableWrite.ts b/packages/webapp/src/hooks/useFableWrite.ts
index 753a6781..8101496c 100644
--- a/packages/webapp/src/hooks/useFableWrite.ts
+++ b/packages/webapp/src/hooks/useFableWrite.ts
@@ -1,8 +1,9 @@
+import { type TransactionReceipt } from "viem"
+
 import { Hash } from "src/chain"
 import { deployment } from "src/deployment"
 import { cardsCollectionABI, deckAirdropABI, gameABI, inventoryABI } from "src/generated"
 import { useChainWrite, UseWriteResult } from "src/hooks/useChainWrite"
-import { type TransactionReceipt } from "viem"
 
 // =================================================================================================
 // use<Contract>Write: just `useWrite` with the contract address and ABI already set.
diff --git a/packages/webapp/src/pages/_app.tsx b/packages/webapp/src/pages/_app.tsx
index 17f69620..80fc76d3 100644
--- a/packages/webapp/src/pages/_app.tsx
+++ b/packages/webapp/src/pages/_app.tsx
@@ -8,13 +8,14 @@ import Head from "next/head"
 import { useRouter } from "next/router"
 
 import { ConnectKitProvider } from "connectkit"
+import { useAccount, WagmiConfig } from "wagmi"
+
 import { ensureLocalAccountIndex, wagmiConfig } from "src/chain"
 import jotaiDebug from "src/components/lib/jotaiDebug"
 import { GlobalErrorModal } from "src/components/modals/globalErrorModal"
 import { Toaster } from "src/components/ui/sonner"
 import { useIsHydrated } from "src/hooks/useIsHydrated"
 import { useErrorConfig } from "src/store/hooks"
-import { useAccount, WagmiConfig } from "wagmi"
 
 import "src/styles/globals.css"
 
diff --git a/packages/webapp/src/pages/collection.tsx b/packages/webapp/src/pages/collection.tsx
index c5fed803..0cbeb5ec 100644
--- a/packages/webapp/src/pages/collection.tsx
+++ b/packages/webapp/src/pages/collection.tsx
@@ -3,6 +3,9 @@ import Head from "next/head"
 import { useRouter } from "next/router"
 
 import debounce from "lodash/debounce"
+import { navigate } from "utils/navigate"
+import { useAccount } from "wagmi"
+
 import { Address } from "src/chain"
 import CardCollectionDisplay from "src/components/collection/cardCollectionDisplay"
 import DeckList from "src/components/collection/deckList"
@@ -14,8 +17,6 @@ import { deployment } from "src/deployment"
 import { useInventoryCardsCollectionGetCollection } from "src/generated"
 import { FablePage } from "src/pages/_app"
 import { Card, Deck } from "src/store/types"
-import { navigate } from "utils/navigate"
-import { useAccount } from "wagmi"
 
 // NOTE(norswap & geniusgarlic): Just an example, when the game actually has effects & types,
 //   fetch those from the chain instead of hardcoding them here.
diff --git a/packages/webapp/src/pages/index.tsx b/packages/webapp/src/pages/index.tsx
index 6f6578d3..bec12305 100644
--- a/packages/webapp/src/pages/index.tsx
+++ b/packages/webapp/src/pages/index.tsx
@@ -1,4 +1,6 @@
 import { ConnectKitButton, useModal } from "connectkit"
+import { useAccount, useNetwork } from "wagmi"
+
 import { Address, chains } from "src/chain"
 import Link from "src/components/link"
 import { CreateGameModal } from "src/components/modals/createGameModal"
@@ -9,7 +11,6 @@ import { deployment } from "src/deployment"
 import { useGameInGame } from "src/generated"
 import { FablePage } from "src/pages/_app"
 import { useGameID } from "src/store/hooks"
-import { useAccount, useNetwork } from "wagmi"
 
 const Home: FablePage = ({ isHydrated }) => {
     const { address } = useAccount()
diff --git a/packages/webapp/src/pages/play.tsx b/packages/webapp/src/pages/play.tsx
index 045d53e1..a912d11f 100644
--- a/packages/webapp/src/pages/play.tsx
+++ b/packages/webapp/src/pages/play.tsx
@@ -15,6 +15,9 @@ import {
     useSensors,
 } from "@dnd-kit/core"
 import { toast } from "sonner"
+import { Address } from "viem"
+import { readContract } from "wagmi/actions"
+
 import { concede } from "src/actions/concede"
 import { drawCard } from "src/actions/drawCard"
 import { endTurn } from "src/actions/endTurn"
@@ -37,8 +40,6 @@ import { usePlayerHand } from "src/store/hooks"
 import { CardPlacement, GameStatus, GameStep } from "src/store/types"
 import { setError } from "src/store/write"
 import { navigate } from "src/utils/navigate"
-import { Address } from "viem"
-import { readContract } from "wagmi/actions"
 
 const Play: FablePage = ({ isHydrated }) => {
     const [gameID, setGameID] = store.useGameID()
diff --git a/packages/webapp/src/store/atoms.ts b/packages/webapp/src/store/atoms.ts
index fa24bfe1..55a3e765 100644
--- a/packages/webapp/src/store/atoms.ts
+++ b/packages/webapp/src/store/atoms.ts
@@ -9,6 +9,7 @@
 
 import { atom, getDefaultStore } from "jotai"
 import { atomWithStorage } from "jotai/utils"
+
 import { Address } from "src/chain"
 import * as derive from "src/store/derive"
 import type { ErrorConfig, FetchedGameData, PlayerData, PrivateInfo, PrivateInfoStore } from "src/store/types"
diff --git a/packages/webapp/src/store/hooks.ts b/packages/webapp/src/store/hooks.ts
index 7a1a6a9c..65d36ea3 100644
--- a/packages/webapp/src/store/hooks.ts
+++ b/packages/webapp/src/store/hooks.ts
@@ -8,6 +8,7 @@
  */
 
 import { useAtom, useAtomValue } from "jotai"
+
 import { Address } from "src/chain"
 import * as store from "src/store/atoms"
 import { ErrorConfig, FetchedGameData, GameStatus, PlayerData, PrivateInfo } from "src/store/types"
diff --git a/packages/webapp/src/store/network.ts b/packages/webapp/src/store/network.ts
index 980b188f..d386677b 100644
--- a/packages/webapp/src/store/network.ts
+++ b/packages/webapp/src/store/network.ts
@@ -5,12 +5,13 @@
  * @module store/network
  */
 
+import { readContract } from "wagmi/actions"
+
 import { type Address } from "src/chain"
 import { deployment } from "src/deployment"
 import { gameABI, inventoryABI } from "src/generated"
 import { type FetchedGameData } from "src/store/types"
 import { type Fetched, throttledFetch } from "src/utils/throttledFetch"
-import { readContract } from "wagmi/actions"
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/store/setup.ts b/packages/webapp/src/store/setup.ts
index 5be957b8..3f048626 100644
--- a/packages/webapp/src/store/setup.ts
+++ b/packages/webapp/src/store/setup.ts
@@ -7,10 +7,11 @@
  * @module store/setup
  */
 
+import { getAccount, watchAccount, watchNetwork } from "wagmi/actions"
+
 import { GAME_DATA_REFRESH_INTERVAL } from "src/constants"
 import * as store from "src/store/atoms"
 import { gameIDListener, refreshGameData, updateNetwork, updatePlayerAddress } from "src/store/update"
-import { getAccount, watchAccount, watchNetwork } from "wagmi/actions"
 
 // =================================================================================================
 
diff --git a/packages/webapp/src/store/subscriptions.ts b/packages/webapp/src/store/subscriptions.ts
index a55b6e2a..dc90e2f3 100644
--- a/packages/webapp/src/store/subscriptions.ts
+++ b/packages/webapp/src/store/subscriptions.ts
@@ -11,6 +11,9 @@
 
 // =================================================================================================
 
+import { Log } from "viem"
+import { getPublicClient } from "wagmi/actions"
+
 import { DISMISS_BUTTON } from "src/actions/errors"
 import { deployment } from "src/deployment"
 import { gameABI } from "src/generated"
@@ -18,8 +21,6 @@ import * as store from "src/store/atoms"
 import { refreshGameData } from "src/store/update"
 import { setError } from "src/store/write"
 import { format } from "src/utils/js-utils"
-import { Log } from "viem"
-import { getPublicClient } from "wagmi/actions"
 
 // =================================================================================================
 // SUBSCRIPTION MANAGEMENT
diff --git a/packages/webapp/src/wagmi/BurnerConnector.ts b/packages/webapp/src/wagmi/BurnerConnector.ts
index 0fc6d602..eb61354f 100644
--- a/packages/webapp/src/wagmi/BurnerConnector.ts
+++ b/packages/webapp/src/wagmi/BurnerConnector.ts
@@ -2,14 +2,15 @@
  * Implementation of a Wagmi connector for a private key held in local browser storage.
  */
 
-import { Address } from "src/chain"
-import { AsyncLock } from "src/utils/asyncLock"
 import { createWalletClient, http } from "viem"
 import { PrivateKeyAccount, privateKeyToAccount } from "viem/accounts"
 import { Connector, ConnectorData, WalletClient } from "wagmi"
 import { connect, disconnect, getAccount } from "wagmi/actions"
 import { localhost } from "wagmi/chains"
 
+import { Address } from "src/chain"
+import { AsyncLock } from "src/utils/asyncLock"
+
 // =================================================================================================
 
 type PrivateKey = `0x${string}`

From 8f0427e26089783480519bdbd1602ac80a9b53a4 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Thu, 7 Mar 2024 19:10:41 +0530
Subject: [PATCH 06/14] add missed file

---
 packages/webapp/src/store/update.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/store/update.ts b/packages/webapp/src/store/update.ts
index ad175a70..e1fa1a52 100644
--- a/packages/webapp/src/store/update.ts
+++ b/packages/webapp/src/store/update.ts
@@ -6,6 +6,9 @@
 
 // =================================================================================================
 
+import { getBlock } from "viem/actions"
+import { getAccount, getNetwork, getPublicClient } from "wagmi/actions"
+
 import { contractWriteThrowing } from "src/actions/libContractWrite"
 import { AccountResult, Address, chains, NetworkResult, ZeroHash } from "src/chain"
 import { deployment } from "src/deployment"
@@ -19,8 +22,6 @@ import { FetchedGameData, GameStatus } from "src/store/types"
 import { setError } from "src/store/write"
 import { formatTimestamp, parseBigInt } from "src/utils/js-utils"
 import { THROTTLED, ZOMBIE } from "src/utils/throttledFetch"
-import { getBlock } from "viem/actions"
-import { getAccount, getNetwork, getPublicClient } from "wagmi/actions"
 
 // =================================================================================================
 // CHANGE LISTENERS

From 8e71ee1b382917b0f013a1305834c1842fd2c1b3 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Fri, 8 Mar 2024 10:53:41 +0530
Subject: [PATCH 07/14] format `.cjs` files

---
 packages/webapp/.eslintrc.cjs       | 107 ++++++++++----------
 packages/webapp/postcss.config.cjs  |  10 +-
 packages/webapp/tailwind.config.cjs | 152 ++++++++++++++--------------
 3 files changed, 132 insertions(+), 137 deletions(-)

diff --git a/packages/webapp/.eslintrc.cjs b/packages/webapp/.eslintrc.cjs
index ed6febc2..f64d14b9 100644
--- a/packages/webapp/.eslintrc.cjs
+++ b/packages/webapp/.eslintrc.cjs
@@ -1,61 +1,58 @@
 /** @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",
-		"sourceType": "module",
-    "ecmaVersion": "latest",
-  },
-	plugins: ["@typescript-eslint", "simple-import-sort"],
-	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/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",
 
-		"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"]
-				]
-			}
-		]
-	},
+        "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
diff --git a/packages/webapp/postcss.config.cjs b/packages/webapp/postcss.config.cjs
index 5080cb5e..a27c49b1 100644
--- a/packages/webapp/postcss.config.cjs
+++ b/packages/webapp/postcss.config.cjs
@@ -1,8 +1,8 @@
 const config = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
 }
 
-module.exports = config
\ No newline at end of file
+module.exports = config
diff --git a/packages/webapp/tailwind.config.cjs b/packages/webapp/tailwind.config.cjs
index ca9541d0..41054e98 100644
--- a/packages/webapp/tailwind.config.cjs
+++ b/packages/webapp/tailwind.config.cjs
@@ -1,83 +1,81 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  // darkMode: ["class"],
-  content: [
-    "./src/**/*.{ts,tsx}",
-  ],
-  prefix: "",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      fontFamily: {
-        fable: ['fable', 'sans-serif'],
-      },
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
+    // darkMode: ["class"],
+    content: ["./src/**/*.{ts,tsx}"],
+    prefix: "",
+    theme: {
+        container: {
+            center: true,
+            padding: "2rem",
+            screens: {
+                "2xl": "1400px",
+            },
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
+        extend: {
+            fontFamily: {
+                fable: ["fable", "sans-serif"],
+            },
+            colors: {
+                border: "hsl(var(--border))",
+                input: "hsl(var(--input))",
+                ring: "hsl(var(--ring))",
+                background: "hsl(var(--background))",
+                foreground: "hsl(var(--foreground))",
+                primary: {
+                    DEFAULT: "hsl(var(--primary))",
+                    foreground: "hsl(var(--primary-foreground))",
+                },
+                secondary: {
+                    DEFAULT: "hsl(var(--secondary))",
+                    foreground: "hsl(var(--secondary-foreground))",
+                },
+                destructive: {
+                    DEFAULT: "hsl(var(--destructive))",
+                    foreground: "hsl(var(--destructive-foreground))",
+                },
+                muted: {
+                    DEFAULT: "hsl(var(--muted))",
+                    foreground: "hsl(var(--muted-foreground))",
+                },
+                accent: {
+                    DEFAULT: "hsl(var(--accent))",
+                    foreground: "hsl(var(--accent-foreground))",
+                },
+                popover: {
+                    DEFAULT: "hsl(var(--popover))",
+                    foreground: "hsl(var(--popover-foreground))",
+                },
+                card: {
+                    DEFAULT: "hsl(var(--card))",
+                    foreground: "hsl(var(--card-foreground))",
+                },
+            },
+            borderRadius: {
+                lg: "var(--radius)",
+                md: "calc(var(--radius) - 2px)",
+                sm: "calc(var(--radius) - 4px)",
+            },
+            keyframes: {
+                "accordion-down": {
+                    from: { height: "0" },
+                    to: { height: "var(--radix-accordion-content-height)" },
+                },
+                "accordion-up": {
+                    from: { height: "var(--radix-accordion-content-height)" },
+                    to: { height: "0" },
+                },
+            },
+            animation: {
+                "accordion-down": "accordion-down 0.2s ease-out",
+                "accordion-up": "accordion-up 0.2s ease-out",
+            },
+            // Custom box shadow that adds a 'highlight' effect
+            // For example, add 'shadow-highlight shadow-orange-300' to className
+            // See: https://tailwindcss.com/docs/box-shadow#customizing-your-theme
+            boxShadow: {
+                highlight: "0 0 20px",
+            },
         },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-      // Custom box shadow that adds a 'highlight' effect
-      // For example, add 'shadow-highlight shadow-orange-300' to className
-      // See: https://tailwindcss.com/docs/box-shadow#customizing-your-theme
-      boxShadow: {
-        'highlight': '0 0 20px',
-      },
     },
-  },
-  plugins: [require("tailwindcss-animate")],
+    plugins: [require("tailwindcss-animate")],
 }

From eb96a28e9ed23cba58779fb6f9a643efe73396cc Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Fri, 8 Mar 2024 10:53:50 +0530
Subject: [PATCH 08/14] update Makefile command

---
 packages/webapp/Makefile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webapp/Makefile b/packages/webapp/Makefile
index bdbd4e81..c9acc046 100644
--- a/packages/webapp/Makefile
+++ b/packages/webapp/Makefile
@@ -33,5 +33,5 @@ check:
 # Runs prettier formatting across webapp files with specified file extensions.
 format: 
 	pnpm eslint . --fix
-	pnpm prettier --write "**/*.{js,jsx,ts,tsx,json,css}"
+	pnpm prettier --write "**/*.{js,jsx,ts,tsx,json,css,cjs}"
 .PHONY: format
\ No newline at end of file

From f7013b594c7fee97d43eb99538e02ff49bad9399 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Fri, 8 Mar 2024 11:11:44 +0530
Subject: [PATCH 09/14] add `.mjs` to format rule, fix import style

---
 packages/webapp/Makefile                      |  2 +-
 packages/webapp/next.config.mjs               | 98 +++++++++----------
 packages/webapp/postcss.config.mjs            |  8 +-
 .../src/components/cards/cardContainer.tsx    |  7 +-
 packages/webapp/src/components/hand.tsx       |  6 +-
 .../components/modals/globalErrorModal.tsx    |  3 +-
 .../modals/inGameMenuModalContent.tsx         |  3 +-
 .../src/components/modals/joinGameModal.tsx   |  3 +-
 8 files changed, 62 insertions(+), 68 deletions(-)

diff --git a/packages/webapp/Makefile b/packages/webapp/Makefile
index c9acc046..d25cb199 100644
--- a/packages/webapp/Makefile
+++ b/packages/webapp/Makefile
@@ -33,5 +33,5 @@ check:
 # Runs prettier formatting across webapp files with specified file extensions.
 format: 
 	pnpm eslint . --fix
-	pnpm prettier --write "**/*.{js,jsx,ts,tsx,json,css,cjs}"
+	pnpm prettier --write "**/*.{js,jsx,ts,tsx,json,css,cjs,mjs}"
 .PHONY: format
\ No newline at end of file
diff --git a/packages/webapp/next.config.mjs b/packages/webapp/next.config.mjs
index 1dd012c4..b6b92755 100644
--- a/packages/webapp/next.config.mjs
+++ b/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
\ No newline at end of file
+export default nextConfig
diff --git a/packages/webapp/postcss.config.mjs b/packages/webapp/postcss.config.mjs
index 2e7af2b7..d41ad635 100644
--- a/packages/webapp/postcss.config.mjs
+++ b/packages/webapp/postcss.config.mjs
@@ -1,6 +1,6 @@
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
 }
diff --git a/packages/webapp/src/components/cards/cardContainer.tsx b/packages/webapp/src/components/cards/cardContainer.tsx
index 649cedcd..369c91cb 100644
--- a/packages/webapp/src/components/cards/cardContainer.tsx
+++ b/packages/webapp/src/components/cards/cardContainer.tsx
@@ -3,13 +3,12 @@ import React from "react"
 import { useSortable } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
 
+import BoardCard from "src/components/cards/boardCard"
+import DraggedCard from "src/components/cards/draggedCard"
+import HandCard from "src/components/cards/handCard"
 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
diff --git a/packages/webapp/src/components/hand.tsx b/packages/webapp/src/components/hand.tsx
index 22104d82..7b8b100f 100644
--- a/packages/webapp/src/components/hand.tsx
+++ b/packages/webapp/src/components/hand.tsx
@@ -3,14 +3,12 @@ import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai"
 
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable"
 
+import CardContainer from "src/components/cards/cardContainer"
 import { CancellationHandler } from "src/components/modals/loadingModal"
+import useScrollBox from "src/hooks/useScrollBox"
 import { CardPlacement } from "src/store/types"
 import { convertBigIntArrayToStringArray } from "src/utils/js-utils"
 
-import useScrollBox from "../hooks/useScrollBox"
-
-import CardContainer from "./cards/cardContainer"
-
 const Hand = ({
     cards,
     className,
diff --git a/packages/webapp/src/components/modals/globalErrorModal.tsx b/packages/webapp/src/components/modals/globalErrorModal.tsx
index c63011c1..8f81fbaf 100644
--- a/packages/webapp/src/components/modals/globalErrorModal.tsx
+++ b/packages/webapp/src/components/modals/globalErrorModal.tsx
@@ -1,10 +1,9 @@
 import { useEffect, useState } from "react"
 
 import { Button } from "src/components/ui/button"
+import { Dialog, DialogContent, DialogTitle } from "src/components/ui/dialog"
 import { ErrorConfig } from "src/store/types"
 
-import { Dialog, DialogContent, DialogTitle } from "../ui/dialog"
-
 /**
  * A modal displayed globally (setup in _app.tsx) whenever the errorConfig state is set to non-null.
  * This modal can be dismissed by setting the errorConfig state to null.
diff --git a/packages/webapp/src/components/modals/inGameMenuModalContent.tsx b/packages/webapp/src/components/modals/inGameMenuModalContent.tsx
index 7ee356c3..fa66cc8b 100644
--- a/packages/webapp/src/components/modals/inGameMenuModalContent.tsx
+++ b/packages/webapp/src/components/modals/inGameMenuModalContent.tsx
@@ -1,8 +1,7 @@
 import Link from "next/link"
 
 import { Button } from "src/components/ui/button"
-
-import { DialogDescription, DialogTitle } from "../ui/dialog"
+import { DialogDescription, DialogTitle } from "src/components/ui/dialog"
 
 /**
  * This modal content is shared by both the {@link CreateGameModal} (for the game creator) and the
diff --git a/packages/webapp/src/components/modals/joinGameModal.tsx b/packages/webapp/src/components/modals/joinGameModal.tsx
index 7d5aedb7..d6f443a3 100644
--- a/packages/webapp/src/components/modals/joinGameModal.tsx
+++ b/packages/webapp/src/components/modals/joinGameModal.tsx
@@ -9,6 +9,7 @@ import { Spinner } from "src/components/lib/modalElements"
 import { InGameMenuModalContent } from "src/components/modals/inGameMenuModalContent"
 import { LoadingModalContent } from "src/components/modals/loadingModal"
 import { Button } from "src/components/ui/button"
+import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "src/components/ui/dialog"
 import { Input } from "src/components/ui/input"
 import { useCancellationHandler } from "src/hooks/useCancellationHandler"
 import * as store from "src/store/hooks"
@@ -17,8 +18,6 @@ import { setError } from "src/store/write"
 import { isStringPositiveInteger, parseBigIntOrNull } from "src/utils/js-utils"
 import { navigate } from "src/utils/navigate"
 
-import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "../ui/dialog"
-
 interface JoinGameModalContentProps {
     loading: string | null
     setLoading: React.Dispatch<React.SetStateAction<string | null>>

From 5180ec487b9dce1ba91a2d8e90db1af9864ea441 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Fri, 8 Mar 2024 11:21:08 +0530
Subject: [PATCH 10/14] add rule for import restrictions

---
 packages/webapp/.eslintrc.cjs | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/webapp/.eslintrc.cjs b/packages/webapp/.eslintrc.cjs
index f64d14b9..5840de8e 100644
--- a/packages/webapp/.eslintrc.cjs
+++ b/packages/webapp/.eslintrc.cjs
@@ -17,6 +17,13 @@ const config = {
         "@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": [

From 384727565962177135394679bfd19e97f9ae380c Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Tue, 12 Mar 2024 16:32:52 +0530
Subject: [PATCH 11/14] update eslint rule

---
 packages/webapp/.eslintrc.cjs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/.eslintrc.cjs b/packages/webapp/.eslintrc.cjs
index 5840de8e..39739480 100644
--- a/packages/webapp/.eslintrc.cjs
+++ b/packages/webapp/.eslintrc.cjs
@@ -9,7 +9,7 @@ const config = {
     },
     plugins: ["@typescript-eslint", "simple-import-sort"],
     root: true,
-    ignorePatterns: ["node_modules", "src/hooks/useScrollBox.ts"],
+    ignorePatterns: ["node_modules", "src/generated.ts"],
     rules: {
         "@typescript-eslint/no-unsafe-argument": "off",
         "@typescript-eslint/restrict-template-expressions": "off",
@@ -21,7 +21,7 @@ const config = {
         "@typescript-eslint/no-restricted-imports": [
             "error",
             {
-                patterns: ["!./*", "!../*"],
+                patterns: ["./*", "../*"],
             },
         ],
 

From a48d963c464535c922327a456e01989a0e41e6f6 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Tue, 12 Mar 2024 16:33:18 +0530
Subject: [PATCH 12/14] fix `make` commands

---
 Makefile                 | 2 +-
 packages/webapp/Makefile | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Makefile b/Makefile
index 779bcda0..9767ddcf 100644
--- a/Makefile
+++ b/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
 
 # ==================================================================================================
diff --git a/packages/webapp/Makefile b/packages/webapp/Makefile
index d25cb199..e045b510 100644
--- a/packages/webapp/Makefile
+++ b/packages/webapp/Makefile
@@ -26,7 +26,7 @@ lint:
 
 # Runs code quality checks.
 check: 
-	pnpm eslint .
+	make lint
 	pnpm prettier --check "src/**/*.{js,jsx,ts,tsx,json,css}"
 .PHONY: check
 

From e0732156d56f50eb93e0512c3de7e0bfc045e746 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Tue, 12 Mar 2024 16:33:27 +0530
Subject: [PATCH 13/14] fix imports

---
 packages/webapp/src/components/navbar.tsx      | 3 +--
 packages/webapp/src/components/playerBoard.tsx | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/webapp/src/components/navbar.tsx b/packages/webapp/src/components/navbar.tsx
index 7b80d4db..2da1e766 100644
--- a/packages/webapp/src/components/navbar.tsx
+++ b/packages/webapp/src/components/navbar.tsx
@@ -2,10 +2,9 @@ import Link from "next/link"
 
 import { ConnectKitButton } from "connectkit"
 
+import { Button } from "src/components/ui/button"
 import { NavigationMenu, NavigationMenuItem, NavigationMenuList } from "src/components/ui/navigation-menu"
 
-import { Button } from "./ui/button"
-
 export const Navbar = () => {
     return (
         <NavigationMenu className="flex flex-row justify-between px-6 py-2">
diff --git a/packages/webapp/src/components/playerBoard.tsx b/packages/webapp/src/components/playerBoard.tsx
index 65b9b0aa..adfa1e6c 100644
--- a/packages/webapp/src/components/playerBoard.tsx
+++ b/packages/webapp/src/components/playerBoard.tsx
@@ -1,11 +1,10 @@
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable"
 
+import CardContainer from "src/components/cards/cardContainer"
 import * as store from "src/store/hooks"
 import { CardPlacement } from "src/store/types"
 import { convertBigIntArrayToStringArray, shortenAddress } from "src/utils/js-utils"
 
-import CardContainer from "./cards/cardContainer"
-
 interface PlayerBoardProps {
     playerAddress: `0x${string}` | undefined | null
     playedCards: readonly bigint[] | null

From f0d780b951664463b937ef86560db1c904fb62a4 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Tue, 12 Mar 2024 16:57:07 +0530
Subject: [PATCH 14/14] fix dep issues in `useScrollbox`

---
 packages/webapp/src/hooks/useScrollBox.ts | 61 +++++++++++++----------
 1 file changed, 35 insertions(+), 26 deletions(-)

diff --git a/packages/webapp/src/hooks/useScrollBox.ts b/packages/webapp/src/hooks/useScrollBox.ts
index 3b4597cf..0d53bbab 100644
--- a/packages/webapp/src/hooks/useScrollBox.ts
+++ b/packages/webapp/src/hooks/useScrollBox.ts
@@ -1,4 +1,5 @@
-import { useState, useEffect, useCallback, RefObject } from "react"
+import { RefObject, useCallback, useEffect, useState } from "react"
+
 import throttle from "lodash/throttle"
 import { toast } from "sonner"
 
@@ -21,37 +22,40 @@ function useScrollBox(scrollRef: RefObject<HTMLDivElement>, cards: readonly bigi
     const duration = 300
 
     /** Checks and updates the arrow visibility states based on the scroll position. */
-    const checkArrowsVisibility = () => {
+    const checkArrowsVisibility = useCallback(() => {
         if (!scrollRef.current) return
         const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current
         setShowLeftArrow(scrollLeft > 0)
         setShowRightArrow(scrollLeft < scrollWidth - clientWidth)
-    }
+    }, [scrollRef])
 
     /** Performs a smooth scrolling animation to a specified target position.
      *  Accepts a target scroll position and an optional callback to execute after completion. */
-    const smoothScroll = useCallback((target: number, callback?: () => void) => {
-        if (!scrollRef.current) return
+    const smoothScroll = useCallback(
+        (target: number, callback?: () => void) => {
+            if (!scrollRef.current) return
 
-        const start = scrollRef.current.scrollLeft
-        const startTime = Date.now()
+            const start = scrollRef.current.scrollLeft
+            const startTime = Date.now()
 
-        const animateScroll = () => {
-            const now = Date.now()
-            const time = Math.min(1, (now - startTime) / duration)
+            const animateScroll = () => {
+                const now = Date.now()
+                const time = Math.min(1, (now - startTime) / duration)
 
-            scrollRef.current!.scrollLeft = start + time * (target - start)
+                scrollRef.current!.scrollLeft = start + time * (target - start)
 
-            if (time < 1) {
-                requestAnimationFrame(animateScroll)
-            } else {
-                checkArrowsVisibility()
-                if (callback) callback() // Execute callback after the scroll animation completes
+                if (time < 1) {
+                    requestAnimationFrame(animateScroll)
+                } else {
+                    checkArrowsVisibility()
+                    if (callback) callback() // Execute callback after the scroll animation completes
+                }
             }
-        }
 
-        requestAnimationFrame(animateScroll)
-    }, [])
+            requestAnimationFrame(animateScroll)
+        },
+        [checkArrowsVisibility, scrollRef]
+    )
 
     /** Scrolls the container a fixed distance to the left or right with animation. */
     const scrollLeft = () => {
@@ -68,6 +72,7 @@ function useScrollBox(scrollRef: RefObject<HTMLDivElement>, cards: readonly bigi
     }
 
     /** Throttled function to update the last horizontal scroll position, minimizing performance impact. */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleLastScrollX = useCallback(
         throttle((screenX) => {
             setLastScrollX(screenX)
@@ -76,12 +81,15 @@ function useScrollBox(scrollRef: RefObject<HTMLDivElement>, cards: readonly bigi
     )
 
     /** Handles the wheel event to adjust the scrollLeft property, enabling horizontal scrolling. */
-    const handleScroll = (e: WheelEvent) => {
-        if (scrollRef.current) {
-            // Adjust the scrollLeft property based on the deltaY value
-            scrollRef.current.scrollLeft += e.deltaY
-        }
-    }
+    const handleScroll = useCallback(
+        (e: WheelEvent) => {
+            if (scrollRef.current) {
+                // Adjust the scrollLeft property based on the deltaY value
+                scrollRef.current.scrollLeft += e.deltaY
+            }
+        },
+        [scrollRef]
+    )
 
     /** Responds to window resize events to update arrow visibility states. */
     const handleResize = () => {
@@ -99,6 +107,7 @@ function useScrollBox(scrollRef: RefObject<HTMLDivElement>, cards: readonly bigi
         smoothScroll(targetRight, () => {
             triggerLastCardGlow()
         })
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [scrollRef])
 
     const triggerLastCardGlow = useCallback(() => {
@@ -133,7 +142,7 @@ function useScrollBox(scrollRef: RefObject<HTMLDivElement>, cards: readonly bigi
                 }
             }
         }
-    }, [scrollWrapperCurrent, handleLastScrollX, lastScrollX])
+    }, [scrollWrapperCurrent, handleLastScrollX, lastScrollX, scrollRef, checkArrowsVisibility, handleScroll])
 
     // Detects changes in the `cards` array to trigger the pop-up effect and initiate smooth scrolling to highlight new content.
     useEffect(() => {