From c2bf4c0d40e9d063e762d5324329db940a4dcb1d Mon Sep 17 00:00:00 2001
From: Rui Sousa <contact@ruisousa.me>
Date: Thu, 7 Nov 2024 11:45:37 +0000
Subject: [PATCH] fix constant network pinging

## Why
The `useEffect` hook was constantly pinging the network while looking
for changes in `playerGuesses` which lead excessive network requests.
## How
By changing the `useEffect` to watch only for address changes and
shifting the `playerGuess` update to `handleTryGuess`, which makes more
sense.
---
 frontend/src/App.jsx              | 24 +++++++++++++++---------
 frontend/src/hooks/WordleHooks.ts |  2 +-
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 9399c13..e8a5270 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -44,17 +44,22 @@ function App() {
     // Gets the current account's WDT balance, eligibility to play, player attempts, guesses and alphabet.
     // this is constantly pinging the network, so i'm unsure if this is the right way to go
     useEffect(() => {
+        
+        const getParams = async (address) => {
+            const balance = await getWDTBalance(address)
+            const alphabet = await getAlphabet(address)
+            const playerGuesses = await getPlayerGuesses(address)
+            if (alphabet.length > 0) {setIsPlaying(true)}
+            if (balance) setWdtBalance(balance)
+            if (alphabet) setAlphabet(alphabet)
+            if (playerGuesses) setPlayerGuesses(playerGuesses)
+        }
+
         if (currentAddress) {
-            getWDTBalance(currentAddress).then(setWdtBalance)
-
-            getAlphabet(currentAddress).then(res => {
-                if (res.length === 0) setIsPlaying(false)
-                else setIsPlaying(true)
-                setAlphabet(res)                                
-            })
-            getPlayerGuesses(currentAddress).then(setPlayerGuesses)
+            getParams(currentAddress)
         }
-    }, [currentAddress, playerGuesses])
+
+    }, [currentAddress])
 
     // handle the guess input
     const handleGuessChange = (e) => setGuess(e.target.value)
@@ -62,6 +67,7 @@ function App() {
     // handle new guess
     const handleNewGuess = (account, guess) => {
         tryGuess(account, guess)
+        setTimeout(() => getPlayerGuesses(account).then(setPlayerGuesses), 500)
     }  
 
     const handleInitAttempts = async (account) => {
diff --git a/frontend/src/hooks/WordleHooks.ts b/frontend/src/hooks/WordleHooks.ts
index a0a66af..77593fd 100644
--- a/frontend/src/hooks/WordleHooks.ts
+++ b/frontend/src/hooks/WordleHooks.ts
@@ -6,7 +6,7 @@ import ERC20ABI from '../abis/ERC20ABI.json'
 // Get number of remaining attempts a player still has
 export async function getAttempts(account) {
   const attempts = await wordle.read.getPlayerAttempts([account])
-  return attempts.toString()
+  return formatEther(attempts)
 }
 
 // Get the current state of the player's alphabet hitmap