Integrate real user wallet balance and wallet address from API into AccountOverview and deposit modal

[portableDD]

📋 Description

The AccountOverview component currently displays a hardcoded balance of ₦ 325,980.65 and a placeholder wallet address 0x1234567890123456789012345678901234567890. Neither value is fetched from the backend. The InstantDepositModal also uses a hardcoded sample wallet address 0x5A08FcdBEA516Cf086572157791dB12CA3beF1B32.

These need to be replaced with the authenticated user's real balance and wallet address from the API, with proper loading and error states.

🔍 Context

The app has an existing auth store (hooks/use-auth-store.ts) and API helper layer (lib/api/users.ts). The user profile is already fetched in ProfileOverview and PersonalInfo components using getProfile(). The balance and wallet address fields likely come from the same profile endpoint or a dedicated wallet endpoint — check the backend API for the correct fields.

The AccountOverview component currently takes no props related to data fetching — it will need to either fetch data internally or receive it via props/a shared hook.

📁 Key Files

• components/dashboard/account-overview.tsx — hardcoded balance and wallet address
• components/dashboard/InstantDepositModal.tsx — hardcoded sample wallet address
• lib/api/users.ts — add balance/wallet fetch here if not already present
• hooks/use-auth-store.ts — user data available here after login

✅ Acceptance Criteria

• AccountOverview displays the authenticated user's real balance fetched from the API
• AccountOverview displays the authenticated user's real wallet address
• InstantDepositModal uses the same real wallet address
• A skeleton/loading state is shown while the balance and address are loading
• An error state is shown if the API call fails, without crashing the page
• The balance updates if the page is refreshed after a transaction
• No TypeScript errors introduced
• Tested on both desktop and mobile viewports

🛠️ Suggested Execution

1. Setup

git checkout -b <your-branch-name>

2. Implement changes

• Check the backend API for the correct endpoint returning wallet balance and address (e.g. /users/profile, /users/wallet, or /wallets)
• Add a fetch function in lib/api/users.ts if one does not exist
• In AccountOverview, add a useEffect to fetch balance and wallet address on mount; manage loading/error state
• Replace the hardcoded values with the fetched data
• Pass the wallet address down to InstantDepositModal as a prop or fetch it there using the same method
• Add a skeleton loader for balance (a pulsing placeholder matching the text size)

3. Validate

• Log in and open the dashboard — your real balance should appear
• The wallet address shown should match your account
• Open the deposit modal — the same wallet address should appear and be copyable
• Temporarily break the API call (wrong URL) — a graceful error state should appear

4. Commit & PR

git commit -m "feat: fetch real balance and wallet address from API"

📌 Guidelines

• PR description must include: Closes #[issue_number]
• PR must include screenshots showing real data loaded in both components
• Follow existing code style — TypeScript strict, Tailwind for styling
• Do not introduce new dependencies without prior discussion

🏆 Reward

This issue is worth 200 points in the Drips Wave program.