Feat/26 withdrawal modal

[Hydrax117]

Pull Request: Withdrawal Modal with Paystack Integration

Issue: #26

Summary

Implements a complete withdrawal flow allowing users to withdraw their fiat balance to Nigerian bank accounts via Paystack.

Changes

Frontend

• Created frontend/app/wallet/WithdrawModal.tsx

  • Modal with amount, bank selection (searchable dropdown), and account number fields
  • Auto-resolves account name via Paystack API when bank and account number are entered
  • Requires user confirmation of account name before enabling withdrawal button
  • Shows pending state during submission
  • Displays inline success message and refreshes balance on success

• Created frontend/app/wallet/page.tsx

  • Wallet page displaying current balance and Stellar public key
  • "Withdraw Funds" button that opens the modal
  • Auto-refreshes balance after successful withdrawal
  • Auth guard to redirect unauthenticated users

• Created frontend/app/wallet/layout.tsx

  • Consistent layout matching other pages (profile, sell)

Backend

• Updated server/src/routes/wallet.ts
  • Added GET /api/wallet/banks endpoint to fetch Nigerian banks from Paystack
  • Added GET /api/wallet/resolve-account endpoint to resolve account number to account name via Paystack
  • Added POST /api/wallet/withdraw endpoint to process withdrawal requests with balance validation
  • Added Paystack helper functions for bank list and account resolution
  • Fixed TypeScript type assertions for Paystack API responses

Acceptance Criteria Met

• ✅ Withdraw button on /wallet opens WithdrawModal component
• ✅ Modal has fields for: amount, bank (searchable dropdown from Paystack bank list), and account number
• ✅ After user enters account number and selects bank, frontend calls GET /api/wallet/resolve-account and displays resolved account name for confirmation
• ✅ User must confirm account name before withdrawal button becomes active
• ✅ On submission frontend calls POST /api/wallet/withdraw and shows pending state until server responds
• ✅ User's balance is refreshed after successful withdrawal and inline success message is shown

Testing

To test this feature:

1. Ensure PAYSTACK_SECRET_KEY is configured in .env
2. Navigate to /wallet page
3. Click "Withdraw Funds" button
4. Enter amount, select bank from dropdown, enter 10-digit account number
5. Verify account name is resolved and displayed
6. Confirm account name and submit withdrawal
7. Verify success message appears and balance refreshes

Notes

• The withdrawal endpoint currently logs the request (actual Paystack transfer implementation is marked as TODO for production)
• TypeScript errors in frontend are expected (missing node_modules) and will resolve once dependencies are installed
• Backend TypeScript errors have been fixed with proper type assertions

Branch

feat/26-withdrawal-modal

Commit Message

feat: Add withdrawal modal with Paystack integration

- Create WithdrawModal component with amount, bank selection, and account number fields
- Implement account resolution via Paystack API
- Add bank list endpoint from Paystack
- Add withdrawal submission endpoint with balance validation
- Create wallet page with withdraw button
- Add wallet layout for consistent styling

Closes #26

[dark-sarge]

LGTM