Fix mutations and cards UI for different tower heights

src/components/FloatingGmButton.tsx

@@ -3,10 +3,12 @@ import GmModal from 'components/Modals/GmModal'
 import { useState } from 'preact/hooks'
 
 export default function () {
-  const { ready, authenticated } = usePrivy()
+  const { ready, authenticated, user } = usePrivy()
   const [modalOpen, setModalOpen] = useState(false)
 
-  if (!ready || !authenticated) return null
+  const address = user?.wallet?.address.toLowerCase()
+
+  if (!ready || !authenticated || !address) return null
 
   return (
     <>
@@ -16,7 +18,11 @@ export default function () {
       >
         🔥
       </button>
-      <GmModal modalOpen={modalOpen} setModalOpen={setModalOpen} />
+      <GmModal
+        modalOpen={modalOpen}
+        setModalOpen={setModalOpen}
+        address={address}
+      />
     </>
   )
 }

src/components/Modals/AccountModal/index.tsx

@@ -17,9 +17,11 @@ export default function ({
   }, [setModalOpen])
 
   const onLogout = useCallback(async () => {
+    if (!address) return
+
     await logout()
-    await invalidateManyQueries(['morningStreak', 'hatsCounter', 'referrer'])
-  }, [logout])
+    await invalidateManyQueries(['morningStreak', 'towerGame'])
+  }, [address, logout])
 
   return (
     <DefaultModal

src/components/Modals/GmModal.tsx

@@ -110,7 +110,7 @@ function ModalBody({
   )
 }
 
-function ModalFooter(data: MorningStreakResponse) {
+function ModalFooter(data: MorningStreakResponse & { address: string }) {
   const [loading, setLoading] = useState(false)
   const onTimeout = new Date(data.morningStreakTimeout) > new Date()
 
@@ -121,14 +121,14 @@ function ModalFooter(data: MorningStreakResponse) {
     }
     try {
       setLoading(true)
-      await addToMorningStreak()
+      await addToMorningStreak(data.address)
     } catch (e) {
       console.error(e)
       toast.error('Ooof, please try GM again 😥')
     } finally {
       setLoading(false)
     }
-  }, [onTimeout])
+  }, [onTimeout, data.address])
 
   return (
     <BigButton
@@ -142,7 +142,11 @@ function ModalFooter(data: MorningStreakResponse) {
   )
 }
 
-export default function ({ modalOpen, setModalOpen }: ModalProps) {
+export default function ({
+  modalOpen,
+  setModalOpen,
+  address,
+}: ModalProps & { address: string }) {
   const { data, status } = useMorningStreak()
 
   const isPending = status === 'pending' || !data
@@ -151,7 +155,7 @@ export default function ({ modalOpen, setModalOpen }: ModalProps) {
     <DefaultModal
       header="GM Streak"
       bodyContent={isPending ? <ModalLoader /> : <ModalBody {...data} />}
-      footerContent={data ? <ModalFooter {...data} /> : null}
+      footerContent={data ? <ModalFooter {...data} address={address} /> : null}
       modalOpen={modalOpen}
       setModalOpen={setModalOpen}
     />

src/components/TowerGame/index.tsx

@@ -4,7 +4,6 @@ import TowerCard from 'components/TowerGame/TowerCard'
 import { guess } from 'helpers/api/towerGame'
 import roundNumber from 'helpers/numbers/roundNumber'
 import queryClient from 'helpers/queryClient'
-import getHiddenCardStatuses from 'helpers/tower/getHiddenCardStatuses'
 import { useCallback } from 'preact/hooks'
 import { toast } from 'react-toastify'
 import {
@@ -44,21 +43,28 @@ function CardRow({
   onClick: (index: number) => void
   disabled: boolean
   hatAmount: string | number
-  cardStatuses: TowerCardStatus[]
+  cardStatuses?: TowerCardStatus[] | undefined
   guess?: number
 }) {
   const elements = statusToElement(hatAmount)
 
-  const cards = [...Array(rowLength)].map((_, index) => (
-    <TowerCard
-      onClick={() => onClick(index)}
-      status={cardStatuses[index]}
-      disabled={disabled}
-      glow={guess === index}
-    >
-      {elements[cardStatuses[index]]}
-    </TowerCard>
-  ))
+  const cards = [...Array(rowLength)].map((_, index) => {
+    const safeStatus =
+      typeof cardStatuses?.[index] === 'number'
+        ? cardStatuses[index]
+        : TowerCardStatus.hidden
+
+    return (
+      <TowerCard
+        onClick={() => onClick(index)}
+        status={safeStatus}
+        disabled={disabled}
+        glow={guess === index}
+      >
+        {elements[safeStatus]}
+      </TowerCard>
+    )
+  })
   return <>{cards}</>
 }
 
@@ -81,9 +87,6 @@ export default function ({
 
   const guesses = game?.guesses || []
   const isFinished = game?.status === TowerGameStatus.finished
-  const cardStatuses = game?.cardStatuses?.length
-    ? game.cardStatuses
-    : getHiddenCardStatuses(towerType)
   const betAmount = game?.betAmount
   const step = guesses.length
 
@@ -119,7 +122,7 @@ export default function ({
           disabled={
             loading || !betAmount || index > step || index < step || isFinished
           }
-          cardStatuses={cardStatuses[index]}
+          cardStatuses={game?.cardStatuses?.[index]}
           guess={guesses[index]}
           hatAmount={
             betAmount && !isFinished

src/helpers/api/morningStreak.ts

@@ -2,13 +2,13 @@ import axios from 'axios'
 import checkAuthToken from 'helpers/api/checkAuthToken'
 import env from 'helpers/env'
 import roundNumber from 'helpers/numbers/roundNumber'
-import { invalidateManyQueries } from 'helpers/queryClient'
+import queryClient, { setHatsQueryData } from 'helpers/queryClient'
 import { toast } from 'react-toastify'
 import MorningStreakResponse from 'types/MorningStreak'
 
 const backendEndpoint = env.VITE_BACKEND_URL
 
-export async function addToMorningStreak() {
+export async function addToMorningStreak(address: string) {
   try {
     const { headers } = await checkAuthToken()
 
@@ -24,7 +24,8 @@ export async function addToMorningStreak() {
           roundNumber(data.balance) +
           ' 🎩 Comeback in 24h'
       )
-      await invalidateManyQueries(['hatsCounter', 'morningStreak'])
+      setHatsQueryData(address, data.balance)
+      await queryClient.invalidateQueries({ queryKey: ['morningStreak'] })
     }
 
     return data

src/helpers/api/towerGame.ts

@@ -83,8 +83,10 @@ export async function exitTower(_id: string) {
     toast.success(
       `You exited 🛼 your balance now is ${roundNumber(data.balance)}`
     )
+    return data.balance
   } catch (e) {
     handleError(e, 'Failed to exit the tower, please try again 😥')
+    throw e
   }
 }
 

src/helpers/queryClient.ts

@@ -2,12 +2,13 @@ import { QueryClient } from '@tanstack/react-query'
 
 const queryClient = new QueryClient()
 
-queryClient.resumePausedMutations
-
 export async function invalidateManyQueries(queries: string[]) {
   for (const queryKey of queries) {
     await queryClient.invalidateQueries({ queryKey: [queryKey] })
   }
 }
 
+export const setHatsQueryData = (address: string, num: number) =>
+  queryClient.setQueryData([`hatsCounter${address}`], num)
+
 export default queryClient

src/pages/TowerGame.tsx

@@ -11,7 +11,7 @@ import useTowerGame from 'helpers/hooks/tower//useTowerGame'
 import useAuthToken from 'helpers/hooks/useAuthToken'
 import useHatsCounter from 'helpers/hooks/useHatsCounter'
 import roundNumber from 'helpers/numbers/roundNumber'
-import queryClient from 'helpers/queryClient'
+import { setHatsQueryData } from 'helpers/queryClient'
 import { useCallback, useState } from 'preact/hooks'
 import { TowerGameStatus, TowerType, TypeToMultipliers } from 'types/TowerGame'
 
@@ -38,13 +38,11 @@ export default function () {
       return
     }
 
-    if (!isFinished && data?.betAmount) {
+    if (!isFinished && data?.betAmount && address) {
       try {
         setInteractionLoading(true)
-        await exitTower(data._id)
-        await queryClient.invalidateQueries({
-          queryKey: ['hatsCounter' + address],
-        })
+        const newBalance = await exitTower(data._id)
+        await setHatsQueryData(address, newBalance)
         await refetch()
       } finally {
         setInteractionLoading(false)