feat: batch payroll page using distributor contract - #20
Conversation
|
the multi-step flow is well done, CSV parsing and the preview step are nice touches. a few things though: you built
there's also a second distributor service at
the address regex is overall the page structure and UX flow are solid. just needs the dead code cleaned up and the confirm dialog actually wired in before submission. |
…tep shell Set up the /payroll route with TypeScript types for payroll state, recipient parsing utilities, CSS module matching existing design tokens, and a basic page component with step progress indicator.
Add ModeStep (uniform vs custom), RecipientsStep (manual/paste/upload), DetailsStep (token, rate, dates), ReviewStep (cost breakdown table), and ResultsStep (success/fail per recipient). Wire into the main page with back/next navigation, validation, and simulated submission.
…submission Add distributor.ts with distribute() and distribute_custom() placeholders for Soroban SDK integration. Wire the payroll page to call these on submit. Add Payroll link to the navigation bar.
Centralize payroll state, validation, and escrow calculation into a reusable hook. Keeps the page component focused on step navigation.
Show a modal with total escrow cost and recipient count before the user confirms. Prevents accidental submissions.
Extract escrow cost, duration, and recipient validation logic into src/lib/payroll.ts with unit tests covering edge cases.
Show a preview of parsed addresses with valid/invalid counts before the user confirms adding them. Prevents accidentally adding bad data.
…ation ErrorSummary shows validation issues inline. RecipientBadge displays the count in step labels. useKeyboardNav adds Escape-to-go-back and Enter-to-advance shortcuts.
Generic useState wrapper that syncs to localStorage, enabling payroll form data to survive page refreshes.
Announce step changes to assistive technology so users following the multi-step flow know which step they are on.
… remove duplicates - Wire usePayrollForm hook into page, replacing inline state/validation - Wire useKeyboardNav for Escape/Enter shortcuts - Show ConfirmDialog before batch submission - Remove duplicate src/services/distributor.ts, use src/lib/contracts/distributor.ts - Use calcEscrow and calcUniformPerRecipient from src/lib/payroll.ts in ReviewStep
|
Thanks for the review — all issues addressed:
|
|
LGTM, thanks for contribuing |
2 participants
Closes #15
What changed
/payrollpage with a 5-step flow: Mode → Recipients → Details → Review → Resultsdistribute()anddistribute_custom()placeholders ready for Soroban SDK integrationWhy
The distributor contract lets teams pay many contributors in one transaction. There was no UI for it — this is the primary use case for teams on the protocol.
How to test
npm run devand navigate to/payrollNotes
/createpage)