Challenges I Ran Into While Building ArtGrid Studio

Bug: Event Listener Overlap Causing UI Stale Data

Challenge:
In the React frontend (

App.jsx

), the

watchContractEvent

hook (via Wagmi’s

usePublicClient

) was used to listen for contract events like

NFTMinted

and

EngagementUpdated

to update the UI in real-time. However, multiple event listeners were created on tab switches (e.g., from “Marketplace” to “My NFTs”), causing duplicate event triggers and stale NFT data in the

nftData

state. This led to inconsistent UI updates, such as outdated engagement stats or missing new NFTs.

Solution:

1. Diagnosis: Identified the issue by logging event triggers, revealing multiple listeners due to

   useEffect

   not cleaning up properly on tab changes.
2. Fix: Modified the

   useEffect

   hook in

   App.jsx

   to return a cleanup function that stops the listener using

   unwatch

   :

   useEffect(() => {
     const unwatch = publicClient.watchContractEvent({
       address: contractAddress,
       abi: ArtGridStudioABI,
       eventName: 'NFTMinted',
       onLogs: (logs) => handleNFTMinted(logs),
     });
     return () => unwatch();
   }, [publicClient]);
   

3. State Management: Used a

   Set

   to deduplicate

   tokenIdQueue

   entries, ensuring unique NFT updates.
4. Testing: Simulated rapid tab switches on LUKSO testnet to confirm single listener instances and consistent

   nftData

   updates.

Impact: Eliminated duplicate events, ensuring real-time UI accuracy for NFT minting and engagement.

---

Hurdle: Cloudflare Worker Rate Limiting for Metadata Uploads

Challenge:
The Cloudflare Worker (

VITE_SERVER_URL

) handling NFT image/metadata uploads to Google Drive (

uploadToDrive

) faced rate-limiting issues during bulk uploads in

CreateNFT.jsx

. Google Drive’s API imposed strict per-user quotas, causing 429 errors when users uploaded multiple tier images simultaneously, disrupting the minting process.

Solution:

1. Diagnosis: Analyzed Worker logs, confirming Google Drive’s 100 requests/second limit was hit during concurrent uploads.
2. Fix:
   • Integrated

     P-Queue

     in the frontend to queue and throttle upload requests:

     const uploadQueue = new PQueue({ concurrency: 2, interval: 1000, intervalCap: 5 });
     const uploadToDrive = async (file) => uploadQueue.add(() => fetch(workerUrl, { ... }));
     

   • Added retry logic (up to 5 attempts) for failed requests using exponential backoff.
   • Cached successful uploads in

     metadataCache

     to avoid redundant API calls on form resubmissions.
3. Optimization: Reduced metadata JSON size by stripping unnecessary fields, lowering API payload.
4. Testing: Conducted stress tests with 10 simultaneous uploads on testnet, verifying no 429 errors and successful minting.

Impact: Ensured reliable uploads, improved user experience during NFT creation, and maintained Google Drive quota compliance.