Skip to content

feat(payouts): add payout history dashboard with status tracking and …#134

Open
1sraeliteX wants to merge 2 commits into0xdevcollins:mainfrom
1sraeliteX:feat/74-single-payout-creation-form-dashboard
Open

feat(payouts): add payout history dashboard with status tracking and …#134
1sraeliteX wants to merge 2 commits into0xdevcollins:mainfrom
1sraeliteX:feat/74-single-payout-creation-form-dashboard

Conversation

@1sraeliteX
Copy link
Copy Markdown
Contributor

@1sraeliteX 1sraeliteX commented Apr 28, 2026

Closes #74


feat: Single Payout Creation Form with Dynamic Recipient Types (#74)
Summary
This PR implements a production-grade single payout creation form integrated into the dashboard. Users can now send money to individual recipients with support for multiple destination types, live fee estimation, and a confirmation flow.

Changes Made
New Components:

NewPayoutButton - Entry point button triggering the payout drawer
PayoutDrawer - Slide-in container using existing Sheet component
PayoutForm - Main form handling state, validation, and confirmation flow
DestinationTypeFields - Dynamic form fields for each destination type
FeeEstimatePanel - Live fee estimation display with loading/error states
ConfirmationModal - Final review step before submission
New Hooks:

useCreatePayout - API integration for POST /v1/payouts
useFeeEstimate - Live fee calculation with client-side fallback
useCurrencyConversion - Currency conversion with exchange rates
useRecipients - Saved recipient management and search
New Schemas:

payout.schema.ts - Zod validation with discriminated unions for all destination types
Tests:

Comprehensive test coverage for all components
Unit tests for form validation, dynamic fields, and confirmation flow
Features
✅ Dynamic recipient form with 4 destination types (Stellar, Bank Account, Mobile Money, Crypto Wallet)
✅ State preservation when switching destination types
✅ Live fee estimation with non-blocking updates
✅ Amount/currency system with live conversion display
✅ Recipient saving via existing API
✅ Confirmation step with full payout summary
✅ Zod validation for all fields
✅ Responsive design (mobile/tablet/desktop)
✅ Uses existing @useroutr/ui components - no new libraries introduced
API Integration
POST /v1/payouts with idempotency key support
GET /v1/fees/estimate with fallback calculations
GET /v1/currency/convert with exchange rates
GET/POST /v1/recipients for saved recipients
Screenshots
[To be added by reviewer]

@1sraeliteX
Copy link
Copy Markdown
Contributor Author

@maintainer Please review and merge this PR when ready. Happy to address any feedback!

@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented Apr 29, 2026

@1sraeliteX Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@0xdevcollins
Copy link
Copy Markdown
Owner

@1sraeliteX provide a screen record of your implementation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dashboard: Single Payout Creation Form

2 participants