From 20da6124b7c0167fe850d90dea710ab0f5bf2421 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Thu, 1 Feb 2024 09:26:31 +0530
Subject: [PATCH 01/17] feat: automate card draw tx submission on turn change

---
 packages/webapp/src/pages/play.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/webapp/src/pages/play.tsx b/packages/webapp/src/pages/play.tsx
index 216ad5ff..e71083ee 100644
--- a/packages/webapp/src/pages/play.tsx
+++ b/packages/webapp/src/pages/play.tsx
@@ -5,7 +5,7 @@ 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 { CardPlacement, FetchedGameData, GameStatus, GameStep } from "src/store/types"
 import { FablePage } from "src/pages/_app"
 import { Address } from "viem"
 import { readContract } from "wagmi/actions"
@@ -105,14 +105,18 @@ const Play: FablePage = ({ isHydrated }) => {
   const cancellationHandler = useCancellationHandler(loading)
 
   const cantDrawCard = cantTakeActions || gameData.currentStep !== GameStep.DRAW
-  const doDrawCard = useCallback(
-    () => drawCard({
+  
+  useEffect(() => {
+    // Automatically submit the card draw transaction when it's our turn
+    if(currentPlayer(gameData as FetchedGameData) === playerAddress && !cantDrawCard) {
+      drawCard({
         gameID: gameID!,
         playerAddress: playerAddress!,
         setLoading,
         cancellationHandler
-      }),
-    [gameID, playerAddress, setLoading, cancellationHandler])
+      })
+    }
+  }, [cancellationHandler, cantDrawCard, gameData, gameID, playerAddress])
 
   const cantEndTurn = cantTakeActions || !isEndingTurn(gameData.currentStep)
   const doEndTurn = useCallback(
@@ -213,10 +217,6 @@ const Play: FablePage = ({ isHydrated }) => {
 
             {!ended && (
               <>
-                <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" disabled={cantDrawCard} onClick={doDrawCard}>
-                  DRAW
-                </Button>
-
                 <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"
                   disabled={cantEndTurn}
                   onClick={doEndTurn}

From 4dc64c0c0290fa63f7b503c3afe2af1ae8399bce Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Thu, 1 Feb 2024 13:41:55 +0530
Subject: [PATCH 02/17] fix: check if null

---
 packages/webapp/src/pages/play.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webapp/src/pages/play.tsx b/packages/webapp/src/pages/play.tsx
index e71083ee..67d8e176 100644
--- a/packages/webapp/src/pages/play.tsx
+++ b/packages/webapp/src/pages/play.tsx
@@ -108,7 +108,7 @@ const Play: FablePage = ({ isHydrated }) => {
   
   useEffect(() => {
     // Automatically submit the card draw transaction when it's our turn
-    if(currentPlayer(gameData as FetchedGameData) === playerAddress && !cantDrawCard) {
+    if((gameData && currentPlayer(gameData) === playerAddress) && !cantDrawCard) {
       drawCard({
         gameID: gameID!,
         playerAddress: playerAddress!,

From 0f9480a93e1f57f1347c558b982b05668103f6fe Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Thu, 1 Feb 2024 16:07:46 +0530
Subject: [PATCH 03/17] fix: remove unused import

---
 packages/webapp/src/pages/play.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webapp/src/pages/play.tsx b/packages/webapp/src/pages/play.tsx
index 67d8e176..fa30e983 100644
--- a/packages/webapp/src/pages/play.tsx
+++ b/packages/webapp/src/pages/play.tsx
@@ -5,7 +5,7 @@ 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, FetchedGameData, GameStatus, GameStep } from "src/store/types"
+import { CardPlacement, GameStatus, GameStep } from "src/store/types"
 import { FablePage } from "src/pages/_app"
 import { Address } from "viem"
 import { readContract } from "wagmi/actions"

From 8d4b4dd78e9dc7a10773a358a38fdd5b6c533a88 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Thu, 8 Feb 2024 15:12:08 +0530
Subject: [PATCH 04/17] fix: comment formatting for accurate linking

---
 packages/webapp/src/store/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/store/types.ts b/packages/webapp/src/store/types.ts
index 9d64a635..77398ebf 100644
--- a/packages/webapp/src/store/types.ts
+++ b/packages/webapp/src/store/types.ts
@@ -115,8 +115,8 @@ export type PrivateInfo = {
   /** MimcHash of {@link salt}. */
   saltHash: bigint
   /**
-   * The player's current's hand ordering (indexes into the game's card array ({@link
-   * FetchedGameData.cards}). Used for proofs.
+   * The player's current's hand ordering (indexes into the game's card array 
+   * ({@link FetchedGameData.cards}). Used for proofs.
    */
   handIndexes: number[]
   /**

From b40347d962fb6122ce1599ce2334e8c7a8f71d0f Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Tue, 13 Feb 2024 12:28:49 +0530
Subject: [PATCH 05/17] fix: update `privateInfo` atom dependencies

---
 packages/webapp/src/store/atoms.ts  |  4 ++--
 packages/webapp/src/store/derive.ts | 10 ++++------
 packages/webapp/src/store/types.ts  |  4 ++--
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/webapp/src/store/atoms.ts b/packages/webapp/src/store/atoms.ts
index cd5d90ca..ea036fb0 100644
--- a/packages/webapp/src/store/atoms.ts
+++ b/packages/webapp/src/store/atoms.ts
@@ -175,10 +175,10 @@ export const opponentData = cachedAtom<PlayerData|null>((get) => {
 // -------------------------------------------------------------------------------------------------
 
 /**
- * @see module:store/hooks#usePrivateInfo
+ * @seemodule:store/hooks#usePrivateInfo
  */
 export const privateInfo = cachedAtom<PrivateInfo|null>((get) => {
-  return derive.getPrivateInfo(get(gameID), get(playerAddress))
+  return derive.getPrivateInfo(get(gameID), get(playerAddress), get(privateInfoStore))
 })
 
 // -------------------------------------------------------------------------------------------------
diff --git a/packages/webapp/src/store/derive.ts b/packages/webapp/src/store/derive.ts
index 96cadb41..11c4faee 100644
--- a/packages/webapp/src/store/derive.ts
+++ b/packages/webapp/src/store/derive.ts
@@ -8,8 +8,7 @@
  */
 
 import { Address } from "src/chain"
-import * as store from "src/store/atoms"
-import { FetchedGameData, GameStatus, GameStep, PlayerData, PrivateInfo } from "src/store/types"
+import { FetchedGameData, GameStatus, GameStep, PlayerData, PrivateInfo, PrivateInfoStore } from "src/store/types"
 
 // =================================================================================================
 
@@ -128,9 +127,8 @@ export function getOpponentData(gdata: FetchedGameData|null, player: Address|nul
 /**
  * @see module:store/read#getPrivateInfo
  */
-export function getPrivateInfo(gameID: bigint|null, player: Address|null): PrivateInfo|null {
+export function getPrivateInfo(gameID: bigint|null, player: Address|null, privateInfoStore: PrivateInfoStore): PrivateInfo|null {
   if (gameID === null || player === null) return null
-  const privateInfoStore = store.get(store.privateInfoStore)
   return privateInfoStore[gameID.toString()]?.[player] ?? null
 }
 
@@ -145,8 +143,8 @@ export function getPlayerHand(
 ): readonly bigint[]|null {
   if (gdata === null  || privateInfo === null) return null
   const handIndexes = privateInfo.handIndexes
-  const firstEmtpy = handIndexes.indexOf(255)
-  const handSize = firstEmtpy < 0 ? handIndexes.length : firstEmtpy
+  const firstEmpty = handIndexes.indexOf(255)
+  const handSize = firstEmpty < 0 ? handIndexes.length : firstEmpty
   return handIndexes
     .slice(0, handSize)
     .map((index) => gdata.cards[index])
diff --git a/packages/webapp/src/store/types.ts b/packages/webapp/src/store/types.ts
index 77398ebf..f2bb64b9 100644
--- a/packages/webapp/src/store/types.ts
+++ b/packages/webapp/src/store/types.ts
@@ -120,8 +120,8 @@ export type PrivateInfo = {
    */
   handIndexes: number[]
   /**
-   * The player's current's deck ordering (indexes into the game's card array ({@link
-   * FetchedGameData.cards}). Used for proofs.
+   * The player's current's deck ordering (indexes into the game's card array 
+   * ({@link FetchedGameData.cards}). Used for proofs.
    */
   deckIndexes: number[]
   /**

From 2d8e364398b09081ff4c871ce4c6dd0ba59e6dfe Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Tue, 13 Feb 2024 12:29:06 +0530
Subject: [PATCH 06/17] fix: typo

---
 packages/webapp/src/store/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/store/README.md b/packages/webapp/src/store/README.md
index 09398d68..e285cfd0 100644
--- a/packages/webapp/src/store/README.md
+++ b/packages/webapp/src/store/README.md
@@ -4,7 +4,7 @@ The store is the frontend's source of truth for the game state. That state is us
 when performing actions on behalf of users.
 
 A small part of that state is UI state, but the major part is game state, which must be kept
-synchornized with the blockchain.
+synchronized with the blockchain.
 
 The absolute simplest way to do that is to use a pure derivation: fetch all the game data from
 the chain, and re-derive the local state from it. And that's exactly what we do right now.
@@ -109,7 +109,7 @@ before we receive confirmation that a transaction was included in a block.
 
 ### `checkFresh.ts`
 
-Above, we allued to the problem that occur when an async function calls `await`, as the state may
+Above, we allude to the problem that occur when an async function calls `await`, as the state may
 change at that time and read from the store may be inconsistent before and after the call.
 
 Given the turn-based nature of the game, this is rarely an issue, however it could be if the

From 26a223ed5ddad0b2ce0ec745f11391cdb775e539 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Fri, 16 Feb 2024 09:22:46 +0530
Subject: [PATCH 07/17] fix: update `getPrivateInfo`

---
 packages/webapp/src/store/derive.ts | 8 +++++---
 packages/webapp/src/store/read.ts   | 7 ++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/webapp/src/store/derive.ts b/packages/webapp/src/store/derive.ts
index 11c4faee..d449fa99 100644
--- a/packages/webapp/src/store/derive.ts
+++ b/packages/webapp/src/store/derive.ts
@@ -127,9 +127,11 @@ export function getOpponentData(gdata: FetchedGameData|null, player: Address|nul
 /**
  * @see module:store/read#getPrivateInfo
  */
-export function getPrivateInfo(gameID: bigint|null, player: Address|null, privateInfoStore: PrivateInfoStore): PrivateInfo|null {
-  if (gameID === null || player === null) return null
-  return privateInfoStore[gameID.toString()]?.[player] ?? null
+export function getPrivateInfo(gameID: bigint | null, player: Address | null, privateInfoStore: PrivateInfoStore): PrivateInfo | null {
+  // Directly return null if either gameID or player is null, or if the specific info does not exist in the store.
+  return gameID !== null && player !== null ? 
+    privateInfoStore[gameID.toString()]?.[player] || null 
+    : null;
 }
 
 // -------------------------------------------------------------------------------------------------
diff --git a/packages/webapp/src/store/read.ts b/packages/webapp/src/store/read.ts
index 9f510764..89779d26 100644
--- a/packages/webapp/src/store/read.ts
+++ b/packages/webapp/src/store/read.ts
@@ -8,7 +8,7 @@
 import { type Address } from "src/chain"
 import * as store from "src/store/atoms"
 import * as derive from "src/store/derive"
-import type { FetchedGameData, PlayerData, PrivateInfo } from "src/store/types"
+import type { FetchedGameData, PlayerData, PrivateInfo, PrivateInfoStore } from "src/store/types"
 import { GameStatus } from "src/store/types"
 
 // =================================================================================================
@@ -94,9 +94,10 @@ export function getPlayerData(
  */
 export function getPrivateInfo(
     gameID: bigint|null = store.get(store.gameID),
-    player: Address|null = store.get(store.playerAddress)
+    player: Address|null = store.get(store.playerAddress),
+    privateInfoStore: PrivateInfoStore = store.get(store.privateInfoStore)
 ): PrivateInfo|null {
-  return derive.getPrivateInfo(gameID, player)
+  return derive.getPrivateInfo(gameID, player, privateInfoStore)
 }
 
 // =================================================================================================

From 2c8fdefb7121bd986c38ac572ae0167a21c61866 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Fri, 16 Feb 2024 18:24:53 +0530
Subject: [PATCH 08/17] feat: scrolling effect in `Hand` upon drawing new card,
 toast notifications

---
 packages/webapp/package.json                  |  2 +
 packages/webapp/src/actions/drawCard.ts       |  3 -
 .../src/components/cards/cardContainer.tsx    |  3 +
 .../webapp/src/components/cards/handCard.tsx  |  5 +-
 packages/webapp/src/components/hand.tsx       | 18 ++++--
 packages/webapp/src/components/ui/dialog.tsx  |  2 -
 packages/webapp/src/components/ui/sonner.tsx  | 31 ++++++++++
 packages/webapp/src/hooks/useScrollBox.ts     | 62 +++++++++++++++++--
 packages/webapp/src/pages/_app.tsx            |  2 +
 packages/webapp/src/pages/play.tsx            | 26 +++++---
 10 files changed, 127 insertions(+), 27 deletions(-)
 create mode 100644 packages/webapp/src/components/ui/sonner.tsx

diff --git a/packages/webapp/package.json b/packages/webapp/package.json
index f9c07c9f..9e0db289 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -24,11 +24,13 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.309.0",
     "next": "^13.5.6",
+    "next-themes": "^0.2.1",
     "next-transpile-modules": "^10.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.11.0",
     "snarkjs": "^0.7.1",
+    "sonner": "^1.4.0",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
     "viem": "^1.16.6",
diff --git a/packages/webapp/src/actions/drawCard.ts b/packages/webapp/src/actions/drawCard.ts
index f1bf42b5..b215dbdc 100644
--- a/packages/webapp/src/actions/drawCard.ts
+++ b/packages/webapp/src/actions/drawCard.ts
@@ -92,8 +92,6 @@ async function drawCardImpl(args: DrawCardArgs): Promise<boolean> {
   const cards = getCards()!
   console.log(`drew card ${cards[selectedCard]}`)
 
-  args.setLoading("Generating draw proof ...")
-
   const tmpHandSize = privateInfo.handIndexes.indexOf(255)
   const initialHandSize = tmpHandSize < 0
     ? BigInt(privateInfo.handIndexes.length)
@@ -138,7 +136,6 @@ async function drawCardImpl(args: DrawCardArgs): Promise<boolean> {
         proof.proof_b,
         proof.proof_c
       ],
-      setLoading: args.setLoading
     })))
 
   // TODO: this should be put in an optimistic store, before proof generation
diff --git a/packages/webapp/src/components/cards/cardContainer.tsx b/packages/webapp/src/components/cards/cardContainer.tsx
index d4c112fc..b473aaf4 100644
--- a/packages/webapp/src/components/cards/cardContainer.tsx
+++ b/packages/webapp/src/components/cards/cardContainer.tsx
@@ -12,12 +12,14 @@ interface BaseCardProps {
   className?: string
   handHovered?: boolean
   placement: CardPlacement
+  cardGlow?: boolean
 }
 
 const CardContainer: React.FC<BaseCardProps> = ({
   id,
   handHovered,
   placement,
+  cardGlow
 }) => {
   const {
     attributes,
@@ -46,6 +48,7 @@ const CardContainer: React.FC<BaseCardProps> = ({
             handHovered={handHovered}
             isDragging={isDragging}
             ref={setNodeRef}
+            cardGlow={cardGlow}
           />
         )
       case CardPlacement.BOARD:
diff --git a/packages/webapp/src/components/cards/handCard.tsx b/packages/webapp/src/components/cards/handCard.tsx
index 354335bf..9bc80d7d 100644
--- a/packages/webapp/src/components/cards/handCard.tsx
+++ b/packages/webapp/src/components/cards/handCard.tsx
@@ -6,10 +6,11 @@ interface HandCardProps {
   id: number
   handHovered?: boolean
   isDragging: boolean
+  cardGlow?: boolean
 }
 
 const HandCard = forwardRef<HTMLDivElement, HandCardProps>(
-  ({ id, isDragging, handHovered }, ref) => {
+  ({ id, isDragging, handHovered, cardGlow }, ref) => { // glow card
     const [ cardHover, setCardHover ] = useState<boolean>(false)
     const [ isDetailsVisible, setIsDetailsVisible ] = useState<boolean>(false)
     const showingDetails = isDetailsVisible && !isDragging
@@ -50,7 +51,7 @@ const HandCard = forwardRef<HTMLDivElement, HandCardProps>(
           className="pointer-events-none rounded-xl border select-none"
           style={{
             boxShadow:
-              cardHover && !isDetailsVisible ? "0 0 10px 2px gold" : "none", // Adds golden glow when hovered
+              (cardHover && !isDetailsVisible) || cardGlow ? "0 0 10x 2px gold" : "none", // Adds golden glow when hovered
           }}
         />
         {showingDetails && (
diff --git a/packages/webapp/src/components/hand.tsx b/packages/webapp/src/components/hand.tsx
index eaa2dcad..67ccaa9f 100644
--- a/packages/webapp/src/components/hand.tsx
+++ b/packages/webapp/src/components/hand.tsx
@@ -20,10 +20,15 @@ const Hand = ({
   setLoading: (label: string | null) => void
   cancellationHandler: CancellationHandler
 }) => {
-  const [ isFocused, setIsFocused ] = useState<boolean>(false)
-  const scrollWrapperRef = useRef<any>()
-  const { showLeftArrow, scrollLeft, showRightArrow, scrollRight } =
-    useScrollBox(scrollWrapperRef)
+  const [isFocused, setIsFocused] = useState<boolean>(false)
+  const scrollWrapperRef = useRef<HTMLDivElement>(null)
+  const {
+    showLeftArrow,
+    scrollLeft,
+    showRightArrow,
+    scrollRight,
+    isLastCardGlowing,
+  } = useScrollBox(scrollWrapperRef, cards)
 
   const { setNodeRef } = useSortable({
     id: CardPlacement.HAND,
@@ -44,7 +49,7 @@ const Hand = ({
 
   return (
     <div
-      className={`${className} flex flex-row items-center justify-evenly bottom-0 w-[95%] space-x-2`}
+      className={`${className} py-4 flex flex-row items-center justify-evenly bottom-0 w-[95%] space-x-2`}
       ref={setNodeRef}
       onMouseEnter={() => {
         setIsFocused(true)
@@ -74,6 +79,7 @@ const Hand = ({
                     <CardContainer
                       id={convertedCards[index - 1]}
                       placement={CardPlacement.HAND}
+                      cardGlow={isLastCardGlowing && index === range.length}
                     />
                   </div>
                 ))}
@@ -94,4 +100,4 @@ const Hand = ({
   )
 }
 
-export default Hand
\ No newline at end of file
+export default Hand
diff --git a/packages/webapp/src/components/ui/dialog.tsx b/packages/webapp/src/components/ui/dialog.tsx
index ca4273b5..3e91eb98 100644
--- a/packages/webapp/src/components/ui/dialog.tsx
+++ b/packages/webapp/src/components/ui/dialog.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { X } from "lucide-react"
diff --git a/packages/webapp/src/components/ui/sonner.tsx b/packages/webapp/src/components/ui/sonner.tsx
new file mode 100644
index 00000000..da6a59a6
--- /dev/null
+++ b/packages/webapp/src/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+// ref: https://ui.shadcn.com/docs/components/sonner
+// docs: https://sonner.emilkowal.ski/
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/packages/webapp/src/hooks/useScrollBox.ts b/packages/webapp/src/hooks/useScrollBox.ts
index 17851425..276960a1 100644
--- a/packages/webapp/src/hooks/useScrollBox.ts
+++ b/packages/webapp/src/hooks/useScrollBox.ts
@@ -2,19 +2,24 @@ import { useState, useEffect, useCallback } from "react"
 import throttle from "lodash/throttle"
 
 const timing = (1 / 60) * 1000
-const decay = (v: any) => -0.1 * ((1 / timing) ^ 4) + v
 
-function useScrollBox(scrollRef: any) {
+function useScrollBox(scrollRef: any, cards: readonly bigint[] | null) {
+  // Stores the last horizontal scroll position.
   const [lastScrollX, setLastScrollX] = useState(0)
+
+  // Determines the visibility of navigation arrows based on scroll position.
   const [showLeftArrow, setShowLeftArrow] = useState<boolean>(false)
   const [showRightArrow, setShowRightArrow] = useState<boolean>(false)
 
+  const [isLastCardGlowing, setIsLastCardGlowing] = useState<boolean>(false)
+
   const scrollWrapperCurrent = scrollRef.current
 
   const cardWidth = 200 // width of card when not in focus
   const scrollAmount = 2 * cardWidth
   const duration = 300
 
+  // Checks and updates the arrow visibility states based on the scroll position.
   const checkArrowsVisibility = () => {
     if (!scrollRef.current) return
     const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current
@@ -22,7 +27,9 @@ function useScrollBox(scrollRef: any) {
     setShowRightArrow(scrollLeft < scrollWidth - clientWidth)
   }
 
-  const smoothScroll = (target: number) => {
+  // 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 = (target: number, callback?: () => void) => {
     if (!scrollRef.current) return
 
     const start = scrollRef.current.scrollLeft
@@ -32,15 +39,21 @@ function useScrollBox(scrollRef: any) {
       const now = Date.now()
       const time = Math.min(1, (now - startTime) / duration)
 
-      scrollRef.current.scrollLeft = start + time * (target - start)
+      if (scrollRef.current.scrollLeft)
+        scrollRef.current.scrollLeft = start + time * (target - start)
 
-      if (time < 1) requestAnimationFrame(animateScroll)
-      else checkArrowsVisibility()
+      if (time < 1) {
+        requestAnimationFrame(animateScroll)
+      } else {
+        checkArrowsVisibility()
+        if (callback) callback() // Execute callback after the scroll animation completes
+      }
     }
 
     requestAnimationFrame(animateScroll)
   }
 
+  // Scrolls the container a fixed distance to the left or right with animation.
   const scrollLeft = () => {
     if (!scrollRef.current) return
     const target = Math.max(0, scrollRef.current.scrollLeft - scrollAmount)
@@ -58,6 +71,7 @@ function useScrollBox(scrollRef: any) {
     smoothScroll(target)
   }
 
+  // Throttled function to update the last horizontal scroll position, minimizing performance impact.
   const handleLastScrollX = useCallback(
     throttle((screenX) => {
       setLastScrollX(screenX)
@@ -65,6 +79,7 @@ function useScrollBox(scrollRef: any) {
     []
   )
 
+  // 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
@@ -72,11 +87,34 @@ function useScrollBox(scrollRef: any) {
     }
   }
 
+  // Responds to window resize events to update arrow visibility states.
   const handleResize = () => {
     setShowLeftArrow(true)
     setShowRightArrow(true)
   }
 
+  // Smoothly scrolls to the rightmost end of the container and then back to the start.
+  const smoothScrollToRightThenLeft = useCallback(() => {
+    const element = scrollRef.current
+    if (!element) return
+
+    const targetRight = element.scrollWidth - element.clientWidth
+    smoothScroll(targetRight, () => {
+      triggerLastCardGlow()
+      setTimeout(() => {
+        smoothScroll(0) // Scrolls back to the first element
+      }, 3000)
+    })
+  }, [scrollRef])
+
+  const triggerLastCardGlow = useCallback(() => {
+    setIsLastCardGlowing(true)
+    setTimeout(() => {
+      setIsLastCardGlowing(false)
+    }, 2500)
+  }, [])
+
+  // Sets up and cleans up event listeners for resize, scroll, and wheel events.
   useEffect(() => {
     if (scrollRef.current) {
       checkArrowsVisibility()
@@ -101,11 +139,23 @@ function useScrollBox(scrollRef: any) {
     }
   }, [scrollWrapperCurrent, handleLastScrollX, lastScrollX])
 
+  // Detects changes in the `cards` array to trigger the pop-up effect and initiate smooth scrolling to highlight new content.
+  useEffect(() => {
+    if (cards && cards.length > 0) {
+      const timer = setTimeout(() => {
+        smoothScrollToRightThenLeft()
+      }, 3000)
+
+      return () => clearTimeout(timer)
+    }
+  }, [cards, smoothScrollToRightThenLeft])
+
   return {
     showLeftArrow,
     scrollLeft,
     showRightArrow,
     scrollRight,
+    isLastCardGlowing,
   }
 }
 
diff --git a/packages/webapp/src/pages/_app.tsx b/packages/webapp/src/pages/_app.tsx
index 00a9c79b..b3c7c95d 100644
--- a/packages/webapp/src/pages/_app.tsx
+++ b/packages/webapp/src/pages/_app.tsx
@@ -20,6 +20,7 @@ import "src/styles/globals.css"
 import { useRouter } from "next/router"
 import { ComponentType, useEffect } from "react"
 import { Deck } from "src/store/types"
+import { Toaster } from "src/components/ui/sonner"
 
 // =================================================================================================
 
@@ -50,6 +51,7 @@ const MyApp: AppType = ({ Component, pageProps }) => {
         <ConnectKitProvider>
           {jotaiDebug()}
           <ComponentWrapper Component={Component} pageProps={pageProps} />
+          <Toaster expand={true} />
         </ConnectKitProvider>
       </WagmiConfig>
     </>
diff --git a/packages/webapp/src/pages/play.tsx b/packages/webapp/src/pages/play.tsx
index fa30e983..f802394c 100644
--- a/packages/webapp/src/pages/play.tsx
+++ b/packages/webapp/src/pages/play.tsx
@@ -38,6 +38,7 @@ import { createPortal } from "react-dom"
 import useDragEvents from "src/hooks/useDragEvents"
 import CardContainer from "src/components/cards/cardContainer"
 import { Button } from "src/components/ui/button"
+import { toast } from "sonner"
 
 const Play: FablePage = ({ isHydrated }) => {
   const [ gameID, setGameID ] = store.useGameID()
@@ -105,18 +106,27 @@ const Play: FablePage = ({ isHydrated }) => {
   const cancellationHandler = useCancellationHandler(loading)
 
   const cantDrawCard = cantTakeActions || gameData.currentStep !== GameStep.DRAW
-  
+  const doDrawCard = useCallback(() =>
+    drawCard({
+      gameID: gameID!,
+      playerAddress: playerAddress!,
+      setLoading,
+      cancellationHandler,
+    }),
+  [gameID, playerAddress, setLoading, cancellationHandler])
+
   useEffect(() => {
     // Automatically submit the card draw transaction when it's our turn
-    if((gameData && currentPlayer(gameData) === playerAddress) && !cantDrawCard) {
-      drawCard({
-        gameID: gameID!,
-        playerAddress: playerAddress!,
-        setLoading,
-        cancellationHandler
+    if (gameData && currentPlayer(gameData) === playerAddress && !cantDrawCard) {
+      toast.promise(doDrawCard, {
+        loading: "Your Turn - Drawing Card...",
+        success: () => {
+          return "Card Drawn Successfully!"
+        },
+        error: "Error Drawing Card",
       })
     }
-  }, [cancellationHandler, cantDrawCard, gameData, gameID, playerAddress])
+  }, [cancellationHandler, cantDrawCard, gameID, playerAddress, doDrawCard])
 
   const cantEndTurn = cantTakeActions || !isEndingTurn(gameData.currentStep)
   const doEndTurn = useCallback(

From 58690e337dd3a0f5649405ecaa7905e450527f3b Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Sun, 18 Feb 2024 20:59:00 +0530
Subject: [PATCH 09/17] fix: minor

---
 packages/webapp/src/components/cards/handCard.tsx | 4 ++--
 packages/webapp/src/store/README.md               | 2 +-
 packages/webapp/src/store/atoms.ts                | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/webapp/src/components/cards/handCard.tsx b/packages/webapp/src/components/cards/handCard.tsx
index 9bc80d7d..bfcf3839 100644
--- a/packages/webapp/src/components/cards/handCard.tsx
+++ b/packages/webapp/src/components/cards/handCard.tsx
@@ -10,7 +10,7 @@ interface HandCardProps {
 }
 
 const HandCard = forwardRef<HTMLDivElement, HandCardProps>(
-  ({ id, isDragging, handHovered, cardGlow }, ref) => { // glow card
+  ({ id, isDragging, handHovered, cardGlow }, ref) => {
     const [ cardHover, setCardHover ] = useState<boolean>(false)
     const [ isDetailsVisible, setIsDetailsVisible ] = useState<boolean>(false)
     const showingDetails = isDetailsVisible && !isDragging
@@ -51,7 +51,7 @@ const HandCard = forwardRef<HTMLDivElement, HandCardProps>(
           className="pointer-events-none rounded-xl border select-none"
           style={{
             boxShadow:
-              (cardHover && !isDetailsVisible) || cardGlow ? "0 0 10x 2px gold" : "none", // Adds golden glow when hovered
+              (cardHover && !isDetailsVisible) || cardGlow ? "0 0 10px 2px gold" : "none", // Adds golden glow when hovered
           }}
         />
         {showingDetails && (
diff --git a/packages/webapp/src/store/README.md b/packages/webapp/src/store/README.md
index e285cfd0..934d6827 100644
--- a/packages/webapp/src/store/README.md
+++ b/packages/webapp/src/store/README.md
@@ -109,7 +109,7 @@ before we receive confirmation that a transaction was included in a block.
 
 ### `checkFresh.ts`
 
-Above, we allude to the problem that occur when an async function calls `await`, as the state may
+Above, we alluded to the problem that occur when an async function calls `await`, as the state may
 change at that time and read from the store may be inconsistent before and after the call.
 
 Given the turn-based nature of the game, this is rarely an issue, however it could be if the
diff --git a/packages/webapp/src/store/atoms.ts b/packages/webapp/src/store/atoms.ts
index ea036fb0..e98eb3c8 100644
--- a/packages/webapp/src/store/atoms.ts
+++ b/packages/webapp/src/store/atoms.ts
@@ -175,7 +175,7 @@ export const opponentData = cachedAtom<PlayerData|null>((get) => {
 // -------------------------------------------------------------------------------------------------
 
 /**
- * @seemodule:store/hooks#usePrivateInfo
+ * @see module:store/hooks#usePrivateInfo
  */
 export const privateInfo = cachedAtom<PrivateInfo|null>((get) => {
   return derive.getPrivateInfo(get(gameID), get(playerAddress), get(privateInfoStore))

From e13fba62c00ecdc6af4157506083192e3d4e8c38 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Sun, 18 Feb 2024 21:10:01 +0530
Subject: [PATCH 10/17] fix: `useScrollbox` hook

---
 packages/webapp/src/hooks/useScrollBox.ts | 24 +++++++++++------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/webapp/src/hooks/useScrollBox.ts b/packages/webapp/src/hooks/useScrollBox.ts
index 276960a1..8f3b5ec3 100644
--- a/packages/webapp/src/hooks/useScrollBox.ts
+++ b/packages/webapp/src/hooks/useScrollBox.ts
@@ -27,9 +27,9 @@ function useScrollBox(scrollRef: any, cards: readonly bigint[] | null) {
     setShowRightArrow(scrollLeft < scrollWidth - clientWidth)
   }
 
-  // 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 = (target: number, callback?: () => void) => {
+  /** 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 start = scrollRef.current.scrollLeft
@@ -51,9 +51,9 @@ function useScrollBox(scrollRef: any, cards: readonly bigint[] | null) {
     }
 
     requestAnimationFrame(animateScroll)
-  }
+  }, [])
 
-  // Scrolls the container a fixed distance to the left or right with animation.
+  /** Scrolls the container a fixed distance to the left or right with animation. */
   const scrollLeft = () => {
     if (!scrollRef.current) return
     const target = Math.max(0, scrollRef.current.scrollLeft - scrollAmount)
@@ -71,7 +71,7 @@ function useScrollBox(scrollRef: any, cards: readonly bigint[] | null) {
     smoothScroll(target)
   }
 
-  // Throttled function to update the last horizontal scroll position, minimizing performance impact.
+  /** Throttled function to update the last horizontal scroll position, minimizing performance impact. */
   const handleLastScrollX = useCallback(
     throttle((screenX) => {
       setLastScrollX(screenX)
@@ -79,7 +79,7 @@ function useScrollBox(scrollRef: any, cards: readonly bigint[] | null) {
     []
   )
 
-  // Handles the wheel event to adjust the scrollLeft property, enabling horizontal scrolling.
+  /** 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
@@ -87,13 +87,14 @@ function useScrollBox(scrollRef: any, cards: readonly bigint[] | null) {
     }
   }
 
-  // Responds to window resize events to update arrow visibility states.
+  /** Responds to window resize events to update arrow visibility states. */
   const handleResize = () => {
     setShowLeftArrow(true)
     setShowRightArrow(true)
   }
 
-  // Smoothly scrolls to the rightmost end of the container and then back to the start.
+  /** Smoothly scrolls to the rightmost end of the container,
+   *  triggers a glow in the last card added. */
   const smoothScrollToRightThenLeft = useCallback(() => {
     const element = scrollRef.current
     if (!element) return
@@ -101,9 +102,6 @@ function useScrollBox(scrollRef: any, cards: readonly bigint[] | null) {
     const targetRight = element.scrollWidth - element.clientWidth
     smoothScroll(targetRight, () => {
       triggerLastCardGlow()
-      setTimeout(() => {
-        smoothScroll(0) // Scrolls back to the first element
-      }, 3000)
     })
   }, [scrollRef])
 
@@ -114,7 +112,7 @@ function useScrollBox(scrollRef: any, cards: readonly bigint[] | null) {
     }, 2500)
   }, [])
 
-  // Sets up and cleans up event listeners for resize, scroll, and wheel events.
+  /** Sets up and cleans up event listeners for resize, scroll, and wheel events. */
   useEffect(() => {
     if (scrollRef.current) {
       checkArrowsVisibility()

From 78686715016ffeb9c5bef126fa932e48892b110f Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Sun, 18 Feb 2024 21:15:51 +0530
Subject: [PATCH 11/17] fix: use accurate type for `ref` param

---
 packages/webapp/src/hooks/useScrollBox.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/webapp/src/hooks/useScrollBox.ts b/packages/webapp/src/hooks/useScrollBox.ts
index 8f3b5ec3..85943a02 100644
--- a/packages/webapp/src/hooks/useScrollBox.ts
+++ b/packages/webapp/src/hooks/useScrollBox.ts
@@ -1,9 +1,9 @@
-import { useState, useEffect, useCallback } from "react"
+import { useState, useEffect, useCallback, RefObject } from "react"
 import throttle from "lodash/throttle"
 
 const timing = (1 / 60) * 1000
 
-function useScrollBox(scrollRef: any, cards: readonly bigint[] | null) {
+function useScrollBox(scrollRef: RefObject<HTMLDivElement>, cards: readonly bigint[] | null) {
   // Stores the last horizontal scroll position.
   const [lastScrollX, setLastScrollX] = useState(0)
 
@@ -19,7 +19,7 @@ function useScrollBox(scrollRef: any, cards: readonly bigint[] | null) {
   const scrollAmount = 2 * cardWidth
   const duration = 300
 
-  // Checks and updates the arrow visibility states based on the scroll position.
+  /** Checks and updates the arrow visibility states based on the scroll position. */
   const checkArrowsVisibility = () => {
     if (!scrollRef.current) return
     const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current
@@ -39,8 +39,7 @@ function useScrollBox(scrollRef: any, cards: readonly bigint[] | null) {
       const now = Date.now()
       const time = Math.min(1, (now - startTime) / duration)
 
-      if (scrollRef.current.scrollLeft)
-        scrollRef.current.scrollLeft = start + time * (target - start)
+      scrollRef.current!.scrollLeft = start + time * (target - start)
 
       if (time < 1) {
         requestAnimationFrame(animateScroll)

From 3a4501be20f446695ee5d558027d10ee6fa80920 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Tue, 20 Feb 2024 20:08:51 +0530
Subject: [PATCH 12/17] chore: show `draw` button if useEffect call fails

---
 packages/webapp/src/hooks/useScrollBox.ts |  8 +++---
 packages/webapp/src/pages/play.tsx        | 30 ++++++++++++++++++++---
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/packages/webapp/src/hooks/useScrollBox.ts b/packages/webapp/src/hooks/useScrollBox.ts
index 85943a02..9372be84 100644
--- a/packages/webapp/src/hooks/useScrollBox.ts
+++ b/packages/webapp/src/hooks/useScrollBox.ts
@@ -5,13 +5,13 @@ const timing = (1 / 60) * 1000
 
 function useScrollBox(scrollRef: RefObject<HTMLDivElement>, cards: readonly bigint[] | null) {
   // Stores the last horizontal scroll position.
-  const [lastScrollX, setLastScrollX] = useState(0)
+  const [ lastScrollX, setLastScrollX ] = useState(0)
 
   // Determines the visibility of navigation arrows based on scroll position.
-  const [showLeftArrow, setShowLeftArrow] = useState<boolean>(false)
-  const [showRightArrow, setShowRightArrow] = useState<boolean>(false)
+  const [ showLeftArrow, setShowLeftArrow ] = useState<boolean>(false)
+  const [ showRightArrow, setShowRightArrow ] = useState<boolean>(false)
 
-  const [isLastCardGlowing, setIsLastCardGlowing] = useState<boolean>(false)
+  const [ isLastCardGlowing, setIsLastCardGlowing ] = useState<boolean>(false)
 
   const scrollWrapperCurrent = scrollRef.current
 
diff --git a/packages/webapp/src/pages/play.tsx b/packages/webapp/src/pages/play.tsx
index f802394c..87f142a5 100644
--- a/packages/webapp/src/pages/play.tsx
+++ b/packages/webapp/src/pages/play.tsx
@@ -53,12 +53,14 @@ const Play: FablePage = ({ isHydrated }) => {
   const [ hasVisitedBoard, visitBoard ] = store.useHasVisitedBoard()
   useEffect(visitBoard, [visitBoard, hasVisitedBoard])
 
+  // state variables
   const [ loading, setLoading ] = useState<string | null>(null)
   const [ hideResults, setHideResults ] = useState<boolean>(false)
   const [ concedeCompleted, setConcedeCompleted ] = useState<boolean>(false)
-  const gameData = store.useGameData()
   const [ activeId, setActiveId ] = useState<UniqueIdentifier|null>(null)
+  const [ showDrawButton, setShowDrawButton ] = useState<boolean>(false)
 
+  const gameData = store.useGameData()
   const playerHand = usePlayerHand()
 
   const dropAnimation: DropAnimation = {
@@ -121,12 +123,16 @@ const Play: FablePage = ({ isHydrated }) => {
       toast.promise(doDrawCard, {
         loading: "Your Turn - Drawing Card...",
         success: () => {
+          if (showDrawButton) setShowDrawButton(false)
           return "Card Drawn Successfully!"
         },
-        error: "Error Drawing Card",
+        error: () => {
+          if(!showDrawButton) setShowDrawButton(true) 
+          return null as any // don't trigger the toast
+        }
       })
     }
-  }, [cancellationHandler, cantDrawCard, gameID, playerAddress, doDrawCard])
+  }, [cancellationHandler, cantDrawCard, gameID, playerAddress, doDrawCard, gameData, showDrawButton])
 
   const cantEndTurn = cantTakeActions || !isEndingTurn(gameData.currentStep)
   const doEndTurn = useCallback(
@@ -227,6 +233,24 @@ const Play: FablePage = ({ isHydrated }) => {
 
             {!ended && (
               <>
+                {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"
+                    onClick={() => {
+                      toast.promise(doDrawCard, {
+                        loading: "Drawing Card...",
+                        success: () => {
+                          if (showDrawButton) setShowDrawButton(false)
+                          return "Card Drawn Successfully!"
+                        }
+                      })
+                    }}
+                  >
+                    DRAW
+                  </Button>
+                }
+
                 <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"
                   disabled={cantEndTurn}
                   onClick={doEndTurn}

From 83e9d004c9bc9b5f58a477f1f9396eb728b0d1c2 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Wed, 21 Feb 2024 12:20:53 +0530
Subject: [PATCH 13/17] chore: use placeholder `setLoading` function

---
 packages/webapp/src/actions/drawCard.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/webapp/src/actions/drawCard.ts b/packages/webapp/src/actions/drawCard.ts
index b215dbdc..bf536e77 100644
--- a/packages/webapp/src/actions/drawCard.ts
+++ b/packages/webapp/src/actions/drawCard.ts
@@ -54,6 +54,10 @@ export async function drawCard(args: DrawCardArgs): Promise<boolean> {
   }
 }
 
+/** Intentionally left blank to ignore any loading message.
+ * This function accepts a message parameter but does nothing with it. */
+function setLoading(_message: string|null|undefined) {}
+
 async function drawCardImpl(args: DrawCardArgs): Promise<boolean> {
 
   const gameID = getGameID()
@@ -92,6 +96,8 @@ async function drawCardImpl(args: DrawCardArgs): Promise<boolean> {
   const cards = getCards()!
   console.log(`drew card ${cards[selectedCard]}`)
 
+  setLoading("Generating draw proof ...")
+
   const tmpHandSize = privateInfo.handIndexes.indexOf(255)
   const initialHandSize = tmpHandSize < 0
     ? BigInt(privateInfo.handIndexes.length)
@@ -136,6 +142,7 @@ async function drawCardImpl(args: DrawCardArgs): Promise<boolean> {
         proof.proof_b,
         proof.proof_c
       ],
+      setLoading: setLoading
     })))
 
   // TODO: this should be put in an optimistic store, before proof generation

From 467a7df6ad3793d6fd66f93b1e27ab9c533c6acc Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Wed, 21 Feb 2024 12:24:51 +0530
Subject: [PATCH 14/17] update deps

---
 pnpm-lock.yaml | 110 ++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 82 insertions(+), 28 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 40703447..1c34f85f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -96,6 +96,9 @@ 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)
+      embla-carousel-react:
+        specifier: 8.0.0-rc22
+        version: 8.0.0-rc22(react@18.2.0)
       jotai:
         specifier: ^2.4.3
         version: 2.4.3(@types/react@18.2.31)(react@18.2.0)
@@ -111,6 +114,9 @@ importers:
       next:
         specifier: ^13.5.6
         version: 13.5.6(@babel/core@7.23.2)(react-dom@18.2.0)(react@18.2.0)
+      next-themes:
+        specifier: ^0.2.1
+        version: 0.2.1(next@13.5.6)(react-dom@18.2.0)(react@18.2.0)
       next-transpile-modules:
         specifier: ^10.0.1
         version: 10.0.1
@@ -126,12 +132,18 @@ importers:
       snarkjs:
         specifier: ^0.7.1
         version: 0.7.1
+      sonner:
+        specifier: ^1.4.0
+        version: 1.4.0(react-dom@18.2.0)(react@18.2.0)
       tailwind-merge:
         specifier: ^2.2.0
         version: 2.2.0
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.3.3)
+      vaul:
+        specifier: ^0.9.0
+        version: 0.9.0(@types/react-dom@18.2.14)(@types/react@18.2.31)(react-dom@18.2.0)(react@18.2.0)
       viem:
         specifier: ^1.16.6
         version: 1.16.6(typescript@5.2.2)(zod@3.22.4)
@@ -243,10 +255,10 @@ packages:
       '@babel/helpers': 7.23.2
       '@babel/parser': 7.23.0
       '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.2(supports-color@5.5.0)
+      '@babel/traverse': 7.23.2
       '@babel/types': 7.23.0
       convert-source-map: 2.0.0
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -453,7 +465,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.22.15
-      '@babel/traverse': 7.23.2(supports-color@5.5.0)
+      '@babel/traverse': 7.23.2
       '@babel/types': 7.23.0
     transitivePeerDependencies:
       - supports-color
@@ -1368,6 +1380,23 @@ packages:
       '@babel/parser': 7.23.0
       '@babel/types': 7.23.0
 
+  /@babel/traverse@7.23.2:
+    resolution: {integrity: sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.22.13
+      '@babel/generator': 7.23.0
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-hoist-variables': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/parser': 7.23.0
+      '@babel/types': 7.23.0
+      debug: 4.3.4(supports-color@8.1.1)
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
   /@babel/traverse@7.23.2(supports-color@5.5.0):
     resolution: {integrity: sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==}
     engines: {node: '>=6.9.0'}
@@ -1384,6 +1413,7 @@ packages:
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
+    dev: false
 
   /@babel/types@7.23.0:
     resolution: {integrity: sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==}
@@ -1916,7 +1946,7 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4(supports-color@8.1.1)
       espree: 9.6.1
       globals: 13.23.0
       ignore: 5.2.4
@@ -2311,7 +2341,7 @@ packages:
     engines: {node: '>=10.10.0'}
     dependencies:
       '@humanwhocodes/object-schema': 2.0.1
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4(supports-color@8.1.1)
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -2700,7 +2730,7 @@ packages:
     engines: {node: '>=14.0.0'}
     dependencies:
       '@types/debug': 4.1.10
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4(supports-color@8.1.1)
       semver: 7.5.4
       superstruct: 1.0.3
     transitivePeerDependencies:
@@ -4208,7 +4238,7 @@ packages:
       '@typescript-eslint/type-utils': 6.8.0(eslint@8.52.0)(typescript@5.2.2)
       '@typescript-eslint/utils': 6.8.0(eslint@8.52.0)(typescript@5.2.2)
       '@typescript-eslint/visitor-keys': 6.8.0
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4(supports-color@8.1.1)
       eslint: 8.52.0
       graphemer: 1.4.0
       ignore: 5.2.4
@@ -4234,7 +4264,7 @@ packages:
       '@typescript-eslint/types': 6.8.0
       '@typescript-eslint/typescript-estree': 6.8.0(typescript@5.2.2)
       '@typescript-eslint/visitor-keys': 6.8.0
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4(supports-color@8.1.1)
       eslint: 8.52.0
       typescript: 5.2.2
     transitivePeerDependencies:
@@ -4261,7 +4291,7 @@ packages:
     dependencies:
       '@typescript-eslint/typescript-estree': 6.8.0(typescript@5.2.2)
       '@typescript-eslint/utils': 6.8.0(eslint@8.52.0)(typescript@5.2.2)
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4(supports-color@8.1.1)
       eslint: 8.52.0
       ts-api-utils: 1.0.3(typescript@5.2.2)
       typescript: 5.2.2
@@ -4285,7 +4315,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 6.8.0
       '@typescript-eslint/visitor-keys': 6.8.0
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
       semver: 7.5.4
@@ -6618,17 +6648,6 @@ packages:
       ms: 2.0.0
     dev: true
 
-  /debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.3
-    dev: true
-
   /debug@3.2.7(supports-color@8.1.1):
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -6652,6 +6671,7 @@ packages:
     dependencies:
       ms: 2.1.2
       supports-color: 5.5.0
+    dev: false
 
   /debug@4.3.4(supports-color@8.1.1):
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@@ -6664,7 +6684,6 @@ packages:
     dependencies:
       ms: 2.1.2
       supports-color: 8.1.1
-    dev: true
 
   /decamelize@1.2.0:
     resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
@@ -7321,7 +7340,7 @@ packages:
   /eslint-import-resolver-node@0.3.9:
     resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
     dependencies:
-      debug: 3.2.7
+      debug: 3.2.7(supports-color@8.1.1)
       is-core-module: 2.13.1
       resolve: 1.22.8
     transitivePeerDependencies:
@@ -7335,7 +7354,7 @@ packages:
       eslint: '*'
       eslint-plugin-import: '*'
     dependencies:
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4(supports-color@8.1.1)
       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)
@@ -7373,7 +7392,7 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/parser': 6.8.0(eslint@8.52.0)(typescript@5.2.2)
-      debug: 3.2.7
+      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)
@@ -7396,7 +7415,7 @@ packages:
       array.prototype.findlastindex: 1.2.3
       array.prototype.flat: 1.3.2
       array.prototype.flatmap: 1.3.2
-      debug: 3.2.7
+      debug: 3.2.7(supports-color@8.1.1)
       doctrine: 2.1.0
       eslint: 8.52.0
       eslint-import-resolver-node: 0.3.9
@@ -7512,7 +7531,7 @@ packages:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.4(supports-color@5.5.0)
+      debug: 4.3.4(supports-color@8.1.1)
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -10512,6 +10531,18 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
 
+  /next-themes@0.2.1(next@13.5.6)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
+    peerDependencies:
+      next: '*'
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      next: 13.5.6(@babel/core@7.23.2)(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /next-transpile-modules@10.0.1:
     resolution: {integrity: sha512-4VX/LCMofxIYAVV58UmD+kr8jQflpLWvas/BQ4Co0qWLWzVh06FoZkECkrX5eEZT6oJFqie6+kfbTA3EZCVtdQ==}
     dependencies:
@@ -12298,6 +12329,16 @@ packages:
     dependencies:
       atomic-sleep: 1.0.0
 
+  /sonner@1.4.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-nvkTsIuOmi9e5Wz5If8ldasJjZNVfwiXYijBi2dbijvTQnQppvMcXTFNxL/NUFWlI2yJ1JX7TREDsg+gYm9WyA==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /sort-keys-length@1.0.1:
     resolution: {integrity: sha512-GRbEOUqCxemTAk/b32F2xa8wDTs+Z1QHOkbhJDQTvv/6G3ZkbJ+frYWsTcc7cBB3Fu4wy4XlLCuNtJuMn7Gsvw==}
     engines: {node: '>=0.10.0'}
@@ -12703,7 +12744,6 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       has-flag: 4.0.0
-    dev: true
 
   /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
@@ -13354,6 +13394,20 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /vaul@0.9.0(@types/react-dom@18.2.14)(@types/react@18.2.31)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-bZSySGbAHiTXmZychprnX/dE0EsSige88xtyyL3/MCRbrFotRPQZo7UdydGXZWw+CKbNOw5Ow8gwAo93/nB/Cg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.14)(@types/react@18.2.31)(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+    dev: false
+
   /verror@1.10.0:
     resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
     engines: {'0': node >=0.6.0}

From 41c691ad4c13262097c5504d0d141d3035de7202 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Wed, 21 Feb 2024 19:06:59 +0530
Subject: [PATCH 15/17] fix: trigger error modal

---
 .../webapp/src/components/modals/globalErrorModal.tsx     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/components/modals/globalErrorModal.tsx b/packages/webapp/src/components/modals/globalErrorModal.tsx
index e030fe9a..20f43bf9 100644
--- a/packages/webapp/src/components/modals/globalErrorModal.tsx
+++ b/packages/webapp/src/components/modals/globalErrorModal.tsx
@@ -6,6 +6,7 @@ import {
   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.
@@ -16,9 +17,14 @@ export const GlobalErrorModal = ({ config }: { config: ErrorConfig }) => {
   // UI. This is good practice as it lets the user figure out what happened. Really not a priority
   // at the moment, and the error should be systematically logged to the console instead, for
   // debugging purposes.
+  const [ open, setOpen ] = useState<boolean>(false)
+  useEffect(() => {
+    if(config !== null && !open) setOpen(true)
+    else setOpen(false)
+  }, [config, open])
 
   return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogTitle>{config.title}</DialogTitle>
       <DialogContent>
         {config.message !== "" && (

From b63a0ec5e8bfa335e6630ba73aa6405f17e21f67 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Wed, 21 Feb 2024 19:17:22 +0530
Subject: [PATCH 16/17] update `pnpm-lock`

---
 pnpm-lock.yaml | 20 --------------------
 1 file changed, 20 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1c34f85f..473ff019 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)
-      embla-carousel-react:
-        specifier: 8.0.0-rc22
-        version: 8.0.0-rc22(react@18.2.0)
       jotai:
         specifier: ^2.4.3
         version: 2.4.3(@types/react@18.2.31)(react@18.2.0)
@@ -141,9 +138,6 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.3.3)
-      vaul:
-        specifier: ^0.9.0
-        version: 0.9.0(@types/react-dom@18.2.14)(@types/react@18.2.31)(react-dom@18.2.0)(react@18.2.0)
       viem:
         specifier: ^1.16.6
         version: 1.16.6(typescript@5.2.2)(zod@3.22.4)
@@ -13394,20 +13388,6 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vaul@0.9.0(@types/react-dom@18.2.14)(@types/react@18.2.31)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-bZSySGbAHiTXmZychprnX/dE0EsSige88xtyyL3/MCRbrFotRPQZo7UdydGXZWw+CKbNOw5Ow8gwAo93/nB/Cg==}
-    peerDependencies:
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    dependencies:
-      '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.14)(@types/react@18.2.31)(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-    dev: false
-
   /verror@1.10.0:
     resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
     engines: {'0': node >=0.6.0}

From 2e4d0fe1a3f58f9e02c89e242662d436cb20fe14 Mon Sep 17 00:00:00 2001
From: Aritra Chatterjee <aritrac1998@hotmail.com>
Date: Thu, 22 Feb 2024 12:32:01 +0530
Subject: [PATCH 17/17] feat: kill toast upon draw + pop up card drawer

---
 packages/webapp/src/components/hand.tsx   |  4 +++-
 packages/webapp/src/hooks/useScrollBox.ts |  3 +++
 packages/webapp/src/pages/play.tsx        | 10 +++++++---
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/webapp/src/components/hand.tsx b/packages/webapp/src/components/hand.tsx
index 67ccaa9f..c3fddfd2 100644
--- a/packages/webapp/src/components/hand.tsx
+++ b/packages/webapp/src/components/hand.tsx
@@ -49,7 +49,9 @@ const Hand = ({
 
   return (
     <div
-      className={`${className} py-4 flex flex-row items-center justify-evenly bottom-0 w-[95%] space-x-2`}
+      className={`${className} ${
+        isLastCardGlowing ? "translate-y-0" : null
+      } py-4 flex flex-row items-center justify-evenly bottom-0 w-[95%] space-x-2`}
       ref={setNodeRef}
       onMouseEnter={() => {
         setIsFocused(true)
diff --git a/packages/webapp/src/hooks/useScrollBox.ts b/packages/webapp/src/hooks/useScrollBox.ts
index 9372be84..c1c45fc0 100644
--- a/packages/webapp/src/hooks/useScrollBox.ts
+++ b/packages/webapp/src/hooks/useScrollBox.ts
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback, RefObject } from "react"
 import throttle from "lodash/throttle"
+import { toast } from "sonner"
 
 const timing = (1 / 60) * 1000
 
@@ -106,6 +107,8 @@ function useScrollBox(scrollRef: RefObject<HTMLDivElement>, cards: readonly bigi
 
   const triggerLastCardGlow = useCallback(() => {
     setIsLastCardGlowing(true)
+    // dismiss the toast displaying draw status
+    toast.dismiss("DRAW_CARD_TOAST")
     setTimeout(() => {
       setIsLastCardGlowing(false)
     }, 2500)
diff --git a/packages/webapp/src/pages/play.tsx b/packages/webapp/src/pages/play.tsx
index 87f142a5..12d42cf9 100644
--- a/packages/webapp/src/pages/play.tsx
+++ b/packages/webapp/src/pages/play.tsx
@@ -121,6 +121,7 @@ const Play: FablePage = ({ isHydrated }) => {
     // Automatically submit the card draw transaction when it's our turn
     if (gameData && currentPlayer(gameData) === playerAddress && !cantDrawCard) {
       toast.promise(doDrawCard, {
+        id: "DRAW_CARD_TOAST",
         loading: "Your Turn - Drawing Card...",
         success: () => {
           if (showDrawButton) setShowDrawButton(false)
@@ -129,7 +130,8 @@ const Play: FablePage = ({ isHydrated }) => {
         error: () => {
           if(!showDrawButton) setShowDrawButton(true) 
           return null as any // don't trigger the toast
-        }
+        },
+        dismissible: true
       })
     }
   }, [cancellationHandler, cantDrawCard, gameID, playerAddress, doDrawCard, gameData, showDrawButton])
@@ -223,7 +225,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 mx-auto z-[100] translate-y-1/2 transition-all duration-500 rounded-xl ease-in-out hover:translate-y-0`}
           />
           <div className="grid-col-1 relative mx-6 mb-6 grid grow grid-rows-[6]">
             <PlayerBoard
@@ -239,11 +241,13 @@ const Play: FablePage = ({ isHydrated }) => {
                     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"
                     onClick={() => {
                       toast.promise(doDrawCard, {
+                        id: "DRAW_CARD_TOAST",
                         loading: "Drawing Card...",
                         success: () => {
                           if (showDrawButton) setShowDrawButton(false)
                           return "Card Drawn Successfully!"
-                        }
+                        },
+                        dismissible: true
                       })
                     }}
                   >