Display User Balance Using starknet-react After Wallet Connect

[Otaiki1]

📌 Description:

After the user has connected their wallet (via Invisible SDK or Cartridge Controller), display their token balance next to their wallet address in the UI using starknet-react.

This balance display must adhere to the existing style guide and be reactive to wallet connection status.

🧠 Context:

Now that wallet connection flows are being implemented, the user interface should give immediate feedback on the wallet’s status, including address and token balance. This improves transparency and UX across the app.

🧭 Proposed Actions:

1. Use starknet-react to detect connected wallet (useStarknetAccount)
2. Fetch the native token balance using useBalance or a custom hook
3. Display:
   • Formatted token balance (e.g., 10.25 ETH)
4. Place this display next to or under the address in the existing UI
5. Style the component based on the app’s current design system (font, color, spacing)
6. Ensure the layout works well across all screen sizes

✅ Acceptance Criteria:

• Wallet balance is fetched and displayed using starknet-react
• Display updates/reacts automatically when wallet is connected
• Adheres to visual and functional style guidelines
• UI is responsive and readable on both desktop and mobile
• No unnecessary re-renders or flickers in data fetching

🕒 Timeframe:

No strict deadline, but this task is essential for polishing the wallet UX and should follow after the connection flows are implemented.

[Onasachi]

Can I try solving this issue?

[Jethrolopwus]

Can I handle this task?

[Otaiki1]

hi @Onasachi , Whats the status update on this ?

[Onasachi]

Would drop a PR any minute now

[Joy-Adah]

Hey @Onasachi what's the update on this?

[Onasachi]

@Joy-Adah I am waiting for other PR's to be merged before i could start.