[FE-98] Transfers page is 100% hardcoded mock data with non-functional Approve/Reject buttons

[yusuftomilola]

Overview

frontend/app/(dashboard)/transfers/page.tsx renders a mockTransfers array literal defined inside the component — it never calls the real /transfers API, and the Approve/Reject <button> elements have no onClick handlers at all, so clicking them does nothing. It also doesn't use the app's shared Button/Table/StatusBadge components, instead using raw inline style={{...}} objects, unlike every other data page in the app.

Tasks

• Add lib/api/transfers.ts (see [FE-101]) and wire the page to React Query against the real backend endpoints.
• Wire Approve/Reject buttons to actually call approve/reject, with optimistic UI and error handling consistent with other mutations in the app.
• Replace the inline-styled markup with the shared components/ui/table.tsx, button.tsx, and components/assets/status-badge.tsx (or an equivalent transfer-status badge) for visual and behavioral consistency with the rest of the dashboard.

Acceptance Criteria

• The transfers page reflects real backend data, not a hardcoded array.
• Clicking Approve/Reject actually calls the backend and updates the UI.
• The page uses the app's shared UI components.

Dependencies

Pairs with [BE-117] (approve doesn't move the asset) and [BE-118] (dead transfer states) on the backend side.

Notes for Contributors

Comment below to be assigned.

[odiliflash-ops]

I would love to work on this issue

[Jumongweb]

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

Hi maintainer, i will like solve this issue

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

[DeEvelyn]

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

I will replace the hardcoded mockTransfers array with real API calls via React Query, wire the Approve and Reject buttons to actual backend endpoints with optimistic UI and error handling, and refactor the page to use shared Button, Table, and StatusBadge components for consistency. My plan is to follow the patterns already established in other data pages.

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

[drips-wave]

Congratulations, @DeEvelyn! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @DeEvelyn: 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 🌊

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox!

@DeEvelyn's PR #1374 was approved and merged by @yusuftomilola.

🏆 @DeEvelyn: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (837 total points). Track your full progress on GrantFox.

👏 Great work, @DeEvelyn! Keep contributing to DistinctCodes.

[drips-wave]

This issue has been completed by @DeEvelyn as part of the Stellar Wave Program's 8th Wave 🥳

😎 @DeEvelyn: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.