[FEAT]: Add the Wallet / Account screen

[grantfox-oss]

📘 Description

Add app/wallet/page.tsx — the user's home base: their Stellar address, USDC balance, quick
actions, and recent activity.

✅ Acceptance Criteria

• New route app/wallet/page.tsx.
• New component(s) under frontend/components/wallet/ (e.g. WalletSummary.tsx).
• Display: Stellar address via WalletBadge + copy-to-clipboard; large USDC balance; a row of
  quick-action Buttons (Send / Receive / Deposit — logs for now).
• A recent activity section that reuses TransactionList
  (frontend/components/ui/transaction-list.tsx) with mock transactions.
• Mobile-first; light + dark correct; entrance via <Reveal>.

🌎 References

• frontend/components/ui/wallet-badge.tsx
• frontend/components/ui/transaction-list.tsx (see app/transactions/page.tsx for its mock shape)
• frontend/components/ui/Button/Button.tsx

📜 Additional Notes

• Reuse TransactionList read-only — don't modify it.
• Balance/address are mock strings.

---

Guidelines

• Use semantic brand tokens only — bg-card, text-foreground, text-muted-foreground,
  bg-primary, border-border, etc. No hardcoded hex. Reference:
  docs/guidelines/colors.md.
• Typography is Satoshi (already global) — no font setup needed.
• Light + dark: build both. Test with the theme toggle (bottom-right) — every screen must
  look right in both themes.
• Reuse existing components before building new ones: Button
  (frontend/components/ui/Button), WalletBadge, TransactionList, TabBar, SearchBar,
  Reveal (frontend/components/motion/reveal.tsx).
• Motion: wrap screen content / lists in <Reveal> for a subtle entrance; it already
  honors prefers-reduced-motion.
• Layout: mobile-first. Match existing screens — centered column, max-w-md, bg-background.
• Data: mock data only (no backend). Keep mock arrays in the page file or a local mock.ts.
• Copy: match the language of the surrounding screens (currently Spanish labels, e.g.
  "Comprar", "Transacciones"). Don't introduce a new convention.
• Accessibility: semantic elements, aria-labels, keyboard-focusable controls.
• Definition of done: npm run lint + npx tsc --noEmit clean; screen renders at its route
  in both themes; no changes to files outside the issue's declared scope.

[soloking1412]

I've built several Stellar and multi-chain wallet UIs, including wallet setup, balance display, and asset selector flows for a Stellar-based payments app, so working with WalletBadge-style address displays and reusable transaction lists is a good fit. For this issue I'd build app/wallet/page.tsx as a mobile-first screen with a WalletSummary component holding the address (via WalletBadge with copy-to-clipboard), a prominent USDC balance, and a row of Send/Receive/Deposit buttons that just log for now. Recent activity would reuse TransactionList read-only with the same mock shape as the transactions page, no changes to that component. I'd wrap the page content in Reveal for entrance animation and test both light and dark themes before calling it done. Happy to take this on.

[Primex-hub]

I will like to take this job

[EmmanuelAR]

Hey Team Here Emmanuel from Costa Rica im fullstack, i can work on this to get involved on the repo and stellar

[grantfox-oss]

🦊 GrantFox — @EmmanuelAR has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #322)
2. Your PR will be reviewed by the Kaizenode maintainers

Good luck! Track your progress on GrantFox.