## FRONTEND: Settings Page — Implement Payment & Stellar Wallet Section

[OSEH-svg]

Description
The Settings page (app/settings/page.tsx) has three tabs: Profile, Notifications, Payment. The Payment tab renders: "Payment settings coming soon." The project's core value proposition is Stellar USDC payments, yet users have no way to view or manage their connected wallet in settings.

Tasks

• Replace the stub with a real Payment Settings section.
• Display: connected Stellar wallet address (masked), USDC balance fetched from the backend, and a disconnect/reconnect wallet button.
• Add a "Payout Preferences" subsection for organizers (milestone plan selection, withdrawal cap).
  Acceptance Criteria
• Payment tab displays real wallet data fetched from the API.
• Wallet address is masked (show first 4 and last 4 characters).
• Organizer-specific payout preferences are visible only when the user is an organizer.

[kuse-design]

@kuse-design has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

i can work on this issue because am a software engineer and am capable of completing this task

ℹ️ Repo Maintainers: To accept this application, review their application or assign @kuse-design to this issue.

[Fabluchy]

@Fabluchy has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi maintainer, I would like to work on this issue. I'll submit a clean and clear PR within 24 hours, please assign it to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Fabluchy to this issue.

[holyaustin]

@holyaustin has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I'm very interested in this issue because the Payment & Stellar Wallet section is the core differentiator of Agora-Events. Replacing a placeholder with a functional wallet dashboard directly impacts user trust and the platform's utility. I'd love to bring this critical feature to life.

Relevant Experience:

Stellar Ecosystem: I have hands-on experience integrating Stellar wallets using @stellar/freighter-api and stellar-sdk. I've built UIs for address masking, balance fetching, and managing wallet connection states (connect/disconnect).

React & Next.js (App Router): I'm proficient in building tabbed settings layouts, consuming REST/GraphQL APIs, and handling client-side state with React hooks (useState, useEffect, useCallback) and context for user roles.

Data Fetching & State Management: I've implemented robust data fetching with React Query (or SWR) to display live balances and manage cache invalidation when the wallet disconnects. I'm comfortable with conditional rendering based on user roles (e.g., user.isOrganizer).

TypeScript & UI Libraries: I write type-safe code and have experience with Tailwind CSS and shadcn/ui components (like Cards, Buttons, and Inputs) to build polished, consistent UIs.

I can deliver a clean, secure, and user-friendly Payment section that aligns perfectly with the project's goals.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @holyaustin to this issue.

[Danielodingz]

@Danielodingz has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hey maintainer, please can i work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Danielodingz to this issue.

[drips-wave]

Congratulations, @Danielodingz! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @Danielodingz: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊