Skip to content

feat(escrow): create settlement confirmation success screen with fund breakdown - #900

Merged
johdanike merged 3 commits into
SwiftChainn:mainfrom
BigManly4:feat/settlement-confirmation-screen
Sep 30, 2026
Merged

johdanike merged 3 commits into
SwiftChainn:mainfrom
BigManly4:feat/settlement-confirmation-screen

Conversation

@BigManly4

@BigManly4 BigManly4 commented Sep 29, 2026 •

Copy link
Copy Markdown
Contributor

Closes #781

Summary

Adds the settlement confirmation success screen. It shows how escrowed funds were distributed after a delivery completes.

This branch is stacked on #899 (the useSettlementBreakdown hook for #782), which it depends on. The first commit here is that PR's commit. Once that PR merges, this diff only contains the screen.

Changes

  • components/escrow/SettlementConfirmation.tsx:
    • Shows the amount released to the driver.
    • Shows the fund breakdown: total escrow, driver payout, platform commission with rate, each tax withholding with rate, pending or held amount with reason, and remaining balance.
    • Shows the transaction hash, linked to stellar.expert for the correct network (opens in a new tab with noopener noreferrer), plus the ledger and settled time.
    • Shows the delivery summary: tracking number, origin -> destination, and delivered time.
    • Covers these states: loading skeleton, finalizing (auto-updating role="status" notice), failed, and error with retry.
  • app/(dashboard)/escrow/[id]/settlement/page.tsx: route that renders the screen.
  • lib/settlementFormatters.ts: adds hash truncation and UTC date formatting.

Every amount on screen comes from the settlement API response, which mirrors the contract settlement event values. The component does no arithmetic of its own on payout values. The layout is mobile-first (single column, sm: breakpoints) and uses light mode styling.

Tests

  • components/escrow/__tests__/SettlementConfirmation.test.tsx (11 tests): mocks the service layer and exercises the real hook. Checks that the breakdown values match the fixture, the held row, the explorer link, the delivery summary, and the finalizing, pending, failed and error-with-retry states.
  • 39 settlement tests pass. The component has 100% statement and line coverage.

Screenshots

…istribution

- Add escrowSettlementService to fetch GET /api/escrow/{id}/settlement
- Add SettlementBreakdown types for driver payout, fees, tax withholdings and held funds
- Poll while the release transaction is pending/finalizing and stop on confirmed/failed
- Expose formatted asset amounts, tax breakdown and Stellar explorer link
- Skip retries for client errors and surface readable API error messages
… breakdown

- Add SettlementConfirmation component consuming useSettlementBreakdown
- Show amount released to driver, total escrow, platform commission, tax withholdings, held amounts and remaining balance
- Link the settlement transaction hash to stellar.expert for the matching network
- Show delivery summary (tracking number, route, delivered time)
- Handle loading, finalizing, failed and error-with-retry states
- Add /escrow/[id]/settlement route rendering the screen
@drips-wave

drips-wave Bot commented Sep 29, 2026

Copy link
Copy Markdown

@BigManly4 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

@johdanike
johdanike merged commit 21dd4d8 into SwiftChainn:main Sep 30, 2026
0 of 2 checks passed
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.

Frontend: Settlement Confirmation Screen with Fund Breakdown

2 participants