When users connected their wallet and tried to fetch their token balances or property ownership status, the UI would either not update in real-time or display incorrect data due to asynchronous issues in fetching smart contract state. This was especially problematic when users bought tokens—transactions succeeded on-chain, but the UI didn’t reflect the update immediately.

🔍 Root Cause:
We discovered that:

We were not properly listening to blockchain events (like Transfer or Mint) emitted by the smart contracts.

Our component state was not refreshing after the transaction was confirmed, because we only fetched data on initial load.

✅ The Solution:
We used ethers.js to subscribe to smart contract events (e.g., contract.on("Transfer", ...)) to detect changes in real-time.

We also implemented a polling mechanism as a fallback to refresh token balances and ownership data after transactions.

After updating our state management logic with useEffect and useState properly scoped to blockchain events, the UI began to reflect live on-chain updates accurately.

🎉 Outcome:
These fixes led to a smooth, real-time user experience, ensuring that ownership updates and balances reflected instantly after user actions.